Development of the Link component

[adorayi]

Develop on component branch, push to staging and push to prod when approved.

Acceptance Criteria:

• Component kickoff
• Sync with Design
• Requirements documentation
• Requirements doc: Consider edge cases
• Requirements doc: Describe component properties
• Review of requirements doc
• Develop the component according to the requirements doc and design specs
• Add component to storybook
• Write draft of dev guidance
• Sync dev properties with Figma properties (design + dev) (Figma component)
• Handoff from draft dev guidance to documentation author/lead
• WCAG Goal can be completed using a screen reader.
• WCAG Visual elements observe color contrast requirements.
• WCAG Manual accessibility testing meets WCAG 2.1 AA requirements.
• Provides equal service in French and English.
• Comparison with official policy, documented reasons for deviation if any
• Final sync with Design
• Policy review
• Code review
• After PR approval, merge component to staging
• Review from Design
• Review from Policy
• Note: reviews could be done on Storybook staging
• Push to prod

[samburtonCDS]

Policy considerations

MANDATORY COLOURS
The Canada.ca design system specifies mandatory colours for link text, selected links, and visited links.

The GCDS team confirms the intention to comply with those mandatory colours in the GCDS policy review.

Mandatory colours are:

• default link: #2b4380
• selected link (on hover or focus): #0535d2
• visited link: #7834bc

There are no other mandatory elements related to this component in the Canada.ca design system.

RECOMMENDATION: DOCUMENT DECISIONS
I recommend that we proactively document significant design decisions (eg. why we use icons to identify with certain types of links and how we chose the images) so we can easily explain our recommendations to potential users.

• This may already be part of your workflow, in which case you can ignore this suggestion :)
• If this would be a new and/or additional task, I’m happy to help!

Resources from canada.ca design system that may be useful to review

Overall, the canada.ca design system does not use or recommend icons to designate certain kinds of links.

• Canada.ca style guide entry on links: research-based recommendations for when and how to use links. Contains guidance related to this component, such as "write email addresses in full, in lower case and as active links: (contact [email protected])"
• Canada.ca style guide entry on capitalization & punctuation: Contains guidance related to this component, such as "Use lower case for a link in a sentence, unless the link contains a proper name."
• Canada.ca blog: 3 steps to making links more effective: guidance on how to write effective links
• Canada.ca blog: a case for descriptive link text: results of an A/B test leading to recommendations about the most effective text for links
• The Canada.ca design system also contains several optional patterns and templates related to links: download links pattern; related links pattern; in-page table of contents pattern; index pages template; services and information template;

[daine]

I have a PR open here

At the moment, here's what the different links would look like: