Update Tooltip component scenarios - Storybook

[jps]

Description

Updates to the Tooltip component scenarios- Storybook

Tasks/Steps

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

• Default: removed variations - moved to own story
• Placements and placements visual test - use what currently stands (screenshots below)
• Variations: new story
• Overrides: change colours and styles

Acceptance/Testing Criteria

Given I am in Storybook

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

[JohnTParsons]

PR opened: https://github.com/newscorp-ghfb/NewsKit/pull/823

[nathanparris]

@JohnTParsons. Thanks updating. I have some feedback listed below:

General

• When I click on any element, it goes to the bottom of the page
• Can you use a 4 column grid to match the design layout (Triggers, variations, no pointer, controlled)
• Use default sizing for button and iconButton (except for placements and visual tests)

Placements + visual tests

• Can the left and right buttons have a fixed width

Variations

• Change content to "Show tooltip" for all (including links)

Controlled

• Match to design layout

Styling overrides

• Can the overrides be just applied to the button

[JohnTParsons]

@nathanparris Changes pushed

[nathanparris]

@JohnTParsons Changes look good. Thanks.