Update Select component scenarios - Storybook

[jps]

Description

Select component scenarios- Storybook

Tasks/Steps

Using the designs create the storybook pages for the Progress indicator component.

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)

Not currently in Storybook, new story

Acceptance/Testing Criteria

Given I am in Storybook

When I view the Progress indicator component pages

Then the pages will be as per the designs

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

Business Benefit/Value

Consistent Progress indicator component examples for consumers, aligning to the NK branding.

[JohnTParsons]

@GeriReid @nathanparris Please design review https://github.com/newscorp-ghfb/NewsKit/pull/807

I've added a new cross on circle icon (as per Figma) but could not get it to display as white on black, but perhaps might do?

In Overrides, I've added more stories than asked for, as was experimenting with different combinations of padding and margin props to see what the effect was.

[GeriReid]

Looks good, thanks @JohnTParsons.

A couple of small edits please:

Variations Happy with the icon. Can you please remove the stylePreset: 'inkPositive' so it's the default colour?

Controlled Change button text to: 'Make Option 8 the selected value'

Styling overrides We've lost the hover state on the dark/light overrides. Is this the fault of the theme? If it is we can take a look.

Thanks for the additional overrides, these look useful.

Let us know if you spot anything else @nathanparris

[JohnTParsons]

@GeriReid Above 3 changes pushed

[nathanparris]

@JohnTParsons Looking good. Just a few small points from me

z-index test

• Can you add style presets to the div editorialParagraph010, inkBase Background: interfaceNeutral020

Styling overrides

• selectPanelCustom2 Can you add backgroundColor: '{{colors.interface010}}', boxShadow: '{{shadows.shadow050}}',
• selectOptionCustom2 Add hover: { backgroundColor: '{{colors.interactiveInput010}}',

Overrides

• Custom icon is too subtle a change making bigger, can you try IconFilledArrowDropDown

[JohnTParsons]

@nathanparris Those changes pushed

[nathanparris]

@JohnTParsons Sorry, the selectOptionCustom2 is failing contrast on dark theme. Can you update this to hover: { backgroundColor: '{{colors.interactiveInput030}}',

This colour is the same for light theme, but is a darker shade on the dark theme.

[JohnTParsons]

@nathanparris Change pushed

[nathanparris]

@JohnTParsons Thanks. Looks good to me.

[GeriReid]

Thanks @JohnTParsons, looks great - such an improvement on what's current. Good to move to peer review.

[JohnTParsons]

PR link: https://github.com/newscorp-ghfb/NewsKit/pull/807