Component library

This component library contains a set of Vue components used throughout Serato web environments.

Install the component library in your project

npm install --save @serato/component-library

Then in your main.ts/js file include

import '@serato/component-library'

And import the CSS into SCSS with:

@import '@serato/component-library/dist/component-library';

Changelog

v0.9.4

WEB-4651

WEB-4651

• Stylelint fixed based on warnings and suggestions
• Hide Logos page
• Force relative units for fonts
• Update components to follow guidelines and standards

v0.9.3

WEB-5578

WEB-5578 General tidy up of Checkbox atom docs

• Titles update
• Copy updates

WEB-5288

WEB-5288 This component is not displaying the proper value on the serato now playing twitch extension.

• Fix slider component to have the initial position display correctly

v0.9.2

WEB-6509

WEB-6509 Global change to Form labels in Storybook

• Form labels have 20px padding top on screens >768px
• Form labels have 15px padding top on screens <768px

v0.9.1

WEB-5089

WEB-5089

Fixing bugs and adding support for Optgroups

• Optgroup support added via a nested options object
• Fixed dropdown arrow positioning on width changes
• Story examples added to Select Input page and Form Validation
• Updated docs copy and renaming of docs page

WEB-5755

WEB-5755

Update to Accordion card

• Remove transition options
• Set transition to 250ms ease-in-out
• Tidy up docs

v0.9.0

WEB-3708

WEB-3708 Importing and using VeeValidate for form validation

• Imported VeeValidate.
• Refactored FormElements to allow for v-model usage.
• Three examples of forms covering all form elements.
• Documentation of ValidationProvider and ValidationObserver usage.

WEB-5760

WEB-5760 Updated the AccordionCardList

• Moved AccordionCard and AccordionCardList down one level in Atomic order
• Updated AccordionCard opening and closing animation to use requestAnimationFrame
• Updated a story to change title and have a Studio GUI image, since that's more realistic than a brand icon.

v0.8.0

WEB-5802

WEB-5802 Updates and tidyups for the Alerts molecule

• Reduce margin between text and button to 15px
• Remove TODO from docs page
• Change left padding on alert card to be 30px at all breakpoints
• Refactor internals of alert component to use flex

WEB-5754

WEB-5754 Updating the docs and stories of the Tooltip atom

• Update knob titles
• Change "tooltip position" knob from text to dropdown
• Add "tooltip behaviour" story to docs page
• Move "anatomy of tooltips" section below developer notes subheading

WEB-5826

WEB-5826 Updates to Slider component to improve disabled state along with docs updates

• Updated disabled state to only use opacity (value changed to 0.5) and removed greyscale.
• Swapped position of Standard and Dark theme sliders
• Updated description copy
• Added some extra dev documentation

WEB-6073

WEB-6073 Updating a few different font sizes in the Expansions Window product cards molecule

• Update font size of button CTA
• Update font size of price
• Update font size of "normal" price on discounted products

v0.7.0

WEB-5566

WEB-5566 Updated the Button documentation and stories and a refactor on the Button component itself

• Refactored Button to be a dynamic component
• Updated ToggleButton to follow the above changes
• Changed Button Sizes format to give more space to each size variant
• Reordered stories, Button with Icon examples moved down in the story order
• Removed all Toggle related content from BaseButton

v0.6.1

WEB-5108

WEB-5108

Updating the ribbon atom to better match the designs.

• Working on top of existing work done on feature-ribbon branch
• Remove breakpoints that do not match design
• Update icon size on ribbons with icon to match text size
• Create "ribbon with icon" story and example with knobs to select icon
• Update padding and margins to match design
• Update icon colour to match text colour in yellow colour scheme

WEB-5577

WEB-5577

Updating the Chip Tag atom to match designs

• Update name from ChipTag to Chip Tag
• Update stories to be cleaner and more accurate
• Fix Compact Chip Tag: change text size, add info icon, add dark theme story
• Update Chip Tag story knobs for "direction" to use a dropdown instead of text entry

v0.6.0

WEB-5381

WEB-5381 Small tidy up of unneeded elements and updating Developer notes.

• Updated description copy
• Removed Colour sections
• Developer Notes now go over how to use our preferred fonts explaining what to do and what not to do

WEB-5575

