npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.38 → 6.3.40-beta - Mend

@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1058) hide show

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

@@ -1,4 +1,4 @@
-import { Host, h, Fragment, } from "@stencil/core";
+import { Host, h, Fragment } from '@stencil/core';
 const idxBgClassMapper = {
   0: "green",
   1: "blue",
@@ -8,10 +8,8 @@ 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"]');
+      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) || "";
@@ -23,42 +21,39 @@ export class PtcInlineCta {
       if (this.containerSelector) {
         const container = document.querySelector(this.containerSelector);
         if (this.containerIsShadow) {
-          inlineCtas =
-            (_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll("ptc-inline-cta");
+          inlineCtas = (_a = container === null || container === void 0 ? void 0 : container.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('ptc-inline-cta');
         }
         else {
-          inlineCtas = container === null || container === void 0 ? void 0 : container.querySelectorAll("ptc-inline-cta");
+          inlineCtas = container === null || container === void 0 ? void 0 : container.querySelectorAll('ptc-inline-cta');
         }
       }
       else {
-        inlineCtas = document.querySelectorAll("ptc-inline-cta");
+        inlineCtas = document.querySelectorAll('ptc-inline-cta');
       }
-      inlineCtas &&
-        inlineCtas.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);
-            }
+      inlineCtas && inlineCtas.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.truncate = (str, limit) => {
-      return str.length <= limit ? str : str.substring(0, limit) + "...";
+      return (str.length <= limit) ? str : (str.substring(0, limit) + "...");
     };
     this.handleFocus = (e, linkWrapper) => {
       var _a, _b, _c, _d;
       switch (this.type) {
-        case "small":
-          (_a = linkWrapper.querySelector("ptc-link")) === null || _a === void 0 ? void 0 : _a.focus();
+        case 'small':
+          (_a = linkWrapper.querySelector('ptc-link')) === null || _a === void 0 ? void 0 : _a.focus();
           break;
         default:
-          if (e.relatedTarget.nodeName !== "PTC-BUTTON") {
-            (_d = (_c = (_b = linkWrapper
-              .querySelector("ptc-button")) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector("button")) === null || _d === void 0 ? void 0 : _d.focus();
+          if (e.relatedTarget.nodeName !== 'PTC-BUTTON') {
+            (_d = (_c = (_b = linkWrapper.querySelector('ptc-button')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('button')) === null || _d === void 0 ? void 0 : _d.focus();
           }
           break;
       }
@@ -76,7 +71,7 @@ export class PtcInlineCta {
       }
     };
     this.componentDidLoad = () => {
-      if (this.type === "big") {
+      if (this.type === 'big') {
         this.setBgColor();
       }
     };
@@ -87,7 +82,7 @@ export class PtcInlineCta {
       // }
     };
     this.type = undefined;
-    this.containerSelector = "";
+    this.containerSelector = '';
     this.containerIsShadow = false;
     this.trackerId = "";
     this.rte = undefined;
@@ -99,29 +94,25 @@ export class PtcInlineCta {
   render() {
     const Small = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      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}\r\n\t\t\t\t\t\t\t" }))), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { 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 }, this.truncate(this.heading, 70))), !!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.truncate(this.description, 100)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.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)}", "tab-nav": "-1", "link-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))))));
+      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}\r\n\t\t\t\t\t\t\t" })), h("div", { class: "cta-body", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { 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 }, this.truncate(this.heading, 70)), !!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.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.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)}", "tab-nav": "-1", "link-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
     };
     const Big = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      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", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && (h("ptc-title", { 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 }, this.truncate(this.heading, 70))), !!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.truncate(this.description, 200)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.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 !important}", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))))));
