@ptcwebops/ptcw-design 1.5.8 → 1.6.0

package/dist/collection/components/icon-asset/media/designer.svg

@@ -395,4 +395,40 @@
     <path id="rect28" d="M 0,0 H 4 V 18 H 0 Z" />
     <path id="rect30" d="m 10,0 h 4 v 18 h -4 z" />
   </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="twitter-blogs-icon">
+    <g id="Layer_2"> 
+      <g id="Layer_1-2">
+        <circle cx="12" cy="12" r="12" style="fill:#050606"></circle>
+        <path style="fill:#fff;" d="M10.07,17H9.4a1.13,1.13,0,0,0-.26,0,5.31,5.31,0,0,1-1.37-.23,6.56,6.56,0,0,1-1.48-.6,2.5,2.5,0,0,1-.39-.23.05.05,0,0,1,0-.07s0,0,.07,0l.51,0h.33c.23,0,.46,0,.68-.09a5,5,0,0,0,1.07-.35,4.76,4.76,0,0,0,.88-.5l.07-.05v0l-.34,0a2.63,2.63,0,0,1-1.3-.7,2.56,2.56,0,0,1-.6-.95c0-.11,0-.13.09-.11a2.63,2.63,0,0,0,.84,0h.07a2.67,2.67,0,0,1-.59-.23,2.56,2.56,0,0,1-.59-.45,2.53,2.53,0,0,1-.71-1.44,1.69,1.69,0,0,1,0-.33c0-.08,0-.1.1-.06a2.72,2.72,0,0,0,.62.23l.3,0h0a2.65,2.65,0,0,1-1-1.46,2.75,2.75,0,0,1-.05-.86,2.49,2.49,0,0,1,.29-1l0,0s0,0,.07,0a.86.86,0,0,1,.13.14A7.15,7.15,0,0,0,11,10c.24,0,.48.07.73.09.09,0,.11,0,.1-.1a2.22,2.22,0,0,1,0-.63A2.33,2.33,0,0,1,12,8.47a2.58,2.58,0,0,1,.56-.79A2.54,2.54,0,0,1,13.82,7c.12,0,.25,0,.38,0a5.62,5.62,0,0,1,.58,0,2,2,0,0,1,.61.17,2.48,2.48,0,0,1,.76.51.16.16,0,0,0,.16,0,5,5,0,0,0,.92-.3l.47-.23s.07-.06.11,0,0,.07,0,.11a2.78,2.78,0,0,1-.51.84,3.07,3.07,0,0,1-.38.34.33.33,0,0,1-.1.06l.11,0A5.12,5.12,0,0,0,18,8.21l.09,0s0,0,0,0a.13.13,0,0,1,0,.08,4.9,4.9,0,0,1-.77.87L17,9.46a.16.16,0,0,0-.07.14,1.55,1.55,0,0,1,0,.22,8.24,8.24,0,0,1-.07,1,7.48,7.48,0,0,1-.59,2,7.33,7.33,0,0,1-1.06,1.7,6.88,6.88,0,0,1-2,1.65,6.52,6.52,0,0,1-1.72.66,5.62,5.62,0,0,1-.82.14,4.87,4.87,0,0,1-.54,0Z"></path>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="linkedin-blogs-icon">
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <circle cx="12" cy="12" r="12" style="fill:#050606"></circle>
+        <path style="fill:#fff;" d="M12.35,10.41l.14-.18a2.21,2.21,0,0,1,.92-.62,3.23,3.23,0,0,1,2.21,0,1.74,1.74,0,0,1,1.16,1.18,3.81,3.81,0,0,1,.2,1.1c0,.4,0,.81,0,1.21v2.8c0,.13,0,.13-.13.13H15.15C15,16,15,16,15,15.89v-3.2a2.2,2.2,0,0,0-.21-1,1,1,0,0,0-1.12-.59,1.33,1.33,0,0,0-.88.42,1.72,1.72,0,0,0-.34.77,4,4,0,0,0,0,.6v2.95c0,.13,0,.13-.14.13H10.59c-.07,0-.1,0-.1-.1V9.59c0-.07,0-.1.1-.1h1.65c.07,0,.1,0,.09.09v.73A.2.2,0,0,0,12.35,10.41Z"></path>
+        <path style="fill:#fff;" d="M7.24,12.74V9.61c0-.12,0-.12.13-.12H9.09c.11,0,.11,0,.11.11v6.29c0,.11,0,.11-.11.11H7.36c-.12,0-.12,0-.12-.12Z"></path>
+        <path style="fill:#fff;" d="M7,7.22A1.21,1.21,0,0,1,8.22,6,1.23,1.23,0,0,1,9.45,7.22,1.25,1.25,0,0,1,8.22,8.45,1.23,1.23,0,0,1,7,7.22Z"></path>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="mail-blogs-icon">
+    <defs></defs>
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <circle cx="12" cy="12" r="12" style="fill:#050606"></circle>
+        <polygon points="5.77 7.5 12.06 12.55 18.11 7.5 5.77 7.5" style="fill:#fff;"></polygon>
+        <polygon points="5.54 8.57 5.54 16.5 18.46 16.4 18.46 8.44 12.05 13.75 5.54 8.57" style="fill:#fff;"></polygon>
+      </g>
+    </g>
+  </symbol>
+  <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="facebook-blogs-icon">
+    <g id="Layer_2">
+      <g id="Layer_1-2">
+        <circle style="fill:#050606" cx="12" cy="12" r="12"></circle>
+        <path style="fill:#fff;" d="M8.78,10.58v2.17H10.7V18h2.35V12.75h1.73l.34-2.17H13.05V9s.1-.54.33-.7A1.35,1.35,0,0,1,14.1,8h1.12V6.15A11.64,11.64,0,0,0,13.17,6a2.56,2.56,0,0,0-2,1.08c-.69.85-.48,3.48-.48,3.48Z"></path>
+      </g>
+    </g>
+  </symbol>
 </svg>

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