WEB-5575 Splitting out Toggle button into its own component.

• Creating ToggleButton story.
• Updating Button story to remove the toggle button section

WEB-5759

WEB-5759 Fixing icon positioning on Pricing Tag component.

• Fixed cosmetic issues in terms of positioning of icon with the label.
• Fixed typos in component name and description.

v0.5.3

More updates to docs and stories along with some small bugfixes

WEB-5748

• Small tweaks on Text Input atom, docs and stories

WEB-5579

Updates to Radio button atom in Storybook

• Page heading is updated from ‘Base radio button’ to ‘Standard Radio Button’
• Names of example/stories in sidebar are updated to: Standard Radio Button, Inline Radio Button, Stacked Radio Button

WEB-5580

Updates to Input Password atom in Storybook

• H2 is updated from ‘Base input password’ to ‘Standard Input Password’
• Example/story name in sidebar are updated to be consistent with H2

WEB-5752 Expansions Window card updates

• Update description copy to read ‘2.5.0’
• Update all Info icons in front of offer name on Sale card to a gift icon
• Update all product descriptions and chip tags with final copy

Also updated package.lock because egoist 1.2.0 breaks storybook, set node to 12.18.3 (but not enforced)

v0.5.2

Small bugfix release on button with an href. WEB-5823

• Fixed the size of BaseButton with a href (changes to an <a>)
• This also fixes this type of button from having a :link or :visited style applied.

v0.5.1

A new icons and a wideranging docs tidy up. WEB-5380 This story covers some global changes required to make the docs follow the standards we've set

• All Story examples in docs are now aligned left, in the same line as text.
• Removed unneeded guidelines pages
• Impacts every single documentation page
• Does not impact any component themselves

WEB-6001

• Add arrow right / left / long right icons

v0.5.0

Tidy ups to the Text Area, Toggle Input and standard link components with some fixes to the Toggle Input. WEB-5980 Tidying up some small pieces of the Input Text Area Atom

• Add 1em of padding inside the text area
• Give the text a 1.6em line height

WEB-5785

• Updated page title and H2 into Toggle Input
• Aligned examples left
• Added logic to trigger toggle when clicking on the label
• Added togglePosition property to display toggle either to the left/right of the label
• Added stories to display toggle position
• Changed wouse cursor to select (Mickey Mouse hand) when hovered on label

WEB-5829

• Updated heading and base link to standard link
• Added stories to give examples on icon and iconPosition property
• Added color for icons
• Aligned examples to the left of docs page
• Add link without underline
• change font size into 0.85em

v0.4.3

More tidy up to help us on our journey to v1.0

WEB-5828

This is a general update to clean up the Input Text Area atom.

• Widen border on the atom
• Misc copy updates

WEB-5803

Update to the Card molecule and atom

• Remove all documentation/stories after "multiple base cards" in the card molecule
• Update headings/name of Base Card to Standard Card
• General copy changes/fixes

WEB-5828

• Removing padding top and bottom
• Using line height to create margins
• Size update to match design

v0.4.2

Updating documentation for Label into storybook. Fixing style such as moving margin on title instead of text. WEB-5828

• Show label with text into the documentation
• Move spacing into title instead of text to behave as expected on small screen

v0.4.1

Base card docs updates

WEB-5565 Updates to Base Card atom in Storybook

• Second paragraph in description ‘Can be displayed with…’ is bought up to sentence above - so there’s only one paragraph
• Remove 'Single MySerato Expansion Card’ content (title, description and atom)
• Remove ‘Multiple Cards’ content (title, description and atom)

v0.4.0

[WEB-4546] Fix Typography inconsistency

• Make sure the typography guideline page display the correct informations.
• Make sure that per components: -- font-size and line-height are respected. -- Use “em“ for font-size and line height.

[WEB-4501] Add Expand/full width support on Button and Form elements

• Create Full Width support for components in the pattern library to remove issue on fix width parent component. This is for all form comopnents.

v0.3.1

Tidying up some documentation pages

WEB-5382 Tidy up of the Icons docs page

• horizontal scrollbar on icons table removed
• info icon updated to regular version instead of solid
• text in rows in icon table left aligned to better align with header
• description heading made H3

WEB-5379 Tidy up to the colours docs page

