@ptcwebops/ptcw-design 0.3.6 → 0.3.8

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

@@ -16,4 +16,8 @@
 
 :host(.white) span {
   color: var(--color-white);
+}
+
+:host(.date-m-top) {
+  margin-top: 4px;
 }

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

@@ -7,7 +7,7 @@ export class PtcDate {
     this.year = 1900;
     /**
      * Month
-     * An integer between 0 (January) and 11 (December) representing the month.If omitted, defaults to 0.
+     * An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.
      */
     this.month = 0;
     /**
@@ -19,7 +19,7 @@ export class PtcDate {
      * Country
      * examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES
      */
-    this.country = "en-US";
+    this.country = 'en-US';
     /**
      * Date Font Size
      */
@@ -35,16 +35,16 @@ export class PtcDate {
   getCssClassMap() {
     return {
       [this.dateColor]: !!this.dateColor ? true : false,
-      [this.dataSize]: !!this.dataSize ? true : false
+      [this.dataSize]: !!this.dataSize ? true : false,
     };
   }
   getDate() {
     if (this.dateString) {
-      let newDate = new Date(this.dateString.replace(/-/g, '\/'));
+      let newDate = new Date(this.dateString.replace(/-/g, '/'));
       return newDate;
     }
     else {
-      return new Date(this.year, this.month, this.day);
+      return new Date(this.year, this.month - 1, this.day);
     }
   }
   static get is() { return "ptc-date"; }
@@ -86,7 +86,7 @@ export class PtcDate {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Month\nAn integer between 0 (January) and 11 (December) representing the month.If omitted, defaults to 0."
+        "text": "Month\nAn integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0."
       },
       "attribute": "month",
       "reflect": false,
@@ -126,7 +126,7 @@ export class PtcDate {
       },
       "attribute": "country",
       "reflect": false,
-      "defaultValue": "\"en-US\""
+      "defaultValue": "'en-US'"
     },
     "dateString": {
       "type": "string",

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

@@ -206,7 +206,6 @@
 .arrow-plm {
   color: var(--color-white);
   font-weight: var(--ptc-font-weight-extrabold);
-  font-size: var(--ptc-font-size-medium);
   line-height: var(--ptc-line-height-19);
   text-decoration: underline;
   text-decoration-thickness: 1px;

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

@@ -16,4 +16,10 @@
 
 :host(.ptc-social-share) {
   cursor: pointer;
+}
+
+@media screen and (min-width: 1200px) {
+  :host(.ptc-social-m-left) {
+    margin-left: 19px;
+  }
 }

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

@@ -1,7 +1,7 @@
-import { Component, Host, h, Prop, Element } from '@stencil/core';
+import { Component, Host, h, Prop, Element, State } from '@stencil/core';
 export class PtcSocialShare {
   constructor() {
-    this.display = "inline-block";
+    this.display = 'inline-block';
     this.shareType = 'twitter';
     /**
      * Optional - source for linkedin
@@ -12,23 +12,30 @@ export class PtcSocialShare {
      * If you want to use mail share, you need to use this property
      */
     this.recipient = '';
+    /**
+     * is hover or not
+     */
+    this.isHover = false;
   }
   render() {
     const classMap = this.getCssClassMap();
     return (h(Host, { class: classMap },
-      h("div", { onClick: () => this.share() },
-        this.shareType == 'mail' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-mail", color: "white" }) : null,
-        this.shareType == 'linkedin' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-linkedin", color: "white" }) : null,
-        this.shareType == 'twitter' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-twitter", color: "white" }) : null,
-        this.shareType == 'facebook' ? h("icon-asset", { type: "ptc", size: "x-large", name: "plm-fb", color: "white" }) : null,
-        this.shareType == 'share-api' ? h("icon-asset", { type: "solid", size: "x-large", name: "share-square", color: "white" }) : null)));
+      h("div", { onClick: () => this.share(), onMouseEnter: () => this.hoverToggle(), onMouseLeave: () => this.hoverToggle() },
+        this.shareType == 'mail' ? h("icon-asset", Object.assign({ type: "ptc", size: "x-large", name: "plm-mail" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
+        this.shareType == 'linkedin' ? h("icon-asset", Object.assign({ type: "ptc", size: "x-large", name: "plm-linkedin" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
+        this.shareType == 'twitter' ? h("icon-asset", Object.assign({ type: "ptc", size: "x-large", name: "plm-twitter" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
+        this.shareType == 'facebook' ? h("icon-asset", Object.assign({ type: "ptc", size: "x-large", name: "plm-fb" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null,
+        this.shareType == 'share-api' ? h("icon-asset", Object.assign({ type: "solid", size: "x-large", name: "share-square" }, (this.isHover ? { color: 'gray' } : { color: 'white' }))) : null)));
   }
   getCssClassMap() {
     return {
       ['ptc-social-share']: true,
-      [this.display]: true
+      [this.display]: true,
     };
   }
+  hoverToggle() {
+    this.isHover = !this.isHover;
+  }
   share() {
     if (this.shareType == 'twitter') {
       window.open(`https://twitter.com/share?text=${this.text}&url=${this.url}`);
@@ -84,7 +91,7 @@ export class PtcSocialShare {
       },
       "attribute": "display",
       "reflect": false,
-      "defaultValue": "\"inline-block\""
+      "defaultValue": "'inline-block'"
     },
     "shareType": {
       "type": "string",
@@ -192,5 +199,8 @@ export class PtcSocialShare {
       "defaultValue": "''"
     }
   }; }
+  static get states() { return {
+    "isHover": {}
+  }; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.css

@@ -1,8 +1,23 @@
 :host {
-  display: block;
   cursor: pointer;
 }
 
+:host(.block) {
+  display: block;
+}
+
+:host(.inline) {
+  display: inline;
+}
+
+:host(.inline-block) {
+  display: inline-block;
+}
+
+:host(.flex) {
+  display: flex;
+}
+
 .svg-close svg .cls-1,
 .svg-close svg .cls-2 {
   fill: none;
@@ -74,4 +89,17 @@
 
 .svg-close.svg-close-white .cls-1 {
   stroke: #fff;
+}
+
+.slider-left,
+.slider-right {
+  transition: all var(--ptc-transition-medium) var(--ptc-standard-ease);
+}
+.slider-left svg .arrow,
+.slider-right svg .arrow {
+  fill: var(--color-primary-grey);
+}
+.slider-left:hover svg .arrow,
+.slider-right:hover svg .arrow {
+  fill: var(--color-green-06);
 }

package/dist/collection/components/ptc-svg-btn/ptc-svg-btn.js

@@ -1,8 +1,25 @@
 import { Component, Host, h, Prop } from '@stencil/core';
 import closeSvg from '../../media/svg-imgs/close.svg';
+import arrowSvgLeft from '../../media/svg-imgs/slider-arrow-left.svg';
+import arrowSvgRight from '../../media/svg-imgs/slider-arrow-right.svg';
 export class PtcSvgBtn {
+  constructor() {
+    /**
+     * Display
+     */
+    this.display = 'block';
+  }
   render() {
-    return (h(Host, null, !!this.svgName && this.svgName === 'close' ? h("div", { class: 'svg-close', innerHTML: closeSvg }) : null));
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      !!this.svgName && this.svgName === 'close' ? h("div", { class: 'svg-close', innerHTML: closeSvg }) : null,
+      !!this.svgName && this.svgName === 'slider-left' ? h("div", { class: 'slider-left', innerHTML: arrowSvgLeft }) : null,
+      !!this.svgName && this.svgName === 'slider-right' ? h("div", { class: 'slider-right', innerHTML: arrowSvgRight }) : null));
+  }
+  getCssClassMap() {
+    return {
+      [this.display]: true
+    };
   }
   static get is() { return "ptc-svg-btn"; }
   static get encapsulation() { return "shadow"; }
@@ -25,10 +42,28 @@ export class PtcSvgBtn {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Options: \"close\", \"slider-left\", \"slider-right\""
       },
       "attribute": "svg-name",
       "reflect": false
+    },
+    "display": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'block' | 'inline' | 'inline-block' | 'flex'",
+        "resolved": "\"block\" | \"flex\" | \"inline\" | \"inline-block\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display"
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "'block'"
     }
   }; }
 }

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

@@ -86,23 +86,6 @@ div.is-plm-hub h3 {
   margin-block-end: 0em;
   margin-inline-start: 0px;
   margin-inline-end: 0px;
-}
-div.is-plm-hub h1 {
-  font-weight: var(--ptc-font-weight-extrabold);
-  font-size: 50px;
-  line-height: 59px;
-  color: var(--color-white);
-}
-div.is-plm-hub h2 {
-  font-weight: var(--ptc-font-weight-extrabold);
-  font-size: var(--ptc-font-size-x-large);
-  line-height: 28px;
-  color: var(--color-white);
-}
-div.is-plm-hub h3 {
-  font-weight: var(--ptc-font-weight-extrabold);
-  font-size: var(--ptc-font-size-large);
-  line-height: 23px;
   color: var(--color-white);
 }
 div.margin-flush {
@@ -111,33 +94,43 @@ div.margin-flush {
 }
 div.margin-top-2 {
   margin-top: var(--ptc-element-spacing-02);
+  margin-bottom: 0;
 }
 div.margin-top-3 {
   margin-top: var(--ptc-element-spacing-03);
+  margin-bottom: 0;
 }
 div.margin-top-4 {
   margin-top: var(--ptc-element-spacing-04);
+  margin-bottom: 0;
 }
 div.margin-top-5 {
   margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: 0;
 }
 div.margin-top-6 {
   margin-top: var(--ptc-element-spacing-06);
+  margin-bottom: 0;
 }
 div.margin-bottom-2 {
   margin-bottom: var(--ptc-element-spacing-02);
+  margin-top: 0;
 }
 div.margin-bottom-3 {
   margin-bottom: var(--ptc-element-spacing-03);
+  margin-top: 0;
 }
 div.margin-bottom-4 {
   margin-bottom: var(--ptc-element-spacing-04);
+  margin-top: 0;
 }
 div.margin-bottom-5 {
   margin-bottom: var(--ptc-element-spacing-05);
+  margin-top: 0;
 }
 div.margin-bottom-6 {
   margin-bottom: var(--ptc-element-spacing-06);
+  margin-top: 0;
 }
 div.margin-2 {
   margin-top: var(--ptc-element-spacing-02);
@@ -194,4 +187,46 @@ div.w-8 h1, div.w-8 h2, div.w-8 h3 {
 }
 div.w-9 h1, div.w-9 h2, div.w-9 h3 {
   font-weight: var(--ptc-font-weight-black);
+}
+div.xx-small h1, div.xx-small h2, div.xx-small h3 {
+  font-size: var(--ptc-font-size-xx-small);
+}
+div.x-small h1, div.x-small h2, div.x-small h3 {
+  font-size: var(--ptc-font-size-x-small);
+}
+div.small h1, div.small h2, div.small h3 {
+  font-size: var(--ptc-font-size-small);
+}
+div.medium h1, div.medium h2, div.medium h3 {
+  font-size: var(--ptc-font-size-medium);
+}
+div.large h1, div.large h2, div.large h3 {
+  font-size: var(--ptc-font-size-large);
+}
+div.x-large h1, div.x-large h2, div.x-large h3 {
+  font-size: var(--ptc-font-size-x-large);
+}
+div.xx-large h1, div.xx-large h2, div.xx-large h3 {
+  font-size: var(--ptc-font-size-xx-large);
+}
+div.xxx-large h1, div.xxx-large h2, div.xxx-large h3 {
+  font-size: var(--ptc-font-size-xxx-large);
+}
+div.xxxx-large h1, div.xxxx-large h2, div.xxxx-large h3 {
+  font-size: var(--ptc-font-size-xxxx-large);
+}
+div.font-size-15 h1, div.font-size-15 h2, div.font-size-15 h3 {
+  font-size: 15px;
+}
+div.font-size-50 h1, div.font-size-50 h2, div.font-size-50 h3 {
+  font-size: 50px;
+}
+div.lh-23 {
+  line-height: 23px;
+}
+div.lh-28 {
+  line-height: 28px;
+}
+div.lh-59 {
+  line-height: 59px;
 }

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

@@ -43,7 +43,9 @@ export class PtcTitle {
       [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
       [this.titleMargin]: !!this.titleMargin ? true : false,
       [this.titleShadow]: !!this.titleShadow ? true : false,
-      [this.titleWeight]: !!this.titleWeight ? true : false
+      [this.titleWeight]: !!this.titleWeight ? true : false,
+      [this.titleSize]: !!this.titleSize ? true : false,
+      [this.titleLHeight]: !!this.titleLHeight ? true : false
     };
   }
   static get is() { return "ptc-title"; }
@@ -173,10 +175,44 @@ export class PtcTitle {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Title weight"
       },
       "attribute": "title-weight",
       "reflect": false
+    },
+    "titleSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'xxx-large' | 'xxxx-large' | 'font-size-15' | 'font-size-50'",
+        "resolved": "\"font-size-15\" | \"font-size-50\" | \"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xx-small\" | \"xxx-large\" | \"xxxx-large\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title size"
+      },
+      "attribute": "title-size",
+      "reflect": false
+    },
+    "titleLHeight": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'lh-59' | 'lh-28' | 'lh-23'",
+        "resolved": "\"lh-23\" | \"lh-28\" | \"lh-59\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title line height"
+      },
+      "attribute": "title-l-height",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/media/svg-imgs/slider-arrow-left.svg

@@ -0,0 +1,18 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_37)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M23.1444 16L23.1444 20.5762L31 20.5762L31 23.4239L23.1444 23.4239L23.1444 28L17 21.9669L23.1444 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_37" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix 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"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_37"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_37" result="shape"/>
+</filter>
+</defs>
+</svg>

package/dist/collection/media/svg-imgs/slider-arrow-right.svg

@@ -0,0 +1,18 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_494_34)">
+<circle cx="24" cy="22" r="20" fill="white"/>
+<path d="M24.8556 16L24.8556 20.5762L17 20.5762L17 23.4239L24.8556 23.4239L24.8556 28L31 21.9669L24.8556 16Z" class="arrow"/>
+</g>
+<defs>
+<filter id="filter0_d_494_34" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix 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"/>
+<feOffset dy="2"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_494_34"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_494_34" result="shape"/>
+</filter>
+</defs>
+</svg>