@ptcwebops/ptcw-design 0.5.6 → 0.5.8

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

@@ -1,293 +1,293 @@
-import { Component, Prop, h, Event, Host } from '@stencil/core';
-export class PtcButton {
-  constructor() {
-    /**
-     * Disabled button
-     */
-    this.disabled = false;
-    /**
-     * Button type
-     */
-    this.type = 'button';
-    /**
-     * Button theme color
-     */
-    this.color = 'ptc-primary';
-    /**
-     * Icon Animation
-     */
-    this.iconAnimation = '';
-    /**
-     * Icon Position
-     */
-    this.iconPosition = 'icon-right';
-    /**
-     * Link URL
-     */
-    this.linkHref = undefined;
-    /**
-     * link Title
-     */
-    this.linkTitle = undefined;
-    /**
-     * Link target
-     * */
-    this.target = '_self';
-    /**
-     *  Link rel
-     * */
-    this.rel = undefined;
-    /**
-     *  (optional) tab-nav.
-     *  indicates that its element can be focused, and where it participates in sequential keyboard navigation.
-     *  A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
-     */
-    this.tabNav = 0;
-  }
-  clickEventHandler() {
-    this.clickEvent.emit();
-    //console.log('click!');
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    const Tag = !!this.linkHref ? 'a' : 'button';
-    return (h(Host, null,
-      this.styles && h("style", null, this.styles),
-      h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })),
-        h("span", null,
-          h("slot", { name: "slot-before-text" }),
-          h("slot", null),
-          h("slot", { name: "slot-after-text" })))));
-  }
-  getCssClassMap() {
-    return {
-      [this.color]: true,
-      [this.iconAnimation]: true,
-      [this.iconPosition]: true,
-      ['disabled']: this.disabled ? true : false,
-    };
-  }
-  static get is() { return "ptc-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["ptc-button.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["ptc-button.css"]
-  }; }
-  static get properties() { return {
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Disabled button"
-      },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "type": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'button' | 'reset' | 'submit' | 'link'",
-        "resolved": "\"button\" | \"link\" | \"reset\" | \"submit\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button type"
-      },
-      "attribute": "type",
-      "reflect": false,
-      "defaultValue": "'button'"
-    },
-    "color": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'offwhite' | 'blackgrey' | 'turtlegreen' | 'nav' | 'legacy-green' | 'ptc-primary' | 'ptc-secondary'| 'ptc-tertiary' | 'ptc-quaternary'",
-        "resolved": "\"blackgrey\" | \"legacy-green\" | \"nav\" | \"offwhite\" | \"ptc-primary\" | \"ptc-quaternary\" | \"ptc-secondary\" | \"ptc-tertiary\" | \"turtlegreen\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Button theme color"
-      },
-      "attribute": "color",
-      "reflect": false,
-      "defaultValue": "'ptc-primary'"
-    },
-    "iconAnimation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'animation-right' | 'animation-down' | ''",
-        "resolved": "\"\" | \"animation-down\" | \"animation-right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon Animation"
-      },
-      "attribute": "icon-animation",
-      "reflect": false,
-      "defaultValue": "''"
-    },
-    "iconPosition": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'icon-left' | 'icon-right'",
-        "resolved": "\"icon-left\" | \"icon-right\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon Position"
-      },
-      "attribute": "icon-position",
-      "reflect": false,
-      "defaultValue": "'icon-right'"
-    },
-    "linkHref": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Link URL"
-      },
-      "attribute": "link-href",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "linkTitle": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "link Title"
-      },
-      "attribute": "link-title",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Link target"
-      },
-      "attribute": "target",
-      "reflect": false,
-      "defaultValue": "'_self'"
-    },
-    "rel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Link rel"
-      },
-      "attribute": "rel",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "tabNav": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "(optional) tab-nav. \nindicates that its element can be focused, and where it participates in sequential keyboard navigation.\nA negative value (usually tabindex=\"-1\") means that the element is not reachable via sequential keyboard navigation"
-      },
-      "attribute": "tab-nav",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "styles": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "(optional) Injected CSS Styles"
-      },
-      "attribute": "styles",
-      "reflect": false
-    }
-  }; }
-  static get events() { return [{
-      "method": "clickEvent",
-      "name": "clickEvent",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the button has focus."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
-      }
-    }]; }
-}
+import { Component, Prop, h, Event, Host } from '@stencil/core';
+export class PtcButton {
+  constructor() {
+    /**
+     * Disabled button
+     */
+    this.disabled = false;
+    /**
+     * Button type
+     */
+    this.type = 'button';
+    /**
+     * Button theme color
+     */
+    this.color = 'ptc-primary';
+    /**
+     * Icon Animation
+     */
+    this.iconAnimation = '';
+    /**
+     * Icon Position
+     */
+    this.iconPosition = 'icon-right';
+    /**
+     * Link URL
+     */
+    this.linkHref = undefined;
+    /**
+     * link Title
+     */
+    this.linkTitle = undefined;
+    /**
+     * Link target
+     * */
+    this.target = '_self';
+    /**
+     *  Link rel
+     * */
+    this.rel = undefined;
+    /**
+     *  (optional) tab-nav.
+     *  indicates that its element can be focused, and where it participates in sequential keyboard navigation.
+     *  A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation
+     */
+    this.tabNav = 0;
+  }
+  clickEventHandler() {
+    this.clickEvent.emit();
+    //console.log('click!');
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    const Tag = !!this.linkHref ? 'a' : 'button';
+    return (h(Host, null,
+      this.styles && h("style", null, this.styles),
+      h(Tag, Object.assign({ class: classMap, onClick: this.clickEventHandler.bind(this) }, (!!this.linkHref ? { href: this.linkHref } : {}), (!this.linkHref ? { type: this.type } : {}), (!!this.target && !!this.linkHref ? { target: this.target } : {}), (!!this.rel && !!this.linkHref ? { rel: this.rel } : {}), (!!this.linkHref ? { title: this.linkTitle ? this.linkTitle : this.linkHref } : {}), (!!this.tabNav ? { tabindex: -1 } : { tabindex: 0 })),
+        h("span", null,
+          h("slot", { name: "slot-before-text" }),
+          h("slot", null),
+          h("slot", { name: "slot-after-text" })))));
+  }
+  getCssClassMap() {
+    return {
+      [this.color]: true,
+      [this.iconAnimation]: true,
+      [this.iconPosition]: true,
+      ['disabled']: this.disabled ? true : false,
+    };
+  }
+  static get is() { return "ptc-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["ptc-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["ptc-button.css"]
+  }; }
+  static get properties() { return {
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Disabled button"
+      },
+      "attribute": "disabled",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'button' | 'reset' | 'submit' | 'link'",
+        "resolved": "\"button\" | \"link\" | \"reset\" | \"submit\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button type"
+      },
+      "attribute": "type",
+      "reflect": false,
+      "defaultValue": "'button'"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'offwhite' | 'blackgrey' | 'turtlegreen' | 'nav' | 'legacy-green' | 'ptc-primary' | 'ptc-secondary'| 'ptc-tertiary' | 'ptc-quaternary'",
+        "resolved": "\"blackgrey\" | \"legacy-green\" | \"nav\" | \"offwhite\" | \"ptc-primary\" | \"ptc-quaternary\" | \"ptc-secondary\" | \"ptc-tertiary\" | \"turtlegreen\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Button theme color"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "'ptc-primary'"
+    },
+    "iconAnimation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'animation-right' | 'animation-down' | ''",
+        "resolved": "\"\" | \"animation-down\" | \"animation-right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon Animation"
+      },
+      "attribute": "icon-animation",
+      "reflect": false,
+      "defaultValue": "''"
+    },
+    "iconPosition": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'icon-left' | 'icon-right'",
+        "resolved": "\"icon-left\" | \"icon-right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Icon Position"
+      },
+      "attribute": "icon-position",
+      "reflect": false,
+      "defaultValue": "'icon-right'"
+    },
+    "linkHref": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Link URL"
+      },
+      "attribute": "link-href",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "linkTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "link Title"
+      },
+      "attribute": "link-title",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "target": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Link target"
+      },
+      "attribute": "target",
+      "reflect": false,
+      "defaultValue": "'_self'"
+    },
+    "rel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Link rel"
+      },
+      "attribute": "rel",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "tabNav": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "(optional) tab-nav. \r\nindicates that its element can be focused, and where it participates in sequential keyboard navigation.\r\nA negative value (usually tabindex=\"-1\") means that the element is not reachable via sequential keyboard navigation"
+      },
+      "attribute": "tab-nav",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "(optional) Injected CSS Styles"
+      },
+      "attribute": "styles",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "clickEvent",
+      "name": "clickEvent",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the button has focus."
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -261,6 +261,82 @@
   transition-delay: var(--ptc-delay-5);
 }
 