• Copy updates to colours sections
• Added "light" version of all colours
• Updated naming convention of colours to match variable names (e.g. $dj-pro-blue-dark = "DJ Pro blue dark")
• Updated hex codes to all be uppercase
  • Two colour hex codes had issues (WHITE and GREY_30) where they were always converted to lowercase when passed into the ColorItem. This has been worked around by passing in their hex codes directly so that they match the format of the other colours.

v0.3.0

Updating BaseButton to hands icons, also some clean up to docs and a nice bugfix.

WEB-5367

• Add caret up/down icon to More filters button
• Add icon and iconPosition state to BaseButton
• Update docs and add two new stories to show buttons with icons in different positions
• Update descriptions of button properties more readable
• Add transition to inverted-light-blue button on the font color change on hover

Component modified

• BaseButton

Bugfixes:

• Fix height of small, medium, large and extra small buttons so that padding is in proportion to font-size

v0.2.3

A new behaviour option for buttons and stories to show the DJ Producer bundle.

[WEB-5178] Toggle button updates for filtering logic

• Add isToggledOn State for base-button to toggle buttons
• Rename a-btn--is-clicked into a-btn--is-toggled-on
• Remove a-btn--disabled-grey because Marketing changed the design and we don't need it anymore.
• Format a-btn--is-toggled-on style to disable hover in mobile and solve IE11 compatibility issue
• Change logic of toggling buttons. Toggle button when both isToggleable and isToggledOn true.

[WEB-5272] Showing Producer DJ bundle sub states

• Create card for DJ Producer in expansionCard doc.stories file
• Create new linear background for the new product car
• Update the Logo component with the new logo DJPRODUCER

v0.2.2

A small bugfix in this release.

• [WEB-5259] Fixing the Expansions Card label font color. It was always orange, when it should always be white. Now they will always be white.

v0.2.1

A new Button behaviour and a whole lot of tidy up.

• [WEB-5188] Creating a Toggleable button with a new colorway.

  • add 2 new colors inverted-light-blue and disabled-grey.
  • isToggleable option added to BaseButton as a non-default prop.
  • New story for isTogglable being used, new section in BaseButton docs too.

• Tidy up of Pattern Library ESList issues

  • Fixing linter issues.
  • Adding new linter rules.
  • Adding eslint files.
  • Updating script exportForSeratoWebsites to work with new linter rules.

v0.2.0

Some big changes to the way we handle tooltips here.

Behaviour changes:

• Hovering on the tooltip bubble or arrow will no longer keep it open
• Positioning is now deferred to Popper.js, with allowFlip and preventOverflow props controlling overflow prevention behaviour. These props are enabled by default.
• There is no align option, as preventOverflow replaces the requirement for cross-axis positioning of the tooltip bubble when there isn't enough space Styling changes:
• The tooltip arrow has been reimplemented in line with Popper's tutorial. Popper requires a separate DOM element for the arrow. It has now been implemented as a separate div. The triangle's construction is different too, it is now a diamond that is positioned beneath the bubble to look like a triangle.
• Z-index of the tooltip bubble has been bumped up to int max so that it stays over most elements Interface changes:
• Added allowFlip and preventOverflow props to Tooltip to control overflow behaviour
• Removed align prop from Tooltip
• Removed isInList and positionForIcon in Tooltip which are no longer required as Popper can handle these cases
• Removed isInList from ChipTag which existed solely to pass into its child Tooltip Story changes:
• Added space around stories where tooltips were already overflowing
• Added a behaviour story for the tooltips to demonstrate overflow prevention behaviour
• Removed alignment story from tooltip Dependency changes:
• Added Popper.JS as a dependency

NOTE: npm install will need to be run before being able to use this version of the Pattern Library

v0.1.12

• [WEB-4812] Updates to Pricing cards
  • Tweaking copy line height, font-size
  • Tweaking ribbon line height
• [WEB-4639] Bugfix, button atom fixes
  • Fixing issues with transparent hover states making fonts illegible
  • Fixing losing state behaviour
• [WEB-4730] Bugfix label text too big
  • Making label secondary text a bit smaller
• [WEB-4483] Bugfix link atom fix
  • Change textlink to use display: inline-block to fix underline jiterriness