+      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", id: this.trackerId }, h("a", { class: "cta-body-inner link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!this.heading && h("ptc-title", { 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 }, this.truncate(this.heading, 70)), !!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.truncate(this.description, 200))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.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 !important}", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
     };
     const Bottom = () => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-      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("div", { id: this.trackerId, class: "cta-body" }, h("a", { class: "link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!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.truncate(this.heading, 70)))), !!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.truncate(this.description, 100)))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && (h("ptc-button", { color: "ptc-primary", disabled: false, type: "button", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.innerText))))));
+      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("div", { id: this.trackerId, class: "cta-body" }, h("a", { class: "link-wrapper mf-listen", href: (_d = this.cta) === null || _d === void 0 ? void 0 : _d.href, target: (_e = this.cta) === null || _e === void 0 ? void 0 : _e.target, title: (_f = this.cta) === null || _f === void 0 ? void 0 : _f.title, tabindex: "0", "aria-label": "Inline CTA" }, !!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.truncate(this.heading, 70))), !!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.truncate(this.description, 100))), !!((_g = this.cta) === null || _g === void 0 ? void 0 : _g.href) && h("ptc-button", { color: "ptc-primary", disabled: false, type: "button", "tab-nav": "-1", "button-title": (_h = this.cta) === null || _h === void 0 ? void 0 : _h.title }, (_j = this.cta) === null || _j === void 0 ? void 0 : _j.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;
+        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("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("div", null, h(InlineCta, null)), this.type === "bottom" ? null : (h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" })))));
+    return (h(Host, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }), h("div", null, h(InlineCta, null)), (this.type === 'bottom') ? null : h(Fragment, null, h("ptc-spacer", { breakpoint: "x-small", size: "xxxx-large" }), h("ptc-spacer", { breakpoint: "small", size: "xxx-large" }))));
   }
   static get is() { return "ptc-inline-cta"; }
   static get encapsulation() { return "shadow"; }
@@ -141,7 +132,7 @@ export class PtcInlineCta {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"small\" | \"big\" | \"bottom\"",
+          "original": "'small' | 'big' | 'bottom'",
           "resolved": "\"big\" | \"bottom\" | \"small\"",
           "references": {}
         },
@@ -170,7 +161,7 @@ export class PtcInlineCta {
         },
         "attribute": "container-selector",
         "reflect": false,
-        "defaultValue": "\"\""
+        "defaultValue": "''"
       },
       "containerIsShadow": {
         "type": "boolean",

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.css CHANGED Viewed

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -1197,131 +1193,39 @@ a.disabled {
   cursor: not-allowed;
 }
 a:focus-visible {
-  outline: 5px solid #003dd6 !important;
+  outline: 5px solid #003DD6 !important;
   outline-offset: 0px !important;
   border-radius: var(--ptc-border-radius-standard);
 }
-.light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a),
-.light-links a.light-link,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a),
-.background-grey-10 a.light-link,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a),
-.background-plm-grey a.light-link {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .light-links a.light-link, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-grey-10 a.light-link, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a), .background-plm-grey a.light-link {
   color: var(--color-blue-04);
   margin: -2px;
   border: 2px solid transparent;
 }
-.light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited,
-.light-links a.light-link:visited,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited,
-.background-grey-10 a.light-link:visited,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited,
-.background-plm-grey a.light-link:visited {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .light-links a.light-link:visited, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-grey-10 a.light-link:visited, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited, .background-plm-grey a.light-link:visited {
   color: var(--color-blue-06);
 }
-.light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited:active,
-.light-links a.light-link:active,
-.light-links a.light-link:visited:active,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):active,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited:active,
-.background-grey-10 a.light-link:active,
-.background-grey-10 a.light-link:visited:active,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):active,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited:active,
-.background-plm-grey a.light-link:active,
-.background-plm-grey a.light-link:visited:active {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .light-links a.light-link:active, .light-links a.light-link:visited:active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-grey-10 a.light-link:active, .background-grey-10 a.light-link:visited:active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):active, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:active, .background-plm-grey a.light-link:active, .background-plm-grey a.light-link:visited:active {
   transition: none;
   color: var(--color-blue-07);
 }
-.light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited:hover,
-.light-links a.light-link:hover,
-.light-links a.light-link:visited:hover,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):hover,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited:hover,
-.background-grey-10 a.light-link:hover,
-.background-grey-10 a.light-link:visited:hover,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):hover,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):visited:hover,
-.background-plm-grey a.light-link:hover,
-.background-plm-grey a.light-link:visited:hover {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .light-links a.light-link:hover, .light-links a.light-link:visited:hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-grey-10 a.light-link:hover, .background-grey-10 a.light-link:visited:hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):hover, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):visited:hover, .background-plm-grey a.light-link:hover, .background-plm-grey a.light-link:visited:hover {
   color: var(--color-blue-05);
 }
