@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Homepage Toggled Content/preview.stories.js

@@ -0,0 +1,227 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Homepage Toggled Content'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .homepage-toggled-content .main-title {
+            color: var(--color-gray-10);
+            font-family: Raleway;
+            font-size: 28px;
+            font-style: normal;
+            font-weight: 800;
+            line-height: 40px;
+            text-align: left;
+            margin-top: 0px;
+            margin-bottom: 0px;
+
+            @media screen and (min-width: 768px) {
+                font-size: 32px;
+            }
+        }
+
+        .homepage-toggled-content .main-description {
+            color: var(--color-gray-10);
+            font-family: Raleway;
+            font-size: 18px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 27px;
+            text-align: left;
+            margin-bottom: 32px;
+
+            @media screen and (min-width: 992px) {
+                margin-bottom: 48px;
+            }
+        }
+
+        .tab-tile-text-h {
+            margin: 0;
+            font-size: 1.2em;
+        }
+
+        .tab-tile-text-p {
+            margin: 0;
+            color: var(--color-gray-10);
+            font-family: Raleway;
+            font-size: 16px;
+            font-weight: 700;
+            line-height: 24px;
+        }
+
+        .tab-label {
+            margin: 0;
+            font-weight: var(--ptc-font-weight-regular);
+        }
+
+        .tab-label:hover {
+            font-weight: var(--ptc-font-weight-bold);
+        }
+
+        /* @media screen and (min-width: 992px) {
+            .tab-slot-image {
+                max-width: 580px;
+                width: 50%;
+                height: auto;
+            }
+        } */
+    </style>
+<section class="ptc-section-large homepage-toggled-content">
+        <div class="ptc-container">
+            <homepage-toggled-content>
+                
+                <h2 class="main-title" slot="title">Imperdiet molestie egestas ullamcorper amet molestie diam orci ipsum
+                    aliquam lacus</h2>
+                <p class="main-description" slot="description">Eu suspendisse in ipsum neque turpis lorem libero quis
+                    integer amet.</p>
+
+                
+                <img slot="tab-image-0" src="https://placehold.co/580x733" alt="Image 0" class="tab-slot-image" >
+                <h3 slot="tab-label-0" class="tab-label">Drive Growth & Innovation Hippopotomonstrosesquippedaliophobia </h3>
+                <h3 slot="tab-title-0" class="title">Molestie nascetur mattis aiam dictum in pulvinar rutrum felis odio</h3>
+                <p slot="tab-content-0" class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a tincidunt
+                    pharetra gravida aliquet habitasse.</p>
+                <ptc-button slot="tab-button-0" color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com"
+                    link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined"
+                    type="button">Diam Consequat 1</ptc-button>
+
+                <img slot="tab-image-1" src="https://placehold.co/580x732" alt="Image 1" class="tab-slot-image" >
+                <h3 slot="tab-label-1" class="tab-label">Manage Product Complexity Manage Product Complexity Manage Product Complexity</h3>
+                <h3 slot="tab-title-1" class="title">Molestie nascetur mattis aiam dictum in pulvinar rutrum felis odio 2</h3>
+                <p slot="tab-content-1" class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a tincidunt
+                    pharetra gravida aliquet habitasse.</p>
+                <ptc-button slot="tab-button-1" color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com"
+                    link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined"
+                    type="button">Diam Consequat 2</ptc-button>
+
+                <img slot="tab-image-2" src="https://placehold.co/580x731" alt="Image 2" class="tab-slot-image" >
+                <h3 slot="tab-label-2" class="tab-label">X</h3>
+                <h3 slot="tab-title-2" class="title">Molestie nascetur mattis aiam dictum in pulvinar rutrum felis odio</h3>
+                <p slot="tab-content-2" class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a tincidunt
+                    pharetra gravida aliquet habitasse.</p>
+                <ptc-button slot="tab-button-2" color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com"
+                    link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined"
+                    type="button">Diam Consequat 3</ptc-button>
+
+                <img slot="tab-image-3" src="https://placehold.co/580x733" alt="Image 3" class="tab-slot-image" >
+                <h3 slot="tab-label-3" class="tab-label">Drive Growth & Innovation</h3>
+                <h3 slot="tab-title-3" class="title">Molestie nascetur mattis aiam dictum in pulvinar rutrum felis odio</h3>
+                <p slot="tab-content-3" class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a tincidunt
+                    pharetra gravida aliquet habitasse.</p>
+                <ptc-button slot="tab-button-3" color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com"
+                    link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined"
+                    type="button">Diam Consequat 4</ptc-button>
+
+                <img slot="tab-image-4" src="https://placehold.co/580x732" alt="Image 4" class="tab-slot-image" >
+                <h3 slot="tab-label-4" class="tab-label">Transform the Customer Experience</h3>
+                <h3 slot="tab-title-4" class="title">Molestie nascetur mattis aiam dictum in pulvinar rutrum felis odio</h3>
+                <p slot="tab-content-4" class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a tincidunt
+                    pharetra gravida aliquet habitasse.</p>
+                <ptc-button slot="tab-button-4" color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com"
+                    link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined"
+                    type="button">Diam Consequat 5</ptc-button>
+
+                
+                <ptc-info-tile variant="text" slot="tab-tile-0" link="https://www.ptc.com">
+                    <span class="tab-tile-text-h" slot="tile-title">Gravida Enim test</span>
+                    <p class="tab-tile-text-p" slot="tile-description">Neque rhoncus adipiscing ullamcorper
+                        lectus
+                    </p>
+                </ptc-info-tile>
+                <ptc-info-tile variant="text" slot="tab-tile-0" link="https://www.ptc.com">
+                    <span class="tab-tile-text-h" slot="tile-title">Commodo Adipiscing test</span>
+                    <p class="tab-tile-text-p" slot="tile-description">Neque rhoncus adipiscing ullamcorper
+                        lectus
+                    </p>
+                </ptc-info-tile>
+
+                <ptc-info-tile variant="text" slot="tab-tile-1" link="https://www.ptc.com">
+                    <span class="tab-tile-text-h" slot="tile-title">Gravida Enim 2 n</span>
+                    <p class="tab-tile-text-p" slot="tile-description">
+                        Neque rhoncus adipiscing ullamcorper lectus 2
+                    </p>
+                </ptc-info-tile>
+                <ptc-info-tile variant="text" slot="tab-tile-1" link="https://www.ptc.com">
+                    <span class="tab-tile-text-h" slot="tile-title">Commodo Adipiscing n</span>
+                    <p class="tab-tile-text-p" slot="tile-description">
+                        Neque rhoncus adipiscing ullamcorper lectus 2
+                    </p>
+                </ptc-info-tile>
+            </homepage-toggled-content>
+        </div>
+    </section>
+
+    <ptc-homepage-video-background video-src="http://www-test.ptc.com/-/media/Development/Videos/demo.mp4"
+        poster-src="http://www-test.ptc.com/-/media/Development/demo_poster.jpg" pause-button-title="Pause Video2"
+        play-button-title="Play Video3" button-location="top-right">
+        <div slot="primary-content" class="light-links light-font">
+            <ptc-title title-color="white" text-align="left" upperline="no-upperline" type="h2" title-weight="w-8"
+                seo-compatibility-mode="true" title-height="densest" title-size="xx-large" title-margin="margin-flush">
+                <h2>Digital Thread: Essential Enabler of Digital Transformation</h2>
+            </ptc-title>
+            <ptc-spacer size="medium"></ptc-spacer>
+            <ptc-para para-color="white" font-weight="w-4" font-size="small" para-margin="margin-flush"
+                seo-compatibility-mode="true" para-line-h="ptc-line-height-p">
+                <p>Hippopotomonstrosesquippedaliophobia <a href="/en/">internal link</a>, <a rel="noopener noreferrer"
+                        href="http://www.google.com" target="_blank">External Link</a>, <a 
+                        href="http://www-test.ptc.com/en/resources/digital-download/Part-1-Cummins-Drives-Sustainability-Using-Creo-Generative-Design">slug
+                        url</a>, <strong>bold</strong>, <em>italics</em> <br>
+                <h2>testing header 2</h2>
+                <h3>testing header 3</h3>
+                <h4>testing header 4</h4>
+                </p><p>testing items in a p tag</p>
+                <ol>
+                    <li>item 1</li>
+                    <li>item 2</li>
+                    <li>item 3</li>
+                </ol>
+                <ul>
+                    <li>item 1</li>
+                    <li>item 2</li>
+                </ul>
+                Rechtsschutzversicherungsgesellschaften
+            </ptc-para>
+            <ptc-spacer size="medium"></ptc-spacer>
+            <ptc-spacer size="medium"></ptc-spacer>
+            <ptc-button type="link" color="ptc-quaternary"
+                link-href="http://www-test.ptc.com/en/industry-insights/digital-thread" target="_self"
+                button-title="Learn more about digital thread. ">Hippopotomonstrosesquippedaliophobia </ptc-button>
+        </div>
+        <div slot="secondary-content">
+            <ptc-title title-color="white" text-align="left" upperline="no-upperline" title-weight="w-7"
+                title-size="large" seo-compatibility-mode="true" title-height="densest" title-margin="margin-flush">
+                <h3>Explore the solutions right for you and your role </h3>
+            </ptc-title>
+        </div>
+        <div class="card-cta-links">
+            <a data-icon="icon-3d-product-solid" href="#" target="_self">
+                <h4>Hippopotomonstrosesquippedaliophobia</h4>
+            </a>
+            <a data-icon="icon-wrench-solid" href="#" target="_self">
+                <h4>Manufacturing</h4>
+            </a>
+            <a data-icon="icon-gear-solid" href="#" target="_self">
+                <h4>Service Optimization Optimization</h4>
+            </a>
+            <a data-icon="icon-lightbulb" href="#" target="_self">
+                <h4>Enterprise Leadership Leadership Leadership Leadership</h4>
+            </a>
+        </div>
+    </ptc-homepage-video-background>
+    <ptc-spacer></ptc-spacer>
+    <div class="ptc-container">
+        <ptc-button type="link" color="ptc-tertiary" link-href="https://www.google.com/" target="_blank" button-title="alt text" class="hydrated">
+            <a href="/en/about">
+                Hippopotomonstrosesquippedaliophobia 
+            </a>
+        </ptc-button>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();