@ptcwebops/ptcw-design 4.8.7 → 4.8.9

package/dist/collection/components/ptc-footer/ptc-footer-v2.css

@@ -71,9 +71,9 @@ ptc-footer ul li a {
   text-underline-offset: 6px;
   text-decoration-thickness: 1px;
   text-decoration-color: transparent;
-  color: var(--color-white);
   border-bottom: none;
   transition: text-decoration var(--ptc-transition-medium) var(--ptc-ease-inout);
+  color: var(--color-white) !important;
 }
 ptc-footer ul li a:hover {
   color: var(--color-white) !important;
@@ -346,7 +346,7 @@ ptc-footer .ft-grid .ft-menu {
   ptc-footer .ft-grid .ft-menu {
     width: auto;
     min-width: 360px;
-    max-width: 430px;
+    max-width: 365px;
     padding-right: 0;
   }
 }
@@ -354,6 +354,7 @@ ptc-footer .ft-grid .ft-menu {
   ptc-footer .ft-grid .ft-menu {
     padding-right: 64px;
     min-width: 413px;
+    max-width: min-content;
   }
 }
 ptc-footer .ft-grid .ft-social {

package/dist/collection/components/ptc-info-tile/ptc-info-tile.css

@@ -66,7 +66,7 @@ ptc-link, ptc-square-card,
 .tile {
   position: relative;
   background-color: white;
-  border-radius: 8px;
+  border-radius: 4px;
   overflow: hidden;
   cursor: pointer;
   transition: border 0.3s;
@@ -132,13 +132,21 @@ ptc-link, ptc-square-card,
   background-color: var(--color-gray-01);
   border: 1px solid var(--color-gray-07);
 }
-.tile h3 {
+@media only screen and (min-width: 992px) {
+  .tile.text {
+    width: auto;
+    height: auto;
+  }
+}
+.tile.text .tile-content {
+  padding: 20px;
+}
+.tile .tile-title-span {
   margin: 0;
   font-size: 1.2em;
 }
 .tile p {
-  margin: 0.5em 0 0;
-  color: #666;
+  margin: 4px 0 0;
 }
 .tile .link-overlay {
   position: absolute;
@@ -153,7 +161,7 @@ ptc-link, ptc-square-card,
 .tile .tile-content {
   padding: 16px;
 }
-.tile .tile-content h3 {
+.tile .tile-content .tile-title-span {
   color: var(--color-blue-07);
   font-family: Raleway;
   font-size: 14px;
@@ -177,7 +185,7 @@ ptc-link, ptc-square-card,
   position: absolute;
 }
 
-::slotted(h3[slot=tile-title]) {
+::slotted(span[slot=tile-title]) {
   color: var(--color-blue-07) !important;
   font-family: var(--ptc-font-latin) !important;
   font-size: var(--ptc-font-size-xx-small) !important;

package/dist/collection/components/ptc-info-tile/ptc-info-tile.js

@@ -9,7 +9,7 @@ export class PtcInfoTile {
     this.tileClick.emit();
   }
   render() {
-    const content = (h("div", { class: "tile-content" }, h("h3", null, h("slot", { name: "tile-title" })), h("p", null, h("slot", { name: "tile-description" }))));
+    const content = (h("div", { class: "tile-content" }, h("span", { class: "tile-title-span" }, h("slot", { name: "tile-title" })), h("p", null, h("slot", { name: "tile-description" }))));
     return (h(Host, null, this.styles && h("style", null, this.styles), h("div", { class: `tile ${this.variant}`, onClick: () => this.handleClick() }, this.variant === 'image' && (h("div", { class: "tile-image" }, h("slot", { name: "tile-image" }))), content, this.link && h("a", { href: this.link, class: "link-overlay" }))));
   }
   static get is() { return "ptc-info-tile"; }

package/dist/collection/components/ptc-inline-cta/ptc-inline-cta.css

@@ -0,0 +1,276 @@
+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;
+}
+:host .small-inline-cta-container {
+  width: 100%;
+  height: max-content;
+  display: grid;
+  position: relative;
+  align-items: center;
+  margin-top: calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));
+  margin-bottom: calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));
+}
+:host .small-inline-cta-container .cta-bg {
+  display: none;
+}
+:host .small-inline-cta-container .cta-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background-color: var(--color-gray-08);
+  border-radius: var(--ptc-border-radius-standard);
+  padding: var(--ptc-element-spacing-05);
+  box-sizing: border-box;
+}
+:host .small-inline-cta-container .cta-content .cta-image {
+  width: 100%;
+  height: 200px;
+}
+:host .small-inline-cta-container .cta-content .cta-body {
+  width: 100%;
+  margin-top: var(--ptc-element-spacing-05);
+  margin-bottom: var(--ptc-element-spacing-05);
+  padding: 0;
+}
+:host .small-inline-cta-container .cta-content .cta-body .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host .small-inline-cta-container .cta-content .cta-body .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+@media only screen and (min-width: 768px) {
+  :host .small-inline-cta-container .cta-bg {
+    display: block;
+    width: 80%;
+    height: calc(100% + var(--ptc-element-spacing-04) + var(--ptc-element-spacing-04));
+    position: absolute;
+    right: 0;
+    z-index: -1;
+    background-color: var(--color-gray-08);
+    border-radius: var(--ptc-border-radius-standard);
+  }
+  :host .small-inline-cta-container .cta-content {
+    flex-direction: row;
+    align-items: center;
+    background-color: transparent;
+    border-radius: none;
+    padding: 0;
+  }
+  :host .small-inline-cta-container .cta-content .cta-image {
+    width: 35%;
+    height: 164px;
+    align-self: stretch;
+  }
+  :host .small-inline-cta-container .cta-content .cta-body {
+    width: 65%;
+    justify-self: right;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-right: var(--ptc-element-spacing-07);
+    padding-left: var(--ptc-element-spacing-07);
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+:host .big-inline-cta-container {
+  width: 100%;
+  height: max-content;
+  display: grid;
+  position: relative;
+  align-items: center;
+  margin-top: calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));
+  margin-bottom: calc(var(--ptc-element-spacing-06) + var(--ptc-element-spacing-01));
+}
+:host .big-inline-cta-container .cta-bg {
+  display: none;
+}
+:host .big-inline-cta-container .cta-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--ptc-border-radius-standard);
+  padding: var(--ptc-element-spacing-05);
+  box-sizing: border-box;
+}
+:host .big-inline-cta-container .cta-content .cta-image {
+  width: 100%;
+  height: 300px;
+}
+:host .big-inline-cta-container .cta-content .cta-body {
+  width: 100%;
+  margin-top: var(--ptc-element-spacing-06);
+}
+:host .big-inline-cta-container .cta-content .cta-body .link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host .big-inline-cta-container .cta-content .cta-body .link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+@media only screen and (min-width: 480px) {
+  :host .big-inline-cta-container .cta-content .cta-body {
+    margin-top: var(--ptc-element-spacing-04);
+  }
+}
+@media only screen and (min-width: 768px) {
+  :host .big-inline-cta-container .cta-bg {
+    display: block;
+    width: 80%;
+    height: calc(100% + var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04));
+    position: absolute;
+    right: 0;
+    z-index: -1;
+    border-radius: var(--ptc-border-radius-standard);
+  }
+  :host .big-inline-cta-container .cta-content {
+    flex-direction: row;
+    align-items: center;
+    border-radius: none;
+    padding: 0;
+  }
+  :host .big-inline-cta-container .cta-content .cta-image {
+    width: 40%;
+    height: 400px;
+    justify-self: left;
+  }
+  :host .big-inline-cta-container .cta-content .cta-body {
+    width: 60%;
+    justify-self: right;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding-top: calc(var(--ptc-element-spacing-07) + var(--ptc-element-spacing-05));
+    padding-right: var(--ptc-element-spacing-07);
+    padding-bottom: calc(var(--ptc-element-spacing-08) + var(--ptc-element-spacing-04));
+    padding-left: var(--ptc-element-spacing-07);
+    margin-top: 0;
+  }
+}
+:host .big-inline-cta-container.green .cta-content {
+  background-color: var(--color-green-08);
+}
+@media only screen and (min-width: 768px) {
+  :host .big-inline-cta-container.green .cta-bg {
+    background-color: var(--color-green-08);
+  }
+  :host .big-inline-cta-container.green .cta-content {
+    background-color: transparent;
+  }
+}
+:host .big-inline-cta-container.blue .cta-content {
+  background-color: var(--color-blue-08);
+}
+@media only screen and (min-width: 768px) {
+  :host .big-inline-cta-container.blue .cta-bg {
+    background-color: var(--color-blue-08);
+  }
+  :host .big-inline-cta-container.blue .cta-content {
+    background-color: transparent;
+  }
+}
+:host .big-inline-cta-container.gray .cta-content {
+  background-color: var(--color-gray-08);
+}
+@media only screen and (min-width: 768px) {
+  :host .big-inline-cta-container.gray .cta-bg {
+    background-color: var(--color-gray-08);
+  }
+  :host .big-inline-cta-container.gray .cta-content {
+    background-color: transparent;
+  }
+}
+:host .bottom-inline-cta-container {
+  background-color: #FFF;
+  padding: var(--ptc-element-spacing-06);
+  display: flex;
+  gap: var(--ptc-element-spacing-06);
+  flex-direction: column;
+  border-radius: var(--ptc-border-radius-standard);
+}
+:host .bottom-inline-cta-container .cta-image {
+  flex: none;
+}
+:host .bottom-inline-cta-container .cta-body {
+  flex: none;
+}
+:host .bottom-inline-cta-container .cta-body.link-wrapper {
+  outline: none;
+  text-decoration: none;
+}
+:host .bottom-inline-cta-container .cta-body.link-wrapper:hover {
+  outline: none;
+  text-decoration: none;
+}
+@media only screen and (min-width: 768px) {
+  :host .bottom-inline-cta-container {
+    flex-direction: row;
+  }
+  :host .bottom-inline-cta-container .cta-image {
+    flex: 1 0 0;
+    align-self: stretch;
+  }
+  :host .bottom-inline-cta-container .cta-body {
+    flex: 1 0 0;
+  }
+}

