@ptcwebops/ptcw-design 6.3.38 → 6.3.39-beta

package/dist/collection/stories/Jumbotron.stories.js

@@ -1,9 +1,137 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Molecules/ptc-jumbotron',
   tags: ['autodocs'],
+  // argTypes: {
+  //   bgSrc: {
+  //     control: 'text',
+  //     description: 'Set this value when the jubmotron type is dark or light',
+  //     defaultValue: { summary: '' },
+  //   },
+  //   bgVideoPosterSrc: {
+  //     control: 'text',
+  //     description: 'Set this value when you need a poster for the background video',
+  //     defaultValue: { summary: '' },
+  //   },
+  //   bgVideoSrc: {
+  //     control: 'text',
+  //     description: 'Set this value when the jumbotron type is dark-video or light-video',
+  //     defaultValue: { summary: '' },
+  //   },
+  //   blogAuthorImage: {
+  //     control: 'text',
+  //     description: 'Set this value when you need a blog author',
+  //     defaultValue: { summary: "''" },
+  //   },
+  //   blogAuthorImageAlt: {
+  //     control: 'text',
+  //     description: 'Set this value when you need a blog author',
+  //     defaultValue: { summary: "''" },
+  //   },
+  //   blogAuthorName: {
+  //     control: 'text',
+  //     description: 'Set this value when you need a blog author',
+  //     defaultValue: { summary: "''" },
+  //   },
+  //   blogAuthorQueryHref: {
+  //     control: 'text',
+  //     description: 'Set this value when you need a blog author',
+  //     defaultValue: { summary: "''" },
+  //   },
+  //   blogAuthorQueryTarget: {
+  //     control: 'text',
+  //     description: 'Set this value when you need a blog author',
+  //     defaultValue: { summary: "''" },
+  //   },
+  //   buttonLocation: {
+  //     control: 'text',
+  //     description: 'Set the location of the play/pause button when the the background video is applied. Available values: top-left, top-right, bottom-left, bottom-right, allbp-bottom-right',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
+  //   defer: {
+  //     control: 'boolean',
+  //     description: 'delay loading of video to improve perfomance',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   gifSrc: {
+  //     control: 'text',
+  //     description: 'set this value when you need a gif on the right side',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   hasCountdown: {
+  //     control: 'boolean',
+  //     description: 'To add a countdown, trun this attribute on and add <ptc-countdown> after cta buttons',
+  //     defaultValue: { summary: 'false' },
+  //   },
+  //   hasCtaSlot: {
+  //     control: 'boolean',
+  //     description: 'Checking if the cta slot is empty',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   hasPopupVideo: {
+  //     control: 'boolean',
+  //     description: 'Set this value to true when you need a pop up video on the right side, add ptc-svg-btn & ptc-modal for the play button and video',
+  //     defaultValue: { summary: 'false' },
+  //   },
+  //   isHomepage: {
+  //     control: 'boolean',
+  //     description: 'Is it on a homepage?',
+  //     defaultValue: { summary: 'false' },
+  //   },
+  //   isIframe: {
+  //     control: 'boolean',
+  //     description: '',
+  //     defaultValue: { summary: 'false' },
+  //   },
+  //   isTransitioning: {
+  //     control: 'boolean',
+  //     description: '',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   jumbotronType: {
+  //     control: 'text',
+  //     description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
+  //     defaultValue: { summary: 'light' },
+  //   },
+  //   logo: {
+  //     control: 'text',
+  //     description: 'Optional - set a logo by adding an URL to this property',
+  //   },
+  //   pauseButtonTitle: {
+  //     control: 'text',
+  //     description: 'paly button text when bg-video-src has a value',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   playButtonTitle: {
+  //     control: 'text',
+  //     description: 'paly button text when bg-video-src has a value',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   pngImgStyles: {
+  //     control: 'text',
+  //     description: '',
+  //     defaultValue: { summary: "''" },
+  //   },
+  //   pngSrc: {
+  //     control: 'text',
+  //     description: '',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   styles: {
+  //     control: 'text',
+  //     description: '(optional) Injected CSS styles',
+  //     defaultValue: { summary: 'undefined' },
+  //   },
+  //   subTitle: {
+  //     control: 'text',
+  //     description: 'Set the sub title',
+  //     defaultValue: {
+  //       summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
+  //     },
+  //   },
+  // },
 };
 
 //Light jumbotron story
