@ptcwebops/ptcw-design 0.7.0 → 0.7.2

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.css

@@ -0,0 +1,96 @@
+:host {
+  display: block;
+  position: relative;
+  padding: var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-01);
+  color: var(--color-white);
+}
+@media only screen and (min-width: 768px) {
+  :host {
+    padding: var(--ptc-layout-spacing-05) var(--ptc-layout-spacing-03);
+  }
+}
+@media only screen and (min-width: 992px) {
+  :host {
+    padding: var(--ptc-layout-spacing-06) 0;
+  }
+}
+@media only screen and (min-width: 1200px) {
+  :host {
+    padding: var(--ptc-layout-spacing-06) var(--ptc-layout-spacing-03);
+  }
+}
+:host .content-wrap {
+  position: relative;
+}
+:host .tcb-top-slit {
+  fill: #f3f3f3;
+  -webkit-transform: scaleX(-1);
+  -ms-transform: scaleX(-1);
+  transform: scale(1.5, -1);
+  position: absolute;
+  top: -1px;
+  right: 80px;
+  z-index: 99;
+  display: none;
+}
+@media only screen and (min-width: 992px) {
+  :host .tcb-top-slit {
+    display: block;
+  }
+}
+:host .bg-img-filter {
+  -webkit-filter: url(#blur);
+  filter: url(#blur);
+  -webkit-mask: -webkit-gradient(linear, left top, right top, color-stop(30%, var(--color-black)), to(rgba(0, 0, 0, 0)));
+  -webkit-mask: linear-gradient(90deg, var(--color-black) 30%, rgba(0, 0, 0, 0));
+  -webkit-filter: blur(7px);
+}
+:host .copy-bg-image {
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  -o-object-fit: cover;
+  object-fit: cover;
+}
+@media only screen and (min-width: 992px) {
+  :host .copy-bg-image {
+    display: block;
+  }
+}
+:host .copy-bg-overlay-layer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  background: var(--color-black);
+  opacity: 0.55;
+}
+
+@media only screen and (min-width: 1200px) {
+  :host(.hero-footer-cta) {
+    padding: calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-03)) var(--ptc-layout-spacing-03);
+  }
+}
+
+:host(.tab-cta-with-background) {
+  min-height: 400px;
+  padding: var(--ptc-layout-spacing-03) var(--ptc-layout-spacing-02);
+}
+@media only screen and (min-width: 1200px) {
+  :host(.tab-cta-with-background) {
+    padding: calc(var(--ptc-layout-spacing-06) + var(--ptc-layout-spacing-03)) var(--ptc-layout-spacing-05);
+  }
+}
+:host(.tab-cta-with-background) .copy-bg-overlay-layer {
+  background: initial;
+  opacity: 1;
+  background-image: linear-gradient(180deg, #fff 30%, rgba(255, 255, 255, 0.9) 63%, rgba(176, 188, 194, 0) 95%);
+}
+@media only screen and (min-width: 992px) {
+  :host(.tab-cta-with-background) .copy-bg-overlay-layer {
+    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.95) 43%, rgba(176, 188, 194, 0) 95%);
+  }
+}

package/dist/collection/components/ptc-text-copy-with-background/ptc-text-copy-with-background.js

@@ -0,0 +1,129 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcTextCopyWithBackground {
+  constructor() {
+    /**
+    * Type
+    * Specify  Type, default is text-copy-with-background
+    */
+    this.type = 'text-copy-with-background';
+    /**
+    * (optional) isBackgroundBlur: If true,it will add background blur image effect
+    */
+    this.isBackgroundBlur = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "tcb-top-slit", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179", style: { fill: this.topSlitBackgroundColor } },
+        h("path", { id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "tcb-top-slit-cls-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })),
+      h("div", { class: "" },
+        h("img", { class: "copy-bg-image", alt: this.ImageAltText, src: this.backgroundImage }),
+        this.isBackgroundBlur &&
+          h("img", { class: "copy-bg-image bg-img-filter", alt: this.ImageAltText, src: this.backgroundImage })),
+      h("div", { class: "copy-bg-overlay-layer" }),
+      h("div", { class: "content-wrap" },
+        h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.type]: true
+    };
+  }
+  static get is() { return "ptc-text-copy-with-background"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-text-copy-with-background.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-text-copy-with-background.css"]
+  }; }
+  static get properties() { return {
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'text-copy-with-background' | 'hero-footer-cta' | 'tab-cta-with-background'",
+        "resolved": "\"hero-footer-cta\" | \"tab-cta-with-background\" | \"text-copy-with-background\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Type\nSpecify  Type, default is text-copy-with-background"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'text-copy-with-background'"
+    },
+    "backgroundImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Background image"
+      },
+      "attribute": "background-image",
+      "reflect": false
+    },
+    "ImageAltText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Image alt text"
+      },
+      "attribute": "image-alt-text",
+      "reflect": false
+    },
+    "topSlitBackgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) topSlitBackgroundColor: It will be color value which should match the background of the body."
+      },
+      "attribute": "top-slit-background-color",
+      "reflect": false
+    },
+    "isBackgroundBlur": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) isBackgroundBlur: If true,it will add background blur image effect"
+      },
+      "attribute": "is-background-blur",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

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

