@ptcwebops/ptcw-design 0.5.6 → 0.5.8

package/dist/collection/components/ptc-ellipsis-dropdown/ptc-ellipsis-dropdown.js

@@ -1,77 +1,77 @@
-import { Component, h, State, Element, Event, Prop } from '@stencil/core';
-export class PtcEllipsisDropdown {
-  constructor() {
-    this.dataItems = [];
-    this.isDropdownOpen = false;
-  }
-  dropdownToggle(e) {
-    e.currentTarget.classList.toggle("show");
-  }
-  onItemSelected(e) {
-    this.itemSelected.emit(e);
-  }
-  render() {
-    return (h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) },
-      h("div", { class: "ellipsis-icon" },
-        h("icon-asset", { type: "solid", size: "xxx-small", name: "ellipsis-h" })),
-      h("div", { class: "dropdown-container" },
-        h("slot", { name: "dropdown" }),
-        this.dataItems.map(dataItem => {
-          return (h("dropdown-item", null,
-            h("a", { href: "#", onClick: (e) => {
-                e.preventDefault();
-                this.onItemSelected(dataItem);
-              } }, dataItem.text)));
-        }))));
-  }
-  static get is() { return "ptc-ellipsis-dropdown"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-ellipsis-dropdown.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-ellipsis-dropdown.css"]
-  }; }
-  static get properties() { return {
-    "dataItems": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "Array<any>",
-        "resolved": "any[]",
-        "references": {
-          "Array": {
-            "location": "global"
-          }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    }
-  }; }
-  static get states() { return {
-    "isDropdownOpen": {}
-  }; }
-  static get events() { return [{
-      "method": "itemSelected",
-      "name": "itemSelected",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-  static get elementRef() { return "host"; }
-}
+import { Component, h, State, Element, Event, Prop } from '@stencil/core';
+export class PtcEllipsisDropdown {
+  constructor() {
+    this.dataItems = [];
+    this.isDropdownOpen = false;
+  }
+  dropdownToggle(e) {
+    e.currentTarget.classList.toggle("show");
+  }
+  onItemSelected(e) {
+    this.itemSelected.emit(e);
+  }
+  render() {
+    return (h("div", { class: "ptc-ellipsis-dropdown", onClick: (e) => this.dropdownToggle(e) },
+      h("div", { class: "ellipsis-icon" },
+        h("icon-asset", { type: "solid", size: "xxx-small", name: "ellipsis-h" })),
+      h("div", { class: "dropdown-container" },
+        h("slot", { name: "dropdown" }),
+        this.dataItems.map(dataItem => {
+          return (h("dropdown-item", null,
+            h("a", { href: "#", onClick: (e) => {
+                e.preventDefault();
+                this.onItemSelected(dataItem);
+              } }, dataItem.text)));
+        }))));
+  }
+  static get is() { return "ptc-ellipsis-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-ellipsis-dropdown.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-ellipsis-dropdown.css"]
+  }; }
+  static get properties() { return {
+    "dataItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "Array<any>",
+        "resolved": "any[]",
+        "references": {
+          "Array": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "isDropdownOpen": {}
+  }; }
+  static get events() { return [{
+      "method": "itemSelected",
+      "name": "itemSelected",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.css

@@ -1,18 +1,71 @@
-.bubble {
+.ptc-filter-tag {
+  display: block;
+  cursor: pointer;
+  position: relative;
+  margin: 0.25rem;
+}
+.ptc-filter-tag.bubble {
+  display: inline-block;
   font-family: Raleway;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 21px;
-  letter-spacing: 0em;
+  font-size: var(--ptc-font-size-xx-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-denser);
+  letter-spacing: var(--ptc-letter-spacing-normal);
   text-align: left;
-  border: 1px solid #9AA6AD;
+  align-items: center;
+  transition: border-color ease-out 250ms;
+  border: 1px solid var(--color-gray-05);
   border-radius: 999px;
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-  padding-left: 1rem;
-  padding-right: 1rem;
-  background: #FFFFFF;
-}
-.bubble icon-asset {
-  vertical-align: middle;
+  padding: 0.375rem 1.875rem 0.375rem 0.875rem;
+  background: var(--color-white);
+}
+.ptc-filter-tag.bubble:hover {
+  border: 1px solid var(--color-gray-12);
+}
+.ptc-filter-tag.bubble .cls {
+  display: block;
+  position: absolute;
+  top: 0.35rem;
+  right: 0.8rem;
+}
+.ptc-filter-tag.link, .ptc-filter-tag.link-lg {
+  display: inline-block;
+  font-family: Raleway;
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-denser);
+  letter-spacing: var(--ptc-letter-spacing-normal);
+  text-align: right;
+  border-bottom: 1px solid transparent;
+  background: var(--color-white);
+}
+.ptc-filter-tag.link:hover, .ptc-filter-tag.link-lg:hover {
+  text-decoration: underline;
+}
+.ptc-filter-tag.link .cls, .ptc-filter-tag.link-lg .cls {
+  display: none;
+}
+.ptc-filter-tag.link-lg {
+  font-size: var(--ptc-font-size-small);
+  font-weight: var(--ptc-font-weight-bold);
+}
+.ptc-filter-tag.button {
+  background: var(--color-gray-10);
+  border-radius: var(--ptc-border-radius-standard);
+  padding: 0.625rem 1rem;
+  font-family: "Raleway";
+  font-style: normal;
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-semibold);
+  line-height: var(--ptc-line-height-denser);
+  color: var(--color-white);
+}
+.ptc-filter-tag.button:hover {
+  background-color: var(--color-gray-12);
+}
+.ptc-filter-tag.button:active {
+  background-color: var(--color-black);
+}
+.ptc-filter-tag.button .cls {
+  display: none;
 }

package/dist/collection/components/ptc-filter-tag/ptc-filter-tag.js

@@ -1,96 +1,70 @@
-import { Component, h, Prop, Host } from '@stencil/core';
-export class PtcFilterTag {
-  constructor() {
-    /**
-     * Theme
-     */
-    this.theme = 'bubble';
-    /**
-     * Uppercase
-     */
-    this.uppercase = false;
-    /**
-     * Font Size
-     */
-    this.fontSize = 'medium';
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      h("span", { class: "bubble" },
-        h("slot", null),
-        h("icon-asset", { type: "solid", size: "x-small", name: "times" }))));
-  }
-  getCssClassMap() {
-    return {
-      ['ptc-filter-tag']: true,
-      [this.theme]: true,
-      ['uppercase']: this.uppercase,
-      [this.fontSize]: true,
-    };
-  }
-  static get is() { return "ptc-filter-tag"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-filter-tag.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-filter-tag.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'bubble'",
-        "resolved": "\"bubble\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Theme"
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "'bubble'"
-    },
-    "uppercase": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Uppercase"
-      },
-      "attribute": "uppercase",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "fontSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Font Size"
-      },
-      "attribute": "font-size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    }
-  }; }
-}
+import { Component, h, Prop, Host, Event } from '@stencil/core';
+import CloseIcon from '../../media/svg-imgs/union.svg';
+export class PtcFilterTag {
+  constructor() {
+    /**
+     * Theme
+     */
+    this.theme = 'bubble';
+    this.handleClick = () => {
+      this.clicked.emit(this);
+    };
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, null,
+      h("span", { class: classMap, onClick: () => this.handleClick() },
+        h("slot", null),
+        h("span", { class: "cls", innerHTML: CloseIcon }))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-filter-tag']: true,
+      [this.theme]: true
+    };
+  }
+  static get is() { return "ptc-filter-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-filter-tag.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-filter-tag.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'bubble' | 'link' | 'link-lg' | 'button'",
+        "resolved": "\"bubble\" | \"button\" | \"link\" | \"link-lg\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "'bubble'"
+    }
+  }; }
+  static get events() { return [{
+      "method": "clicked",
+      "name": "clicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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"
+    }
+  }; }
+}