@ptcwebops/ptcw-design 0.8.2 → 0.8.3

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

@@ -1,22 +1,22 @@
-import { Host, h } from '@stencil/core';
-export class PtcBreadcrumb {
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: "white" })), h("slot", null)));
-  }
-  getCssClassMap() {
-    return {};
-  }
-  static get is() { return "ptc-breadcrumb"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-breadcrumb.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-breadcrumb.css"]
-    };
-  }
-}
+import { Host, h } from '@stencil/core';
+export class PtcBreadcrumb {
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { class: classMap }, h("list-item", { listType: 'breadcrumb', flushBefore: true, "link-href": "https://www.ptc.com" }, h("icon-asset", { type: "ptc", size: "medium", name: "icon-home", color: "white" })), h("slot", null)));
+  }
+  getCssClassMap() {
+    return {};
+  }
+  static get is() { return "ptc-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-breadcrumb.css"]
+    };
+  }
+}

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

@@ -1,264 +1,264 @@
-import { h, Host } from '@stencil/core';
-export class PtcButton {
-  constructor() {
-    this.disabled = false;
-    this.type = 'button';
-    this.color = 'ptc-primary';
-    this.iconAnimation = '';
-    this.iconPosition = 'icon-right';
-    this.linkHref = undefined;
-    this.linkTitle = undefined;
-    this.target = '_self';
-    this.rel = undefined;
-    this.tabNav = 0;
-    this.styles = undefined;
-  }
-  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": {}
-        }
-      }];
-  }
-}
+import { h, Host } from '@stencil/core';
+export class PtcButton {
+  constructor() {
+    this.disabled = false;
+    this.type = 'button';
+    this.color = 'ptc-primary';
+    this.iconAnimation = '';
+    this.iconPosition = 'icon-right';
+    this.linkHref = undefined;
+    this.linkTitle = undefined;
+    this.target = '_self';
+    this.rel = undefined;
+    this.tabNav = 0;
+    this.styles = undefined;
+  }
+  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": {}
+        }
+      }];
+  }
+}

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

@@ -750,7 +750,7 @@
   height: 442px;
   display: flex;
   flex-direction: row;
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 :host(.resource-center-card) .card-border:hover {
   background: var(--color-gray-02);
@@ -806,11 +806,9 @@
   position: absolute;
   top: 0;
   left: 0;
-  margin-right: 100px;
   margin-top: 24px;
   background-color: var(--color-white);
   padding: 4px 24px;
-  max-width: 80%;
   font-family: var(--ptc-font-latin);
   font-style: var(--ptc-font-style-normal);
   font-weight: var(--ptc-font-weight-bold);
@@ -818,6 +816,9 @@
   color: var(--color-gray-11);
   border-radius: 0px 3px 3px 0px;
   box-shadow: var(--ptc-shadow-small);
+  max-width: 70%;
+  max-height: 20px;
+  overflow: hidden;
 }
 :host(.resource-center-card) .link-wrapper {
   outline: none;
@@ -998,6 +999,7 @@
 :host(.case-studies-card) .card-layout {
   display: block;
   position: relative;
+  width: 100%;
 }
 :host(.case-studies-card) .link-wrapper {
   outline: none;
@@ -1131,4 +1133,13 @@
 }
 .ptc-h3.none {
   text-transform: none;
+}
+
+h3.clamp-title {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  overflow-wrap: break-word;
 }