@ptcwebops/ptcw-design 0.5.6 → 0.5.7

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

@@ -0,0 +1,66 @@
+@charset "UTF-8";
+:host {
+  position: relative;
+}
+:host .dropdown__header {
+  cursor: pointer;
+  transition: background-color ease-out 250ms, border-color ease-out 250ms;
+  background-color: var(--color-white);
+  display: flex;
+  align-items: center;
+  align-content: center;
+  border: 1px solid var(--color-gray-05);
+  padding: 0.25rem 0.75rem 0.25rem 0.75rem;
+  border-radius: 4px;
+  font-family: Raleway;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+:host .dropdown__header b {
+  font-weight: 600;
+}
+:host .dropdown__header icon-asset {
+  width: 1rem;
+  height: 1rem;
+  margin-left: 0.5rem;
+}
+:host .dropdown__header:hover {
+  background-color: var(--color-gray-02);
+}
+:host .dropdown__list {
+  display: table;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 8px;
+}
+:host ul {
+  display: block;
+  top: 0.2rem;
+  right: 0.2rem;
+  margin: 0;
+  list-style-type: none;
+  padding-inline-start: 0;
+  padding: 0.25rem 0.25rem;
+  background-color: var(--color-gray-02);
+  cursor: pointer;
+  position: absolute;
+  z-index: 500;
+}
+:host ul li {
+  white-space: nowrap;
+  padding: 3px 1rem;
+  font-weight: 500;
+}
+:host ul li.selected:before {
+  content: "✓";
+  display: block;
+  position: absolute;
+  left: 0.4rem;
+}
+:host ul li:hover {
+  color: #fff;
+  background-color: #699af8;
+  border-radius: 4px;
+}

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

@@ -0,0 +1,144 @@
+import { Component, h, Prop, State, Event, Element } from '@stencil/core';
+export class PtcDropdown {
+  constructor() {
+    /**
+     * Theme
+     */
+    this.theme = 'sort';
+    this.toggle = false;
+    this.handleClick = (item) => {
+      this.listItems.forEach((item) => item.selected = undefined);
+      item.selected = true;
+      this.selectedItem = item;
+      this.toggle = !this.toggle;
+      this.clickedItem.emit(item);
+    };
+    this.toggleList = () => {
+      this.toggle = !this.toggle;
+    };
+  }
+  componentWillLoad() {
+    let items = this.host.querySelectorAll('item');
+    if (!this.listItems) {
+      this.listItems = [];
+    }
+    items.forEach(item => {
+      if (item && item.getAttribute('label')) {
+        let listItem = {
+          element: item,
+          label: item.getAttribute('label'),
+          selected: item.hasAttribute('selected')
+        };
+        this.listItems.push(listItem);
+        if (item.hasAttribute('selected')) {
+          this.selectedItem = listItem;
+        }
+      }
+    });
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h("div", { class: classMap },
+      h("header", { class: "dropdown__header", onClick: this.toggleList },
+        h("label", null,
+          h("b", null, this.label),
+          " ",
+          this.selectedItem ? this.selectedItem.label : "Select Option"),
+        h("icon-asset", { type: "solid", size: "x-small", name: "chevron-down" })),
+      this.toggle &&
+        h("ul", { tabIndex: -1, class: "dropdown__list", onBlur: () => { this.toggle = false; } }, this.listItems.map((item) => {
+          let cssClass = "dropdown__item";
+          if (item.selected) {
+            cssClass += " selected";
+          }
+          return (h("li", { class: cssClass, onClick: () => this.handleClick(item) }, item.label));
+        }))));
+  }
+  getCssClassMap() {
+    return {
+      ['ptc-dropdown']: true,
+      [this.theme]: true
+    };
+  }
+  static get is() { return "ptc-dropdown"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-dropdown.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-dropdown.css"]
+  }; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'sort'",
+        "resolved": "\"sort\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Theme"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "'sort'"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "listItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "any[]",
+        "resolved": "any[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "toggle": {},
+    "selectedItem": {}
+  }; }
+  static get events() { return [{
+      "method": "clickedItem",
+      "name": "clickedItem",
+      "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,32 +1,26 @@
-import { Component, h, Prop, Host } from '@stencil/core';
+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';
-    /**
-     * Uppercase
-     */
-    this.uppercase = false;
-    /**
-     * Font Size
-     */
-    this.fontSize = 'medium';
+    this.handleClick = () => {
+      this.clicked.emit(this);
+    };
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap },
-      h("span", { class: "bubble" },
+    return (h(Host, null,
+      h("span", { class: classMap, onClick: () => this.handleClick() },
         h("slot", null),
-        h("icon-asset", { type: "solid", size: "x-small", name: "times" }))));
+        h("span", { class: "cls", innerHTML: CloseIcon }))));
   }
   getCssClassMap() {
     return {
       ['ptc-filter-tag']: true,
-      [this.theme]: true,
-      ['uppercase']: this.uppercase,
-      [this.fontSize]: true,
+      [this.theme]: true
     };
   }
   static get is() { return "ptc-filter-tag"; }