package/dist/collection/components/ptc-inline-cta/ptc-inline-cta.js

@@ -0,0 +1,111 @@
+import { Host, h, Fragment } from '@stencil/core';
+const idxBgClassMapper = {
+  0: "green",
+  1: "blue",
+  2: "gray",
+};
+export class PtcInlineCta {
+  constructor() {
+    this.captureSlots = () => {
+      var _a, _b, _c, _d;
+      this.image = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.querySelector('[slot="cta-image"]');
+      this.cta = (_b = this.hostEle) === null || _b === void 0 ? void 0 : _b.querySelector('[slot="cta-link"]');
+      const heading = (_c = this.hostEle) === null || _c === void 0 ? void 0 : _c.querySelector('[slot="cta-heading"]');
+      const description = (_d = this.hostEle) === null || _d === void 0 ? void 0 : _d.querySelector('[slot="cta-description"]');
+      this.heading = (heading === null || heading === void 0 ? void 0 : heading.innerText) || "";
+      this.description = (description === null || description === void 0 ? void 0 : description.innerText) || "";
+    };
+    this.setBgColor = () => {
+      const bigCtas = document.querySelectorAll('ptc-inline-cta[type="big"]');
+      bigCtas.forEach((cta, idx) => {
+        var _a, _b;
+        if (cta == this.hostEle) {
+          const bgVariationCount = Object.keys(idxBgClassMapper).length;
+          const bgClass = idxBgClassMapper[idx % bgVariationCount];
+          const ctaContainer = (_b = (_a = this.hostEle) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.big-inline-cta-container');
+          if (ctaContainer) {
+            ctaContainer.classList.add(bgClass);
+          }
+        }
+      });
+    };
+    this.componentWillLoad = () => {
+      this.captureSlots();
+    };
+    this.componentDidLoad = () => {
+      if (this.type === 'big') {
+        this.setBgColor();
+      }
+    };
+    this.type = undefined;
+    this.image = undefined;
+    this.heading = "";
+    this.description = "";
+    this.cta = undefined;
+  }
+  render() {
+    const Small = () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return h("div", { class: "small-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}\t\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body" }, h("a", { class: "cta-body-inner link-wrapper", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target }, !!this.heading && h("ptc-title", { "seo-compatibility-mode": true, type: "h4", "title-size": "medium", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, h("h4", null, this.heading)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-para", { "font-size": "x-small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.description)), !!((_f = this.cta) === null || _f === void 0 ? void 0 : _f.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-small' }), h("ptc-link", { disabled: false, "font-size": "small", theme: "d-green-underline", styles: ".d-green-underline {line-height: var(--ptc-line-height-p)}" }, (_g = this.cta) === null || _g === void 0 ? void 0 : _g.innerText))))));
+    };
+    const Big = () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return h("div", { class: "big-inline-cta-container" }, h("div", { class: "cta-bg" }), h("div", { class: "cta-content" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: "\r\n\t\t\t\t\t\t\t\t:host {\r\n\t\t\t\t\t\t\t\t\theight: 100%;\r\n\r\n\t\t\t\t\t\t\t\t\timg {\r\n\t\t\t\t\t\t\t\t\t\tborder-radius: var(--ptc-border-radius-standard);\r\n\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t}; \r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body" }, h("a", { class: "cta-body-inner link-wrapper", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target }, !!this.heading && h("ptc-title", { "seo-compatibility-mode": true, type: "h3", "title-size": "large", "title-weight": "w-7", "title-color": "white", "title-height": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, h("h3", null, this.heading)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "white", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, this.description)), !!((_f = this.cta) === null || _f === void 0 ? void 0 : _f.href) && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'xx-large' }), h("ptc-spacer", { breakpoint: 'small', size: 'x-large' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'x-small' }), h("ptc-spacer", { breakpoint: 'small', size: 'xx-small' }), h("ptc-button", { color: "ptc-tertiary", disabled: false, type: "button", styles: ".ptc-tertiary  {border: 2px solid #FFFFFF}" }, (_g = this.cta) === null || _g === void 0 ? void 0 : _g.innerText))))));
+    };
+    const Bottom = () => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      return h("div", { class: "bottom-inline-cta-container" }, h("div", { class: "cta-image" }, !!((_a = this.image) === null || _a === void 0 ? void 0 : _a.src) && h("ptc-picture", { alt: (_b = this.image) === null || _b === void 0 ? void 0 : _b.alt, "display-image": "block", "image-alignment": "center", "image-position": "relative", "is-full-height": "true", "is-full-width": "true", "object-fit": "cover", src: (_c = this.image) === null || _c === void 0 ? void 0 : _c.src, styles: ":host {height: 100%;}" })), h("a", { class: "cta-body link-wrapper", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target }, !!this.heading && h("ptc-title", { "seo-compatibility-mode": true, type: "h2", "title-size": "xx-large", "title-weight": "w-8", "title-line-h": "densest", "title-margin": "margin-flush", upperline: 'no-upperline', "is-plm-hub": false }, h("h2", null, this.heading)), !!this.description && h(Fragment, null, h("ptc-spacer", { breakpoint: 'x-small', size: 'small' }), h("ptc-spacer", { breakpoint: 'x-small', size: 'large' }), h("ptc-spacer", { breakpoint: 'small', size: 'medium' }), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-line-h": "line-height-p", "para-margin": "margin-bottom-4" }, this.description)), !!((_f = this.cta) === null || _f === void 0 ? void 0 : _f.href) && h("ptc-button", { color: "ptc-primary", disabled: false, type: "button" }, (_g = this.cta) === null || _g === void 0 ? void 0 : _g.innerText)));
+    };
+    const InlineCta = () => {
+      switch (this.type) {
+        case 'small': return h(Small, null);
+        case 'big': return h(Big, null);
+        case 'bottom': return h(Bottom, null);
+        default: return null;
+      }
+    };
+    return (h(Host, null, h("div", { class: "ptc-section" }, h(InlineCta, null))));
+  }
+  static get is() { return "ptc-inline-cta"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-inline-cta.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-inline-cta.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'small' | 'big' | 'bottom'",
+          "resolved": "\"big\" | \"bottom\" | \"small\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "PROPS"
+        },
+        "attribute": "type",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "image": {},
+      "heading": {},
+      "description": {},
+      "cta": {}
+    };
+  }
+  static get elementRef() { return "hostEle"; }
+}

