@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Jumbotron/preview.stories.js

@@ -0,0 +1,431 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Jumbotron'
+};
+
+const AlertsPage = 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-title text-align="center" upperline="no-upperline">Light</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="light" has-countdown="true"
+        sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+        bg-src="https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80">
+        
+        
+        <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>
+        <ptc-countdown slot="countdown"
+            countdown-title="Boston Event" 
+            event-time="2/19/2025 20:00:00">
+        </ptc-countdown>
+        
+    </ptc-jumbotron>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">Dark</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="dark"
+        sub-title="totam rem aperiam,<a href='#ff'> eaque ipsa quae ab illo inventore veritatis et</a> quasi architecto beatae vitae dicta sunt explicabo."
+        bg-src="https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80">
+        
+        
+        <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" link-href="https://www.ptc.com/contact-us" color="light-gray">
+              PLM Video Hub perspiciatis unde omnis iste natus
+          </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-primary" 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>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">Png</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="png"
+        sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+        png-src="https://images.unsplash.com/photo-1676883343977-5f8ecc36856c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzgyMjcxNDU&ixlib=rb-4.0.3&q=80&w=400"
+        has-popup-video="true">
+        
+        
+        <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>
+        <ptc-svg-btn id="j-modal-btn" slot="video" svg-name="play" display="block" z-index="{2}" class="block hydrated"></ptc-svg-btn>
+    </ptc-jumbotron>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">Text Only</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="text"
+        sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.">
+        
+        
+        <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">
+            
+            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>
+    </ptc-jumbotron>
+    <hr>
+    <ptc-jumbotron jumbotron-type="text"
+        sub-title="Browse all of PTC's software solutions.">
+        
+        
+        <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;}">
+                PTC offices
+            </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">
+            
+            PTC Products
+        </ptc-title>
+    </ptc-jumbotron>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">Gif</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="gif"
+        sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+        gif-src="https://media.giphy.com/media/TDQkojbHj3wTS/giphy.gif">
+        
+        
+        <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>
+    </ptc-jumbotron>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">light video</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="light-video"
+        sub-title="Explore LiveWorx content relevant to you with Track, Product, and Industry Recommended Agendas.Explore LiveWorx content  xplore LiveWorx content relevant to you with Track, Product, and Industry Recommended Agendas.Explore LiveWorx content  xplore LiveWorx content relevant to you with Track, Product, and Industry Recommended Agendas.Explore LiveWorx content  xplore LiveWorx content relevant to you with Track, Product, and Industry Recommended Agendas."
+        bg-video-src="https://www.ptc.com/-/media/Videos/wind-turbine.mp4" play-button-title="play1"
+        pause-button-title="pause text">
+        
+        
+        <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">
+            Break Down Silos Between Engineering and Manufacturing Break Down Silos Between Engineering and Manufacturing Break Down
+        </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>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">dark video</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="dark-video"
+        sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+        bg-video-src="https://www.ptc.com/-/media/Videos/wind-turbine.mp4" play-button-title="play1"
+        pause-button-title="pause text">
+        
+        
+        <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>
+    </ptc-jumbotron>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">Character Limits</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="light"
+        sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+        bg-src="https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80" has-popup-video="true">
+        
+        
+        <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">
+            <ptc-tooltip text-lines="3"
+                description="Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet Consectetur Adipisci Lorem Ipsum Dolor Sit Amet Industry 4.0: Optimize Operations and Shape Future Innovation"
+                position="right"></ptc-tooltip>
+        </ptc-title>
+        <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">
+            <ptc-tooltip text-display="inline" max-length="30"
+                description="Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac."
+                position="bottom"></ptc-tooltip>
+        </ptc-button>
+        <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
+            <ptc-tooltip text-display="inline" max-length="30"
+                description="Nulla ut nunc id nulla aliquam feugiat. Maecenas quis dui rhoncus, mattis risus ac."
+                position="bottom"></ptc-tooltip>
+        </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>
+
+    <br>
+    <br>
+
+    <ptc-title text-align="center" upperline="no-upperline">Dark</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="dark"
+        sub-title="Verbinden Sie Ihre Maschinen, Mitarbeiter und Prozesse – und erschließen Sie gleichzeitig neue datengesteuerte Funktionen. Erfahren Sie, wie industrielle Konnektivität und Echtzeit-Datenanalyse Ihre industriellen Daten in schnellere Geschäftsentscheidungen, verbesserte Effizienz und maximiertes Umsatzwachstum für Ihr Unternehmen umwandeln können. Erfahren Sie, wie Sie den industriellen IoT-Erfolg in Fertigung und Service mit IoT-Programmen meistern, die die richtigen Meilensteine ​​erreichen Lorem. miertes Umsatzwachstum für Ihr Unternehmen umwandeln können. Erfahren Sie, wie Sie den industriellen"
+        bg-src="https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80"
+        has-popup-video="true">
+        
+        
+        <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>
+
+    
+    <ptc-title text-align="center" upperline="no-upperline">video pop up</ptc-title>
+    <hr>
+    <ptc-jumbotron jumbotron-type="dark-video"
+        sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+        bg-video-src="https://www.ptc.com/-/media/Videos/wind-turbine.mp4" play-button-title="play1"
+        pause-button-title="pause text" has-popup-video="true">
+        
+        
+        
+        <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 Update"
+                position="right"></ptc-tooltip>
+        </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-svg-btn id="j-modal-btn" slot="video" svg-name="play" display="block" tabindex="0"></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>
+    
+    <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 Preview = AlertsPage.bind();