design(Link): final design review for Link component

[meissadia]

Closes #215

This PR is to get the Design team's (@natalia-fitzgerald) final approval.

@billhimmelsbach @shindigira Please ignore

Changes

• Moves Link component to Verified status

Verification checklist

Verify the CFPB Design System (React) component against the CFPB Design System

• Has component intro text copied from the DS page
• Has source link to component's DS page (ex - Source: https://cfpb.github.io/design-system/components/banner-notification)
• Each DS variant is implemented as a separate story
  • Story name should be sentence case (ex. List Link => List link)
  • Naming is consistent with the DS
  • Same component names, same placeholder text, etc.
• Order of stories matches between DS/DSR
• Component is built correctly
  • Visually compare DSR implementation to DS
  • Verify that DS classes (organisms, molecules, atoms) are used, as opposed to styles defined in DSR
• Manual visual review has been conducted and component has passed this review

Run accessibility checks

• Component is keyboard-friendly (navigable with tab, space, enter, arrow keys, etc.)
• Component does not introduce new errors or warnings in WAVE
• Component is screen reader friendly (screen reader testing demo)
  • Is all the meaningful visual information and text of the component conveyed by the screen reader? (text, non-decorative image descriptions, etc.)
  • When interacting with the component using a screen reader, do you have all the information you need to use it? (selected vs unselected, button vs link, expanded vs collapsed, etc.)
  • Does the component have similar screen reader behavior as the sample components in WCAG, the CFPB design system, WebAIM, or similar accessibility examples?
• For reference: CFPB manual web accessibility audit

Verify component unit tests

• Verify component unit tests are implemented and passing - 85% or greater (ex: yarn vitest Button)

Conduct Code PR review

• Submit PR with any necessary changes for code review by frontend devs and copy completed checklist above into PR description

Conduct Design PR review

• Prepare component to be reviewed and approved by UI/UX
  • Create a PR with the name: design(XXXX): final design review for XXXX component
  • Change only component's status from Draft to Verified in Storybook
  • Apply GitHub label "design"
  • Add @natalia-fitzgerald as additional reviewer
  • Ping @natalia-fitzgerald on Mattermost when ready

Verify component

• Merge when design review completed to finish component verification 🎉

[netlify]

✅ Deploy Preview for cfpb-design-system-react ready!

Name	Link
🔨 Latest commit	057498a
🔍 Latest deploy log	https://app.netlify.com/sites/cfpb-design-system-react/deploys/654ac65a74886f00085f1ed4
😎 Deploy Preview	https://deploy-preview-228--cfpb-design-system-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[natalia-fitzgerald]

@meissadia
The component is looking good! I made some text updates to the CFPB Design System: Links page that I'd like to incorporate into the DSR page before we move to verified.

New intro text:
Links are navigational elements that connect users to other locations, either on the current page or to a different page or site. In contrast, buttons are used to signal important actions.

Stories

• Inline links
• List link Call-to-action links
  • Change code example for the links to "List link 1" "List link 2"
• Destructive links
  • Change code example link text to "Destructive link" (remove the word "Sample"
• Link with iconStandard link with icon
• Non-wrapping link with icon icon links
• Jump link
  • Change code example for the link to "Jump link" (remove the word "Default")
• Jump link with icon on the left
• Printed links (Should we add this to the DSR?)

[billhimmelsbach]

Heyo @meissadia! I just changed the title, added the verification checklist to the description, and added a label just to make it align with these steps I wrote up last week. We can discuss/change the steps if we want to, but just wanted to make the outstanding PRs consistent for now. 👍

[natalia-fitzgerald]

Hey @meissadia - I accidentally approved thinking this was the Tagline. Can I re-review?

[natalia-fitzgerald]

• Change intro text to:
  Links are navigational elements that connect users to other locations, either on the current page or to a different page or site. In contrast, buttons are used to signal important actions.

• Change "Call-to-action links" to "List links"

• Change live code text to: "List link 1" and "List link 2"

• Change "Sample destructive link" to "Destructive link"

• Change "Standard link with icon" to "Link with icon"

• Change "Non-wrapping icon links" to "Non-wrapping link with icon"

[natalia-fitzgerald]

@meissadia
Also: Change "Default jump link" to "Jump link" - in the live code example

[natalia-fitzgerald]

The changes just requested are the same ones I made here: #228 (review)

I also asked about whether we should include the "Printed links"

[natalia-fitzgerald]

Looks great!