@ptcwebops/ptcw-design 1.4.5 → 1.4.7

package/dist/collection/components/ptc-link/ptc-link.css

@@ -16,7 +16,6 @@
   line-height: var(--ptc-line-height-normal);
   outline: none;
   text-decoration: none;
-  transition: color var(--ptc-transition-fast) var(--ptc-ease-inout);
 }
 
 .simple::after {
@@ -26,10 +25,11 @@
   left: 0px;
   bottom: 2px;
   transition: opacity var(--ptc-transition-fast) var(--ptc-ease-inout);
-  border-bottom: 2px solid var(--color-green-06);
+  border-bottom: 2px solid var(--color-green-07);
+  opacity: 0;
 }
-.simple:hover {
-  color: var(--color-green-06);
+.simple:hover.simple::after {
+  opacity: 1;
 }
 
 .product-link {
@@ -42,25 +42,45 @@
   left: 0px;
   bottom: 2px;
   transition: opacity var(--ptc-transition-fast) var(--ptc-ease-inout);
-  border-bottom: 2px solid var(--color-green-06);
+  border-bottom: 2px solid var(--color-green-07);
   opacity: 1;
-  color: var(--color-green-06);
+  color: var(--color-green-07);
 }
 .product-link:hover.product-link {
-  color: var(--color-green-06);
+  color: var(--color-green-07);
 }
 .product-link:hover.product-link::after {
   opacity: 1;
 }
 
+.arrow {
+  margin-right: var(--ptc-element-spacing-01);
+}
+.arrow::after {
+  position: absolute;
+  display: block;
+  content: "";
+  width: var(--ptc-element-spacing-07);
+  border-bottom: 2px solid var(--color-green-07);
+  bottom: 1px;
+  transition: width var(--ptc-transition-fast) var(--ptc-ease-inout);
+}
+.arrow:hover.arrow::after {
+  width: 100%;
+}
+
 .underline {
-  border-bottom: 2px solid var(--color-green-06);
+  border-bottom: 2px solid var(--color-green-07);
 }
 .underline:hover {
   color: #00890B;
   border-bottom: 2px solid #00890B;
 }
 
+.uppercase {
+  text-transform: uppercase;
+}
+
 .small {
   font-size: var(--ptc-font-size-xx-small);
 }
@@ -77,6 +97,28 @@
   font-size: var(--ptc-font-size-medium);
 }
 
+.ptc-link.arrow icon-asset {
+  position: absolute;
+  right: -25px;
+  transition: transform var(--ptc-transition-fast) var(--ptc-ease-inout);
+  transform: translateY(2px);
+}
+.ptc-link.arrow icon-asset svg {
+  fill: var(--color-green-07) !important;
+}
+.ptc-link.arrow-plm icon-asset {
+  position: absolute;
+  right: -6.75px;
+  transform: translate(100%, 3%);
+}
+.ptc-link.arrow-plm svg {
+  fill: var(--color-green-07) !important;
+}
+
+.ptc-link:hover.arrow icon-asset {
+  transform: translate(var(--ptc-element-spacing-04), 2px);
+}
+
 .nav-title:focus, .nav-title-link:focus, .nav-card-link:focus, .primary-nav-link:focus, .secondary-nav-link:focus, .footer-nav-link:focus, .copyright-link:focus {
   outline: 3px solid var(--color-blue-07);
   outline-offset: 2px;
@@ -220,6 +262,20 @@
   display: inline-block;
 }
 