+:host(.listing-card) .card-border {
+  width: 100%;
+  overflow: hidden;
+  background: var(--color-white);
+  box-shadow: var(--ptc-shadow-small);
+  border-radius: 3px;
+  height: 449px;
+  display: flex;
+  flex-direction: row;
+}
+:host(.listing-card) .card-border:hover {
+  background: var(--color-gray-02);
+  box-shadow: var(--ptc-shadow-large);
+}
+:host(.listing-card) .card-layout {
+  display: block;
+  position: relative;
+}
+:host(.listing-card) .card-layout .ribbon-text {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-right: 100px;
+  margin-top: 22px;
+  background-color: var(--color-white);
+  padding: 4px 22px 5px 23px;
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-loose);
+  color: var(--color-gray-11);
+}
+:host(.listing-card) .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host(.listing-card) .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+:host(.listing-card) .card-media {
+  width: 100%;
+  height: 224.5px;
+  transform: scale(1);
+  transform-origin: center bottom;
+  transition: transform var(--ptc-transition-medium) var(--ptc-standard-ease);
+  transition-delay: var(--ptc-delay-medium);
+}
+:host(.listing-card) .card-body {
+  padding: 24px 20px;
+}
+:host(.listing-card) .card-body .small {
+  font-size: var(--ptc-font-size-x-small);
+}
+:host(.listing-card) .card-body h3 {
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-small);
+  line-height: var(--ptc-line-height-loose);
+  line-height: 21px;
+  color: var(--color-gray-11);
+  margin-bottom: 12px;
+  margin-top: 0rem;
+}
+:host(.listing-card) ::slotted([slot=slot-description]) {
+  font-family: var(--ptc-font-latin);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-regular);
+  font-size: var(--ptc-font-size-x-small);
+  line-height: var(--ptc-line-height-dense);
+  color: var(--color-gray-11);
+  margin-bottom: 39px;
+}
+
 .ptc-h3.uppercase {
   text-transform: uppercase;
 }