@ptcwebops/ptcw-design 0.2.8 → 0.3.0

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

@@ -1,3 +1,13 @@
+:host {
+  z-index: 1;
+}
+:host span {
+  -moz-osx-font-smoothing: grayscale;
+  /*(For Firefox)*/
+  -webkit-font-smoothing: antialiased;
+  /*(For Chrome and Safari)*/
+}
+
 :host(.link-style) span {
   color: var(--color-primary-uigrey);
   font-weight: var(--ptc-font-weight-black);
@@ -20,7 +30,14 @@
   font-size: var(--ptc-font-size-medium);
   line-height: var(--ptc-line-height-dense);
   font-weight: var(--ptc-font-weight-regular);
-  color: #40434a;
+  color: var(--color-primary-grey);
+}
+
+:host(.plm-hub-style) span {
+  font-size: var(--ptc-font-size-medium);
+  line-height: var(--ptc-line-height-19);
+  font-weight: var(--ptc-font-weight-medium);
+  color: var(--color-white);
 }
 
 :host(.inline) span {
@@ -33,4 +50,12 @@
 
 :host(.inline-block) span {
   display: inline-block;
+}
+
+:host(.white) span {
+  color: var(--color-white);
+}
+
+:host(.primary-grey) span {
+  color: var(--color-primary-grey);
 }

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

@@ -5,6 +5,9 @@ export class PtcSpan {
      * Span Style
      */
     this.spanStyle = 'tag-style';
+    /**
+     * Display
+     */
     this.display = 'inline';
   }
   render() {
@@ -33,8 +36,8 @@ export class PtcSpan {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'link-style' | 'tag-style' | 'nav-style'",
-        "resolved": "\"link-style\" | \"nav-style\" | \"tag-style\"",
+        "original": "'link-style' | 'tag-style' | 'nav-style' | 'plm-hub-style'",
+        "resolved": "\"link-style\" | \"nav-style\" | \"plm-hub-style\" | \"tag-style\"",
         "references": {}
       },
       "required": false,
@@ -59,7 +62,7 @@ export class PtcSpan {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Display"
       },
       "attribute": "display",
       "reflect": false,

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

@@ -1,23 +1,34 @@
 div.center {
   text-align: center;
 }
-div.center.dotted h1::before, div.center.dotted h2::before, div.center.dotted h3::before {
+div.center.dotted h1::before,
+div.center.dotted h2::before,
+div.center.dotted h3::before {
   left: 50%;
   transform: translateX(-50%);
 }
 div.left {
   text-align: left;
 }
-div.left.dotted h1::before, div.left.dotted h2::before, div.left.dotted h3::before {
+div.left.dotted h1::before,
+div.left.dotted h2::before,
+div.left.dotted h3::before {
   left: 0%;
 }
 div.right {
   text-align: right;
 }
-div.right.dotted h1::before, div.right.dotted h2::before, div.right.dotted h3::before {
+div.right.dotted h1::before,
+div.right.dotted h2::before,
+div.right.dotted h3::before {
   right: 0%;
 }
-div.dotted h1::before, div.dotted h2::before, div.dotted h3::before {
+div.inherit {
+  text-align: inherit;
+}
+div.dotted h1::before,
+div.dotted h2::before,
+div.dotted h3::before {
   content: "";
   position: absolute;
   top: -6px;
@@ -25,7 +36,9 @@ div.dotted h1::before, div.dotted h2::before, div.dotted h3::before {
   display: block;
   border-top: 3px dashed #5bb73b;
 }
-div.solid h1::before, div.solid h2::before, div.solid h3::before {
+div.solid h1::before,
+div.solid h2::before,
+div.solid h3::before {
   content: "";
   position: absolute;
   width: 100%;
@@ -34,7 +47,9 @@ div.solid h1::before, div.solid h2::before, div.solid h3::before {
   opacity: 0.9;
   left: 0px;
 }
-div.solid h1::after, div.solid h2::after, div.solid h3::after {
+div.solid h1::after,
+div.solid h2::after,
+div.solid h3::after {
   content: "";
   position: absolute;
   width: 20%;
@@ -43,22 +58,104 @@ div.solid h1::after, div.solid h2::after, div.solid h3::after {
   top: -2px;
   left: 0px;
 }
-div h1,
-div h2,
-div h3 {
+div.is-standard h1,
+div.is-standard h2,
+div.is-standard h3 {
   display: inline-block;
   position: relative;
 }
-div h1 {
+div.is-standard h1 {
   font-size: 46px;
   line-height: 52px;
   font-weight: 800;
   letter-spacing: 0px;
   color: var(--color-primary-grey);
 }
-div h2 {
+div.is-standard h2 {
   font-size: 28px;
   line-height: 32px;
   font-weight: 800;
   color: var(--color-primary-grey);
+}
+div.is-plm-hub h1,
+div.is-plm-hub h2,
+div.is-plm-hub h3 {
+  display: inline-block;
+  position: relative;
+  margin-block-start: 0em;
+  margin-block-end: 0em;
+  margin-inline-start: 0px;
+  margin-inline-end: 0px;
+}
+div.is-plm-hub h1 {
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: 50px;
+  line-height: 59px;
+  color: var(--color-white);
+}
+div.is-plm-hub h2 {
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-x-large);
+  line-height: 28px;
+  color: var(--color-white);
+}
+div.is-plm-hub h3 {
+  font-weight: var(--ptc-font-weight-bold);
+  font-size: var(--ptc-font-size-large);
+  line-height: 23px;
+  color: var(--color-white);
+}
+div.margin-flush {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+div.margin-top-2 {
+  margin-top: var(--ptc-element-spacing-02);
+}
+div.margin-top-3 {
+  margin-top: var(--ptc-element-spacing-03);
+}
+div.margin-top-4 {
+  margin-top: var(--ptc-element-spacing-04);
+}
+div.margin-top-5 {
+  margin-top: var(--ptc-element-spacing-05);
+}
+div.margin-top-6 {
+  margin-top: var(--ptc-element-spacing-06);
+}
+div.margin-bottom-2 {
+  margin-bottom: var(--ptc-element-spacing-02);
+}
+div.margin-bottom-3 {
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+div.margin-bottom-4 {
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+div.margin-bottom-5 {
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+div.margin-bottom-6 {
+  margin-bottom: var(--ptc-element-spacing-06);
+}
+div.margin-2 {
+  margin-top: var(--ptc-element-spacing-02);
+  margin-bottom: var(--ptc-element-spacing-02);
+}
+div.margin-3 {
+  margin-top: var(--ptc-element-spacing-03);
+  margin-bottom: var(--ptc-element-spacing-03);
+}
+div.margin-4 {
+  margin-top: var(--ptc-element-spacing-04);
+  margin-bottom: var(--ptc-element-spacing-04);
+}
+div.margin-5 {
+  margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: var(--ptc-element-spacing-05);
+}
+div.margin-6 {
+  margin-top: var(--ptc-element-spacing-06);
+  margin-bottom: var(--ptc-element-spacing-06);
 }

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

@@ -1,6 +1,10 @@
 import { Component, Host, h, Prop } from '@stencil/core';
 export class PtcTitle {
   constructor() {
+    /**
+     * Is this title using on the PLM Hub page
+     */
+    this.isPlmHub = false;
     /**
      * Title Tag Type
      */
@@ -36,6 +40,8 @@ export class PtcTitle {
     return {
       [this.textAlign]: true,
       [this.upperline]: true,
+      [this.isPlmHub ? 'is-plm-hub' : 'is-standard']: true,
+      [this.titleMargin]: !!this.titleMargin ? true : false
     };
   }
   static get is() { return "ptc-title"; }
@@ -47,6 +53,24 @@ export class PtcTitle {
     "$": ["ptc-title.css"]
   }; }
   static get properties() { return {
+    "isPlmHub": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Is this title using on the PLM Hub page"
+      },
+      "attribute": "is-plm-hub",
+      "reflect": false,
+      "defaultValue": "false"
+    },
     "type": {
       "type": "string",
       "mutable": false,
@@ -69,8 +93,8 @@ export class PtcTitle {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'left' | 'center' | 'right'",
-        "resolved": "\"center\" | \"left\" | \"right\"",
+        "original": "'left' | 'center' | 'right' | 'inherit'",
+        "resolved": "\"center\" | \"inherit\" | \"left\" | \"right\"",
         "references": {}
       },
       "required": false,
@@ -87,8 +111,8 @@ export class PtcTitle {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "'dotted' | 'solid'",
-        "resolved": "\"dotted\" | \"solid\"",
+        "original": "'dotted' | 'solid' | 'no-upperline'",
+        "resolved": "\"dotted\" | \"no-upperline\" | \"solid\"",
         "references": {}
       },
       "required": false,
@@ -100,6 +124,40 @@ export class PtcTitle {
       "attribute": "upperline",
       "reflect": false,
       "defaultValue": "'dotted'"
+    },
+    "titleMargin": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'margin-flush'\n    | 'margin-top-3'\n    | 'margin-top-4'\n    | 'margin-top-5'\n    | 'margin-top-6'\n    | 'margin-bottom-3'\n    | 'margin-bottom-4'\n    | 'margin-bottom-5'\n    | 'margin-bottom-6'\n    | 'margin-3'\n    | 'margin-4'\n    | 'margin-5'\n    | 'margin-6'",
+        "resolved": "\"margin-3\" | \"margin-4\" | \"margin-5\" | \"margin-6\" | \"margin-bottom-3\" | \"margin-bottom-4\" | \"margin-bottom-5\" | \"margin-bottom-6\" | \"margin-flush\" | \"margin-top-3\" | \"margin-top-4\" | \"margin-top-5\" | \"margin-top-6\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Title Margin"
+      },
+      "attribute": "title-margin",
+      "reflect": false
+    },
+    "styles": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Injected Style"
+      },
+      "attribute": "styles",
+      "reflect": false
     }
   }; }
 }

package/dist/custom-elements/index.d.ts

@@ -32,6 +32,12 @@ export const PtcAvatar: {
   new (): PtcAvatar;
 };
 
+interface PtcBreadcrumb extends Components.PtcBreadcrumb, HTMLElement {}
+export const PtcBreadcrumb: {
+  prototype: PtcBreadcrumb;
+  new (): PtcBreadcrumb;
+};
+
 interface PtcButton extends Components.PtcButton, HTMLElement {}
 export const PtcButton: {
   prototype: PtcButton;
@@ -44,6 +50,24 @@ export const PtcCard: {
   new (): PtcCard;
 };
 
+interface PtcCardBottom extends Components.PtcCardBottom, HTMLElement {}
+export const PtcCardBottom: {
+  prototype: PtcCardBottom;
+  new (): PtcCardBottom;
+};
+
+interface PtcCardContent extends Components.PtcCardContent, HTMLElement {}
+export const PtcCardContent: {
+  prototype: PtcCardContent;
+  new (): PtcCardContent;
+};
+
+interface PtcCardPlm extends Components.PtcCardPlm, HTMLElement {}
+export const PtcCardPlm: {
+  prototype: PtcCardPlm;
+  new (): PtcCardPlm;
+};
+
 interface PtcCountdown extends Components.PtcCountdown, HTMLElement {}
 export const PtcCountdown: {
   prototype: PtcCountdown;
@@ -68,6 +92,12 @@ export const PtcForm: {
   new (): PtcForm;
 };
 
+interface PtcHero extends Components.PtcHero, HTMLElement {}
+export const PtcHero: {
+  prototype: PtcHero;
+  new (): PtcHero;
+};
+
 interface PtcImg extends Components.PtcImg, HTMLElement {}
 export const PtcImg: {
   prototype: PtcImg;