@ptcwebops/ptcw-design 1.1.6 → 1.1.8

package/dist/collection/components/ptc-nav-card/ptc-nav-card.css

@@ -11,6 +11,9 @@
   border-radius: var(--ptc-border-radius-standard);
   background-color: var(--color-gray-12);
 }
+:host .nav-card-wrap:hover {
+  background-color: var(--color-gray-08);
+}
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap {
     background-color: var(--color-gray-10);
@@ -27,15 +30,20 @@
   text-decoration: none;
 }
 :host .nav-card-wrap .media-card-wrap {
-  padding: 1rem;
+  padding: 1rem 1.5rem 1.125rem 1.5rem;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
 }
+@media only screen and (min-width: 1200px) {
+  :host .nav-card-wrap .media-card-wrap {
+    padding: 1rem;
+  }
+}
 :host .nav-card-wrap .media-card-wrap h4 {
   margin-bottom: 0.25rem;
-  font-weight: 600;
+  font-weight: 800;
   display: flex;
   align-items: center;
   font-size: var(--ptc-font-size-medium);
@@ -44,7 +52,6 @@
 @media only screen and (min-width: 1200px) {
   :host .nav-card-wrap .media-card-wrap h4 {
     font-size: var(--ptc-font-size-xxx-small);
-    font-weight: 800;
   }
 }
 :host .nav-card-wrap .media-card-wrap p {
@@ -60,17 +67,25 @@
 }
 :host .nav-card-wrap .media-card-wrap .card-logo img {
   width: 100%;
-  max-width: 1.5rem;
-  min-width: 1.5rem;
+  max-width: 2rem;
+  min-width: 2rem;
+}
+@media only screen and (min-width: 1200px) {
+  :host .nav-card-wrap .media-card-wrap .card-logo img {
+    max-width: 1.5rem;
+    min-width: 1.5rem;
+  }
 }
 
 :host(.cta-card) .nav-card-wrap {
   border: 1px solid var(--color-gray-10);
   border-radius: var(--ptc-border-radius-standard);
   background-color: var(--color-gray-09);
+  min-height: 99px;
 }
 @media only screen and (min-width: 1200px) {
   :host(.cta-card) .nav-card-wrap {
+    min-height: auto;
     background-color: transparent;
   }
 }
@@ -80,63 +95,62 @@
 :host(.cta-card) .nav-card-wrap .card-content {
   margin: auto;
 }
+:host(.cta-card) .nav-card-wrap .card-content h4 {
+  margin: 0;
+}
 :host(.cta-card) .nav-card-wrap .card-content svg {
   vertical-align: middle;
   margin-left: 0.375rem;
 }
 
 :host(.links-card) .nav-card-wrap {
-  padding: 2rem 0rem 0.75rem 0rem;
-  border-radius: var(--ptc-border-radius-standard);
   background-color: transparent;
-  border: 1px solid var(--color-gray-07);
-  border-left: none;
-  border-right: none;
-  border-bottom: none;
-  border-radius: 0;
   align-items: flex-start;
-}
-@media only screen and (min-width: 768px) {
-  :host(.links-card) .nav-card-wrap {
-    padding: 1.5rem;
-    border: 1px solid var(--color-gray-07);
-    border-radius: var(--ptc-border-radius-standard);
-  }
+  padding: 1rem 1.5rem 1.5rem 1.5rem;
+  border-bottom: 1px solid var(--color-gray-07);
+  border-radius: 0;
+  margin: 0 -1.5rem;
 }
 @media only screen and (min-width: 1200px) {
   :host(.links-card) .nav-card-wrap {
+    margin: 0;
+    padding: 1.5rem;
     border: 1px solid var(--color-gray-10);
+    border-radius: var(--ptc-border-radius-standard);
   }
 }
 :host(.links-card) .nav-card-wrap:hover {
   background-color: transparent;
 }
 :host(.links-card) .nav-card-wrap h3 {
-  margin: 0 0 0.75rem 0;
-  border-bottom: 1.5px solid transparent;
+  margin: 0 0 8px 0;
   display: inline-block;
   font-weight: 800;
+  font-size: 20px;
+  color: var(--color-white);
+}
+@media only screen and (min-width: 1200px) {
+  :host(.links-card) .nav-card-wrap h3 {
+    font-size: 15px;
+    margin: 0 0 10px 0;
+  }
 }
 :host(.links-card) .nav-card-wrap h3 svg {
   margin-left: 0.375rem;
-  display: none;
   vertical-align: middle;
 }
-:host(.links-card) .nav-card-wrap h3:hover {
-  border-color: var(--color-green-06);
-}
-:host(.links-card) .nav-card-wrap h3:hover svg {
-  display: inline-block;
-}
 :host(.links-card) .nav-card-wrap h3 a {
-  font-size: var(--ptc-font-size-medium);
+  border-bottom: 1.5px solid transparent;
 }
-@media only screen and (min-width: 1200px) {
-  :host(.links-card) .nav-card-wrap h3 a {
-    font-size: var(--ptc-font-size-x-small);
-  }
+:host(.links-card) .nav-card-wrap h3 a:hover {
+  border-color: var(--color-green-06);
 }
 :host(.links-card) ::slotted(ptc-link) {
-  padding: 6px 0;
+  padding: 8px 0;
   line-height: 14px;
+}
+@media only screen and (min-width: 1200px) {
+  :host(.links-card) ::slotted(ptc-link) {
+    padding: 6px 0;
+  }
 }

package/dist/collection/components/ptc-nav-card/ptc-nav-card.js

@@ -1,227 +1,228 @@
-import { Host, h } from '@stencil/core';
-export class PtcNavCard {
-  constructor() {
-    this.cardType = undefined;
-    this.cardHref = undefined;
-    this.logoAlt = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.linkTitle = undefined;
-    this.cardLogo = undefined;
-    this.heading = undefined;
-    this.description = undefined;
-    this.windowSize = 'mobile';
-  }
-  handleResize() {
-    if (window.innerWidth < 992) {
-      this.windowSize = 'mobile';
-    }
-    else {
-      this.windowSize = 'desktop';
-    }
-  }
-  componentWillLoad() {
-    this.handleResize();
-  }
-  render() {
-    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
-      h("div", { class: "links-card-wrap" }, h("h3", null, h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))), h("slot", null))
-      :
-        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
-          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.windowSize === 'mobile'
-          ? this.heading
-          : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.heading, position: "bottom" }, this.heading), this.cardType == "cta-card" &&
-          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
-          h("p", null, this.windowSize === 'mobile'
-            ? this.description
-            : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.description, position: "bottom" }, this.description)))))));
-  }
-  static get is() { return "ptc-nav-card"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-nav-card.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-nav-card.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cardType": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "'media-card' | 'links-card' | 'cta-card'",
-          "resolved": "\"cta-card\" | \"links-card\" | \"media-card\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Card Type\r\nSpecify Card Type"
-        },
-        "attribute": "card-type",
-        "reflect": false
-      },
-      "cardHref": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card Link URL (Optional)"
-        },
-        "attribute": "card-href",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "logoAlt": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card Link URL Alt text(Optional)"
-        },
-        "attribute": "logo-alt",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "target": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Link card target"
-        },
-        "attribute": "target",
-        "reflect": false,
-        "defaultValue": "'_self'"
-      },
-      "rel": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) Link card rel"
-        },
-        "attribute": "rel",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "linkTitle": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "(optional) title"
-        },
-        "attribute": "link-title",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "cardLogo": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "If this card has Image"
-        },
-        "attribute": "card-logo",
-        "reflect": false
-      },
-      "heading": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card heading"
-        },
-        "attribute": "heading",
-        "reflect": false
-      },
-      "description": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Card description"
-        },
-        "attribute": "description",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "windowSize": {}
-    };
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "handleResize",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcNavCard {
+  constructor() {
+    this.cardType = undefined;
+    this.cardHref = undefined;
+    this.logoAlt = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.linkTitle = undefined;
+    this.cardLogo = undefined;
+    this.heading = undefined;
+    this.description = undefined;
+    this.windowSize = 'mobile';
+  }
+  handleResize() {
+    if (window.innerWidth < 992) {
+      this.windowSize = 'mobile';
+    }
+    else {
+      this.windowSize = 'desktop';
+    }
+  }
+  componentWillLoad() {
+    this.handleResize();
+  }
+  render() {
+    return (h(Host, { class: this.cardType }, h("div", { class: "nav-card-wrap" }, this.cardType == 'links-card' ?
+      h("div", { class: "links-card-wrap" }, h("h3", null, (this.cardHref && !(this.cardHref.startsWith('#'))) ?
+        (h("a", { href: this.cardHref, title: this.linkTitle }, this.heading, h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" })))) : (this.heading)), h("slot", null))
+      :
+        h("a", { href: this.cardHref, title: this.linkTitle, class: "media-card-wrap" }, this.cardLogo &&
+          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.logoAlt })), h("div", { class: "card-content" }, h("h4", null, this.windowSize === 'mobile'
+          ? this.heading
+          : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.heading, position: "bottom" }, this.heading), this.cardType == "cta-card" &&
+          h("svg", { width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M6.3125 0.3125L6.3125 3.66515L-1.46549e-07 3.66515L-2.63246e-07 6.33487L6.3125 6.33487L6.3125 9.6875L11.25 4.96896L6.3125 0.3125Z", fill: "#3DAB49" }))), this.description &&
+          h("p", null, this.windowSize === 'mobile'
+            ? this.description
+            : h("ptc-tooltip", { "text-display": "inline", "text-lines": "2", "z-index": "z-2", description: this.description, position: "bottom" }, this.description)))))));
+  }
+  static get is() { return "ptc-nav-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-nav-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-nav-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardType": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "'media-card' | 'links-card' | 'cta-card'",
+          "resolved": "\"cta-card\" | \"links-card\" | \"media-card\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card Type\nSpecify Card Type"
+        },
+        "attribute": "card-type",
+        "reflect": false
+      },
+      "cardHref": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Link URL (Optional)"
+        },
+        "attribute": "card-href",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "logoAlt": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Link URL Alt text(Optional)"
+        },
+        "attribute": "logo-alt",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "target": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Link card target"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'_self'"
+      },
+      "rel": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Link card rel"
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "linkTitle": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) title"
+        },
+        "attribute": "link-title",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "cardLogo": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "If this card has Image"
+        },
+        "attribute": "card-logo",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card heading"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "description": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card description"
+        },
+        "attribute": "description",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "windowSize": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}