@@ -1133,7 +1133,7 @@
 :host(.related-card) .card-border {
   background: var(--color-white);
   box-shadow: var(--ptc-shadow-small);
-  border-radius: 3px;
+  border-radius: var(--ptc-border-radius-standard);
   width: 100%;
   height: auto;
   display: flex;
@@ -1159,9 +1159,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  margin-top: 24px;
+  margin-top: var(--ptc-element-spacing-06);
   background-color: var(--color-white);
-  padding: 4px 24px;
+  padding: var(--ptc-element-spacing-01) var(--ptc-element-spacing-05);
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   font-weight: var(--ptc-font-weight-bold);
@@ -1244,7 +1244,7 @@
 }
 :host(.related-card) .card-body {
   box-sizing: border-box;
-  padding: 14px var(--ptc-element-spacing-06) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-06) var(--ptc-element-spacing-07) var(--ptc-element-spacing-06);
 }
 :host(.related-card) .card-body .card-date-text {
   display: flex;

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

@@ -426,6 +426,46 @@
   margin-bottom: var(--ptc-element-spacing-06) !important;
 }
 
+.u-margin-xxxl {
+  margin: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginTop-xxxl {
+  margin-top: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginLeft-xxxl {
+  margin-left: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginRight-xxxl {
+  margin-right: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginBottom-xxxl {
+  margin-bottom: var(--ptc-element-spacing-07) !important;
+}
+
+.u-margin-4xl {
+  margin: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginTop-4xl {
+  margin-top: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginLeft-4xl {
+  margin-left: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginRight-4xl {
+  margin-right: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginBottom-4xl {
+  margin-bottom: var(--ptc-element-spacing-08) !important;
+}
+
 .u-textAlign-ctr {
   text-align: center !important;
 }
@@ -759,6 +799,10 @@
   align-items: flex-end;
 }
 
+.flex-align-items-center {
+  align-items: center;
+}
+
 .u-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -791,6 +835,10 @@
   justify-self: stretch;
 }
 
+.u-flex-justify-center {
+  justify-content: center;
+}
+
 .embed-responsive {
   position: relative;
   display: block;

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

@@ -61,7 +61,7 @@ export class PtcJumbotron {
       default:
         mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
     }
-    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 9999}" }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": this.jumbotronType === 'text' && this.isMobile ? 'w-7' : 'w-4', "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), this.hasPopupVideo ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
+    return (h(Host, { class: classMap }, h("div", { class: "parent" }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: "ptc-container content-layout" }, h("max-width-container", { "max-width": "578", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-para", { "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": this.jumbotronType === 'text' && this.isMobile ? 'w-7' : 'w-4', "para-margin": "margin-bottom-6", "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left' }, h("ptc-tooltip", { "text-lines": "8", description: this.subTitle, position: "right", styles: `.ellipsis-by-line-boxing{color: ${this.contentColor};}` })), h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))), this.hasPopupVideo ? h("slot", { name: "video" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc }))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null)))));
   }
   getCssClassMap() {
     return {

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

@@ -99,7 +99,13 @@
   font-size: var(--ptc-font-size-medium);
 }
 
-.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 {
+.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;
 }
@@ -278,6 +284,22 @@
   z-index: 2;
 }
 
+.standard-link, .blog-link {
+  font-weight: 800;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+  color: var(--color-gray-10);
+  text-decoration: underline;
+  text-decoration-thickness: 2px;
+  text-decoration-color: var(--color-green-06);
+  text-underline-offset: 5px;
+  transition: text-decoration-color var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+.standard-link:hover, .blog-link:hover {
+  color: var(--color-green-06);
+}
+
 .w-thin {
   font-weight: var(--ptc-font-weight-thin);
 }

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

@@ -138,8 +138,8 @@ export class PtcLink {
         "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' | 'global'",
-          "resolved": "\"copyright-link\" | \"d-green-underline\" | \"d-white-underline\" | \"footer-nav-link\" | \"global\" | \"nav-card-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"product-link\" | \"secondary-nav-link\" | \"simple\" | \"underline\"",
+          "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' | 'global' | 'standard-link'",
+          "resolved": "\"copyright-link\" | \"d-green-underline\" | \"d-white-underline\" | \"footer-nav-link\" | \"global\" | \"nav-card-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"product-link\" | \"secondary-nav-link\" | \"simple\" | \"standard-link\" | \"underline\"",
           "references": {}
         },
         "required": false,

package/dist/collection/components/ptc-pricing-tabs/ptc-pricing-tabs.css

@@ -371,6 +371,46 @@
   margin-bottom: var(--ptc-element-spacing-06) !important;
 }
 
+.u-margin-xxxl {
+  margin: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginTop-xxxl {
+  margin-top: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginLeft-xxxl {
+  margin-left: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginRight-xxxl {
+  margin-right: var(--ptc-element-spacing-07) !important;
+}
+
+.u-marginBottom-xxxl {
+  margin-bottom: var(--ptc-element-spacing-07) !important;
+}
+
+.u-margin-4xl {
+  margin: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginTop-4xl {
+  margin-top: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginLeft-4xl {
+  margin-left: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginRight-4xl {
+  margin-right: var(--ptc-element-spacing-08) !important;
+}
+
+.u-marginBottom-4xl {
+  margin-bottom: var(--ptc-element-spacing-08) !important;
+}
+
 .u-textAlign-ctr {
   text-align: center !important;
 }
@@ -704,6 +744,10 @@
   align-items: flex-end;
 }
 
+.flex-align-items-center {
+  align-items: center;
+}
+
 .u-flex-nowrap {
   flex-wrap: nowrap;
 }
@@ -736,6 +780,10 @@
   justify-self: stretch;
 }
 
+.u-flex-justify-center {
+  justify-content: center;
+}
+
 .embed-responsive {
   position: relative;
   display: block;

package/dist/collection/components/ptc-progress-bar/ptc-progress-bar.css

@@ -0,0 +1,13 @@
+:host {
+  display: block;
+}
+:host .progress-bar-container {
+  height: 5px;
+  background-color: linear-gradient(272deg, #3b4550, #1a1a1a);
+  width: 100%;
+}
+:host .progress-bar {
+  height: 100%;
+  background-image: linear-gradient(270deg, #4795cd, #33a13c);
+  transition: width 0.3s ease-in-out;
+}

package/dist/collection/components/ptc-progress-bar/ptc-progress-bar.js

@@ -0,0 +1,42 @@
+import { Host, h } from '@stencil/core';
+export class PtcProgressBar {
+  constructor() {
+    this.scrollPercentage = 0;
+  }
+  handleScroll() {
+    const scrollTop = document.documentElement.scrollTop;
+    const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+    console.log('scrollTop: ' + scrollTop + '; scorllHeight: ' + scrollHeight);
+    const percentage = (scrollTop / scrollHeight) * 100;
+    this.scrollPercentage = percentage;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "progress-bar-container" }, h("div", { class: "progress-bar", style: { width: `${this.scrollPercentage}%` } }))));
+  }
+  static get is() { return "ptc-progress-bar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-progress-bar.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-progress-bar.css"]
+    };
+  }
+  static get states() {
+    return {
+      "scrollPercentage": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "scroll",
+        "method": "handleScroll",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
+}

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

@@ -0,0 +1,64 @@
+:host {
+  display: block;
+}
+
+:host(.sim-card) {
+  display: block;
+}
+:host(.sim-card) .card-link {
+  display: flex;
+  flex-direction: column;
+  outline: none;
+  text-decoration: none;
+}
+:host(.sim-card) .card-link .card-heading {
+  display: block;
+  background-color: #3b4550;
+  clip-path: polygon(0% 0%, calc(100% - 35px) 0%, 100% 45%, 100% 100%, 0% 100%);
+}
+:host(.sim-card) .card-link .card-heading h3 {
+  color: #fff;
+  font-family: Rajdhani, sans-serif;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 2.17;
+  margin: 15px 0px 15px 15px;
+  position: relative;
+  display: inline-block;
+}
+:host(.sim-card) .card-link .card-heading h3::before {
+  display: block;
+  position: absolute;
+  content: "";
+  width: 30px;
+  border-bottom: 2px solid var(--color-green-14);
+  bottom: 1px;
+  transition: width var(--ptc-transition-medium) var(--ptc-ease-inout);
+}
+:host(.sim-card) .card-link .card-body {
+  background: #fff;
+  box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);
+  padding: 20px 15px;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+:host(.sim-card) .card-link:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.sim-card) .card-link:hover .card-heading {
+  display: block;
+}
+:host(.sim-card) .card-link:hover .card-heading h3::before {
+  width: 100%;
+}
+:host(.sim-card) .card-link:hover .card-body {
+  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+}
+:host(.sim-card) .card-link:hover ::slotted([slot=slot-after-heading]) {
+  margin-left: var(--ptc-element-spacing-04);
+}
+:host(.sim-card) ::slotted([slot=slot-after-heading]) {
+  margin-left: var(--ptc-element-spacing-01);
+  transition: margin-left var(--ptc-transition-medium) var(--ptc-ease-inout);
+}

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

@@ -0,0 +1,181 @@
+import { Host, h } from '@stencil/core';
+export class PtcSlitCard {
+  constructor() {
+    this.cardType = 'sim-card';
+    this.cardHref = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.heading = undefined;
+    this.content = undefined;
+    this.styles = undefined;
+    this.cardImage = undefined;
+  }
+  render() {
+    const Tag = !!this.cardHref ? 'a' : 'div';
+    return (h(Host, Object.assign({}, (!!this.cardType ? { class: this.cardType } : {})), h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.target && !!this.cardHref ? { target: this.target } : {}), (!!this.rel && !!this.cardHref ? { rel: this.rel } : {}), (!!this.cardImage ? { dataImage: this.cardImage } : {}), { class: "card-link" }), h("slot", { name: "slot-before-heading" }), !!this.heading
+      ? [
+        h("div", { class: "card-heading" }, h("h3", { class: "ptc-h3" }, this.heading), h("slot", { name: "slot-after-heading" }))
+      ]
+      : null, !!this.content
+      ? [
+        h("div", { class: "card-body" }, h("ptc-para", { "font-size": "xxx-small", "font-weight": "w-6", "para-margin": "margin-flush", "para-style": "main", "para-line-h": "line-height-dense" }, this.content))
+      ]
+      : null)));
+  }
+  static get is() { return "ptc-slit-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-slit-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-slit-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Card Type\r\nSpecify Card Type, default to sim card"
+        },
+        "attribute": "card-type",
+        "reflect": false,
+        "defaultValue": "'sim-card'"
+      },
+      "cardHref": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card Link URL (Optional)"
+        },
+        "attribute": "card-href",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "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": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Link card rel"
+        },
+        "attribute": "rel",
+        "reflect": false,
+        "defaultValue": "undefined"
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card heading"
+        },
+        "attribute": "heading",
+        "reflect": false
+      },
+      "content": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Card heading"
+        },
+        "attribute": "content",
+        "reflect": false
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS styles"
+        },
+        "attribute": "styles",
+        "reflect": false
+      },
+      "cardImage": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "(optional) Injected CSS styles"
+        },
+        "attribute": "card-image",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/ptc-social-share/ptc-social-share.js

