@ptcwebops/ptcw-design 6.3.10-beta → 6.3.11-beta

package/dist/collection/components/organism-bundles/storefront-enhanced-product-list-example/storefront-enhanced-product-list-example.js

@@ -0,0 +1,63 @@
+import { Host, h } from '@stencil/core';
+import Swiper, { Navigation, Pagination, Scrollbar, Mousewheel } from 'swiper';
+export class StorefrontEnhancedProductListExample {
+  constructor() {
+    this.componentDidLoad = () => {
+      setTimeout(() => {
+        let swiperContainer = this.el.querySelector('.enhanced-product-listing-cards');
+        this.swiper = new Swiper(swiperContainer, {
+          modules: [Navigation, Pagination, Scrollbar, Mousewheel],
+          slidesPerView: 'auto',
+          spaceBetween: 24,
+          initialSlide: 0,
+          centerInsufficientSlides: false,
+          scrollbar: {
+            el: this.swiperPaginationRef,
+            draggable: false,
+          },
+          navigation: {
+            nextEl: this.swiperButtonNextRef,
+            prevEl: this.swiperButtonPrevRef,
+          },
+          mousewheel: {
+            forceToAxis: true,
+            sensitivity: 100,
+          },
+          breakpoints: {
+            768: {
+              slidesPerView: 2,
+              spaceBetween: 24,
+            },
+            1200: {
+              slidesPerView: 2,
+              spaceBetween: 32,
+            },
+            1440: {
+              slidesPerView: 2,
+              spaceBetween: 40,
+            },
+          },
+        });
+        swiperContainer.addEventListener('ctaFocussed', (e) => {
+          let focusIndex = e.detail['card-index'];
+          this.swiper.slideTo(focusIndex);
+        });
+      }, 100);
+    };
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "swiper-container enhanced-product-listing-cards" }, h("div", { class: "swiper-wrapper" }, h("slot", null)), h("div", { class: "swiper-scrollbar", ref: el => (this.swiperPaginationRef = el) }), h("div", { class: "swiper-button-next", ref: el => (this.swiperButtonNextRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M0.75 17.25L8 10L0.75 2.75L3.375 0.125L13.25 10L3.375 19.875L0.75 17.25Z", fill: "#323B42" }))), h("div", { class: "swiper-button-prev", ref: el => (this.swiperButtonPrevRef = el) }, h("svg", { width: "14", height: "20", viewBox: "0 0 14 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M13.25 2.75L6 10L13.25 17.25L10.625 19.875L0.749999 10L10.625 0.125L13.25 2.75Z", fill: "#323B42" }))))));
+  }
+  static get is() { return "storefront-enhanced-product-list-example"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["storefront-enhanced-product-list-example.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["storefront-enhanced-product-list-example.css"]
+    };
+  }
+  static get elementRef() { return "el"; }
+}

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

@@ -74,7 +74,7 @@ ptc-link, ptc-square-card,
   padding: 16px 4px;
   display: block;
   max-width: 450px;
-  min-width: 330px;
+  min-width: 280px;
   border-radius: 4px;
   box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.32);
   background-color: #20262a;

package/dist/collection/components/ptc-enhanced-product-listing-card/ptc-enhanced-product-listing-card.css

@@ -0,0 +1,126 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+  word-break: break-word;
+  hyphens: manual;
+  -webkit-hyphens: manual;
+  -moz-hyphens: manual;
+  -ms-hyphens: manual;
+}
+@supports (hyphenate-limit-chars: 12 3 3) {
+  h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+ul,
+li,
+ptc-subnav,
+ptc-tab-list,
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
+    hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    /* For Safari */
+    -webkit-hyphenate-limit-after: 3;
+    /* For Safari */
+    hyphenate-limit-chars: 12 3 3;
+    hyphenate-limit-lines: 2;
+    hyphenate-limit-last: always;
+    hyphenate-limit-zone: 6%;
+    -webkit-hyphens: auto;
+    -webkit-hyphenate-limit-before: 3;
+    -webkit-hyphenate-limit-after: 3;
+    -webkit-hyphenate-limit-chars: 12 3 3;
+    -webkit-hyphenate-limit-lines: 2;
+    -moz-hyphens: auto;
+    -moz-hyphenate-limit-chars: 12 3 3;
+    -moz-hyphenate-limit-lines: 2;
+    -ms-hyphens: auto;
+    -ms-hyphenate-limit-chars: 12 3 3;
+    -ms-hyphenate-limit-lines: 2;
+  }
+}
+
+:host {
+  display: block;
+  height: 100%;
+}
+:host .card {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  justify-content: space-between;
+  position: relative;
+  padding: 32px 32px 40px 32px;
+  box-sizing: border-box;
+  width: 288px;
+  height: 100%;
+  border-radius: var(--ptc-border-radius-standard);
+  background: #FFF;
+  box-shadow: var(--ptc-shadow-small);
+}
+:host .ribbon {
+  position: absolute;
+  top: 32px;
+  left: -4px;
+  border-radius: 0px 4px 4px 0px;
+  background: var(--color-blue-07);
+  display: flex;
+  padding: 6px 28px;
+  justify-content: center;
+  align-items: center;
+  color: #FFF;
+  font-family: Raleway;
+  font-size: var(--ptc-font-size-x-small);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-extrabold);
+  line-height: var(--ptc-line-height-densest);
+}
+:host .ribbon .ribbon-wrap-around {
+  position: absolute;
+  bottom: -4px;
+  left: 0px;
+}
+:host .flex-start {
+  padding-top: 48px;
+}
+:host .pricing {
+  display: flex;
+  gap: 4px;
+  align-items: flex-end;
+  margin-bottom: 16px;
+}
+:host .pricing .pricing-label {
+  color: var(--color-gray-10);
+  font-family: Raleway;
+  font-size: var(--ptc-font-size-x-small);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-regular);
+  line-height: var(--ptc-line-height-p);
+}
+:host .pricing .pricing-value {
+  color: var(--color-gray-10, #323B42);
+  font-family: Raleway;
+  font-size: var(--ptc-font-size-x-large);
+  font-style: var(--ptc-font-style-normal);
+  font-weight: var(--ptc-font-weight-extrabold);
+  line-height: 35px;
+}
+@media only screen and (min-width: 768px) {
+  :host .card {
+    width: 100%;
+  }
+}

package/dist/collection/components/ptc-enhanced-product-listing-card/ptc-enhanced-product-listing-card.js

@@ -0,0 +1,112 @@
+import { Host, h } from '@stencil/core';
+let iconListTextStyle = `:host .ptc-icon-list .ptc-content-simple {
+	color: #323B42;
+	font-family: Raleway;
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 600;
+	line-height: 20px;
+	padding-top: 0;
+}`;
+export class PtcEnhancedProductListingCard {
+  constructor() {
+    this.ctaFocussedHandler = () => {
+      this.ctaFocussed.emit({
+        'card-index': this.cardIndex
+      });
+    };
+    this.componentWillLoad = () => {
+      this.featureCallouts = [];
+      let featureCalloutSlots = this.el.querySelectorAll('[slot^="feature-callout-"]');
+      if (featureCalloutSlots && featureCalloutSlots.length > 0) {
+        for (let featureCalloutSlot of Array.from(featureCalloutSlots)) {
+          this.featureCallouts.push(featureCalloutSlot.innerText);
+        }
+      }
+      let cta = this.el.querySelector('[slot="cta"]');
+      if (cta) {
+        this.cta.href = cta.href;
+        this.cta.title = cta.title;
+        this.cta.text = cta.text;
+        this.cta.target = cta.target;
+      }
+    };
+    this.componentDidLoad = () => {
+      var _a;
+      let cta = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('ptc-button');
+      if (cta) {
+        cta.addEventListener('focus', () => this.ctaFocussedHandler());
+      }
+    };
+    this.cardIndex = 0;
+    this.featureCallouts = [];
+    this.cta = {
+      href: "",
+      title: "",
+      text: "",
+      target: "",
+    };
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "card" }, h("div", { class: "ribbon" }, h("svg", { class: "ribbon-wrap-around", xmlns: "http://www.w3.org/2000/svg", width: "4", height: "4", viewBox: "0 0 4 4", fill: "none" }, h("path", { d: "M4 3.02124L0 0.0212402H4V3.02124Z", fill: "#08283E" })), h("slot", { name: "ribbon-text" })), h("div", { class: "flex-start" }, h("ptc-title", { "seo-compatibility-mode": true, type: "h3", "text-align": "left", "title-size": "large", "title-color": "gray", upperline: "no-upperline", "title-display": "block", "title-height": "densest", "title-margin": "margin-flush", "title-weight": "w-7", "is-plm-hub": "false" }, h("h3", null, h("slot", { name: "heading" }))), h("ptc-para", { "seo-compatibility-mode": true, "font-size": "x-small", "font-weight": "w-4", "para-align": "left", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-bottom-5" }, h("p", null, h("slot", { name: "description" }))), h("div", null, (this.featureCallouts.length > 0) && this.featureCallouts.map((feature, idx) => (h("ptc-icon-list", { "is-last-item": (idx === this.featureCallouts.length - 1) ? "true" : "false", "no-bottom-space": (idx === this.featureCallouts.length - 1) ? "true" : "false", "list-content": feature, styles: iconListTextStyle, "list-type": "simple-icon-list" }, h("icon-asset", { slot: "icon", type: "ptc", size: "x-small", name: "checkmark", color: "ptc-green" })))))), h("div", { class: "flex-end" }, h("div", { class: "pricing" }, h("span", { class: "pricing-label" }, h("slot", { name: "pricing-label" })), h("span", { class: "pricing-value" }, h("slot", { name: "pricing-value" }))), h("ptc-button", { color: "ptc-quaternary", "link-href": this.cta.href, "link-title": this.cta.title || this.cta.text, target: this.cta.target, type: "button", "tracker-id": `eplc${this.cardIndex}-cta` }, this.cta.text)))));
+  }
+  static get is() { return "ptc-enhanced-product-listing-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-enhanced-product-listing-card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-enhanced-product-listing-card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cardIndex": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "PROPS"
+        },
+        "attribute": "card-index",
+        "reflect": false,
+        "defaultValue": "0"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "featureCallouts": {},
+      "cta": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "ctaFocussed",
+        "name": "ctaFocussed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "EVENTS"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "el"; }
+}

package/dist/collection/components/ptc-icon-list/ptc-icon-list.css

@@ -127,4 +127,9 @@ ptc-link, ptc-square-card,
 
 :host(.last-item) {
   margin-bottom: var(--ptc-layout-spacing-03);
+}
+
+:host(.last-item.no-bottom-space) {
+  padding-bottom: 0;
+  margin-bottom: 0;
 }

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

@@ -6,16 +6,19 @@ export class PtcIconList {
     this.valueText = '';
     this.listContent = '';
     this.isLastItem = false;
+    this.noBottomSpace = false;
+    this.styles = undefined;
   }
   render() {
     const classMap = this.getCssClassMap();
-    return (h(Host, { class: classMap }, this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-numbered-values" }, h("span", { class: "value-text" }, this.valueText, "\u00A0"), h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-content-simple" }, this.listContent, !this.listContent &&
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), this.listType == "stat-icon-list" ? (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-numbered-values" }, h("span", { class: "value-text" }, this.valueText, "\u00A0"), h("span", { class: "ptc-numbered-subtitle" }, this.valueWithUnit)), h("p", { class: "ptc-content" }, "- \u00A0", this.listContent))) : (h("div", { class: "ptc-icon-list" }, h("slot", { name: "icon" }), h("div", { class: "ptc-content-simple" }, this.listContent, !this.listContent &&
       h("slot", null))))));
   }
   getCssClassMap() {
     return {
       [this.listType]: this.listType ? true : false,
-      ['last-item']: this.isLastItem ? true : false
+      ['last-item']: this.isLastItem ? true : false,
+      ['no-bottom-space']: this.noBottomSpace ? true : false,
     };
   }
   static get is() { return "ptc-icon-list"; }