@@ -239,13 +239,28 @@ div.x-large h1, div.x-large h2, div.x-large h3, div.x-large h4, div.x-large h5,
   font-size: var(--ptc-font-size-x-large);
 }
 div.xx-large h1, div.xx-large h2, div.xx-large h3, div.xx-large h4 {
-  font-size: var(--ptc-font-size-xx-large);
+  font-size: var(--ptc-font-size-x-large);
+}
+@media only screen and (min-width: 768px) {
+  div.xx-large h1, div.xx-large h2, div.xx-large h3, div.xx-large h4 {
+    font-size: var(--ptc-font-size-xx-large);
+  }
 }
 div.xxx-large h1, div.xxx-large h2, div.xxx-large h3, div.xxx-large h4, div.xxx-large h5, div.xxx-large h6 {
-  font-size: var(--ptc-font-size-xxx-large);
+  font-size: var(--ptc-font-size-xx-large);
+}
+@media only screen and (min-width: 768px) {
+  div.xxx-large h1, div.xxx-large h2, div.xxx-large h3, div.xxx-large h4, div.xxx-large h5, div.xxx-large h6 {
+    font-size: var(--ptc-font-size-xxx-large);
+  }
 }
 div.xxxx-large h1, div.xxxx-large h2, div.xxxx-large h3, div.xxxx-large h4, div.xxxx-large h5, div.xxxx-large h6 {
-  font-size: var(--ptc-font-size-xxxx-large);
+  font-size: var(--ptc-font-size-xxx-large);
+}
+@media only screen and (min-width: 768px) {
+  div.xxxx-large h1, div.xxxx-large h2, div.xxxx-large h3, div.xxxx-large h4, div.xxxx-large h5, div.xxxx-large h6 {
+    font-size: var(--ptc-font-size-xxxx-large);
+  }
 }
 div.densest h1, div.densest h2, div.densest h3, div.densest h4, div.densest h5, div.densest h6 {
   line-height: var(--ptc-line-height-densest);
@@ -267,4 +282,20 @@ div.looser h1, div.looser h2, div.looser h3, div.looser h4, div.looser h5, div.l
 }
 div.paragraph h1, div.paragraph h2, div.paragraph h3, div.paragraph h4, div.paragraph h5, div.paragraph h6 {
   line-height: var(--ptc-line-height-paragraph);
+}
+div.black h1, div.black h2, div.black h3, div.black h4, div.black h5, div.black h6 {
+  color: var(--color-black);
+}
+div.white h1, div.white h2, div.white h3, div.white h4, div.white h5, div.white h6 {
+  color: var(--color-white);
+}
+div.gray h1, div.gray h2, div.gray h3, div.gray h4, div.gray h5, div.gray h6 {
+  color: var(--color-gray-10);
+}
+div.ellipsis-boxing h1, div.ellipsis-boxing h2, div.ellipsis-boxing h3, div.ellipsis-boxing h4, div.ellipsis-boxing h5, div.ellipsis-boxing h6 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

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