@@ -19,19 +147,8 @@ const LightJumbotronTemplate = args => {
       play-button-title=${args.playButtonTitle}
       pause-button-title=${args.pauseButtonTitle}
     >
-      has-popup-video=${args.hasPopupVideo}> ${unsafeHTML(args.slotContent)}
-    </ptc-jumbotron>`;
-};
-export const Light = LightJumbotronTemplate.bind({});
-Light.args = {
-  bgSrc:
-    'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
-  jumbotronType: 'light',
-  hasCountdown: 'false',
-  logo: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/4699dab90e6f476b8a70902b58d7d3db?h=827&w=1550&la=en',
-  styles: 'undefined',
-  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
-  slotContent: `<ptc-breadcrumb slot="breadcrumb" color="primary-gray">
+      has-popup-video=${args.hasPopupVideo} >
+      <ptc-breadcrumb slot="breadcrumb" color="primary-gray">
         <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray"> PLM Video Hub </list-item>
         <list-item list-type="breadcrumb" color="primary-gray"> Current Page </list-item>
       </ptc-breadcrumb>
@@ -49,7 +166,18 @@ Light.args = {
         Sed ut perspiciatis unde omnis iste natus
       </ptc-title>
       <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank"> CTA 1 </ptc-button>
-      <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank"> CTA 2 </ptc-button>`,
+      <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank"> CTA 2 </ptc-button>
+    </ptc-jumbotron>`;
+};
+export const Light = LightJumbotronTemplate.bind({});
+Light.args = {
+  bgSrc:
+    'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
+  jumbotronType: 'light',
+  hasCountdown: 'false',
+  logo: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/4699dab90e6f476b8a70902b58d7d3db?h=827&w=1550&la=en',
+  styles: 'undefined',
+  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
 };
 Light.argTypes = {
   bgSrc: {
@@ -59,12 +187,7 @@ Light.argTypes = {
   },
   hasCountdown: {
     control: 'boolean',
-    description: `
-    To add a countdown, trun this attribute on and add <ptc-countdown> after cta buttons. Countdown slot code:
-    <ptc-countdown slot="countdown"
-      countdown-title="Boston Event" 
-      event-time="2/19/2026 20:00:00">
-    </ptc-countdown>`,
+    description: 'To add a countdown, trun this attribute on and add <ptc-countdown> after cta buttons',
     defaultValue: { summary: 'false' },
   },
   jumbotronType: {
@@ -88,37 +211,13 @@ Light.argTypes = {
       summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
     },
   },
-  slotContent: {
-    name: 'Default Slot',
-    description: 'Text Content between the <ptc-link> tags.',
-    control: 'text',
-    table: {
-      category: 'Default Slot',
-      type: {
-        summary: 'html',
-      },
-    },
-  },
 };
 
 //Dark jumbotron story
 const DarkJumbotronTemplate = args => {
   return html`<ptc-para>Set the breadcrumb, main title, cta buttons through correct slot names, please click "show code" for details.</ptc-para>
     <ptc-jumbotron jumbotron-type=${args.jumbotronType} has-countdown=${args.hasCountdown} sub-title=${args.subTitle} bg-src=${args.bgSrc} logo=${args.logo}>
-      ${unsafeHTML(args.slotContent)}
-    </ptc-jumbotron>`;
-};
-export const Dark = DarkJumbotronTemplate.bind({});
-Dark.args = {
-  bgSrc:
-    'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
-  hasCountdown: 'false',
-  jumbotronType: 'dark',
-  logo: '',
-  styles: 'undefined',
-  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
-  slotContent: `
-  <ptc-breadcrumb slot="breadcrumb" color="white">
+      <ptc-breadcrumb slot="breadcrumb" color="white">
         <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray"> PLM Video Hub </list-item>
         <list-item list-type="breadcrumb" color="primary-gray"> Current Page </list-item>
       </ptc-breadcrumb>
@@ -136,7 +235,17 @@ Dark.args = {
       </ptc-title>
       <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank"> CTA 1 </ptc-button>
       <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank"> CTA 2 </ptc-button>
-  `,
+    </ptc-jumbotron>`;
+};
+export const Dark = DarkJumbotronTemplate.bind({});
+Dark.args = {
+  bgSrc:
+    'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
+  hasCountdown: 'false',
+  jumbotronType: 'dark',
+  logo: '',
+  styles: 'undefined',
+  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
 };
 Dark.argTypes = {
   bgSrc: {
@@ -170,30 +279,12 @@ Dark.argTypes = {
       summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
     },
   },
-  slotContent: {
-    name: 'Default Slot',
-    description: 'Text Content between the <ptc-link> tags.',
-    control: 'text',
-    table: {
-      category: 'Default Slot',
-      type: {
-        summary: 'html',
-      },
-    },
-  },
 };
 
 //Text jumbotron story
 const TextJumbotronTemplate = args => {
-  return html` <ptc-jumbotron jumbotron-type=${args.jumbotronType} sub-title=${args.subTitle}> ${unsafeHTML(args.slotContent)} </ptc-jumbotron>`;
-};
-export const Text = TextJumbotronTemplate.bind({});
-Text.args = {
-  jumbotronType: 'text',
-  styles: 'undefined',
-  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
-  slotContent: `
-  <ptc-breadcrumb slot="breadcrumb" color="primary-gray" position="center" styles=":host{margin-top: var(--ptc-element-spacing-06)!important;align-items: baseline;}">
+  return html` <ptc-jumbotron jumbotron-type=${args.jumbotronType} sub-title=${args.subTitle}>
+    <ptc-breadcrumb slot="breadcrumb" color="primary-gray" position="center" styles=":host{margin-top: var(--ptc-element-spacing-06)!important;align-items: baseline;}">
       <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray" styles=":host(.breadcrumb) li{text-transform: uppercase;}">
         PLM TEst
       </list-item>
@@ -215,7 +306,13 @@ Text.args = {
     </ptc-title>
     <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank"> CTA 1 </ptc-button>
     <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank"> CTA 2 </ptc-button>
-  `,
+  </ptc-jumbotron>`;
+};
+export const Text = TextJumbotronTemplate.bind({});
+Text.args = {
+  jumbotronType: 'text',
+  styles: 'undefined',
+  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
 };
 Text.argTypes = {
   subTitle: {
@@ -235,17 +332,6 @@ Text.argTypes = {
     description: '(optional) Injected CSS styles',
     defaultValue: { summary: 'undefined' },
   },
-  slotContent: {
-    name: 'Default Slot',
-    description: 'Text Content between the <ptc-link> tags.',
-    control: 'text',
-    table: {
-      category: 'Default Slot',
-      type: {
-        summary: 'html',
-      },
-    },
-  },
 };
 
 // Dark Video jumbotron story
@@ -257,22 +343,7 @@ const VideoJumbotronTemplate = args => {
     play-button-title=${args.playButtonTitle}
     pause-button-title=${args.pauseButtonTitle}
   >
-    ${unsafeHTML(args.slotContent)}
-  </ptc-jumbotron>`;
-};
-export const DarkVideo = VideoJumbotronTemplate.bind({});
-DarkVideo.args = {
-  bgVideoPosterSrc: 'undefined',
-  bgVideoSrc: 'https://www.ptc.com/-/media/Videos/wind-turbine.mp4',
-  buttonLocation: 'undefined',
-  buttonTabIndex: '0',
-  jumbotronType: 'dark-video',
-  pauseButtonTitle: 'pause text',
-  playButtonTitle: 'play text',
-  styles: 'undefined',
-  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
-  slotContent: `
-  <ptc-breadcrumb slot="breadcrumb" color="white" is-dark-mode>
+    <ptc-breadcrumb slot="breadcrumb" color="white" is-dark-mode>
       <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="light-gray"> PLM Video Hub </list-item>
       <list-item list-type="breadcrumb" color="light-gray"> Current Page </list-item>
     </ptc-breadcrumb>
@@ -290,62 +361,65 @@ DarkVideo.args = {
     </ptc-title>
     <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" dark-focus-state> CTA 1 </ptc-button>
     <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" dark-focus-state> CTA 2 </ptc-button>
-  `,
+  </ptc-jumbotron>`;
+};
+export const DarkVideo = VideoJumbotronTemplate.bind({});
+DarkVideo.args = {
+  bgVideoPosterSrc: 'undefined',
+  bgVideoSrc: 'https://www.ptc.com/-/media/Videos/wind-turbine.mp4',
+  buttonLocation: 'undefined',
+  buttonTabIndex: '0',
+  jumbotronType: 'dark-video',
+  pauseButtonTitle: 'pause text',
+  playButtonTitle: 'play text',
+  styles: 'undefined',
+  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
 };
 DarkVideo.argTypes = {
-  bgVideoPosterSrc: {
-    control: 'text',
-    description: 'Set this value when you need a poster for the background video',
-    defaultValue: { summary: '' },
-  },
-  bgVideoSrc: {
-    control: 'text',
-    description: 'Set this value when the jumbotron type is dark-video or light-video',
-    defaultValue: { summary: '' },
-  },
-  buttonLocation: {
-    control: 'text',
-    description:
-      'Set the location of the play/pause button when the the background video is applied. Available values: top-left, top-right, bottom-left, bottom-right, allbp-bottom-right',
-    defaultValue: { summary: 'undefined' },
-  },
-  buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
+  argTypes: {
+    bgVideoPosterSrc: {
+      control: 'text',
+      description: 'Set this value when you need a poster for the background video',
+      defaultValue: { summary: '' },
+    },
+    bgVideoSrc: {
+      control: 'text',
+      description: 'Set this value when the jumbotron type is dark-video or light-video',
+      defaultValue: { summary: '' },
+    },
+    buttonLocation: {
+      control: 'text',
+      description:
+        'Set the location of the play/pause button when the the background video is applied. Available values: top-left, top-right, bottom-left, bottom-right, allbp-bottom-right',
+      defaultValue: { summary: 'undefined' },
+    },
+    buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
 
-  jumbotronType: {
-    control: 'text',
-    description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
-    defaultValue: { summary: 'light' },
-  },
-  pauseButtonTitle: {
-    control: 'text',
-    description: 'paly button text when bg-video-src has a value',
-    defaultValue: { summary: 'undefined' },
-  },
-  playButtonTitle: {
-    control: 'text',
-    description: 'paly button text when bg-video-src has a value',
-    defaultValue: { summary: 'undefined' },
-  },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
-  subTitle: {
-    control: 'text',
-    description: 'Set the sub title',
-    defaultValue: {
-      summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
+    jumbotronType: {
+      control: 'text',
+      description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
+      defaultValue: { summary: 'light' },
     },
-  },
-  slotContent: {
-    name: 'Default Slot',
-    description: 'Text Content between the <ptc-link> tags.',
-    control: 'text',
-    table: {
-      category: 'Default Slot',
-      type: {
-        summary: 'html',
+    pauseButtonTitle: {
+      control: 'text',
+      description: 'paly button text when bg-video-src has a value',
+      defaultValue: { summary: 'undefined' },
+    },
+    playButtonTitle: {
+      control: 'text',
+      description: 'paly button text when bg-video-src has a value',
+      defaultValue: { summary: 'undefined' },
+    },
+    styles: {
+      control: 'text',
+      description: '(optional) Injected CSS styles',
+      defaultValue: { summary: 'undefined' },
+    },
+    subTitle: {
+      control: 'text',
+      description: 'Set the sub title',
+      defaultValue: {
+        summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
       },
     },
   },
@@ -360,22 +434,7 @@ const LVideoJumbotronTemplate = args => {
     play-button-title=${args.playButtonTitle}
     pause-button-title=${args.pauseButtonTitle}
   >
-    ${unsafeHTML(args.slotContent)}
-  </ptc-jumbotron>`;
-};
-export const LightVideo = LVideoJumbotronTemplate.bind({});
-LightVideo.args = {
-  bgVideoPosterSrc: 'undefined',
-  bgVideoSrc: 'https://www.ptc.com/-/media/Videos/wind-turbine.mp4',
-  buttonLocation: 'undefined',
-  buttonTabIndex: '0',
-  jumbotronType: 'light-video',
-  pauseButtonTitle: 'pause text',
-  playButtonTitle: 'play text',
-  styles: 'undefined',
-  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
-  slotContent: `
-  <ptc-breadcrumb slot="breadcrumb" color="primary-gray" is-dark-mode>
+    <ptc-breadcrumb slot="breadcrumb" color="primary-gray" is-dark-mode>
       <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray"> PLM Video Hub </list-item>
       <list-item list-type="breadcrumb" color="primary-gray"> Current Page </list-item>
     </ptc-breadcrumb>
@@ -393,62 +452,65 @@ LightVideo.args = {
     </ptc-title>
     <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" dark-focus-state> CTA 1 </ptc-button>
     <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" dark-focus-state> CTA 2 </ptc-button>
-  `,
+  </ptc-jumbotron>`;
+};
+export const LightVideo = LVideoJumbotronTemplate.bind({});
+LightVideo.args = {
+  bgVideoPosterSrc: 'undefined',
+  bgVideoSrc: 'https://www.ptc.com/-/media/Videos/wind-turbine.mp4',
+  buttonLocation: 'undefined',
+  buttonTabIndex: '0',
+  jumbotronType: 'light-video',
+  pauseButtonTitle: 'pause text',
+  playButtonTitle: 'play text',
+  styles: 'undefined',
+  subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
 };
 LightVideo.argTypes = {
-  bgVideoPosterSrc: {
-    control: 'text',
-    description: 'Set this value when you need a poster for the background video',
-    defaultValue: { summary: '' },
-  },
-  bgVideoSrc: {
-    control: 'text',
-    description: 'Set this value when the jumbotron type is dark-video or light-video',
-    defaultValue: { summary: '' },
-  },
-  buttonLocation: {
-    control: 'text',
-    description:
-      'Set the location of the play/pause button when the the background video is applied. Available values: top-left, top-right, bottom-left, bottom-right, allbp-bottom-right',
-    defaultValue: { summary: 'undefined' },
-  },
-  buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
+  argTypes: {
+    bgVideoPosterSrc: {
+      control: 'text',
+      description: 'Set this value when you need a poster for the background video',
+      defaultValue: { summary: '' },
+    },
+    bgVideoSrc: {
+      control: 'text',
+      description: 'Set this value when the jumbotron type is dark-video or light-video',
+      defaultValue: { summary: '' },
+    },
+    buttonLocation: {
+      control: 'text',
+      description:
+        'Set the location of the play/pause button when the the background video is applied. Available values: top-left, top-right, bottom-left, bottom-right, allbp-bottom-right',
+      defaultValue: { summary: 'undefined' },
+    },
+    buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
 
-  jumbotronType: {
-    control: 'text',
-    description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
-    defaultValue: { summary: 'light' },
-  },
-  pauseButtonTitle: {
-    control: 'text',
-    description: 'paly button text when bg-video-src has a value',
-    defaultValue: { summary: 'undefined' },
-  },
-  playButtonTitle: {
-    control: 'text',
-    description: 'paly button text when bg-video-src has a value',
-    defaultValue: { summary: 'undefined' },
-  },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
-  subTitle: {
-    control: 'text',
-    description: 'Set the sub title',
-    defaultValue: {
-      summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
+    jumbotronType: {
+      control: 'text',
+      description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
+      defaultValue: { summary: 'light' },
     },
-  },
-  slotContent: {
-    name: 'Default Slot',
-    description: 'Text Content between the <ptc-link> tags.',
-    control: 'text',
-    table: {
-      category: 'Default Slot',
-      type: {
-        summary: 'html',
+    pauseButtonTitle: {
+      control: 'text',
+      description: 'paly button text when bg-video-src has a value',
+      defaultValue: { summary: 'undefined' },
+    },
+    playButtonTitle: {
+      control: 'text',
+      description: 'paly button text when bg-video-src has a value',
+      defaultValue: { summary: 'undefined' },
+    },
+    styles: {
+      control: 'text',
+      description: '(optional) Injected CSS styles',
+      defaultValue: { summary: 'undefined' },
+    },
+    subTitle: {
+      control: 'text',
+      description: 'Set the sub title',
+      defaultValue: {
+        summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
       },
     },
   },
@@ -466,24 +528,8 @@ const BlogJumbotronTemplate = args => {
         blog-author-name=${args.blogAuthorName}
         blog-author-query-href=${args.blogAuthorQueryHref}
         blog-author-query-target=${args.blogAuthorQueryTarget}
-  >
-        ${unsafeHTML(args.slotContent)}
-  </ptc-jumbotron>`;
-};
-export const BlogVideo = BlogJumbotronTemplate.bind({});
-BlogVideo.args = {
-  pngSrc: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5fbb90c52ab7431c89df5eea5ef9fe25?v=6e1b1318',
-  buttonLocation: 'undefined',
-  buttonTabIndex: '0',
-  jumbotronType: 'blog',
-  blogAuthorImage: 'https://www.ptc.com/-/media/Images/blog/Authors/MaleDefaultImage.jpg',
-  blogAuthorImageAlt: 'blog-author-image',
-  blogAuthorName: 'Simone Biles',
-  blogAuthorQueryHref: 'https://www.ptc.com/blogs',
-  blogAuthorQueryTarget: '_blank',
-  styles: 'undefined',
-  slotContent: `
-  <ptc-breadcrumb slot="breadcrumb" color="primary-gray" remove-top-margin="true">
+        
+        <ptc-breadcrumb slot="breadcrumb" color="primary-gray" remove-top-margin="true">
                 <list-item list-type="breadcrumb" link-href="https://www-dev.ptc.com/blogs" color="primary-gray">Blogs</list-item>
                 <list-item list-type="breadcrumb" color="primary-gray">The Key to Using AI to Enhance IoT Security</list-item>
             </ptc-breadcrumb>
@@ -507,221 +553,211 @@ BlogVideo.args = {
             <ptc-button slot="j-cta" type="link" color="ptc-tertiary" link-href="https://www.ptc.com" target="_blank">
                 Speaking of Service Podcast
             </ptc-button>
-  `
+    </ptc-jumbotron>`;
+};
+export const BlogVideo = BlogJumbotronTemplate.bind({});
+BlogVideo.args = {
+  pngSrc: 'https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/5fbb90c52ab7431c89df5eea5ef9fe25?v=6e1b1318',
+  buttonLocation: 'undefined',
+  buttonTabIndex: '0',
+  jumbotronType: 'blog',
+  blogAuthorImage: 'https://www.ptc.com/-/media/Images/blog/Authors/MaleDefaultImage.jpg',
+  blogAuthorImageAlt: 'blog-author-image',
+  blogAuthorName: 'Simone Biles',
+  blogAuthorQueryHref: 'https://www.ptc.com/blogs',
+  blogAuthorQueryTarget: '_blank',
+  styles: 'undefined',
 };
 BlogVideo.argTypes = {
-  pngSrc: {
-    control: 'text',
-    description: '',
-    defaultValue: { summary: 'undefined' },
-  },
-  blogAuthorImage: {
-    control: 'text',
-    description: 'Set this value when you need a blog author',
-    defaultValue: { summary: "''" },
-  },
-  blogAuthorImageAlt: {
-    control: 'text',
-    description: 'Set this value when you need a blog author',
-    defaultValue: { summary: "''" },
-  },
-  blogAuthorName: {
-    control: 'text',
-    description: 'Set this value when you need a blog author',
-    defaultValue: { summary: "''" },
-  },
-  blogAuthorQueryHref: {
-    control: 'text',
-    description: 'Set this value when you need a blog author',
-    defaultValue: { summary: "''" },
-  },
-  blogAuthorQueryTarget: {
-    control: 'text',
-    description: 'Set this value when you need a blog author',
-    defaultValue: { summary: "''" },
-  },
-  buttonLocation: {
-    control: 'text',
-    description:
-      'Set the location of the play/pause button when the the background video is applied. Available values: top-left, top-right, bottom-left, bottom-right, allbp-bottom-right',
-    defaultValue: { summary: 'undefined' },
-  },
-  buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
+  argTypes: {
+    pngSrc: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' },
+    },
+    blogAuthorImage: {
+      control: 'text',
+      description: 'Set this value when you need a blog author',
+      defaultValue: { summary: "''" },
+    },
+    blogAuthorImageAlt: {
+      control: 'text',
+      description: 'Set this value when you need a blog author',
+      defaultValue: { summary: "''" },
+    },
+    blogAuthorName: {
+      control: 'text',
+      description: 'Set this value when you need a blog author',
+      defaultValue: { summary: "''" },
+    },
+    blogAuthorQueryHref: {
+      control: 'text',
+      description: 'Set this value when you need a blog author',
+      defaultValue: { summary: "''" },
+    },
+    blogAuthorQueryTarget: {
+      control: 'text',
+      description: 'Set this value when you need a blog author',
+      defaultValue: { summary: "''" },
+    },
+    buttonLocation: {
+      control: 'text',
+      description:
+        'Set the location of the play/pause button when the the background video is applied. Available values: top-left, top-right, bottom-left, bottom-right, allbp-bottom-right',
+      defaultValue: { summary: 'undefined' },
+    },
+    buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
 
-  jumbotronType: {
-    control: 'text',
-    description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
-    defaultValue: { summary: 'light' },
-  },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
-  slotContent: {
-    name: 'Default Slot',
-    description: 'Text Content between the <ptc-link> tags.',
-    control: 'text',
-    table: {
-      category: 'Default Slot',
-      type: {
-        summary: 'html',
-      },
+    jumbotronType: {
+      control: 'text',
+      description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
+      defaultValue: { summary: 'light' },
+    },
+    styles: {
+      control: 'text',
+      description: '(optional) Injected CSS styles',
+      defaultValue: { summary: 'undefined' },
     },
   },
 };
 
 // Popup Video jumbotron story
 const PopupJumbotronTemplate = args => {
-  return html` <style>
-      ptc-svg-btn {
-        position: absolute;
-        left: 50%;
-        top: 0%;
-        transform: translate(-50%, -200%);
-      }
+  return html`
+  <style>
+  ptc-svg-btn {
+            position: absolute;
+            left: 50%;
+            top: 0%;
+            transform: translate(-50%, -200%);
+        }
 
-      @media screen and (min-width: 480px) {
-        ptc-svg-btn {
-          transform: translate(-50%, -260%);
+        @media screen and (min-width: 480px) {
+            ptc-svg-btn {
+                transform: translate(-50%, -260%);
+            }
         }
-      }
 
-      @media screen and (min-width: 550px) {
-        ptc-svg-btn {
-          transform: translate(-50%, -235%);
+        @media screen and (min-width: 550px) {
+            ptc-svg-btn {
+                transform: translate(-50%, -235%);
+            }
         }
-      }
 
-      @media screen and (min-width: 768px) {
-        ptc-svg-btn {
-          transform: translate(-50%, -306%);
+        @media screen and (min-width: 768px) {
+            ptc-svg-btn {
+                transform: translate(-50%, -306%);
+            }
         }
-      }
 
-      @media screen and (min-width: 992px) {
-        ptc-svg-btn {
-          top: 50%;
-          left: 75%;
-          transform: translate(-50%, -50%);
+        @media screen and (min-width: 992px) {
+            ptc-svg-btn {
+                top: 50%;
+                left: 75%;
+                transform: translate(-50%, -50%);
+            }
         }
-      }
-    </style>
-    <ptc-jumbotron jumbotron-type=${args.jumbotronType} sub-title=${args.subTitle} bg-src=${args.bgSrc} has-popup-video=${args.hasPopupVideo}>
-      ${unsafeHTML(args.slotContent)}
+  </style>
+  <ptc-jumbotron
+    jumbotron-type=${args.jumbotronType}
+    sub-title=${args.subTitle}
+    bg-src=${args.bgSrc}
+    has-popup-video=${args.hasPopupVideo}
+    >
+      <ptc-breadcrumb slot="breadcrumb" color="white" is-dark-mode>
+            <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="light-gray">
+                PLM Video Hub
+            </list-item>
+            <list-item list-type="breadcrumb" color="light-gray">
+                Current Page
+            </list-item>
+        </ptc-breadcrumb>
+        <ptc-title slot="main-title" type="h1" upperline="no-upperline" title-size="xxxx-large" title-height="densest"
+            title-weight="w-8" title-margin="margin-flush" text-align="left" title-color="gray-1"
+            ellipsis-line-cutoff="3">
+            <ptc-tooltip text-lines="3" description="Sed ut perspiciatis unde omnis iste natus"
+                position="right"></ptc-tooltip>
+        </ptc-title>
+        <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" dark-focus-state target="_blank">
+            CTA 1
+        </ptc-button>
+        <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" dark-focus-state target="_blank">
+            CTA 2
+        </ptc-button>
+        <ptc-svg-btn id="j-modal-btn" slot="video" svg-name="play" display="block" z-index="2"></ptc-svg-btn>
+        <ptc-modal id="popup-modal" slot="video" show="false" size="xl" fixed styles=".overlay{backdrop-filter: blur(10px);}" close-on-blur="true">
+            <div class="is-grid has-col-6 has-col-12-xs has-col-gap-lg has-row-gap-md has-m has-p has-col-gap-lg">
+                <div class="is-col-6 is-col-12-xs grid-order-1-md">
+                    <div style="position: relative;">
+                        <div style="padding-top: 56.25%;">
+                            <video-js id="bcPlayer" data-account="1532789042001" data-player="dNyUv9zZ6"
+                                data-embed="default" data-video-id="6307196876112" controls="" data-application-id=""
+                                class="vjs-fill" style="top:0; position:absolute;">
+                            </video-js>
+                        </div>
+                        <script src="//players.brightcove.net/1532789042001/dNyUv9zZ6_default/index.min.js">
+                        </script>
+                    </div>
+                </div>
+            </div>
+        </ptc-modal>
     </ptc-jumbotron>
     <!-- for popup video -->
     <script>
-      let videoBtn = document.querySelector('#j-modal-btn');
-      let modal = document.querySelector('#popup-modal');
+        let videoBtn = document.querySelector('#j-modal-btn');
+        let modal = document.querySelector('#popup-modal');
 
-      if (videoBtn && modal) {
-        videoBtn.addEventListener('click', function () {
-          modal.show = true;
-        });
-        videojs.getPlayer('bcPlayer').ready(function () {
-          var bcPlayer = this;
-          modal.addEventListener('closed', function () {
-            bcPlayer.pause();
-          });
-        });
-      }
+        if (videoBtn && modal) {
+            videoBtn.addEventListener('click', function () {
+                modal.show = true;
+            });
+            videojs.getPlayer('bcPlayer').ready(function () {
+                var bcPlayer = this;
+                modal.addEventListener('closed', function () {
+                    bcPlayer.pause();
+                });
+            });
+        }
     </script>`;
 };
 export const PopupVideo = PopupJumbotronTemplate.bind({});
 PopupVideo.args = {
-  bgSrc:
-    'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
+  bgSrc: 'https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80',
   buttonTabIndex: '0',
   jumbotronType: 'dark',
   hasPopupVideo: true,
   styles: 'undefined',
   subTitle: 'totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo',
-  slotContent: `
-  <ptc-breadcrumb slot="breadcrumb" color="white" is-dark-mode>
-        <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="light-gray"> PLM Video Hub </list-item>
-        <list-item list-type="breadcrumb" color="light-gray"> Current Page </list-item>
-      </ptc-breadcrumb>
-      <ptc-title
-        slot="main-title"
-        type="h1"
-        upperline="no-upperline"
-        title-size="xxxx-large"
-        title-height="densest"
-        title-weight="w-8"
-        title-margin="margin-flush"
-        text-align="left"
-        title-color="gray-1"
-        ellipsis-line-cutoff="3"
-      >
-        <ptc-tooltip text-lines="3" description="Sed ut perspiciatis unde omnis iste natus" position="right"></ptc-tooltip>
-      </ptc-title>
-      <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" dark-focus-state target="_blank"> CTA 1 </ptc-button>
-      <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" dark-focus-state target="_blank"> CTA 2 </ptc-button>
-      <ptc-svg-btn id="j-modal-btn" slot="video" svg-name="play" display="block" z-index="2"></ptc-svg-btn>
-      <ptc-modal id="popup-modal" slot="video" show="false" size="xl" fixed styles=".overlay{backdrop-filter: blur(10px);}" close-on-blur="true">
-        <div class="is-grid has-col-6 has-col-12-xs has-col-gap-lg has-row-gap-md has-m has-p has-col-gap-lg">
-          <div class="is-col-6 is-col-12-xs grid-order-1-md">
-            <div style="position: relative;">
-              <div style="padding-top: 56.25%;">
-                <video-js
-                  id="bcPlayer"
-                  data-account="1532789042001"
-                  data-player="dNyUv9zZ6"
-                  data-embed="default"
-                  data-video-id="6307196876112"
-                  controls=""
-                  data-application-id=""
-                  class="vjs-fill"
-                  style="top:0; position:absolute;"
-                >
-                </video-js>
-              </div>
-              <script src="//players.brightcove.net/1532789042001/dNyUv9zZ6_default/index.min.js"></script>
-            </div>
-          </div>
-        </div>
-      </ptc-modal>
-  `
 };
 PopupVideo.argTypes = {
-  bgSrc: {
-    control: 'text',
-    description: 'Set this value when the jubmotron type is dark or light',
-    defaultValue: { summary: '' },
-  },
-  buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
-  jumbotronType: {
-    control: 'text',
-    description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
-    defaultValue: { summary: 'light' },
-  },
-  hasPopupVideo: {
-    control: 'boolean',
-    description: 'Set this value to true when you need a pop up video on the right side, add ptc-svg-btn & ptc-modal for the play button and video',
-    defaultValue: { summary: 'false' },
-  },
-  subTitle: {
-    control: 'text',
-    description: 'Set the sub title',
-    defaultValue: {
-      summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
+  argTypes: {
+    bgSrc: {
+      control: 'text',
+      description: 'Set this value when the jubmotron type is dark or light',
+      defaultValue: { summary: '' },
     },
-  },
-  styles: {
-    control: 'text',
-    description: '(optional) Injected CSS styles',
-    defaultValue: { summary: 'undefined' },
-  },
-  slotContent: {
-    name: 'Default Slot',
-    description: 'Text Content between the <ptc-link> tags.',
-    control: 'text',
-    table: {
-      category: 'Default Slot',
-      type: {
-        summary: 'html',
+    buttonTabIndex: { control: 'number', description: 'Set button tab index for tab navigation, default value is 0', defaultValue: { summary: '0' } },
+    jumbotronType: {
+      control: 'text',
+      description: 'jumbotron types. light, dark, light-video, dark-video, png, text, blog, gif',
+      defaultValue: { summary: 'light' },
+    },
+    hasPopupVideo: {
+      control: 'boolean',
+      description: 'Set this value to true when you need a pop up video on the right side, add ptc-svg-btn & ptc-modal for the play button and video',
+      defaultValue: { summary: 'false' },
+    },
+    subTitle: {
+      control: 'text',
+      description: 'Set the sub title',
+      defaultValue: {
+        summary: 'Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet',
       },
     },
+    styles: {
+      control: 'text',
+      description: '(optional) Injected CSS styles',
+      defaultValue: { summary: 'undefined' },
+    },
   },
 };