@@ -14,7 +14,7 @@ export class PtcSocialShare {
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null)));
+    return (h(Host, { class: classMap }, h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() }, this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-mail" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-linkedin" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-twitter" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "plm-fb" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "mail-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "linkedin-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "twitter-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'blog-facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "large", name: "facebook-blogs-icon" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null, this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "large", name: "share-square" }, (this.isHover ? { color: this.iconHoverColor } : { color: this.iconColor }))) : null)));
   }
   getCssClassMap() {
     return {
@@ -26,16 +26,16 @@ export class PtcSocialShare {
     this.isHover = !this.isHover;
   }
   share() {
-    if (this.shareType == 'twitter') {
+    if (this.shareType == 'twitter' || this.shareType == "blog-twitter") {
       window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
     }
-    if (this.shareType == 'facebook') {
+    if (this.shareType == 'facebook' || this.shareType == "blog-facebook") {
       window.open(`https://www.facebook.com/sharer/sharer.php?u=${this.url}`);
     }
-    if (this.shareType == 'linkedin') {
+    if (this.shareType == 'linkedin' || this.shareType == "blog-linkedin") {
       window.open(`https://www.linkedin.com/shareArticle?mini=true&url=${this.url}&title=${this.shareTitle}&summary=${this.text}&source=${this.source}`);
     }
-    if (this.shareType == 'mail') {
+    if (this.shareType == 'mail' || this.shareType == "blog-mail") {
       window.open(`mailto:${this.recipient}?subject=${this.text}&body=${this.url}`);
     }
     if (this.shareType == 'share-api') {
@@ -91,8 +91,8 @@ export class PtcSocialShare {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "'mail' | 'twitter' | 'linkedin' | 'facebook' | 'share-api'",
-          "resolved": "\"facebook\" | \"linkedin\" | \"mail\" | \"share-api\" | \"twitter\"",
+          "original": "'mail' | 'twitter' | 'linkedin' | 'facebook' | 'share-api' | 'blog-mail' | 'blog-twitter' | 'blog-linkedin' | 'blog-facebook'",
+          "resolved": "\"blog-facebook\" | \"blog-linkedin\" | \"blog-mail\" | \"blog-twitter\" | \"facebook\" | \"linkedin\" | \"mail\" | \"share-api\" | \"twitter\"",
           "references": {}
         },
         "required": false,

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

@@ -47,6 +47,12 @@
   color: var(--color-white);
 }
 
+:host(.blog-tag) span {
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-densest);
+  color: var(--color-gray-10);
+}
+
 :host(.inline) span {
   display: inline;
 }
@@ -65,4 +71,32 @@
 
 :host(.primary-grey) span {
   color: var(--color-gray-10);
+}
+
+:host(.w-3) span {
+  font-weight: var(--ptc-font-weight-thin);
+}
+
+:host(.w-4) span {
+  font-weight: var(--ptc-font-weight-regular);
+}
+
+:host(.w-5) span {
+  font-weight: var(--ptc-font-weight-medium);
+}
+
+:host(.w-6) span {
+  font-weight: var(--ptc-font-weight-semibold);
+}
+
+:host(.w-7) span {
+  font-weight: var(--ptc-font-weight-bold);
+}
+
+:host(.w-8) span {
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+
+:host(.w-9) span {
+  font-weight: var(--ptc-font-weight-black);
 }