@@ -13,6 +13,10 @@ export class PtcTitle {
      * Upperline Style
      */
     this.upperline = 'dotted';
+    /**
+    * Title color
+    */
+    this.titleColor = 'gray';
     /**
      * Title line height
      */
@@ -20,6 +24,7 @@ export class PtcTitle {
   }
   render() {
     const classMap = this.getCssClassMap();
+    const cutOff = this.getLineCuttoff();
     let TagType;
     switch (this.type) {
       case 'h1':
@@ -40,10 +45,11 @@ export class PtcTitle {
       default:
         TagType = 'h2';
     }
+    ;
     return (h(Host, null,
       this.styles && h("style", null, this.styles),
       h("div", { class: classMap },
-        h(TagType, null,
+        h(TagType, { style: cutOff },
           h("slot", null)))));
   }
   getCssClassMap() {
@@ -55,9 +61,20 @@ export class PtcTitle {
       [this.titleShadow]: !!this.titleShadow ? true : false,
       [this.titleWeight]: !!this.titleWeight ? true : false,
       [this.titleSize]: !!this.titleSize ? true : false,
-      [this.titleHeight]: !!this.titleHeight ? true : false
+      [this.titleHeight]: !!this.titleHeight ? true : false,
+      [this.titleColor]: !!this.titleColor ? true : false,
+      ['ellipsis-boxing']: this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0
     };
   }
+  getLineCuttoff() {
+    let result;
+    if (this.ellipsisLineCutoff && this.ellipsisLineCutoff > 0) {
+      result = {
+        ['-webkit-line-clamp']: `${this.ellipsisLineCutoff}`
+      };
+    }
+    return result;
+  }
   static get is() { return "ptc-title"; }
   static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
@@ -155,6 +172,24 @@ export class PtcTitle {
       "attribute": "title-shadow",
       "reflect": false
     },
+    "titleColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'black' | 'white' | 'gray'",
+        "resolved": "\"black\" | \"gray\" | \"white\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Title color"
+      },
+      "attribute": "title-color",
+      "reflect": false,
+      "defaultValue": "'gray'"
+    },
     "titleMargin": {
       "type": "string",
       "mutable": false,
@@ -240,6 +275,23 @@ export class PtcTitle {
       },
       "attribute": "styles",
       "reflect": false
+    },
+    "ellipsisLineCutoff": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Line number to cut text off at and add ellipsis"
+      },
+      "attribute": "ellipsis-line-cutoff",
+      "reflect": false
     }
   }; }
 }

package/dist/collection/components/tab-content/tab-content.css

@@ -1,17 +1,22 @@
 .tab-content {
   display: none;
 }
+.tab-content p, .tab-content ul, .tab-content ol, .tab-content span {
+  max-width: 720px;
+  font-weight: var(--ptc-font-weight-normal);
+}
 
 .tab-content-selected {
   display: block;
 }
 
-p {
-  max-width: 720px;
-  font-weight: 400px;
-}
-
 .tab-content h3 {
   font-size: 24px;
   font-weight: 700;
+}
+.tab-content :first-child {
+  margin-top: 0px;
+}
+.tab-content :last-child {
+  margin-bottom: 0px;
 }

package/dist/collection/components/tab-header/tab-header.css

@@ -12,12 +12,24 @@
   font-family: "Raleway";
   font-style: normal;
   font-weight: 700;
-  font-size: 18px;
-  line-height: 27px;
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-p);
   white-space: nowrap;
   /* identical to box height, or 150% */
   text-align: center;
   color: var(--color-gray-07);
+  position: relative;
+}
+.tab-header::after {
+  content: "";
+  width: 100%;
+  height: 2px;
+  background-color: var(--color-gray-02);
+  position: absolute;
+  display: block;
+  left: 0;
+  right: 0;
+  bottom: -4px;
 }
 
 @media (max-width: 599px) {
@@ -26,7 +38,9 @@
   }
 }
 .tab-header-selected {
-  border-bottom: 2px solid var(--color-green-07);
   color: var(--color-gray-10);
-  font-weight: 700;
+  font-weight: var(--ptc-font-weight-bold);
+}
+.tab-header-selected::after {
+  background-color: var(--color-green-07);
 }

package/dist/custom-elements/index.d.ts

@@ -296,6 +296,12 @@ export const PtcTabList: {
   new (): PtcTabList;
 };
 
+interface PtcTextCopyWithBackground extends Components.PtcTextCopyWithBackground, HTMLElement {}
+export const PtcTextCopyWithBackground: {
+  prototype: PtcTextCopyWithBackground;
+  new (): PtcTextCopyWithBackground;
+};
+
 interface PtcTitle extends Components.PtcTitle, HTMLElement {}
 export const PtcTitle: {
   prototype: PtcTitle;