Fix hovered `Link` Storybook stories and their VRT coverage
- Dominant language
- JavaScript
- Stars
- 1.4k
- Forks
- 383
- Avg merge
- 4d 14h
- Merged PRs (30d)
- 77
Description
## Feature Description
The `Link` component has seven Storybook stories that are named as showing a hovered link, but none of them render a hover state. Each applies a `googlesitekit-cta-link--hover` class which is not defined in any stylesheet, so every one of them looks identical to its non-hovered twin.
The All Links VRT story has a related problem. It asks the screenshot runner to move the mouse over that same class, but the runner only ever hovers the first matching element, so at most one of the seven links is hovered in the reference image.
We should update these stories so each hovered variant shows the real hover state, and so all of them appear hovered together in the VRT story.
---------------
_Do not alter or remove anything below. The following sections will be managed by moderators only._
## Acceptance criteria
* Every Link story named as hovered shows the link in its hovered state, matching how the link looks on hover in the browser.
* The hovered states are covered for the default link, secondary link, link button, link button with icon prefix, link button with icon suffix, secondary link button, and secondary link button with icon.
* The All Links VRT story shows all seven hovered variants in their hovered state in a single screenshot.
* The hovered link button story is labelled consistently with the other hovered stories.
* Link stories that are not hover variants render unchanged.
## Implementation Brief
* [ ] In `assets/js/components/Link.stories.js`:
* Remove the `googlesitekit-cta-link--hover` class from the args of `DefaultLinkHovered`, `SecondaryLinkHovered`, `LinkButtonHovered`, `LinkButtonWithIconPrefixHovered`, `LinkButtonWithIconSuffixHovered`, `SecondaryLinkButtonHovered` and `SecondaryLinkButtonWithIconPrefixHovered`. It is not defined in any stylesheet, so it renders a plain link.
* Give each of those stories an `args.className` of `googlesitekit-vrt-link-hover` and a `parameters.pseudo` of `{ hover: true }`, using `storybook-addon-pseudo-states`. The `googlesitekit-vrt-` prefix matches the VRT-only hooks in `storybook/preview-head-vrt.html`.
* Change `LinkButtonHovered`'s `children` to `VRT: Default Link Button Hovered`, matching the other hovered stories.
* Set `VRTStory.parameters` to `{ pseudo: { hover: [ '.googlesitekit-vrt-link-hover' ] } }`.
* Reduce `VRTStory.scenario` to an empty object, dropping `hoverSelector`, `postInteractionWait` and `onReadyScript`. Puppeteer's `page.hover` only hovers the first match, so it can never hover more than one of the seven.
### Test Coverage
* Storybook stories in `assets/js/components/Link.stories.js`:
* Each of the seven hovered variants rendering the hover state rather than its resting state, verifiable by the underline that `.googlesitekit-plugin a:hover` and `.googlesitekit-plugin button:hover` apply in `assets/sass/base/_defaults.scss`.
* `All Links VRT` showing all seven hovered variants in their hovered state alongside the resting variants.
* The existing reference image for the `Components/Link/All Links VRT` scenario changes and needs re-approving.
## QA Brief
*
## Changelog entry
*
Contributor guide
Research direction
Start in assets/js/components/Link.stories.js and compare the seven hovered stories with the hover behavior described in assets/sass/base/_defaults.scss. Run the Link Storybook/VRT coverage and verify each hovered variant shows the underline while non-hovered stories remain unchanged. Confirm that All Links VRT shows all seven hovered variants together and re-approve its changed reference image.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, storybook
- Domain
- frontend, testing
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 85/100