@ptcwebops/ptcw-design 0.1.1 → 0.1.3

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

@@ -0,0 +1,66 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+export class PtcList {
+  constructor() {
+    this.listType = 'para-list';
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const listItems = this.listItems;
+    if (!listItems || listItems.length === 0) {
+      return null;
+    }
+    return (h(Host, { class: classMap },
+      h("ul", null, listItems.map(listItem => {
+        h("li", null,
+          "$",
+          listItem);
+      }))));
+  }
+  getCssClassMap() {
+    return {
+      [this.listType]: true,
+    };
+  }
+  static get is() { return "ptc-list"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-list.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-list.css"]
+  }; }
+  static get properties() { return {
+    "listType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'link-primary' | 'link-sub' | 'icon' | 'para-list'",
+        "resolved": "\"icon\" | \"link-primary\" | \"link-sub\" | \"para-list\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "list-type",
+      "reflect": false,
+      "defaultValue": "'para-list'"
+    },
+    "listItems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[]",
+        "resolved": "string[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

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

@@ -0,0 +1,5 @@
+:host {
+  display: block;
+  width: 100%;
+  height: auto
+}

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

@@ -0,0 +1,58 @@
+import { Component, h, Prop } from '@stencil/core';
+import '@teamhive/lottie-player';
+export class PtcLottie {
+  constructor() {
+    /**
+     * Animation speed
+     */
+    this.speed = 1;
+  }
+  render() {
+    return (h("lottie-player", { autoplay: true, loop: true, src: this.jsonSrc, speed: this.speed }));
+  }
+  static get is() { return "ptc-lottie"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-lottie.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-lottie.css"]
+  }; }
+  static get properties() { return {
+    "jsonSrc": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set Json file src"
+      },
+      "attribute": "json-src",
+      "reflect": false
+    },
+    "speed": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Animation speed"
+      },
+      "attribute": "speed",
+      "reflect": false,
+      "defaultValue": "1"
+    }
+  }; }
+}

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

@@ -0,0 +1,29 @@
+:host {
+  display: block;
+}
+
+.nav-style {
+  background-color: #1c2126;
+  display: block;
+}
+
+@media only screen and (min-width: 992px) {
+  .nav-style {
+    display: grid;
+    grid-template-columns: auto fit-content(76px);
+    grid-template-rows: fit-content(22px) 1fr;
+    grid-template-areas: "secondary secondary" "primary language";
+  }
+
+  .primary-nav {
+    grid-area: primary;
+  }
+
+  .secondary-nav {
+    grid-area: secondary;
+  }
+
+  .language-nav {
+    grid-area: language;
+  }
+}

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

@@ -0,0 +1,21 @@
+import { Component, Host, h } from '@stencil/core';
+export class PtcNav {
+  render() {
+    return (h(Host, null,
+      h("nav", { class: "nav-style" },
+        h("div", { class: "primary-nav", part: "primary-nav-part" },
+          h("slot", { name: "primary-nav-content" })),
+        h("div", { class: "secondary-nav", part: "secondary-nav-part" },
+          h("slot", { name: "secondary-nav-content" })),
+        h("div", { class: "language-nav", part: "language-nav-part" },
+          h("slot", { name: "language-nav-content" })))));
+  }
+  static get is() { return "ptc-nav"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-nav.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-nav.css"]
+  }; }
+}

package/dist/collection/components/ptc-nav-item/ptc-nav-item.css

