Update Link component scenarios - Storybook

[jps]

Description

Updates to the Link component scenarios- Storybook

Tasks/Steps

• Using the designs update the storybook pages for the Link 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)

• Change Link to Default: remove all variations
• Add inline, standalone, external stories: examples moved from default link story
• Add variations (examples from existing default story)
• Change link-within-text-paragraph to Inline in paragraph
• Change link-standalone-transition to Transitions

Acceptance/Testing Criteria

Given I am in Storybook When I view the Link component pages Then the pages will be updated as per the designs

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

Review with design when ready.

Business Benefit/Value

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

Supporting Information

Designs: NewsKit - Storybook Project - Feedback and Status

[mstuartf]

@GeriReid @nathanparris this is deploying and ready for review.

A few issues:

1. The outline star icon is coming through as filled. I think this is an issue with emotion, rather than something on our side. Is it ok as it is?
2. I'm not sure that there's much value to the last scenario. The cases either repeat previous scenarios or aren't really demonstrating the link functionality (e.g. custom width).

Thanks

[GeriReid]

Hey @mstuartf

1. Filled icon is fine
2. Agree - omit the last story

Do you have a PR link we can review? thanks

[mstuartf]

Sorry, I thought the issue would link to the PR.

Here you go: https://github.com/newscorp-ghfb/NewsKit/pull/797

[GeriReid]

thanks @mstuartf, looks good. There's a contrast fail on the dark theme:

• inInline link in paragraph: overides

Sorry, this is down to us not speccing it. Is it possible to use the same style preset as the overrides story?

[mstuartf]

Yeah I thought that might be an issue. At the moment the custom theme is only available in stories with the name Styling overrides. There's a ticket to make that more flexible in the backlog.

Do we need the styling overrides cases in the paragraph story if we have a separate Styling overrides story already?

[GeriReid]

@mstuartf that's a good point - we demonstrate the overrides in the Styling overrides story. Suggest we omit them from theInline link in paragraph story, will save some hassle!

[mstuartf]

Thanks, @GeriReid. I've remove those sections - will move to peer review.