@@ -42,8 +36,8 @@ export class PtcFilterTag {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'bubble'",
-        "resolved": "\"bubble\"",
+        "original": "'bubble' | 'link' | 'link-lg' | 'button'",
+        "resolved": "\"bubble\" | \"button\" | \"link\" | \"link-lg\"",
         "references": {}
       },
       "required": false,
@@ -55,42 +49,22 @@ export class PtcFilterTag {
       "attribute": "theme",
       "reflect": false,
       "defaultValue": "'bubble'"
-    },
-    "uppercase": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
+    }
+  }; }
+  static get events() { return [{
+      "method": "clicked",
+      "name": "clicked",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
       "docs": {
         "tags": [],
-        "text": "Uppercase"
+        "text": ""
       },
-      "attribute": "uppercase",
-      "reflect": false,
-      "defaultValue": "false"
-    },
-    "fontSize": {
-      "type": "string",
-      "mutable": false,
       "complexType": {
-        "original": "'small' | 'medium' | 'large'",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
+        "original": "any",
+        "resolved": "any",
         "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Font Size"
-      },
-      "attribute": "font-size",
-      "reflect": false,
-      "defaultValue": "'medium'"
-    }
-  }; }
+      }
+    }]; }
 }

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

@@ -0,0 +1,37 @@
+.content {
+  transition: max-height ease-out 250ms;
+  overflow: hidden;
+  max-height: 0;
+}
+
+.ptc-icon-minimize .header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  align-content: center;
+}
+.ptc-icon-minimize .header .title {
+  color: var(--color-gray-10);
+  font-family: "Raleway";
+  font-style: normal;
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-normal);
+}
+.ptc-icon-minimize .header .icon {
+  cursor: pointer;
+  border: 1px solid var(--color-gray-10);
+  border-radius: 2px;
+  transition: background-color ease-out 250ms;
+  background-color: transparent;
+  vertical-align: middle;
+  height: 1.25rem;
+  width: 1.25rem;
+  text-align: center;
+}
+.ptc-icon-minimize .header .icon:hover {
+  background-color: var(--color-gray-02);
+}
+.ptc-icon-minimize .header .icon icon-asset {
+  position: relative;
+}

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

@@ -0,0 +1,86 @@
+import { Component, h, Prop, Element } from '@stencil/core';
+export class PtcIconMinimize {
+  constructor() {
+    this.opened = true;
+  }
+  componentDidLoad() {
+    let content = this.host.shadowRoot.querySelector('.content');
+    if (this.opened && !content.style.maxHeight) {
+      content.style.maxHeight = content.scrollHeight + "px";
+    }
+  }
+  dropdownToggle() {
+    this.opened = !this.opened;
+  }
+  getScrollHeight() {
+    let result = undefined;
+    let content = this.host.shadowRoot.querySelector('.content');
+    if (this.opened && content) {
+      result = { 'max-height': content.scrollHeight + "px" };
+    }
+    else if (this.opened) {
+      result = { 'max-height': 350 + "px" };
+    }
+    else if (content && content.style.maxHeight) {
+      content.style.removeProperty('max-height');
+    }
+    return result;
+  }
+  render() {
+    let scrollHeight = this.getScrollHeight();
+    let icon = this.opened ? 'minus' : 'plus';
+    return (h("div", { class: "ptc-icon-minimize" },
+      h("div", { class: "header" },
+        h("div", { class: "title" }, this.heading),
+        h("div", { class: "icon", onClick: () => this.dropdownToggle() },
+          h("icon-asset", { type: "solid", size: "xxx-small", name: icon }))),
+      h("div", { class: "content", style: scrollHeight },
+        h("slot", null))));
+  }
+  static get is() { return "ptc-icon-minimize"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-icon-minimize.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-icon-minimize.css"]
+  }; }
+  static get properties() { return {
+    "heading": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false
+    },
+    "opened": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "opened",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get elementRef() { return "host"; }
+}

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