@@ -121,6 +124,41 @@ export class PtcIconList {
         "attribute": "is-last-item",
         "reflect": false,
         "defaultValue": "false"
+      },
+      "noBottomSpace": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "no-bottom-space",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "styles": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "styles",
+        "reflect": false
       }
     };
   }

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

@@ -350,6 +350,12 @@ export const PtcEmbeddedQuiz: {
   new (): PtcEmbeddedQuiz;
 };
 
+interface PtcEnhancedProductListingCard extends Components.PtcEnhancedProductListingCard, HTMLElement {}
+export const PtcEnhancedProductListingCard: {
+  prototype: PtcEnhancedProductListingCard;
+  new (): PtcEnhancedProductListingCard;
+};
+
 interface PtcFeaturedList extends Components.PtcFeaturedList, HTMLElement {}
 export const PtcFeaturedList: {
   prototype: PtcFeaturedList;
@@ -1028,6 +1034,12 @@ export const SequentialBundleExample: {
   new (): SequentialBundleExample;
 };
 
+interface StorefrontEnhancedProductListExample extends Components.StorefrontEnhancedProductListExample, HTMLElement {}
+export const StorefrontEnhancedProductListExample: {
+  prototype: StorefrontEnhancedProductListExample;
+  new (): StorefrontEnhancedProductListExample;
+};
+
 interface TabContent extends Components.TabContent, HTMLElement {}
 export const TabContent: {
   prototype: TabContent;