Update Switch component scenarios - Storybook

[jps]

Description

Updates to the Switch component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Switch.

• The designs include what should be on each page, and the title, description, and link to the documentation page on the site for the component.

• Note the name of the pages also should be updated to match what we have in the designs.

Notes (main differences to what we have currently live versus the designs)

• ‘Size’ page showing the default switch are missing the track icons.
• ‘Thumb and track icon options’ page we need to update the thumb icons so they swap between checked and unchecked.
• Updated the ‘Label alignment’ page to match the same as Checkbox and Radio Button components.
• Updated the label copy on the ‘Label alignment’ page.
• Moved the narrow track example to the ‘Overrides’ page.
• Added icon override examples to the ‘Overrides’ page.
• Reduced the outline override example to one on the ‘Overrides’ page.
• Updated the label copy on the ‘Overrides’ page.
• Omitted the size / space overrides for the Switch.
• Logical props moved to the ‘Overrides’ page.

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Switch component pages

Then the pages will be updated as per the designs

And the pages will be within 1024x768 for Applitools snapshots.

Business Benefit/Value

Consistent Switch examples for consumers, aligning to the NK branding.

Supporting Information

Designs: NewsKit - Storybook Project - Feedback and Status

Dependencies

N/A

Review with design when ready.

[mstuartf]

@nathanparris @GeriReid

A few differences with the designs / questions:

1. By default, the switch has no icons. So I've only included icons in the icons stories and I've skipped Icon component overridden in the overrides scenario.
2. Start and end label alignment are the other way around.
3. What styling should I apply for the feedback and track in base state for the Styling overrides scenario?

http://ncu-newskit-docs-pr.s3-website-eu-west-1.amazonaws.com/739-switch-scenarios/storybook/?path=/docs/components-switch--story-switch-default

[nathanparris]

@mstuartf The labels for Base, Small, Medium… etc are very small. They be like they appear on the Button component https://storybook.newskit.co.uk/?path=/story/components-button--story-button-primary

[GeriReid]

Hey @mstuartf, thanks for the update

1. Makes sense removing the icons if not default
2. Good catch on the start/end
3. Styling overrides: track colour works in both light and dark. For the feedback on hover, can you try 20% storybook-overides inkBrand (it's light: amber070 dark: amber020). Should work on dark and light.

[mstuartf]

Thanks. Updates pushed.

[GeriReid]

Thanks for the changes @mstuartf, you can move this one to review.