@@ -0,0 +1,81 @@
+:host {
+  display: block;
+  width: 100%;
+}
+@media screen and (min-width: 992px) {
+  :host {
+    width: auto;
+  }
+}
+
+:host([depth="2"]) a {
+  font-family: var(--ptc-font-secondary-latin);
+  font-size: var(--ptc-font-size-medium);
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-dense);
+  letter-spacing: var(--ptc-letter-spacing-dense);
+  margin-bottom: var(--ptc-element-spacing-03);
+  padding-left: 50px;
+}
+@media screen and (min-width: 992px) {
+  :host([depth="2"]) a {
+    padding-left: 0px;
+  }
+}
+
+:host([depth="1"]) a {
+  font-weight: var(--ptc-font-weight-bold);
+  line-height: var(--ptc-line-height-dense);
+  letter-spacing: var(--ptc-letter-spacing-dense);
+  padding: 20px 25px;
+}
+
+:host([nav-type=secondary-nav]) a {
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-thin);
+}
+
+:host([nav-type=language-nav]) a {
+  font-size: var(--ptc-font-size-x-small);
+  font-weight: var(--ptc-font-weight-thin);
+}
+
+@media only screen and (min-width: 992px) {
+  .primary-nav ~ .ptc-nav-children {
+    position: absolute;
+    left: 0;
+  }
+  .primary-nav ~ .ptc-nav-children ::slotted(.nav-tab) {
+    background-color: #1c2126;
+    display: flex;
+    width: 100vw;
+  }
+
+  .language-nav ~ .ptc-nav-children {
+    position: absolute;
+    background-color: #1c2126;
+  }
+}
+a[aria-expanded=true] ~ .ptc-nav-children {
+  padding-top: var(--ptc-element-spacing-04);
+  max-height: 2000px;
+}
+@media screen and (min-width: 992px) {
+  a[aria-expanded=true] ~ .ptc-nav-children {
+    padding-top: 0;
+  }
+}
+
+.ptc-nav-children {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.25s ease-in-out, padding-top 0.25s ease-in-out;
+}
+
+a {
+  color: var(--color-white);
+  text-transform: uppercase;
+  display: block;
+  outline: none;
+  text-decoration: none;
+}

package/dist/collection/components/ptc-nav-item/ptc-nav-item.js

@@ -0,0 +1,252 @@
+import { Component, Host, h, Element, Prop, Listen, Watch, Event } from '@stencil/core';
+export class PtcNavItem {
+  constructor() {
+    /**
+     * Link URL
+     */
+    this.url = undefined;
+    /**
+     * Nav Description
+     */
+    this.label = '';
+    /**
+     * If the current nav item is expanded
+     */
+    this.ariaExpanded = false;
+    /**
+     * Depth of the current nav item
+     */
+    this.depth = 0;
+    /**
+     * If the current nav item has children nav items
+     */
+    this.hasChildren = false;
+    /**
+     * If the parent nav item of the current one is expanded
+     */
+    this.parentExpanded = false;
+    /**
+     * Nav Item Type
+     */
+    this.navType = undefined;
+  }
+  /**
+   * Watch
+   */
+  expandedHandler(newValue) {
+    const children = Array.prototype.slice.call(this.el.children);
+    children.forEach(child => {
+      child.parentExpanded = newValue;
+    });
+    this.menuItemToggled.emit({ expanded: this.ariaExpanded });
+  }
+  /**
+   * Event Listener
+   */
+  handleClick(e) {
+    if (this.hasChildren) {
+      e.preventDefault();
+      this.ariaExpanded = !this.ariaExpanded;
+    }
+  }
+  handleResize(ev) {
+    console.log('the body was scrolled', ev);
+  }
+  /**
+   * Lifecycle method
+   */
+  componentWillRender() {
+    this.hasChildren = !!this.el.hasChildNodes();
+    let parentMenu = this.el.closest('ptc-nav-item');
+    let nextParentMenu;
+    this.depth = 0;
+    while (parentMenu) {
+      nextParentMenu = parentMenu.parentElement.closest('ptc-nav-item');
+      if (nextParentMenu === parentMenu) {
+        break;
+      }
+      else {
+        parentMenu = nextParentMenu;
+        this.depth = this.depth + 1;
+      }
+    }
+  }
+  render() {
+    //const leftIndent = this.depth > 1 ? 25 * this.depth + 'px' : '25px';
+    return (h(Host, { role: "none" },
+      h("a", { role: "menuitem", href: this.url, tabIndex: this.parentExpanded || this.depth === 1 ? 0 : -1, "aria-depth": this.depth, "aria-haspopup": this.hasChildren.toString(), "aria-expanded": this.hasChildren ? this.ariaExpanded.toString() : this.ariaExpanded, onClick: e => this.handleClick(e), class: this.navType },
+        h("span", null, this.label)),
+      this.hasChildren && (h("div", { class: "ptc-nav-children", role: "menu", part: this.navType, "aria-label": this.label },
+        h("slot", null)))));
+  }
+  static get is() { return "ptc-nav-item"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-nav-item.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-nav-item.css"]
+  }; }
+  static get properties() { return {
+    "url": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Link URL"
+      },
+      "attribute": "url",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "label": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nav Description"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "ariaExpanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the current nav item is expanded"
+      },
+      "attribute": "aria-expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "depth": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Depth of the current nav item"
+      },
+      "attribute": "depth",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "hasChildren": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the current nav item has children nav items"
+      },
+      "attribute": "has-children",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "parentExpanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If the parent nav item of the current one is expanded"
+      },
+      "attribute": "parent-expanded",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "navType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary-nav' | 'secondary-nav' | 'primary-footer' | 'secondary-footer' | 'language-nav'",
+        "resolved": "\"language-nav\" | \"primary-footer\" | \"primary-nav\" | \"secondary-footer\" | \"secondary-nav\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Nav Item Type"
+      },
+      "attribute": "nav-type",
+      "reflect": false,
+      "defaultValue": "undefined"
+    }
+  }; }
+  static get events() { return [{
+      "method": "menuItemToggled",
+      "name": "menuItemToggled",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Menu Toggle Event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get watchers() { return [{
+      "propName": "ariaExpanded",
+      "methodName": "expandedHandler"
+    }]; }
+  static get listeners() { return [{
+      "name": "handleClick",
+      "method": "handleClick",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }]; }
+}

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

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

@@ -0,0 +1,14 @@
+import { Component, Host, h } from '@stencil/core';
+export class PtcOverlay {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "ptc-overlay"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-overlay.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-overlay.css"]
+  }; }
+}

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

