@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

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

@@ -0,0 +1,727 @@
+import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+
+export default {
+  title: 'Molecules/ptc-jumbotron',
+  tags: ['autodocs'],
+};
+
+//Light jumbotron story
+const LightJumbotronTemplate = 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}
+      bg-video-src=${args.bgVideoSrc}
+      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">
+        <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>
+      <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"
+      >
+        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>`,
+};
+Light.argTypes = {
+  bgSrc: {
+    control: 'text',
+    description: 'Set this value when the jubmotron type is dark or light',
+    defaultValue: { summary: '' },
+  },
+  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>`,
+    defaultValue: { summary: 'false' },
+  },
+  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',
+  },
+  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',
+    },
+  },
+  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">
+        <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>
+      <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"
+        >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>
+  `,
+};
+Dark.argTypes = {
+  bgSrc: {
+    control: 'text',
+    description: 'Set this value when the jubmotron type is dark or light',
+    defaultValue: { summary: '' },
+  },
+  hasCountdown: {
+    control: 'boolean',
+    description: 'To add a countdown, trun this attribute on and add <ptc-countdown> after cta buttons',
+    defaultValue: { summary: 'false' },
+  },
+  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',
+  },
+  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',
+    },
+  },
+  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;}">
+      <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>
+      <list-item list-type="breadcrumb" color="primary-gray" styles=":host(.breadcrumb) li{ text-transform: uppercase;}"> Connecting Engineering and Manufacturing PPC </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="center"
+      title-color="gray"
+    >
+      <!-- test align = center for text -->
+      Sed ut perspiciatis unde omnis iste natus totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
+    </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>
+  `,
+};
+Text.argTypes = {
+  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' },
+  },
+  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',
+      },
+    },
+  },
+};
+
+// Dark Video jumbotron story
+const VideoJumbotronTemplate = args => {
+  return html` <ptc-jumbotron
+    jumbotron-type=${args.jumbotronType}
+    sub-title=${args.subTitle}
+    bg-video-src=${args.bgVideoSrc}
+    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>
+      <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"
+      >Sed ut perspiciatis unde omnis iste natus
+    </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>
+  `,
+};
+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' } },
+
+  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',
+    },
+  },
+  slotContent: {
+    name: 'Default Slot',
+    description: 'Text Content between the <ptc-link> tags.',
+    control: 'text',
+    table: {
+      category: 'Default Slot',
+      type: {
+        summary: 'html',
+      },
+    },
+  },
+};
+
+// Light Video jumbotron story
+const LVideoJumbotronTemplate = args => {
+  return html` <ptc-jumbotron
+    jumbotron-type=${args.jumbotronType}
+    sub-title=${args.subTitle}
+    bg-video-src=${args.bgVideoSrc}
+    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>
+      <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>
+    <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"
+      >Sed ut perspiciatis unde omnis iste natus
+    </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>
+  `,
+};
+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' } },
+
+  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',
+    },
+  },
+  slotContent: {
+    name: 'Default Slot',
+    description: 'Text Content between the <ptc-link> tags.',
+    control: 'text',
+    table: {
+      category: 'Default Slot',
+      type: {
+        summary: 'html',
+      },
+    },
+  },
+};
+
+// Blog jumbotron story
+const BlogJumbotronTemplate = args => {
+  return html`
+  <ptc-jumbotron jumbotron-type=${args.jumbotronType}
+        sub-title=""
+        png-src=${args.pngSrc}
+        has-popup-video="false"
+        blog-author-image=${args.blogAuthorImage}
+        blog-author-image-alt=${args.blogAuthorImageAlt}
+        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">
+                <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>
+            <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"
+            >
+                The Key to Using AI to Enhance IoT Security
+            </ptc-title>
+            <span slot="blog-date">April 4, 2024</span>
+            <ptc-button slot="j-cta" type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">
+                Request Free Trial
+            </ptc-button>
+            <ptc-button slot="j-cta" type="link" color="ptc-tertiary" link-href="https://www.ptc.com" target="_blank">
+                Speaking of Service Podcast
+            </ptc-button>
+  `
+};
+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' } },
+
+  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',
+      },
+    },
+  },
+};
+
+// Popup Video jumbotron story
+const PopupJumbotronTemplate = args => {
+  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: 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: 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)}
+    </ptc-jumbotron>
+    <!-- for popup video -->
+    <script>
+      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();
+          });
+        });
+      }
+    </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',
+  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',
+    },
+  },
+  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',
+      },
+    },
+  },
+};