feat: add tertiary variant to hyperlink component

- add new feature example to apiExamples - update generateDocs script to fix the issue in macOS based machines Changes to be committed: modified: apiExamples/cta-fluid.html modified: apiExamples/cta-small.html modified: apiExamples/cta.html modified: demo/api.md modified: docs/api.md modified: package-lock.json modified: scripts/generateDocs.mjs modified: src/auro-hyperlink.js modified: src/component-base.mjs modified: src/style.scss
AlaskaAirlines · May 7, 2024 · 4c6edc7 · 4c6edc7
1 parent bb1b0f1
commit 4c6edc7
Show file tree

Hide file tree

Showing 10 changed files with 76 additions and 7 deletions.
diff --git a/apiExamples/cta-fluid.html b/apiExamples/cta-fluid.html
@@ -1,2 +1,3 @@
 <auro-hyperlink type="cta" fluid href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" fluid secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" fluid tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
diff --git a/apiExamples/cta-small.html b/apiExamples/cta-small.html
@@ -5,3 +5,7 @@
 <auro-hyperlink type="cta" small secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" small secondary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" small secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+
+<auro-hyperlink type="cta" small tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" small tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" small tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
diff --git a/apiExamples/cta.html b/apiExamples/cta.html
@@ -5,3 +5,7 @@
 <auro-hyperlink type="cta" secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" secondary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+