-.light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a).disabled,
-.light-links a.light-link.disabled,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a).disabled,
-.background-grey-10 a.light-link.disabled,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a).disabled,
-.background-plm-grey a.light-link.disabled {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .light-links a.light-link.disabled, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-grey-10 a.light-link.disabled, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a).disabled, .background-plm-grey a.light-link.disabled {
   color: var(--color-gray-04) !important;
   cursor: not-allowed;
 }
-.light-links a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):focus-visible,
-.light-links a.light-link:focus-visible,
-.background-grey-10 a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):focus-visible,
-.background-grey-10 a.light-link:focus-visible,
-.background-plm-grey a:not(.hero-footer-form-wrapper a,
-ptc-modal inline-form a,
-.vjs-social-share-links a):focus-visible,
-.background-plm-grey a.light-link:focus-visible {
+.light-links a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .light-links a.light-link:focus-visible, .background-grey-10 a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-grey-10 a.light-link:focus-visible, .background-plm-grey a:not(.hero-footer-form-wrapper a, ptc-modal inline-form a, .podcast-cta-section a, .vjs-social-share-links a):focus-visible, .background-plm-grey a.light-link:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
 }
-.light-links .podcast-cta-section a,
-.background-grey-10 .podcast-cta-section a,
-.background-plm-grey .podcast-cta-section a {
+.light-links .podcast-cta-section a, .background-grey-10 .podcast-cta-section a, .background-plm-grey .podcast-cta-section a {
   border: 2px solid transparent;
 }
-.light-links .podcast-cta-section a:focus-visible,
-.background-grey-10 .podcast-cta-section a:focus-visible,
-.background-plm-grey .podcast-cta-section a:focus-visible {
+.light-links .podcast-cta-section a:focus-visible, .background-grey-10 .podcast-cta-section a:focus-visible, .background-plm-grey .podcast-cta-section a:focus-visible {
   border-radius: var(--ptc-border-radius-standard);
   border: 2px solid white;
   outline: 5px solid var(--keyboard-nav-outline);
@@ -1476,7 +1380,7 @@ ptc-modal inline-form a,
 }
 .gif-bg {
-  background-color: #f3f3f3;
+  background-color: #F3F3F3;
 }
 .gif-bg img {
   width: 100%;

package/dist/collection/components/ptc-jumbotron/ptc-jumbotron.js CHANGED Viewed

@@ -1,10 +1,10 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcJumbotron {
   constructor() {
-    this.jumbotronType = "light";
+    this.jumbotronType = 'light';
     this.hasPopupVideo = false;
-    this.mainTitle = "Lorem Ipsum Dolor Sit Amet Consectetur";
-    this.subTitle = "Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet";
+    this.mainTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur';
+    this.subTitle = 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet';
     this.pngSrc = undefined;
     this.pngImgStyles = "";
     this.gifSrc = undefined;
@@ -19,7 +19,7 @@ export class PtcJumbotron {
     this.buttonTabIndex = 0;
     this.contentBackground = undefined;
     this.contentColor = undefined;
-    this.textAlign = "left";
+    this.textAlign = 'left';
     this.isMobile = undefined;
     this.isTransitioning = undefined;
     this.blogAuthorImage = "";
@@ -46,125 +46,93 @@ export class PtcJumbotron {
   componentDidLoad() {
     //this.adjustJumbotronHeight();
   }
-  componentDidUpdate() {
-    this.getContentBackground();
-  }
   render() {
     const classMap = this.getCssClassMap();
     let mediaElement;
     switch (this.jumbotronType) {
-      case "png":
-        mediaElement = (h("div", { class: "mobile-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { src: this.pngSrc }), this.hasPopupVideo && this.isMobile ? (h("slot", { name: "video" })) : null)));
+      case 'png':
+        mediaElement = (h("div", { class: "mobile-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { src: this.pngSrc }), this.hasPopupVideo && this.isMobile ? h("slot", { name: "video" }) : null)));
         break;
-      case "blog":
+      case 'blog':
         mediaElement = (h("div", { class: "mobile-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" }))));
         break;
-      case "gif":
+      case 'gif':
         mediaElement = (h("div", { class: "mobile-media-image gif-bg" }, h("img", { src: this.gifSrc })));
         break;
-      case "dark-video":
-      case "light-video":
-        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex, defer: this.defer, posterSrc: this.bgVideoPosterSrc }, " ", this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
+      case 'dark-video':
+      case 'light-video':
+        mediaElement = (h("ptc-background-video", { class: "video-ratio", overlay: false, "video-src": this.bgVideoSrc, isIframe: this.isIframe, "play-button-title": this.playButtonTitle, "pause-button-title": this.pauseButtonTitle, "button-location": this.buttonLocation, "button-tab-index": this.buttonTabIndex, defer: this.defer, posterSrc: this.bgVideoPosterSrc }, ' ', this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
         break;
-      case "dark":
-      case "light":
-        mediaElement = (h("div", { class: "dl-img-wrap" }, h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, " ", h("slot", { name: "video" }))) : null));
+      case 'dark':
+      case 'light':
+        mediaElement = (h("div", { class: 'dl-img-wrap' }, h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }), this.hasPopupVideo && this.isMobile ? (h("div", { class: "mobile-modal-play-btn" }, ' ', h("slot", { name: "video" }))) : null));
         break;
       default:
-        mediaElement = (h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" }));
+        mediaElement = h("ptc-img", { "img-url": this.bgSrc, styles: ".smart-bg{background-position:right !important;}" });
     }
-    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: {
-        parent: true,
-        "light-links": this.jumbotronType === "dark" ||
-          this.jumbotronType === "dark-video",
-        "hp-adjustments": this.isHomepage,
-        transitioning: this.isTransitioning,
-      } }, h("div", { class: `div1 image-container ${this.jumbotronType === "text" ? "hidden" : ""}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: {
-        "ptc-container": true,
-        "content-layout": true,
-        "hp-container": this.isHomepage,
-        "blog-container": this.jumbotronType === "blog",
-      } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === "text"
-        ? "center"
-        : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), !!this.logo && (h("div", { class: "logo-frame" }, h("img", { alt: "Logo", src: this.logo }))), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== "text" ||
-      (this.jumbotronType === "text" &&
-        this.subTitle)) &&
-      !this.isHomepage && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === "text" &&
-        this.isMobile
-        ? "x-small"
-        : "small", "font-weight": "w-4", "para-margin": `${this.jumbotronType === "text" || this.jumbotronType === "blog" ? "margin-flush" : "margin-bottom-6"}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === "text"
-        ? "center"
-        : "left", "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: "0" } }), h("p", { style: { margin: "0" } }, h("slot", { name: "blog-date" })), this.jumbotronType === "blog" && (h("div", null, h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("ptc-spacer", { breakpoint: "small", size: "small" }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this
-        .blogAuthorImageAlt, src: this
-        .blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this
-        .blogAuthorQueryHref, target: this
-        .blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this
-      .blogAuthorName))))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === "text" ? " text-adjustment" : ""}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo &&
-      this.jumbotronType !== "png" ? (h("slot", { name: "video" })) : null, this.hasCountdown ? (h("slot", { name: "countdown" })) : null, this.jumbotronType === "png" ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? (h("slot", { name: "video" })) : null))) : null, this.jumbotronType === "gif" ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === "blog" ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
+    return (h(Host, { class: classMap }, this.styles && h("style", null, this.styles), h("div", { class: { 'parent': true, 'light-links': this.jumbotronType === 'dark' || this.jumbotronType === 'dark-video', 'hp-adjustments': this.isHomepage, 'transitioning': this.isTransitioning } }, h("div", { class: `div1 image-container ${this.jumbotronType === 'text' ? 'hidden' : ''}` }, mediaElement), h("div", { class: "div2 content-container" }, h("div", { class: "bg-overlay", style: { background: this.contentBackground } }), h("div", { class: { "ptc-container": true, "content-layout": true, 'hp-container': this.isHomepage, 'blog-container': (this.jumbotronType === "blog") } }, h("max-width-container", { "max-width-p": "60", breakpoint: 992, "content-align": this.jumbotronType === 'text' ? 'center' : this.textAlign, styles: ":host{z-index: 999}" }, h("slot", { name: "breadcrumb" }), !!this.logo && h("div", { class: "logo-frame" }, h("img", { alt: "Logo", src: this.logo })), h("span", { class: "main-content-items" }, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }), h("slot", { name: "main-title" }), h("slot", { name: "hp-sub-title" }), (this.jumbotronType !== 'text' || (this.jumbotronType === 'text' && this.subTitle)) && (!this.isHomepage) && (h("div", null, h("ptc-spacer", { breakpoint: "small", size: "small" }), h("ptc-spacer", { breakpoint: "x-small", size: "medium" }))), !this.isHomepage && (h("ptc-para", { styles: `p{color: ${this.contentColor}!important;}`, "font-size": this.jumbotronType === 'text' && this.isMobile ? 'x-small' : 'small', "font-weight": "w-4", "para-margin": `${this.jumbotronType === 'text' || this.jumbotronType === 'blog' ? 'margin-flush' : 'margin-bottom-6'}`, "para-color": "white", "para-line-h": "line-height-p", "para-align": this.jumbotronType === 'text' ? 'center' : 'left', "seo-compatibility-mode": true }, h("p", { innerHTML: this.subTitle, style: { margin: '0' } }), h("p", { style: { margin: '0' } }, h("slot", { name: "blog-date" })), this.jumbotronType === 'blog' && h("div", null, h("ptc-spacer", { breakpoint: 'x-small', size: 'medium' }), h("ptc-spacer", { breakpoint: 'small', size: 'small' }), h("div", { id: "header-blog-author", slot: "blog-author" }, h("div", { class: "image" }, h("img", { alt: this.blogAuthorImageAlt, src: this.blogAuthorImage })), h("ptc-para", { "font-size": "small", "font-weight": "w-4", "para-color": "primary-grey", "para-line-h": "line-height-p", "para-margin": "margin-flush" }, h("a", { class: "blog-author-name mf-listen", tabindex: "0", href: this.blogAuthorQueryHref, target: this.blogAuthorQueryTarget, "aria-label": "Other blogs by author" }, this.blogAuthorName)))))), this.hasCtaSlot && (h("div", { class: `u-flex u-flex-wrap gap-adjustment${this.jumbotronType === 'text' ? ' text-adjustment' : ''}` }, h("slot", { name: "j-cta" }))))), this.hasPopupVideo && this.jumbotronType !== 'png' ? h("slot", { name: "video" }) : null, this.hasCountdown ? h("slot", { name: "countdown" }) : null, this.jumbotronType === 'png' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: `img {${this.pngImgStyles}}` }), this.hasPopupVideo ? h("slot", { name: "video" }) : null))) : null, this.jumbotronType === 'gif' ? (h("div", { class: "desktop-media-image desk-gif-adjustment" }, h("img", { src: this.gifSrc }))) : null, this.jumbotronType === 'blog' ? (h("div", { class: "desktop-media-image" }, h("div", { class: "media-image-wrapper" }, h("ptc-picture", { "is-full-width": true, src: this.pngSrc, styles: "img {height: 100%;}" })))) : null)))));
   }
   getCssClassMap() {
     return {
       // [this.imageZIndex] : true
-      "text-jumbotron": this.jumbotronType === "text" ? true : false,
-      "png-jumbotron": this.jumbotronType === "png" ? true : false,
-      "blog-jumbotron": this.jumbotronType === "blog" ? true : false,
-      "gif-jumbotron": this.jumbotronType === "gif" ? true : false,
-      "dark-video-jumbotron light-links": this.jumbotronType === "dark-video" ? true : false,
-      "light-video-jumbotron": this.jumbotronType === "light-video" ? true : false,
-      "dark-jumbotron light-links": this.jumbotronType === "dark" ? true : false,
-      "light-jumbotron": this.jumbotronType === "light" ? true : false,
+      'text-jumbotron': this.jumbotronType === 'text' ? true : false,
+      'png-jumbotron': this.jumbotronType === 'png' ? true : false,
+      'blog-jumbotron': this.jumbotronType === 'blog' ? true : false,
+      'gif-jumbotron': this.jumbotronType === 'gif' ? true : false,
+      'dark-video-jumbotron light-links': this.jumbotronType === 'dark-video' ? true : false,
+      'light-video-jumbotron': this.jumbotronType === 'light-video' ? true : false,
+      'dark-jumbotron light-links': this.jumbotronType === 'dark' ? true : false,
+      'light-jumbotron': this.jumbotronType === 'light' ? true : false,
     };
   }
   getContentBackground() {
     if (window.innerWidth < 992) {
       switch (this.jumbotronType) {
-        case "light":
-        case "light-video":
-        case "png":
-          this.contentBackground = "var(--color-white)";
-          this.contentColor = "var(--color-gray-10)";
+        case 'light':
+        case 'light-video':
+        case 'png':
+          this.contentBackground = 'var(--color-white)';
+          this.contentColor = 'var(--color-gray-10)';
           break;
-        case "dark":
-        case "dark-video":
-          this.contentBackground = "var(--color-gray-09)";
-          this.contentColor = "var(--color-gray-01)";
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'var(--color-gray-09)';
+          this.contentColor = 'var(--color-gray-01)';
           break;
-        case "blog":
-          this.contentBackground = "white";
-          this.contentColor = "var(--color-gray-10)";
+        case 'blog':
+          this.contentBackground = 'white';
+          this.contentColor = 'var(--color-gray-10)';
           break;
         default:
-          this.contentBackground = "transparent";
-          this.contentColor = "var(--color-gray-10)";
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
       }
       this.isMobile = true;
     }
     else {
       switch (this.jumbotronType) {
-        case "light":
-        case "light-video":
-        case "png":
-          this.contentBackground =
-            "linear-gradient(90.19deg, rgba(255, 255, 255, 0.9) 62.55%, rgba(228, 231, 233, 0) 99.86%)";
-          this.contentColor = "var(--color-gray-10)";
+        case 'light':
+        case 'light-video':
+        case 'png':
+          this.contentBackground = 'linear-gradient(90.19deg, rgba(255, 255, 255, 0.9) 62.55%, rgba(228, 231, 233, 0) 99.86%)';
+          this.contentColor = 'var(--color-gray-10)';
           break;
-        case "dark":
-        case "dark-video":
-          this.contentBackground =
-            "linear-gradient(90deg, rgba(0, 0, 0, 0.63) 52.42%, rgba(40, 47, 53, 0) 100%)";
-          this.contentColor = "var(--color-gray-01)";
+        case 'dark':
+        case 'dark-video':
+          this.contentBackground = 'linear-gradient(90deg, rgba(0, 0, 0, 0.63) 52.42%, rgba(40, 47, 53, 0) 100%)';
+          this.contentColor = 'var(--color-gray-01)';
           break;
-        case "gif":
-          this.contentBackground = "#F3F3F3";
-          this.contentColor = "var(--color-gray-10)";
+        case 'gif':
+          this.contentBackground = '#F3F3F3';
+          this.contentColor = 'var(--color-gray-10)';
           break;
-        case "blog":
-          this.contentBackground = "white";
-          this.contentColor = "var(--color-gray-10)";
+        case 'blog':
+          this.contentBackground = 'white';
+          this.contentColor = 'var(--color-gray-10)';
           break;
         default:
-          this.contentBackground = "transparent";
-          this.contentColor = "var(--color-gray-10)";
+          this.contentBackground = 'transparent';
+          this.contentColor = 'var(--color-gray-10)';
       }
       this.isMobile = false;
     }
@@ -199,7 +167,7 @@ export class PtcJumbotron {
         },
         "attribute": "jumbotron-type",
         "reflect": false,
-        "defaultValue": "\"light\""
+        "defaultValue": "'light'"
       },
       "hasPopupVideo": {
         "type": "boolean",
@@ -235,7 +203,7 @@ export class PtcJumbotron {
         },
         "attribute": "main-title",
         "reflect": false,
-        "defaultValue": "\"Lorem Ipsum Dolor Sit Amet Consectetur\""
+        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur'"
       },
       "subTitle": {
         "type": "string",
@@ -253,7 +221,7 @@ export class PtcJumbotron {
         },
         "attribute": "sub-title",
         "reflect": false,
-        "defaultValue": "\"Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet\""
+        "defaultValue": "'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet'"
       },
       "pngSrc": {
         "type": "string",