@ptcwebops/ptcw-design 0.8.0 → 0.8.1

package/dist/collection/components/ptc-card-bottom/ptc-card-bottom.js

@@ -1,114 +1,116 @@
-import { Host, h } from '@stencil/core';
-export class PtcCardBottom {
-  constructor() {
-    this.cardType = undefined;
-    this.styles = undefined;
-  }
-  hoverEventHandler() {
-    this.hoverEvent.emit();
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.previousElementSibling.classList.add('mouse-hover');
-      this.el.classList.add('mouse-hover-card-bottom');
-    }
-  }
-  leaveEventHandler() {
-    this.hoverEvent.emit();
-    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist')) {
-      this.el.previousElementSibling.classList.remove('mouse-hover');
-      this.el.classList.remove('mouse-hover-card-bottom');
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: this.cardType ? true : false,
-    };
-  }
-  static get is() { return "ptc-card-bottom"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-card-bottom.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-card-bottom.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cardType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'card-playlist'",
-          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-wide\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "card-type",
-        "reflect": false
-      },
-      "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": "hoverEvent",
-        "name": "hoverEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "leaveEvent",
-        "name": "leaveEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcCardBottom {
+  constructor() {
+    this.cardType = undefined;
+    this.styles = undefined;
+  }
+  hoverEventHandler() {
+    this.hoverEvent.emit();
+    //if statement: the card type that doesn't need a hover event
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
+      this.el.previousElementSibling.classList.add('mouse-hover');
+      this.el.classList.add('mouse-hover-card-bottom');
+    }
+  }
+  leaveEventHandler() {
+    this.hoverEvent.emit();
+    //if statement: the card type that doesn't need a hover event
+    if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && !this.el.classList.contains('extra-tall')) {
+      this.el.previousElementSibling.classList.remove('mouse-hover');
+      this.el.classList.remove('mouse-hover-card-bottom');
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { part: "card-bottom", class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-bottom-wrapper" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: this.cardType ? true : false,
+    };
+  }
+  static get is() { return "ptc-card-bottom"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-card-bottom.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-card-bottom.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'card-playlist' | 'extra-tall' | 'color-outlined'",
+          "resolved": "\"card-2up\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-type",
+        "reflect": false
+      },
+      "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": "hoverEvent",
+        "name": "hoverEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "leaveEvent",
+        "name": "leaveEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -64,6 +64,12 @@
   transition: opacity var(--ptc-transition-medium) var(--ptc-ease-inout);
 }
 
+:host(.extra-tall) .ptc-card-content-wrapper {
+  border-radius: var(--ptc-border-radius-large);
+  position: relative;
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.12);
+}
+
 :host(.card-2up) .ptc-card-content-wrapper {
   border-radius: var(--ptc-border-radius-large);
   position: relative;
@@ -196,6 +202,23 @@
   height: 322px;
 }
 