@@ -0,0 +1,88 @@
+p.default {
+  text-shadow: 0 3px 6px var(--color-white);
+  line-height: var(--ptc-line-height-dense);
+  color: var(--color-primary-grey);
+}
+p.xx-small {
+  font-size: var(--ptc-font-size-xx-small);
+}
+p.x-small {
+  font-size: var(--ptc-font-size-x-small);
+}
+p.small {
+  font-size: var(--ptc-font-size-small);
+}
+p.medium {
+  font-size: var(--ptc-font-size-medium);
+}
+p.large {
+  font-size: var(--ptc-font-size-large);
+}
+p.x-large {
+  font-size: var(--ptc-font-size-x-large);
+}
+p.xx-large {
+  font-size: var(--ptc-font-size-xx-large);
+}
+p.xxx-large {
+  font-size: var(--ptc-font-size-xxx-large);
+}
+p.xxxx-large {
+  font-size: var(--ptc-font-size-xxxx-large);
+}
+p.w-3 {
+  font-weight: var(--ptc-font-weight-thin);
+}
+p.w-4 {
+  font-weight: var(--ptc-font-weight-regular);
+}
+p.w-5 {
+  font-weight: var(--ptc-font-weight-medium);
+}
+p.w-6 {
+  font-weight: var(--ptc-font-weight-semibold);
+}
+p.w-7 {
+  font-weight: var(--ptc-font-weight-bold);
+}
+p.w-8 {
+  font-weight: var(--ptc-font-weight-extrabold);
+}
+p.w-9 {
+  font-weight: var(--ptc-font-weight-black);
+}
+p.margin-flush {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+p.margin-top-3 {
+  margin-top: var(--ptc-element-spacing-03);
+}
+p.margin-top-4 {
+  margin-top: var(--ptc-element-spacing-04);
+}
+p.margin-top-5 {
+  margin-top: var(--ptc-element-spacing-05);
+}
+p.margin-top-6 {
+  margin-top: var(--ptc-element-spacing-06);
+}
+p.margin-bottom-3 {
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+p.margin-bottom-4 {
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+p.margin-bottom-5 {
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+p.margin-bottom-6 {
+  margin-bottom: var(--ptc-element-spacing-06);
+}
+p.announcement {
+  text-transform: uppercase;
+  font-size: var(--ptc-font-size-small);
+  color: var(--color-secondary-grey);
+  line-height: var(--ptc-line-height-looser);
+  letter-spacing: 1px;
+}