@ptcwebops/ptcw-design 0.5.8 → 0.6.0

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

@@ -1,67 +1,67 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcHero {
-  constructor() {
-    /**
-     * Hero Background Image URL
-     */
-    this.bgUrl = undefined;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      h("div", { class: "ptc-hero-wrapper" },
-        h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }),
-          this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null,
-          h("slot", null)))));
-  }
-  getCssClassMap() {
-    return {
-      [this.heroType]: this.heroType ? true : false,
-    };
-  }
-  static get is() { return "ptc-hero"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-hero.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-hero.css"]
-  }; }
-  static get properties() { return {
-    "heroType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'jumbotron' | 'footer-cta'",
-        "resolved": "\"footer-cta\" | \"jumbotron\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hero Type"
-      },
-      "attribute": "hero-type",
-      "reflect": false
-    },
-    "bgUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Hero Background Image URL"
-      },
-      "attribute": "bg-url",
-      "reflect": false,
-      "defaultValue": "undefined"
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcHero {
+  constructor() {
+    /**
+     * Hero Background Image URL
+     */
+    this.bgUrl = undefined;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap },
+      h("div", { class: "ptc-hero-wrapper" },
+        h("ptc-img", Object.assign({ "image-type": "smart-bg" }, (!!this.bgUrl ? { imgUrl: this.bgUrl } : {}), { "size-xs": "600x450", "size-sm": "1108x658", "size-md": "1920x1080", "size-lg": "2700x1500" }),
+          this.heroType == 'jumbotron' ? ([h("ptc-overlay", { "filter-color": "black-1" }), h("ptc-overlay", { "filter-color": "black-2" })]) : this.heroType == 'footer-cta' ? (h("ptc-overlay", { "filter-color": "black-3" })) : null,
+          h("slot", null)))));
+  }
+  getCssClassMap() {
+    return {
+      [this.heroType]: this.heroType ? true : false,
+    };
+  }
+  static get is() { return "ptc-hero"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-hero.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-hero.css"]
+  }; }
+  static get properties() { return {
+    "heroType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'jumbotron' | 'footer-cta'",
+        "resolved": "\"footer-cta\" | \"jumbotron\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hero Type"
+      },
+      "attribute": "hero-type",
+      "reflect": false
+    },
+    "bgUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Hero Background Image URL"
+      },
+      "attribute": "bg-url",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+}

package/dist/collection/components/ptc-hero-footer-cta/ptc-hero-footer-cta.js

@@ -1,77 +1,77 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcHeroFooterCta {
-  render() {
-    return (h(Host, null,
-      h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } },
-        h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" },
-          h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })),
-        h("div", { class: "cta-overlay" }),
-        h("div", { class: "ptc-container is-grid has-p-lg" },
-          h("div", { class: "is-col-8-lg cta-left-padding" },
-            h("h2", null, this.ctaTitle),
-            h("p", null, this.description)),
-          h("div", { class: "is-col-4-lg cta-section" },
-            h("slot", { name: "cta" }))))));
-  }
-  static get is() { return "ptc-hero-footer-cta"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-hero-footer-cta.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-hero-footer-cta.css"]
-  }; }
-  static get properties() { return {
-    "ctaTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "cta-title",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "description",
-      "reflect": false
-    },
-    "backgroundImage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "background-image",
-      "reflect": false
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcHeroFooterCta {
+  render() {
+    return (h(Host, null,
+      h("div", { class: "hero-footer-cta ", style: { backgroundImage: `url(${this.backgroundImage})` } },
+        h("svg", { class: "btm-cta-cut", xmlns: "http://www.w3.org/2000/svg", width: "320.963", height: "28.179", viewBox: "0 0 320.963 28.179" },
+          h("path", { fill: "#F3F3F3", id: "Path_8770", d: "M737.02 463.856v27.8H416.057v.378h102.38l47.607-28.179z", class: "path-1", "data-name": "Path 8770", transform: "translate(-416.057 -463.856)" })),
+        h("div", { class: "cta-overlay" }),
+        h("div", { class: "ptc-container is-grid has-p-lg" },
+          h("div", { class: "is-col-8-lg cta-left-padding" },
+            h("h2", null, this.ctaTitle),
+            h("p", null, this.description)),
+          h("div", { class: "is-col-4-lg cta-section" },
+            h("slot", { name: "cta" }))))));
+  }
+  static get is() { return "ptc-hero-footer-cta"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-hero-footer-cta.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-hero-footer-cta.css"]
+  }; }
+  static get properties() { return {
+    "ctaTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "cta-title",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "description",
+      "reflect": false
+    },
+    "backgroundImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "background-image",
+      "reflect": false
+    }
+  }; }
+}