+:host(.extra-tall) .ptc-card-content-wrapper {
+  height: 435px;
+}
+:host(.extra-tall) .ptc-card-content-wrapper ::slotted(*) {
+  height: 435px;
+}
+
+:host(.color-outlined) {
+  border-radius: var(--ptc-border-radius-large);
+}
+:host(.color-outlined) .ptc-card-content-wrapper {
+  height: 235px;
+}
+:host(.color-outlined) .ptc-card-content-wrapper ::slotted(*) {
+  height: 235px;
+}
+
 @media only screen and (min-width: 768px) {
   :host(.card-tall) .ptc-card-content-wrapper {
     height: 325px;
@@ -217,6 +240,13 @@
   :host(.card-2up) .ptc-card-content-wrapper ::slotted(*) {
     height: 268px;
   }
+
+  :host(.extra-tall) .ptc-card-content-wrapper {
+    height: 507px;
+  }
+  :host(.extra-tall) .ptc-card-content-wrapper ::slotted(*) {
+    height: 507px;
+  }
 }
 @media only screen and (min-width: 992px) {
   :host(.card-tall) .ptc-card-content-wrapper {
@@ -226,6 +256,14 @@
     height: 380px;
   }
 }
+@media only screen and (min-width: 1200px) {
+  :host(.extra-tall) .ptc-card-content-wrapper {
+    height: 663px;
+  }
+  :host(.extra-tall) .ptc-card-content-wrapper ::slotted(*) {
+    height: 663px;
+  }
+}
 @media only screen and (min-width: 1980px) {
   :host(.card-tall) .ptc-card-content-wrapper {
     height: 546px;
@@ -247,4 +285,23 @@
   :host(.card-2up) .ptc-card-content-wrapper ::slotted(*) {
     height: 376px;
   }
+}
+:host(.o-red) {
+  border: 2px solid var(--color-red-07);
+}
+
+:host(.o-green) {
+  border: 2px solid var(--color-green-07);
+}
+
+:host(.o-slate-grey) {
+  border: 2px solid var(--color-gray-07);
+}
+
+:host(.o-orange) {
+  border: 2px solid var(--color-orange-07);
+}
+
+:host(.o-blue) {
+  border: 2px solid var(--color-blue-07);
 }

package/dist/collection/components/ptc-card-content/ptc-card-content.js

@@ -1,118 +1,137 @@
-import { Host, h } from '@stencil/core';
-export class PtcCardContent {
-  constructor() {
-    this.cardType = undefined;
-    this.styles = undefined;
-  }
-  hoverEventHandler() {
-    if (!this.el.classList.contains('speed-bump') && !this.el.classList.contains('card-video-intro') && !this.el.classList.contains('card-dynamic')) {
-      this.hoverEvent.emit();
-      this.el.classList.add('mouse-hover');
-      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
-        this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
-      }
-    }
-  }
-  leaveEventHandler() {
-    if (!this.el.classList.contains('speed-bump') && !this.el.classList.contains('card-video-intro') && !this.el.classList.contains('card-dynamic')) {
-      this.hoverEvent.emit();
-      this.el.classList.remove('mouse-hover');
-      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
-        this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
-      }
-    }
-  }
-  render() {
-    const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
-  }
-  getCssClassMap() {
-    return {
-      [this.cardType]: !!this.cardType ? true : false,
-    };
-  }
-  static get is() { return "ptc-card-content"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["ptc-card-content.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["ptc-card-content.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "cardType": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-dynamic'",
-          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"speed-bump\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "card-type",
-        "reflect": false
-      },
-      "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": "hoverEvent",
-        "name": "hoverEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }, {
-        "method": "leaveEvent",
-        "name": "leaveEvent",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "complexType": {
-          "original": "void",
-          "resolved": "void",
-          "references": {}
-        }
-      }];
-  }
-  static get elementRef() { return "el"; }
-}
+import { Host, h } from '@stencil/core';
+export class PtcCardContent {
+  constructor() {
+    this.cardType = undefined;
+    this.outlineColor = undefined;
+    this.styles = undefined;
+  }
+  hoverEventHandler() {
+    if (!this.el.classList.contains('speed-bump') && !this.el.classList.contains('card-video-intro') && !this.el.classList.contains('card-dynamic') && !this.el.classList.contains('extra-tall')) {
+      this.hoverEvent.emit();
+      this.el.classList.add('mouse-hover');
+      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
+        this.el.nextElementSibling.classList.add('mouse-hover-card-bottom');
+      }
+    }
+  }
+  leaveEventHandler() {
+    if (!this.el.classList.contains('speed-bump') && !this.el.classList.contains('card-video-intro') && !this.el.classList.contains('card-dynamic') && !this.el.classList.contains('extra-tall')) {
+      this.hoverEvent.emit();
+      this.el.classList.remove('mouse-hover');
+      if (!this.el.classList.contains('card-video') && !this.el.classList.contains('card-playlist') && this.el.nextElementSibling) {
+        this.el.nextElementSibling.classList.remove('mouse-hover-card-bottom');
+      }
+    }
+  }
+  render() {
+    const classMap = this.getCssClassMap();
+    return (h(Host, { part: "card-content", class: classMap, onMouseEnter: this.hoverEventHandler.bind(this), onMouseLeave: this.leaveEventHandler.bind(this) }, this.styles && h("style", null, this.styles), h("div", { class: "ptc-card-content-wrapper" }, h("slot", null))));
+  }
+  getCssClassMap() {
+    return {
+      [this.cardType]: !!this.cardType ? true : false,
+      [this.outlineColor]: !!this.outlineColor ? true : false,
+    };
+  }
+  static get is() { return "ptc-card-content"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-card-content.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-card-content.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardType": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'card-video' | 'card-tall' | 'card-2up' | 'card-wide' | 'speed-bump' | 'card-playlist' | 'card-video-intro' | 'card-dynamic' | 'extra-tall' | 'color-outlined'",
+          "resolved": "\"card-2up\" | \"card-dynamic\" | \"card-playlist\" | \"card-tall\" | \"card-video\" | \"card-video-intro\" | \"card-wide\" | \"color-outlined\" | \"extra-tall\" | \"speed-bump\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "card-type",
+        "reflect": false
+      },
+      "outlineColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'o-red' | 'o-orange' | 'o-blue' | 'o-slate-grey' | 'o-green'",
+          "resolved": "\"o-blue\" | \"o-green\" | \"o-orange\" | \"o-red\" | \"o-slate-grey\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "outline-color",
+        "reflect": false
+      },
+      "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": "hoverEvent",
+        "name": "hoverEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }, {
+        "method": "leaveEvent",
+        "name": "leaveEvent",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/{ptc-card-plm/ptc-card-plm.css → ptc-card-wrapper/ptc-card-wrapper.css}

@@ -64,6 +64,22 @@
   box-shadow: var(--ptc-shadow-x-small);
 }
 
+:host(.extra-tall) {
+  position: relative;
+}
+:host(.extra-tall) a {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+  inset: 0px;
+}
+
+:host(.color-outlined) {
+  position: relative;
+  border-radius: var(--ptc-border-radius-large);
+}
+
 :host(.card-video-p) {
   padding: var(--ptc-element-spacing-05);
   padding-bottom: var(--ptc-element-spacing-06);
@@ -77,6 +93,17 @@
   margin-left: var(--ptc-element-spacing-02);
 }
 
+:host(.extraT-overlay) a::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  bottom: 0;
+  left: 0;
+  border-radius: var(--ptc-border-radius-large);
+}
+
 @media only screen and (min-width: 768px) {
   :host(.card-m-right) {
     margin-right: var(--ptc-element-spacing-03);