package/dist/collection/components/ptc-quantity-counter/ptc-quantity-counter.css

@@ -56,6 +56,7 @@ ptc-link, ptc-square-card,
 
 :host {
   display: inline-block;
+  min-width: 145px;
 }
 :host .ptc-quaternary {
   width: 100%;
@@ -126,6 +127,7 @@ ptc-link, ptc-square-card,
   /* Chrome, Safari, Edge, Opera */
   /* Firefox */
   -moz-appearance: textfield;
+  font-family: var(--ptc-font-latin);
 }
 :host .quantity-counter input::-webkit-outer-spin-button, :host .quantity-counter input::-webkit-inner-spin-button {
   -webkit-appearance: none;

package/dist/collection/components/ptc-quantity-counter/ptc-quantity-counter.js

@@ -14,8 +14,21 @@ export class PtcQuantityCounter {
     this.handleInputChange = (event) => {
       const input = event.target;
       const value = parseInt(input.value);
-      if (!isNaN(value) && value > 0) {
-        this.count = value;
+      if (!isNaN(value)) {
+        if (value < 1) {
+          input.value = '1';
+          this.count = 1;
+        }
+        else if (value > 999) {
+          input.value = '999';
+          this.count = 999;
+        }
+        else {
+          this.count = value;
+        }
+      }
+      else if (isNaN(value)) {
+        input.value = `${this.count}`;
       }
     };
     this.selectText = () => {

package/dist/collection/stories/InlineCta.stories.js

@@ -0,0 +1,111 @@
+import { html } from 'lit';
+
+export default {
+	title: 'Molecules/ptc-inline-cta',
+	tags: [ 'autodocs' ],
+	argTypes: {
+		type: {
+		control: 'select',
+		description: 'Inline CTA type',
+		defaultValue: { summary: 'big' },
+		options: [ 'big', 'bottom', 'small' ]
+		}
+	}
+};
+
+// Small inline CTA
+
+const SmallInlineCTATemplate = args => { return html `<ptc-inline-cta
+	type=${args.type}
+>
+	<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/f7e6/e19f/1566074ee69372b47590f1971aac16f4?Expires=1721606400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=VCC7Z2z0mzozT1LFI2Dh1i1qut1Vrg8LqBfDMaeS1PgXk2dEQj13xnnZZRRei6wme9gYoCEopDlGAD5Z0fY~OkNlMvuXJnAQxgO3KCK3Uknh5HtD0tuaQa31VUKdq0EB4mWQLsesh8pvbY-Gjs0vNPOoQJLlGetZj0GAov6SJr7k1fgg9wuEltGdRcnxiAXi6AG18Gbu2uUaqyfelfQAGLYBrqN~wXPv7ym~z0DHzaUsfXWg0ka8IVDkYEdqq5VfrTh3WOSs2nyDPg-5x6fX9C9rkIefEEAnJ7d2WCkdWlic~gXKLmQJmZdjoeKDpcNEH2d-pGycHOEaWCmKQWgJ7g__">
+	<h4 slot="cta-heading">Learn More About ServiceMax’s Recent Innovation</h4>
+	<p slot="cta-description">To learn more about all of ServiceMax’s new enhancements and our product portfolio, visit the ServiceMax website. </p>
+	<a slot="cta-link" href="https://www.google.com" target="_blank">Read About ServiceMax</a>
+</ptc-inline-cta>`;}
+
+export const SmallInlineCTA = SmallInlineCTATemplate.bind({});
+
+SmallInlineCTA.args = { type: 'small' }
+
+// Big inline CTA
+
+const BigInlineCTATemplate = args => { return html `<ptc-inline-cta
+	type=${args.type}
+>
+	<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/c3ec/44ab/d89e9be30124536c48038f652622d9c8?Expires=1721606400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZVSUT7-OG2KakKbhhNjaefxLnEJSDx~qW9iTHSq8WvLUnPoI9PgJmINJCcZ94TMk~PX6~E37GeMDi1G3mkc06xBNNFjzeAp~yV2cJ3EI19t5zgpWCpmCYPk0yUGULFx~m60jbETxDrYsuFvomL7igA~rC2Gbs19W96ljP8FGX-lres5w3v3e99LYih8dMyVY2fcWQb9n-nGnT8iiss9HXNs8L5uNQWJNf~H~~CWgrK1CNFE0qyP5getePgyeXaIarrOhdamE-VxtZsoz~~PfPI6E4D4loIe7Xj8u42gBRaHjSv-OF7Scx2F55vGY1hlou5Cc-B8iYXKT2DlaZ5adlw__">
+	<h3 slot="cta-heading">Safeguard Your Infrastructure with AI and IoT</h3>
+	<p slot="cta-description">Discover AI's impact on field service in Episode 30 of PTC's Speaking of Service podcast with expert James Penney, CTO at Device Authority.</p>
+	<a slot="cta-link" href="https://www.google.com" target="_blank">Watch Podcast</a>
+</ptc-inline-cta>`;}
+
+export const BigInlineCTA = BigInlineCTATemplate.bind({});
+
+BigInlineCTA.args = { type: 'big' }
+
+// Bottom inline CTA
+
+const BottomInlineCTATemplate = args => { return html `<ptc-inline-cta
+	type=${args.type}
+>
+	<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/0d20/b03c/adbafb05618ff779e713d875d8727878?Expires=1721606400&amp;Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&amp;Signature=ohDpjlIpoH~nRB0XkuLfkpAc3WLfLQrs4JKwTy0dRWBiLAzlkdw3zF5J9Nhhbx7nBzK8jZ43cx5WnO0lVKoZN0n7tsPCDuxh7VrZ0uT17vnTKPDNMZJqmvndu~HQbo~qCbF1pbPG9VP0KIajniifK92tMxulYO26YviWJeyomMDFXUCF9Srru4Kbk6MltfbK2Kcxzq9LvyqCsiW~DkdcCYnyqJaXs2-KPovbcSCbgk~KDi1EiLNxYXP4U0BQKTKb5mh7Dksw~5odn8ETE8bfBzkUyMDRDqjf-oZSUCu4wMggS2jH62~F7OLAbjKJJrcwVmvSX-HnMjCOgfmSkSp2ZQ__">
+	<h2 slot="cta-heading">Safeguard Your Infrastructure with AI and IoT</h2>
+	<p slot="cta-description">Discover AI's impact on field service in Episode 30 of PTC's Speaking of Service podcast with expert James Penney, CTO at Device Authority.</p>
+	<a slot="cta-link" href="https://www.google.com" target="_blank">Read Now</a>
+</ptc-inline-cta>`;}
+
+export const BottomInlineCTA = BottomInlineCTATemplate.bind({});
+
+BottomInlineCTA.args = { type: 'bottom' }
+
+// Repeating pattern for Big CTA
+
+const BigCTARepeatingPatternTemplate = () => { return html `
+	<div class="ptc-section">
+		<p>Big Inline CTA 2</p>
+		<ptc-inline-cta type='big'>
+			<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/c3ec/44ab/d89e9be30124536c48038f652622d9c8?Expires=1721606400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZVSUT7-OG2KakKbhhNjaefxLnEJSDx~qW9iTHSq8WvLUnPoI9PgJmINJCcZ94TMk~PX6~E37GeMDi1G3mkc06xBNNFjzeAp~yV2cJ3EI19t5zgpWCpmCYPk0yUGULFx~m60jbETxDrYsuFvomL7igA~rC2Gbs19W96ljP8FGX-lres5w3v3e99LYih8dMyVY2fcWQb9n-nGnT8iiss9HXNs8L5uNQWJNf~H~~CWgrK1CNFE0qyP5getePgyeXaIarrOhdamE-VxtZsoz~~PfPI6E4D4loIe7Xj8u42gBRaHjSv-OF7Scx2F55vGY1hlou5Cc-B8iYXKT2DlaZ5adlw__">
+			<h3 slot="cta-heading">Safeguard Your Infrastructure with AI and IoT</h3>
+			<p slot="cta-description">Discover AI's impact on field service in Episode 30 of PTC's Speaking of Service podcast with expert James Penney, CTO at Device Authority.</p>
+			<a slot="cta-link" href="https://www.google.com" target="_blank">Watch Podcast</a>
+		</ptc-inline-cta>
+	</div>
+	<div class="ptc-section">
+		<p>Big Inline CTA 3</p>
+		<ptc-inline-cta type='big'>
+			<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/c3ec/44ab/d89e9be30124536c48038f652622d9c8?Expires=1721606400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZVSUT7-OG2KakKbhhNjaefxLnEJSDx~qW9iTHSq8WvLUnPoI9PgJmINJCcZ94TMk~PX6~E37GeMDi1G3mkc06xBNNFjzeAp~yV2cJ3EI19t5zgpWCpmCYPk0yUGULFx~m60jbETxDrYsuFvomL7igA~rC2Gbs19W96ljP8FGX-lres5w3v3e99LYih8dMyVY2fcWQb9n-nGnT8iiss9HXNs8L5uNQWJNf~H~~CWgrK1CNFE0qyP5getePgyeXaIarrOhdamE-VxtZsoz~~PfPI6E4D4loIe7Xj8u42gBRaHjSv-OF7Scx2F55vGY1hlou5Cc-B8iYXKT2DlaZ5adlw__">
+			<h3 slot="cta-heading">Safeguard Your Infrastructure with AI and IoT</h3>
+			<p slot="cta-description">Discover AI's impact on field service in Episode 30 of PTC's Speaking of Service podcast with expert James Penney, CTO at Device Authority.</p>
+			<a slot="cta-link" href="https://www.google.com" target="_blank">Watch Podcast</a>
+		</ptc-inline-cta>
+	</div>
+	<div class="ptc-section">
+		<p>Big Inline CTA 4</p>
+		<ptc-inline-cta type='big'>
+			<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/c3ec/44ab/d89e9be30124536c48038f652622d9c8?Expires=1721606400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZVSUT7-OG2KakKbhhNjaefxLnEJSDx~qW9iTHSq8WvLUnPoI9PgJmINJCcZ94TMk~PX6~E37GeMDi1G3mkc06xBNNFjzeAp~yV2cJ3EI19t5zgpWCpmCYPk0yUGULFx~m60jbETxDrYsuFvomL7igA~rC2Gbs19W96ljP8FGX-lres5w3v3e99LYih8dMyVY2fcWQb9n-nGnT8iiss9HXNs8L5uNQWJNf~H~~CWgrK1CNFE0qyP5getePgyeXaIarrOhdamE-VxtZsoz~~PfPI6E4D4loIe7Xj8u42gBRaHjSv-OF7Scx2F55vGY1hlou5Cc-B8iYXKT2DlaZ5adlw__">
+			<h3 slot="cta-heading">Safeguard Your Infrastructure with AI and IoT</h3>
+			<p slot="cta-description">Discover AI's impact on field service in Episode 30 of PTC's Speaking of Service podcast with expert James Penney, CTO at Device Authority.</p>
+			<a slot="cta-link" href="https://www.google.com" target="_blank">Watch Podcast</a>
+		</ptc-inline-cta>
+	</div>
+	<div class="ptc-section">
+		<p>Big Inline CTA 5</p>
+		<ptc-inline-cta type='big'>
+			<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/c3ec/44ab/d89e9be30124536c48038f652622d9c8?Expires=1721606400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZVSUT7-OG2KakKbhhNjaefxLnEJSDx~qW9iTHSq8WvLUnPoI9PgJmINJCcZ94TMk~PX6~E37GeMDi1G3mkc06xBNNFjzeAp~yV2cJ3EI19t5zgpWCpmCYPk0yUGULFx~m60jbETxDrYsuFvomL7igA~rC2Gbs19W96ljP8FGX-lres5w3v3e99LYih8dMyVY2fcWQb9n-nGnT8iiss9HXNs8L5uNQWJNf~H~~CWgrK1CNFE0qyP5getePgyeXaIarrOhdamE-VxtZsoz~~PfPI6E4D4loIe7Xj8u42gBRaHjSv-OF7Scx2F55vGY1hlou5Cc-B8iYXKT2DlaZ5adlw__">
+			<h3 slot="cta-heading">Safeguard Your Infrastructure with AI and IoT</h3>
+			<p slot="cta-description">Discover AI's impact on field service in Episode 30 of PTC's Speaking of Service podcast with expert James Penney, CTO at Device Authority.</p>
+			<a slot="cta-link" href="https://www.google.com" target="_blank">Watch Podcast</a>
+		</ptc-inline-cta>
+	</div>
+	<div class="ptc-section">
+		<p>Big Inline CTA 6</p>
+		<ptc-inline-cta type='big'>
+			<img slot="cta-image" alt="CTA Image" src="https://s3-alpha-sig.figma.com/img/c3ec/44ab/d89e9be30124536c48038f652622d9c8?Expires=1721606400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ZVSUT7-OG2KakKbhhNjaefxLnEJSDx~qW9iTHSq8WvLUnPoI9PgJmINJCcZ94TMk~PX6~E37GeMDi1G3mkc06xBNNFjzeAp~yV2cJ3EI19t5zgpWCpmCYPk0yUGULFx~m60jbETxDrYsuFvomL7igA~rC2Gbs19W96ljP8FGX-lres5w3v3e99LYih8dMyVY2fcWQb9n-nGnT8iiss9HXNs8L5uNQWJNf~H~~CWgrK1CNFE0qyP5getePgyeXaIarrOhdamE-VxtZsoz~~PfPI6E4D4loIe7Xj8u42gBRaHjSv-OF7Scx2F55vGY1hlou5Cc-B8iYXKT2DlaZ5adlw__">
+			<h3 slot="cta-heading">Safeguard Your Infrastructure with AI and IoT</h3>
+			<p slot="cta-description">Discover AI's impact on field service in Episode 30 of PTC's Speaking of Service podcast with expert James Penney, CTO at Device Authority.</p>
+			<a slot="cta-link" href="https://www.google.com" target="_blank">Watch Podcast</a>
+		</ptc-inline-cta>
+	</div>
+`;}
+
+export const BigCTARepeatingPattern = BigCTARepeatingPatternTemplate.bind({});

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

@@ -428,6 +428,12 @@ export const PtcInfoTile: {
   new (): PtcInfoTile;
 };
 
+interface PtcInlineCta extends Components.PtcInlineCta, HTMLElement {}
+export const PtcInlineCta: {
+  prototype: PtcInlineCta;
+  new (): PtcInlineCta;
+};
+
 interface PtcJumbotron extends Components.PtcJumbotron, HTMLElement {}
 export const PtcJumbotron: {
   prototype: PtcJumbotron;