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 <[email protected]> --------- Co-authored-by: Daine Trinidad <[email protected]>
cds-snc · Feb 26, 2024 · ad49203 · ad49203
1 parent 7a83329
commit ad49203
Show file tree

Hide file tree

Showing 17 changed files with 297 additions and 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
@@ -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,<svg xmlns='http://www.w3.org/2000/svg' height='12px' viewBox='0 0 8 14'><path fill='26374a' d='M7.7,6.3c0.4,0.4,0.4,1,0,1.4l-6,6c-0.4,0.4-1,0.4-1.4,0s-0.4-1,0-1.4L5.6,7L0.3,1.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0 L7.7,6.3L7.7,6.3z'/></svg>");
     }
 
-    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
@@ -22,9 +22,9 @@ export class GcdsBreadcrumbsItem {
 
     return (
       <Host role="listitem" class="gcds-breadcrumbs-item">
-        <a href={href}>
+        <gcds-link href={href}>
           <slot></slot>
-        </a>
+        </gcds-link>
       </Host>
     );
   }

diff --git 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
@@ -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
@@ -80,12 +80,12 @@ export class GcdsCard {
           {tag && <span class="gcds-card__tag">{tag}</span>}
           {Element != 'a' ? (
             <Element class="gcds-card__title">
-              <a href={href}>{cardTitle}</a>
+              <gcds-link href={href}>{cardTitle}</gcds-link>
             </Element>
           ) : (
-            <a href={href} class="gcds-card__title">
+            <gcds-link href={href} class="gcds-card__title">
               {cardTitle}
-            </a>
+            </gcds-link>
           )}
 
           {description && <p class="gcds-card__description">{description}</p>}

diff --git 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
@@ -15,9 +15,9 @@ describe('gcds-card', () => {
     <gcds-card card-title="Card" href="#card" type="link">
       <mock:shadow-root>
         <div class="gcds-card gcds-card--link">
-          <a class="gcds-card__title" href="#card">
+          <gcds-link class="gcds-card__title" href="#card">
             Card
-          </a>
+          </gcds-link>
         </div>
       </mock:shadow-root>
     </gcds-card
@@ -37,9 +37,9 @@ describe('gcds-card', () => {
     <gcds-card card-title="Card" href="#card" type="action">
       <mock:shadow-root>
         <div class="gcds-card gcds-card--action">
-          <a class="gcds-card__title" href="#card">
+          <gcds-link class="gcds-card__title" href="#card">
             Card
-          </a>
+          </gcds-link>
         </div>
       </mock:shadow-root>
     </gcds-card
@@ -61,9 +61,9 @@ describe('gcds-card', () => {
       <mock:shadow-root>
         <div class="gcds-card gcds-card--link">
           <h3 class="gcds-card__title">
-            <a href="#card">
+            <gcds-link href="#card">
                 Card
-            </a>
+            </gcds-link>
           </h3>
         </div>
       </mock:shadow-root>
@@ -86,9 +86,9 @@ describe('gcds-card', () => {
       <mock:shadow-root>
         <div class="gcds-card gcds-card--link">
           <span class="gcds-card__tag">Tag</span>
-          <a class="gcds-card__title" href="#card">
+          <gcds-link class="gcds-card__title" href="#card">
             Card
-          </a>
+          </gcds-link>
         </div>
       </mock:shadow-root>
     </gcds-card
@@ -109,9 +109,9 @@ describe('gcds-card', () => {
     <gcds-card card-title="Card" href="#card" description="This is the card description" type="link">
       <mock:shadow-root>
         <div class="gcds-card gcds-card--link">
-          <a class="gcds-card__title" href="#card">
+          <gcds-link class="gcds-card__title" href="#card">
             Card
-          </a>
+          </gcds-link>
           <p class="gcds-card__description">
             This is the card description
           </p>
@@ -135,9 +135,9 @@ describe('gcds-card', () => {
       <mock:shadow-root>
         <div class="gcds-card gcds-card--link">
           <img alt="" class="gcds-card__image" src="https://picsum.photos/480/270">
-          <a class="gcds-card__title" href="#card">
+          <gcds-link class="gcds-card__title" href="#card">
             Card
-          </a>
+          </gcds-link>
         </div>
       </mock:shadow-root>
     </gcds-card>
@@ -159,9 +159,9 @@ describe('gcds-card', () => {
       <mock:shadow-root>
         <div class="gcds-card gcds-card--link">
           <img alt="Alt text for image from picsum" class="gcds-card__image" src="https://picsum.photos/480/270">
-          <a class="gcds-card__title" href="#card">
+          <gcds-link class="gcds-card__title" href="#card">
             Card
-          </a>
+          </gcds-link>
         </div>
       </mock:shadow-root>
     </gcds-card>
@@ -183,9 +183,9 @@ describe('gcds-card', () => {
     <gcds-card card-title="Card" href="#card" type="link">
       <mock:shadow-root>
         <div class="gcds-card gcds-card--link">
-          <a class="gcds-card__title" href="#card">
+          <gcds-link class="gcds-card__title" href="#card">
             Card
-          </a>
+          </gcds-link>
           <div class="gcds-card__spacer"></div>
           <slot name="footer"></slot>
         </div>

diff --git 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) {