+<auro-hyperlink type="cta" tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
diff --git a/demo/api.md b/demo/api.md
@@ -21,6 +21,7 @@
 | [secondary](#secondary)      | `secondary`      |           | `Boolean` | false   | If true and `type="cta"`, the hyperlink will have a secondary UI. |
 | [small](#small)          | `small`          |           | `Boolean` | false   | If true and `type="cta"`, the hyperlink will have a small UI. |
 | [target](#target)         | `target`         |           | `String`  |         | Defines where to open the linked document.       |
+| [tertiary](#tertiary)       | `tertiary`       |           | `Boolean` | false   | If true and `type="cta"`, the hyperlink will have a tertiary UI. |
 | [type](#type)           | `type`           |           | `String`  |         | Defines the type of hyperlink; accepts `nav` or `cta`. |
 
 ## CSS Shadow Parts
@@ -287,7 +288,10 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
   <auro-hyperlink type="cta" href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" secondary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
-  <auro-hyperlink type="cta" secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -302,6 +306,9 @@ CTA buttons share the same icon support as the standard hyperlink for targets th
 <auro-hyperlink type="cta" secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" secondary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -315,6 +322,7 @@ In the following example, see how the `fluid` attribute alters the shape of the
   <!-- The below content is automatically added from ./../../apiExamples/cta-fluid.html -->
   <auro-hyperlink type="cta" fluid href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" fluid secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" fluid tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -324,7 +332,8 @@ In the following example, see how the `fluid` attribute alters the shape of the
 
 ```html
 <auro-hyperlink type="cta" fluid href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
-<auro-hyperlink type="cta" fluid secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" fluid secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" fluid tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
@@ -341,7 +350,10 @@ In the following example, see how the `small` attribute alters the size of the b
   <auro-hyperlink type="cta" small href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" small secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
   <auro-hyperlink type="cta" small secondary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
-  <auro-hyperlink type="cta" small secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" small secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" small tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" small tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+  <auro-hyperlink type="cta" small tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
@@ -356,6 +368,9 @@ In the following example, see how the `small` attribute alters the size of the b
 <auro-hyperlink type="cta" small secondary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" small secondary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
 <auro-hyperlink type="cta" small secondary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" small tertiary href="https://www.alaskaair.com">CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" small tertiary href="https://www.alaskaair.com" target="_blank" >CTA Button</auro-hyperlink>
+<auro-hyperlink type="cta" small tertiary href="https://www.portseattle.org/sea-tac" target="_blank" >CTA Button</auro-hyperlink>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
diff --git a/docs/api.md b/docs/api.md
@@ -18,6 +18,7 @@
 | `secondary`      | `secondary`      |           | `Boolean` | false   | If true and `type="cta"`, the hyperlink will have a secondary UI. |
 | `small`          | `small`          |           | `Boolean` | false   | If true and `type="cta"`, the hyperlink will have a small UI. |
 | `target`         | `target`         |           | `String`  |         | Defines where to open the linked document.       |
+| `tertiary`       | `tertiary`       |           | `Boolean` | false   | If true and `type="cta"`, the hyperlink will have a tertiary UI. |
 | `type`           | `type`           |           | `String`  |         | Defines the type of hyperlink; accepts `nav` or `cta`. |
 
 ## CSS Shadow Parts

diff --git a/package-lock.json b/package-lock.json
diff --git a/scripts/generateDocs.mjs b/scripts/generateDocs.mjs
@@ -2,8 +2,9 @@ import path from 'path';
 import markdownMagic from 'markdown-magic';
 import fs from 'fs';
 import https from 'https';
+import { fileURLToPath } from 'url';
 
-const __dirname = new URL('.', import.meta.url).pathname;
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
 const readmeTemplateUrl = 'https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/README_esm.md';
 const dirDocTemplates = './docTemplates';

diff --git a/src/auro-hyperlink.js b/src/auro-hyperlink.js
@@ -20,6 +20,7 @@ import styleCss from "./style-css.js";
  * @attr {Boolean} ondark - If true, the hyperlink will be styled for use on a dark background.
  * @attr {Boolean} relative - If true, the auto URL re-write feature will be disabled.
  * @attr {Boolean} secondary - If true and `type="cta"`, the hyperlink will have a secondary UI.
+ * @attr {Boolean} tertiary - If true and `type="cta"`, the hyperlink will have a tertiary UI.
  * @attr {Boolean} small - If true and `type="cta"`, the hyperlink will have a small UI.
  * @attr {Boolean} referrerpolicy - If true, sets `strict-origin-when-cross-origin` to control the referrer information sent with requests.
  * @attr {String} rel - Defines the relationship between the current document and the linked document.
@@ -64,7 +65,8 @@ export class AuroHyperlink extends ComponentBase {
       'hyperlink--ondark': this.ondark,
       'hyperlink--button': this.role,
       'hyperlink--cta': this.type === 'cta',
-      'hyperlink--secondary': this.secondary
+      'hyperlink--secondary': this.secondary,
+      'hyperlink--tertiary': this.tertiary
     };
 
     return html`

diff --git a/src/component-base.mjs b/src/component-base.mjs
@@ -16,6 +16,7 @@ export default class ComponentBase extends LitElement {
     this.download = false;
     this.relative = false;
     this.secondary = false;
+    this.tertiary = false;
     this.ondark = false;
     this.small = false;
 
@@ -57,6 +58,7 @@ export default class ComponentBase extends LitElement {
       download:         { type: Boolean },
       relative:         { type: Boolean },
       secondary:        { type: Boolean },
+      tertiary:         { type: Boolean },
       ondark:           { type: Boolean },
       type:             { type: String },
       fluid:            { type: Boolean },

diff --git a/src/style.scss b/src/style.scss
@@ -186,6 +186,45 @@
       }
     }
 
+    &.hyperlink--tertiary {
+      border: 1px solid transparent;
+      background-color: color-mix(in srgb, var(--ds-color-base-black, $ds-color-base-black) 3%, transparent);
+      color: var(--ds-color-text-link-default, $ds-color-text-link-default);
+
+      // update to media query when ods-hyperlink support is removed
+      :host(:not(.is-touching)) & {
+        &:hover {
+          background-image: linear-gradient(var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default), var(--ds-color-ui-bkg-hover-default, $ds-color-ui-bkg-hover-default));
+          color: var(--ds-color-text-link-default, $ds-color-text-link-default);
+        }
+      }
+
+      &.hyperlink--ondark {
+        border: 1px solid transparent;
+        background-color: color-mix(in srgb, var(--ds-color-base-white, $ds-color-base-white) 3%, transparent);
+        color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
+
+        // update to media query when ods-hyperlink support is removed
+        :host(:not(.is-touching)) & {
+          &:hover {
+            background-image: linear-gradient(var(--ds-color-ui-bkg-hover-inverse, $ds-color-ui-bkg-hover-inverse), var(--ds-color-ui-bkg-hover-inverse, $ds-color-ui-bkg-hover-inverse));
+            background-color: var(--ds-color-ui-bkg-hover-inverse, $ds-color-ui-bkg-hover-inverse);
+            color: color-mix(in srgb, var(--ds-color-ui-hover-inverse, $ds-color-ui-hover-inverse) 40%, transparent);
+          }
+
+          &:visited {
+            color: var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);
+          }
+
+          &:focus-visible {
+            color: var(--ds-color-text-link-inverse, $ds-color-text-link-inverse);
+            outline: var(--ds-color-border-active-inverse, $ds-color-border-active-inverse) solid var(--ds-size-50, $ds-size-50);
+            outline-offset: unset;
+          }
+        }
+      }
+    }
+
     // CTA ondark
     &.hyperlink--ondark {
       border: 1px solid var(--ds-color-ui-default-inverse, $ds-color-ui-default-inverse);