@ptcwebops/ptcw-design 0.9.1 → 0.9.4

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

@@ -113,6 +113,33 @@
   top: 50%;
 }
 
+:host(.thumbnail-video-preview) .ptc-card-content-wrapper {
+  cursor: pointer;
+  position: relative;
+}
+:host(.thumbnail-video-preview) .ptc-card-content-wrapper::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: transparent;
+  z-index: 1;
+  box-shadow: var(--ptc-shadow-x-small);
+  transition: background var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+:host(.thumbnail-video-preview) .ptc-card-content-wrapper::after {
+  content: url("data:image/svg+xml,%3Csvg width='54' height='56' viewBox='0 0 54 56' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_126_10476)'%3E%3Cpath d='M42 20L12 36V4L42 20Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_126_10476' x='0' y='0' width='54' height='56' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='8'/%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_126_10476'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_126_10476' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E%0A");
+  position: absolute;
+  opacity: 1;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+
 :host(.card-video) .ptc-card-content-wrapper::after {
   top: 59.5%;
 }

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

@@ -62,8 +62,8 @@ export class PtcCardContent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-dynamic' | 'extra-tall' | 'color-outlined'",
-          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\" | \"speed-bump\"",
+          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-dynamic' | 'extra-tall' | 'color-outlined' | 'thumbnail-video-preview'",
+          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\" | \"speed-bump\" | \"thumbnail-video-preview\"",
           "references": {}
         },
         "required": false,

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

@@ -51,18 +51,18 @@ export class PtcCardPlm {
     return bottomContent.offsetHeight;
   }
   checkScreenSize() {
-    if (window.innerWidth < 768) {
-      if (this.cardType === 'extra-tall') {
+    if (this.cardType === 'extra-tall') {
+      if (window.innerWidth < 768) {
         const cardContent = this.el.querySelector('ptc-card-content');
         if (cardContent) {
           cardContent.setHeight(this.getBtmContentHeight());
         }
       }
-    }
-    else {
-      const cardContent = this.el.querySelector('ptc-card-content');
-      if (cardContent) {
-        cardContent.removeInlineHeight();
+      else {
+        const cardContent = this.el.querySelector('ptc-card-content');
+        if (cardContent) {
+          cardContent.removeInlineHeight();
+        }
       }
     }
   }

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

@@ -284,4 +284,32 @@
   height: 100%;
   inset: 0;
   z-index: 2;
+}
+
+.w-thin {
+  font-weight: var(--ptc-font-weight-thin);
+}
+
+.w-regular {
+  font-weight: var(--ptc-font-weight-regular);
+}
+
+.w-medium {
+  font-weight: var(--ptc-font-weight-medium);
+}
+
+.w-semibold {
+  font-weight: var(--ptc-font-weight-semibold);
+}
+
+.w-bold {
+  font-weight: var(--ptc-font-weight-bold);
+}
+
+.w-extrabold {
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+
+.w-black {
+  font-weight: var(--ptc-font-weight-black);
 }

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

@@ -9,6 +9,7 @@ export class PtcLink {
     this.theme = 'simple';
     this.uppercase = false;
     this.fontSize = 'medium';
+    this.fontWeight = undefined;
     this.linkArea = undefined;
   }
   render() {
@@ -22,7 +23,8 @@ export class PtcLink {
       ['uppercase']: this.uppercase,
       ['disabled']: this.disabled,
       [this.fontSize]: true,
-      [this.linkArea]: this.linkArea ? true : false
+      [this.linkArea]: this.linkArea ? true : false,
+      [this.fontWeight]: true,
     };
   }
   static get is() { return "ptc-link"; }
@@ -181,6 +183,23 @@ export class PtcLink {
         "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,

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

@@ -0,0 +1,108 @@
+:host {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  position: relative;
+}
+:host .nav-card-wrap {
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  border-radius: var(--ptc-border-radius-standard);
+  background-color: var(--color-gray-12);
+}
+@media only screen and (min-width: 1200px) {
+  :host .nav-card-wrap {
+    background-color: var(--color-gray-10);
+  }
+  :host .nav-card-wrap:hover {
+    background-color: var(--color-gray-08);
+  }
+}
+:host .nav-card-wrap h4,
+:host .nav-card-wrap p,
+:host .nav-card-wrap a {
+  color: var(--color-white);
+  margin: 0;
+  font-size: 0.75rem;
+  text-decoration: none;
+}
+:host .nav-card-wrap .media-card-wrap {
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+:host .nav-card-wrap .media-card-wrap h4 {
+  margin-bottom: 0.25rem;
+  font-weight: 800;
+  display: flex;
+  align-items: center;
+}
+:host .nav-card-wrap .media-card-wrap .card-logo {
+  padding-right: 1rem;
+}
+:host .nav-card-wrap .media-card-wrap .card-logo img {
+  width: 100%;
+  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);
+}
+@media only screen and (min-width: 1200px) {
+  :host(.cta-card) .nav-card-wrap {
+    background-color: transparent;
+  }
+}
+:host(.cta-card) .nav-card-wrap:hover {
+  background-color: var(--color-gray-08);
+}
+:host(.cta-card) .nav-card-wrap .card-content {
+  margin: auto;
+}
+:host(.cta-card) .nav-card-wrap .card-content svg {
+  vertical-align: middle;
+  margin-left: 0.375rem;
+}
+
+:host(.links-card) .nav-card-wrap {
+  padding: 1.5rem;
+  border-radius: var(--ptc-border-radius-standard);
+  background-color: transparent;
+  border: 1px solid var(--color-gray-07);
+  align-items: flex-start;
+}
+@media only screen and (min-width: 1200px) {
+  :host(.links-card) .nav-card-wrap {
+    border: 1px solid var(--color-gray-10);
+  }
+}
+: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;
+  display: inline-block;
+}
+: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-x-small);
+}
+:host(.links-card) ::slotted(ptc-link) {
+  padding: 6px 0;
+}

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

@@ -0,0 +1,208 @@
+import { Host, h } from '@stencil/core';
+export class PtcNavCard {
+  constructor() {
+    this.cardType = undefined;
+    this.cardHref = undefined;
+    this.cardHrefAlt = undefined;
+    this.target = '_self';
+    this.rel = 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.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, class: "media-card-wrap" }, this.cardLogo &&
+          h("div", { class: "card-logo" }, h("img", { src: this.cardLogo, alt: this.cardHrefAlt })), 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"
+      },
+      "cardHrefAlt": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Link URL Alt text(Optional)"
+        },
+        "attribute": "card-href-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"
+      },
+      "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
+      }];
+  }
+}

package/dist/collection/components/ptc-pricing-block/ptc-pricing-block.js

@@ -9,12 +9,12 @@ export class PtcPricingBlock {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, null, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "left-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))));
+    return (h(Host, { class: this.active ? "is-active" : "" }, h("div", { class: classMap }, h("span", { class: "left-text" }, h("slot", { name: "left-text" })), h("span", { class: "right-text" }, h("slot", { name: "right-text" })))));
   }
   getCssClassMap() {
     return {
       ['ptc-pricing-block']: true,
-      ['active']: this.active ? true : false
+      ['active']: this.active
     };
   }
   static get is() { return "ptc-pricing-block"; }
@@ -32,11 +32,11 @@ export class PtcPricingBlock {
   static get properties() {
     return {
       "active": {
-        "type": "string",
+        "type": "boolean",
         "mutable": false,
         "complexType": {
-          "original": "\"active\"",
-          "resolved": "\"active\"",
+          "original": "boolean",
+          "resolved": "boolean",
           "references": {}
         },
         "required": false,