package/dist/collection/components/ptc-icon-list/ptc-icon-list.css

@@ -52,6 +52,12 @@
   align-self: center;
 }
 
+:host(.icon-top-align-list) ::slotted(icon-asset) {
+  display: flex;
+  align-self: flex-start;
+  transform: translateY(40%);
+}
+
 :host(.last-item) {
   margin-bottom: var(--ptc-layout-spacing-03);
 }

package/dist/collection/components/ptc-icon-list/ptc-icon-list.js

@@ -1,145 +1,145 @@
-import { Component, Host, h, Prop } from '@stencil/core';
-export class PtcIconList {
-  constructor() {
-    /**
-  * List item type
-  */
-    this.listType = 'simple-icon-list';
-    /**
-   * List value with unit Example: 60%
-   */
-    this.valueWithUnit = '';
-    /**
-   * List value text Example: up to
-   */
-    this.valueText = '';
-    /**
-   * List value with unit Example: Increase in Operator Productivity
-   */
-    this.listContent = '';
-    this.isLastItem = false;
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" },
-      h("slot", { name: "icon" }),
-      h("div", { class: "ptc-numbered-values" },
-        h("span", { class: "value-text" },
-          this.valueText,
-          "\u00A0"),
-        h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)),
-      h("p", { class: "ptc-content" },
-        "- \u00A0",
-        this.listContent))) : (h("div", { class: "ptc-icon-list" },
-      h("slot", { name: "icon" }),
-      h("p", { class: "ptc-content-simple" },
-        this.listContent,
-        " ")))));
-  }
-  getCssClassMap() {
-    return {
-      [this.listType]: this.listType ? true : false,
-      ['last-item']: this.isLastItem ? true : false
-    };
-  }
-  static get is() { return "ptc-icon-list"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-icon-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-icon-list.css"]
-  }; }
-  static get properties() { return {
-    "listType": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'simple-icon-list' | 'stat-icon-list'",
-        "resolved": "\"simple-icon-list\" | \"stat-icon-list\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List item type"
-      },
-      "attribute": "list-type",
-      "reflect": false,
-      "defaultValue": "'simple-icon-list'"
-    },
-    "valueWithUnit": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List value with unit Example: 60%"
-      },
-      "attribute": "value-with-unit",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "valueText": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List value text Example: up to"
-      },
-      "attribute": "value-text",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "listContent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "List value with unit Example: Increase in Operator Productivity"
-      },
-      "attribute": "list-content",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "isLastItem": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "is-last-item",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-}
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcIconList {
+  constructor() {
+    /**
+  * List item type
+  */
+    this.listType = 'simple-icon-list';
+    /**
+   * List value with unit Example: 60%
+   */
+    this.valueWithUnit = '';
+    /**
+   * List value text Example: up to
+   */
+    this.valueText = '';
+    /**
+   * List value with unit Example: Increase in Operator Productivity
+   */
+    this.listContent = '';
+    this.isLastItem = false;
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" },
+      h("slot", { name: "icon" }),
+      h("div", { class: "ptc-numbered-values" },
+        h("span", { class: "value-text" },
+          this.valueText,
+          "\u00A0"),
+        h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)),
+      h("p", { class: "ptc-content" },
+        "- \u00A0",
+        this.listContent))) : (h("div", { class: "ptc-icon-list" },
+      h("slot", { name: "icon" }),
+      h("p", { class: "ptc-content-simple" },
+        this.listContent,
+        " ")))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: this.listType ? true : false,
+      ['last-item']: this.isLastItem ? true : false
+    };
+  }
+  static get is() { return "ptc-icon-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-icon-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-icon-list.css"]
+  }; }
+  static get properties() { return {
+    "listType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'simple-icon-list' | 'stat-icon-list' | 'icon-top-align-list'",
+        "resolved": "\"icon-top-align-list\" | \"simple-icon-list\" | \"stat-icon-list\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "List item type"
+      },
+      "attribute": "list-type",
+      "reflect": false,
+      "defaultValue": "'simple-icon-list'"
+    },
+    "valueWithUnit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "List value with unit Example: 60%"
+      },
+      "attribute": "value-with-unit",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "valueText": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "List value text Example: up to"
+      },
+      "attribute": "value-text",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "listContent": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "List value with unit Example: Increase in Operator Productivity"
+      },
+      "attribute": "list-content",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "isLastItem": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "is-last-item",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}