Update text cropping component scenarios - Storybook

[jps]

Description

Updates to the text cropping component scenarios- Storybook

Tasks/Steps

Using the designs update the storybook pages for the text cropping 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.

Remove the limitSizeDecorator globally that we have in storybook, this was added due to a limitation in appliTools which we no longer have, we would possibly expect additional changed in the snapshots as a result of this.

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

Can we use long page option in this case?

Acceptance/Testing Criteria

Given I am in Storybook

When I view the text cropping 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 text cropping component examples for consumers, aligning to the NK branding.

[mutebg]

@GeriReid @nathanparris Link

[GeriReid]

Hi @mutebg, would it be possible to change the colour of the type and background? Realised the colours we've specced don't work in the dark theme.

Font colour: inkBase Background container: interactivePrimary010

Also, is it possible to move the order in the left nav so it sits alphabetically (under Text block):

Cheers Stoyan

[mutebg]

@GeriReid updated the colors, also added alphabetic sort order to all stories, you will notice that all stories are sorted correctly, I am not sure what was the previous way of sorting.

[GeriReid]

Thanks for the colour change @mutebg, this one's good to move.