From ad49203cd3e1aa755e4f44c1d13f6981a2618de1 Mon Sep 17 00:00:00 2001 From: Melanie Boeckmann Date: Mon, 26 Feb 2024 14:24:31 -0800 Subject: [PATCH] refactor: integrate gcds-link into existing components (#454) * refactor: integrate gcds-link into gcds-lang-toggle * refactor: integrate gcds-link into gcds-card * refactor: integrate gcds-link into gcds-breadcrumbs * refactor: integrate gcds-link into gcds-footer * Update packages/web/src/components/gcds-footer/gcds-footer.tsx Co-authored-by: Daine Trinidad --------- Co-authored-by: Daine Trinidad --- .../gcds-breadcrumbs-item.css | 37 +- .../gcds-breadcrumbs-item.tsx | 4 +- .../src/components/gcds-breadcrumbs/readme.md | 6 + .../src/components/gcds-card/gcds-card.css | 50 +-- .../src/components/gcds-card/gcds-card.tsx | 6 +- .../web/src/components/gcds-card/readme.md | 14 + .../gcds-card/test/gcds-card.spec.tsx | 32 +- .../components/gcds-footer/gcds-footer.css | 37 +- .../components/gcds-footer/gcds-footer.tsx | 20 +- .../web/src/components/gcds-footer/readme.md | 3 + .../gcds-footer/test/gcds-footer.spec.tsx | 376 +++++++++--------- .../web/src/components/gcds-header/readme.md | 2 + .../gcds-lang-toggle/gcds-lang-toggle.css | 49 +-- .../gcds-lang-toggle/gcds-lang-toggle.tsx | 4 +- .../src/components/gcds-lang-toggle/readme.md | 6 + .../test/gcds-lang-toggle.spec.tsx | 8 +- .../web/src/components/gcds-link/readme.md | 8 + 17 files changed, 297 insertions(+), 365 deletions(-) diff --git a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css index 43dfa7404..2f9722826 100644 --- a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css +++ b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.css @@ -4,9 +4,8 @@ :host(.gcds-breadcrumbs-item) { display: inline-block; - a { + gcds-link::part(link) { display: inline-block; - outline: 0; white-space: normal; } @@ -28,41 +27,9 @@ content: url("data:image/svg+xml,"); } - a { - color: var(--gcds-breadcrumbs-default-text); + gcds-link::part(link) { margin: var(--gcds-breadcrumbs-item-margin); padding: var(--gcds-breadcrumbs-item-link-padding); - text-underline-offset: 0.2em; - text-decoration-color: currentColor; - text-decoration-thickness: var( - --gcds-breadcrumbs-default-decoration-thickness - ); - transition: - background 0.15s ease-in-out, - color 0.15s ease-in-out; } } } - -@layer hover { - @media (hover: hover) { - :host(.gcds-breadcrumbs-item) a:hover { - color: var(--gcds-breadcrumbs-hover-text); - text-decoration-thickness: var( - --gcds-breadcrumbs-hover-decoration-thickness - ); - } - } -} - -@layer focus { - :host(.gcds-breadcrumbs-item) a:focus { - border-radius: var(--gcds-breadcrumbs-focus-border-radius); - background-color: var(--gcds-breadcrumbs-focus-background); - color: var(--gcds-breadcrumbs-focus-text); - text-decoration: none; - box-shadow: var(--gcds-breadcrumbs-focus-box-shadow); - outline-offset: var(--gcds-breadcrumbs-focus-outline-offset); - outline: var(--gcds-breadcrumbs-focus-outline); - } -} diff --git a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.tsx b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.tsx index 802249e58..017804234 100644 --- a/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.tsx +++ b/packages/web/src/components/gcds-breadcrumbs/gcds-breadcrumbs-item.tsx @@ -22,9 +22,9 @@ export class GcdsBreadcrumbsItem { return ( - + - + ); } diff --git a/packages/web/src/components/gcds-breadcrumbs/readme.md b/packages/web/src/components/gcds-breadcrumbs/readme.md index c0ff15658..70ba1735d 100644 --- a/packages/web/src/components/gcds-breadcrumbs/readme.md +++ b/packages/web/src/components/gcds-breadcrumbs/readme.md @@ -18,9 +18,15 @@ - [gcds-breadcrumbs](.) +### Depends on + +- [gcds-link](../gcds-link) + ### Graph ```mermaid graph TD; + gcds-breadcrumbs-item --> gcds-link + gcds-link --> gcds-icon gcds-breadcrumbs --> gcds-breadcrumbs-item style gcds-breadcrumbs-item fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/web/src/components/gcds-card/gcds-card.css b/packages/web/src/components/gcds-card/gcds-card.css index cd62e7a24..09e6f42d7 100644 --- a/packages/web/src/components/gcds-card/gcds-card.css +++ b/packages/web/src/components/gcds-card/gcds-card.css @@ -1,4 +1,4 @@ -@layer reset, default, slot, link, hover, focus; +@layer reset, default, slot, link, hover; @layer reset { :host { @@ -41,14 +41,8 @@ color: var(--gcds-card-tag-color); } - :is(.gcds-card__title, .gcds-card__title > a) { - color: var(--gcds-card-title-color); + .gcds-card__title { font: var(--gcds-card-title-font); - text-underline-offset: var(--gcds-card-title-text-underline-offset); - text-decoration-color: currentColor; - text-decoration-thickness: var( - --gcds-card-title-text-decoration-thickness - ); width: fit-content; } @@ -76,18 +70,15 @@ } @layer link { - :host .gcds-card.gcds-card--link { - .gcds-card__title > a::after, - a.gcds-card__title::after { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 1; - pointer-events: auto; - content: ''; - } + :host .gcds-card.gcds-card--link gcds-link::part(link):after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 1; + pointer-events: auto; + content: ''; } } @@ -100,12 +91,7 @@ box-shadow: var(--gcds-card-hover-box-shadow); } - :is( - &.gcds-card--link:hover .gcds-card__title > a, - &.gcds-card--link:hover a.gcds-card__title, - .gcds-card__title > a:hover, - a.gcds-card__title:hover - ) { + &.gcds-card--link:hover gcds-link::part(link) { color: var(--gcds-card-hover-title-color); text-decoration-thickness: var( --gcds-card-hover-title-text-decoration-thickness @@ -114,15 +100,3 @@ } } } - -@layer focus { - :host .gcds-card :is(.gcds-card__title > a:focus, a.gcds-card__title:focus) { - background-color: var(--gcds-card-focus-background); - border-radius: var(--gcds-card-focus-border-radius); - box-shadow: var(--gcds-card-focus-box-shadow); - color: var(--gcds-card-focus-color); - outline: var(--gcds-card-focus-outline); - outline-offset: var(--gcds-card-focus-outline-offset); - text-decoration: none; - } -} diff --git a/packages/web/src/components/gcds-card/gcds-card.tsx b/packages/web/src/components/gcds-card/gcds-card.tsx index 51aa8bf8b..acc4b586d 100644 --- a/packages/web/src/components/gcds-card/gcds-card.tsx +++ b/packages/web/src/components/gcds-card/gcds-card.tsx @@ -80,12 +80,12 @@ export class GcdsCard { {tag && {tag}} {Element != 'a' ? ( - {cardTitle} + {cardTitle} ) : ( - + {cardTitle} - + )} {description &&

{description}

} diff --git a/packages/web/src/components/gcds-card/readme.md b/packages/web/src/components/gcds-card/readme.md index 2e7034cde..2ee2546ff 100644 --- a/packages/web/src/components/gcds-card/readme.md +++ b/packages/web/src/components/gcds-card/readme.md @@ -19,6 +19,20 @@ | `type` | `type` | The type attribute specifies how the card renders as a link | `"action" \| "link"` | `'link'` | +## Dependencies + +### Depends on + +- [gcds-link](../gcds-link) + +### Graph +```mermaid +graph TD; + gcds-card --> gcds-link + gcds-link --> gcds-icon + style gcds-card fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/web/src/components/gcds-card/test/gcds-card.spec.tsx b/packages/web/src/components/gcds-card/test/gcds-card.spec.tsx index 37bba97bf..15949b9a3 100644 --- a/packages/web/src/components/gcds-card/test/gcds-card.spec.tsx +++ b/packages/web/src/components/gcds-card/test/gcds-card.spec.tsx @@ -15,9 +15,9 @@ describe('gcds-card', () => {
- + Card - +
{
- + Card - +
{

- + Card - +

@@ -86,9 +86,9 @@ describe('gcds-card', () => {
Tag - + Card - +
{
- + Card - +

This is the card description

@@ -135,9 +135,9 @@ describe('gcds-card', () => {
- + Card - +
@@ -159,9 +159,9 @@ describe('gcds-card', () => {
Alt text for image from picsum - + Card - +
@@ -183,9 +183,9 @@ describe('gcds-card', () => {
- + Card - +
diff --git a/packages/web/src/components/gcds-footer/gcds-footer.css b/packages/web/src/components/gcds-footer/gcds-footer.css index c05b25d2a..792970a7c 100644 --- a/packages/web/src/components/gcds-footer/gcds-footer.css +++ b/packages/web/src/components/gcds-footer/gcds-footer.css @@ -1,4 +1,4 @@ -@layer reset, default, contextual, main, sub, hover, focus, small, compact, medium, wide; +@layer reset, default, contextual, main, sub, small, compact, medium, wide; @layer reset { :host { @@ -8,7 +8,7 @@ display: initial; } - a:not(:hover) { + gcds-link::part(link):not(:hover) { text-decoration: none; } @@ -61,9 +61,8 @@ grid-template-columns: 1fr; grid-gap: var(--gcds-footer-list-grid-gap); - li a { + li gcds-link::part(link) { color: var(--gcds-footer-main-text); - text-underline-position: under; } } } @@ -144,40 +143,10 @@ width: var(--gcds-footer-sub-signature-md-width); } } - - a { - color: var(--gcds-footer-sub-text); - transition: color 0.15s; - } } } } -@layer hover { - @media (hover: hover) { - :host .gcds-footer__sub .sub__container a:hover { - color: var(--gcds-footer-sub-hover-text); - text-underline-offset: 0.2em; - text-decoration: underline; - text-decoration-thickness: var( - --gcds-footer-sub-hover-decoration-thickness - ); - } - } -} - -@layer focus { - :host ul li a:focus { - color: var(--gcds-footer-link-focus-text); - background-color: var(--gcds-footer-link-focus-background); - border-radius: var(--gcds-footer-link-focus-radius); - text-decoration: none; - box-shadow: var(--gcds-footer-link-focus-box-shadow); - outline-offset: var(--gcds-footer-link-focus-outline-offset); - outline: var(--gcds-footer-link-focus-outline); - } -} - @layer small { @layer compact { @container sub (width <= 19em) { diff --git a/packages/web/src/components/gcds-footer/gcds-footer.tsx b/packages/web/src/components/gcds-footer/gcds-footer.tsx index c6fcf3fcd..395f6176f 100644 --- a/packages/web/src/components/gcds-footer/gcds-footer.tsx +++ b/packages/web/src/components/gcds-footer/gcds-footer.tsx @@ -157,7 +157,9 @@ export class GcdsFooter { return (
  • - {key} + + {key} +
    • ); } @@ -175,7 +177,9 @@ export class GcdsFooter { @@ -188,7 +192,9 @@ export class GcdsFooter { @@ -209,7 +215,9 @@ export class GcdsFooter { return (
  • - {key} + + {key} +
    • ); } @@ -217,9 +225,9 @@ export class GcdsFooter { : Object.keys(siteNav).map(value => { return (
  • - + {siteNav[value].text} - +
    • ); })} diff --git a/packages/web/src/components/gcds-footer/readme.md b/packages/web/src/components/gcds-footer/readme.md index 66763bad2..1669df294 100644 --- a/packages/web/src/components/gcds-footer/readme.md +++ b/packages/web/src/components/gcds-footer/readme.md @@ -21,11 +21,14 @@ ### Depends on - [gcds-signature](../gcds-signature) +- [gcds-link](../gcds-link) ### Graph ```mermaid graph TD; gcds-footer --> gcds-signature + gcds-footer --> gcds-link + gcds-link --> gcds-icon style gcds-footer fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/web/src/components/gcds-footer/test/gcds-footer.spec.tsx b/packages/web/src/components/gcds-footer/test/gcds-footer.spec.tsx index 581359041..a1152c70e 100644 --- a/packages/web/src/components/gcds-footer/test/gcds-footer.spec.tsx +++ b/packages/web/src/components/gcds-footer/test/gcds-footer.spec.tsx @@ -19,29 +19,29 @@ describe('gcds-footer', () => { @@ -72,19 +72,19 @@ describe('gcds-footer', () => { @@ -94,94 +94,94 @@ describe('gcds-footer', () => { @@ -195,29 +195,29 @@ describe('gcds-footer', () => { @@ -248,29 +248,29 @@ describe('gcds-footer', () => { @@ -301,19 +301,19 @@ describe('gcds-footer', () => { @@ -323,94 +323,94 @@ describe('gcds-footer', () => { @@ -424,29 +424,29 @@ describe('gcds-footer', () => { @@ -482,19 +482,19 @@ describe('gcds-footer', () => { @@ -508,19 +508,19 @@ describe('gcds-footer', () => { @@ -530,94 +530,94 @@ describe('gcds-footer', () => { @@ -631,29 +631,29 @@ describe('gcds-footer', () => { @@ -688,19 +688,19 @@ describe('gcds-footer', () => { diff --git a/packages/web/src/components/gcds-header/readme.md b/packages/web/src/components/gcds-header/readme.md index aaab9a384..903a40752 100644 --- a/packages/web/src/components/gcds-header/readme.md +++ b/packages/web/src/components/gcds-header/readme.md @@ -30,6 +30,8 @@ graph TD; gcds-header --> gcds-lang-toggle gcds-header --> gcds-signature gcds-button --> gcds-icon + gcds-lang-toggle --> gcds-link + gcds-link --> gcds-icon style gcds-header fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.css b/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.css index 219907db0..6ec493d70 100644 --- a/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.css +++ b/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.css @@ -1,4 +1,4 @@ -@layer reset, default, hover, focus, desktop; +@layer reset, default, desktop; @layer reset { :host { @@ -17,53 +17,28 @@ :host .gcds-lang-toggle { font: var(--gcds-lang-toggle-font); - a { - color: var(--gcds-lang-toggle-default-text); + gcds-link::part(link) { padding: var(--gcds-lang-toggle-padding); - text-decoration: underline currentColor - var(--gcds-lang-toggle-default-decoration-thickness); - text-underline-offset: 0.2em; - - span { - display: none; - } - - abbr { - text-transform: uppercase; - text-decoration: none; - } } - } -} -@layer hover { - @media (hover: hover) { - :host .gcds-lang-toggle a:hover { - color: var(--gcds-lang-toggle-hover-text); - text-decoration-thickness: var( - --gcds-lang-toggle-hover-decoration-thickness - ); + span { + display: none; } - } -} -@layer focus { - :host .gcds-lang-toggle a:focus { - color: var(--gcds-lang-toggle-focus-text); - background-color: var(--gcds-lang-toggle-focus-background); - border-radius: var(--gcds-lang-toggle-focus-border-radius); - text-decoration: none; - box-shadow: var(--gcds-lang-toggle-focus-box-shadow); - outline-offset: var(--gcds-lang-toggle-focus-outline-offset); - outline: var(--gcds-lang-toggle-focus-outline); + abbr { + text-transform: uppercase; + text-decoration: none; + } } } /* Note: viewport specific style decision */ @layer desktop { @media screen and (width >= 64em) { - :host .gcds-lang-toggle a { - padding: 0; + :host .gcds-lang-toggle { + gcds-link::part(link) { + padding: 0; + } span { display: initial; diff --git a/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.tsx b/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.tsx index ec7435ace..2a47924f8 100644 --- a/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.tsx +++ b/packages/web/src/components/gcds-lang-toggle/gcds-lang-toggle.tsx @@ -50,10 +50,10 @@ export class GcdsLangToggle {

    {i18n[lang].heading}

    - + {i18n[lang].language} {i18n[lang].abbreviation} - +
    ); diff --git a/packages/web/src/components/gcds-lang-toggle/readme.md b/packages/web/src/components/gcds-lang-toggle/readme.md index b53305e25..bbb28fc40 100644 --- a/packages/web/src/components/gcds-lang-toggle/readme.md +++ b/packages/web/src/components/gcds-lang-toggle/readme.md @@ -18,9 +18,15 @@ - [gcds-header](../gcds-header) +### Depends on + +- [gcds-link](../gcds-link) + ### Graph ```mermaid graph TD; + gcds-lang-toggle --> gcds-link + gcds-link --> gcds-icon gcds-header --> gcds-lang-toggle style gcds-lang-toggle fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/web/src/components/gcds-lang-toggle/test/gcds-lang-toggle.spec.tsx b/packages/web/src/components/gcds-lang-toggle/test/gcds-lang-toggle.spec.tsx index d84a55852..35882d331 100644 --- a/packages/web/src/components/gcds-lang-toggle/test/gcds-lang-toggle.spec.tsx +++ b/packages/web/src/components/gcds-lang-toggle/test/gcds-lang-toggle.spec.tsx @@ -12,10 +12,10 @@ describe('gcds-lang-toggle', () => {

    Language Selection

    - + Français fr - +
    @@ -32,10 +32,10 @@ describe('gcds-lang-toggle', () => {

    Sélection de la langue

    - + English en - +
    diff --git a/packages/web/src/components/gcds-link/readme.md b/packages/web/src/components/gcds-link/readme.md index 0eba828e9..f2d790b2c 100644 --- a/packages/web/src/components/gcds-link/readme.md +++ b/packages/web/src/components/gcds-link/readme.md @@ -33,7 +33,11 @@ ### Used by + - [gcds-breadcrumbs-item](../gcds-breadcrumbs) + - [gcds-card](../gcds-card) - [gcds-error-summary](../gcds-error-summary) + - [gcds-footer](../gcds-footer) + - [gcds-lang-toggle](../gcds-lang-toggle) ### Depends on @@ -43,7 +47,11 @@ ```mermaid graph TD; gcds-link --> gcds-icon + gcds-breadcrumbs-item --> gcds-link + gcds-card --> gcds-link gcds-error-summary --> gcds-link + gcds-footer --> gcds-link + gcds-lang-toggle --> gcds-link style gcds-link fill:#f9f,stroke:#333,stroke-width:4px ```