@@ -32,6 +32,24 @@
   opacity: 1;
 }
 
+.product-link {
+  font-weight: var(--ptc-font-weight-extrabold);
+  margin-top: var(--ptc-element-spacing-04);
+}
+.product-link::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  left: 0px;
+  bottom: 2px;
+  transition: opacity var(--ptc-transition-fast) var(--ptc-ease-inout);
+  border-bottom: 2px solid var(--color-green-07);
+  opacity: 0;
+}
+.product-link:hover.product-link::after {
+  opacity: 1;
+}
+
 .arrow {
   margin-right: var(--ptc-element-spacing-01);
 }

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

@@ -144,8 +144,8 @@ export class PtcLink {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'simple' | 'underline' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm'",
-        "resolved": "\"arrow\" | \"arrow-plm\" | \"copyright-link\" | \"footer-nav-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"secondary-nav-link\" | \"simple\" | \"underline\"",
+        "original": "'simple' | 'underline' | 'arrow' | 'nav-title'| 'primary-nav-link' | 'nav-title-link' | 'secondary-nav-link' | 'footer-nav-link' | 'copyright-link' | 'arrow-plm' | 'product-link'",
+        "resolved": "\"arrow\" | \"arrow-plm\" | \"copyright-link\" | \"footer-nav-link\" | \"nav-title\" | \"nav-title-link\" | \"primary-nav-link\" | \"product-link\" | \"secondary-nav-link\" | \"simple\" | \"underline\"",
         "references": {}
       },
       "required": false,

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

@@ -61,6 +61,40 @@
   margin-right: var(--ptc-element-spacing-03);
   margin-top: var(--ptc-element-spacing-03);
 }
+.wrapper .modal-popup.shadow-scroller {
+  max-height: 756px;
+}
+.wrapper .modal-popup.shadow-scroller .modal-header {
+  transition: box-shadow ease-in-out 250ms;
+  position: relative;
+  min-height: 57px;
+  border-bottom: 1px solid var(--color-gray-02);
+  width: 100%;
+}
+.wrapper .modal-popup.shadow-scroller .modal-header .close {
+  position: absolute;
+  top: var(--spacing-md);
+  right: var(--spacing-md);
+  margin: 0;
+}
+.wrapper .modal-popup.shadow-scroller .modal-body {
+  min-height: 200px;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.wrapper .modal-popup.shadow-scroller .modal-footer {
+  transition: box-shadow ease-in-out 250ms;
+  width: 100%;
+  min-height: 72px;
+  border-top: 1px solid var(--color-gray-02);
+  padding-top: 1rem;
+}
+.wrapper .modal-popup.shadow-scroller.scroll-top .modal-header {
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
+}
+.wrapper .modal-popup.shadow-scroller.scroll-bottom .modal-footer {
+  box-shadow: 0px -8px 12px rgba(0, 0, 0, 0.12);
+}
 .wrapper.show {
   display: flex;
   align-items: flex-start;
@@ -68,6 +102,9 @@
 .wrapper.show .modal-popup {
   transform: translateY(0);
 }
+.wrapper.show .modal-popup.rounded {
+  border-radius: var(--ptc-border-radius-standard);
+}
 
 .overlay {
   width: 100vw;