+.arrow-plm {
+  color: var(--color-white);
+  font-weight: var(--ptc-font-weight-extrabold);
+  line-height: var(--ptc-line-height-densest);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-decoration-color: transparent;
+  text-underline-offset: 2px;
+  transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+.arrow-plm:hover {
+  text-decoration-color: var(--color-green-07);
+}
+
 .d-green-underline {
   color: var(--color-white);
   font-weight: var(--ptc-font-weight-extrabold);

package/dist/collection/components/ptc-link/ptc-link.js

@@ -1,207 +1,222 @@
-import { h, Host } from '@stencil/core';
-export class PtcLink {
-  constructor() {
-    this.disabled = false;
-    this.external = false;
-    this.href = undefined;
-    this.target = '_self';
-    this.linkTitle = undefined;
-    this.theme = 'simple';
-    this.fontSize = 'medium';
-    this.fontWeight = undefined;
-    this.linkArea = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, null, h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, h("slot", null))));
-  }
-  getCssClassMap() {
-    const classOptions = ['simple', 'underline', 'nav-title', 'primary-nav-link', 'nav-title-link', 'nav-card-link', 'secondary-nav-link', 'footer-nav-link', 'copyright-link', 'product-link', 'd-green-underline', 'd-white-underline'];
-    let mainClass = this.theme;
-    if (classOptions.indexOf(mainClass) < 0) {
-      mainClass = 'simple'; // fallback to simple class if theme is unavailable
-    }
-    return {
-      ['ptc-link']: true,
-      [mainClass]: true,
-      ['disabled']: this.disabled,
-      [this.fontSize]: true,
-      [this.linkArea]: this.linkArea ? true : false,
-      [this.fontWeight]: true,
-    };
-  }
-  static get is() { return "ptc-link"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-link.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-link.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "disabled": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Disabled link"
-        },
-        "attribute": "disabled",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "external": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Rxternal link"
-        },
-        "attribute": "external",
-        "reflect": true,
-        "defaultValue": "false"
-      },
-      "href": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "href"
-        },
-        "attribute": "href",
-        "reflect": false
-      },
-      "target": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Target"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "'_self'"
-      },
-      "linkTitle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string | undefined",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Title"
-        },
-        "attribute": "link-title",
-        "reflect": false
-      },
-      "theme": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'simple' | 'underline' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'nav-card-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'product-link' | 'd-green-underline' | 'd-white-underline'",
-          "resolved": "\"copyright-link\" | \"d-green-underline\" | \"d-white-underline\" | \"footer-nav-link\" | \"nav-card-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"product-link\" | \"secondary-nav-link\" | \"simple\" | \"underline\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme"
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "'simple'"
-      },
-      "fontSize": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'small' | 'medium' | 'large' | 'medium-large'",
-          "resolved": "\"large\" | \"medium\" | \"medium-large\" | \"small\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Font Size"
-        },
-        "attribute": "font-size",
-        "reflect": false,
-        "defaultValue": "'medium'"
-      },
-      "fontWeight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'w-thin' | 'w-regular' | 'w-medium' | 'w-semibold' | 'w-bold' | 'w-extrabold' | 'w-black'",
-          "resolved": "\"w-black\" | \"w-bold\" | \"w-extrabold\" | \"w-medium\" | \"w-regular\" | \"w-semibold\" | \"w-thin\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Font Weight"
-        },
-        "attribute": "font-weight",
-        "reflect": false
-      },
-      "linkArea": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'link-area-cover-parent'",
-          "resolved": "\"link-area-cover-parent\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Optional Link Area"
-        },
-        "attribute": "link-area",
-        "reflect": false
-      }
-    };
-  }
-}
+import { h, Host } from '@stencil/core';
+export class PtcLink {
+  constructor() {
+    this.disabled = false;
+    this.external = false;
+    this.href = undefined;
+    this.target = '_self';
+    this.linkTitle = undefined;
+    this.theme = 'simple';
+    this.uppercase = false;
+    this.fontSize = 'medium';
+    this.fontWeight = undefined;
+    this.linkArea = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null, h("a", { class: classMap, href: this.href, target: this.external ? '_blank' : this.target, title: this.linkTitle }, this.theme == 'arrow' ? h("icon-asset", { type: "solid", size: "x-small", name: "arrow-right" }) : '', this.theme == 'arrow-plm' ? h("icon-asset", { type: "ptc", size: "xxx-small", name: "button-arrow-right" }) : '', h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-link']: true,
+      [this.theme]: true,
+      ['uppercase']: this.uppercase,
+      ['disabled']: this.disabled,
+      [this.fontSize]: true,
+      [this.linkArea]: this.linkArea ? true : false,
+      [this.fontWeight]: true,
+    };
+  }
+  static get is() { return "ptc-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disabled link"
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "external": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Rxternal link"
+        },
+        "attribute": "external",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "href"
+        },
+        "attribute": "href",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "linkTitle": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | undefined",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Title"
+        },
+        "attribute": "link-title",
+        "reflect": false
+      },
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'simple' | 'underline' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'nav-card-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm' | 'product-link' | 'd-green-underline' | 'd-white-underline'",
+          "resolved": "\"arrow\" | \"arrow-plm\" | \"copyright-link\" | \"d-green-underline\" | \"d-white-underline\" | \"footer-nav-link\" | \"nav-card-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"product-link\" | \"secondary-nav-link\" | \"simple\" | \"underline\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Theme"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "'simple'"
+      },
+      "uppercase": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Uppercase"
+        },
+        "attribute": "uppercase",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "fontSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'medium' | 'large' | 'medium-large'",
+          "resolved": "\"large\" | \"medium\" | \"medium-large\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Font Size"
+        },
+        "attribute": "font-size",
+        "reflect": false,
+        "defaultValue": "'medium'"
+      },
+      "fontWeight": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'w-thin' | 'w-regular' | 'w-medium' | 'w-semibold' | 'w-bold' | 'w-extrabold' | 'w-black'",
+          "resolved": "\"w-black\" | \"w-bold\" | \"w-extrabold\" | \"w-medium\" | \"w-regular\" | \"w-semibold\" | \"w-thin\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Font Weight"
+        },
+        "attribute": "font-weight",
+        "reflect": false
+      },
+      "linkArea": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'link-area-cover-parent'",
+          "resolved": "\"link-area-cover-parent\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Optional Link Area"
+        },
+        "attribute": "link-area",
+        "reflect": false
+      }
+    };
+  }
+}