@ptcwebops/ptcw-design 6.3.58-beta → 6.3.60-beta

package/dist/collection/stories/organisms/ptc/Ptc Text Copy With Background/preview.stories.js

@@ -0,0 +1,226 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Text Copy With Background'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .swiper-text-copy-bg {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .swiper-text-copy-bg .swiper-button-prev::after,
+        .swiper-text-copy-bg .swiper-button-next::after {
+            content: none;
+        }
+
+        .swiper-text-copy-bg .swiper-button-prev img,
+        .swiper-text-copy-bg .swiper-button-next img {
+            background-color: #ffffff;
+        }
+
+        .swiper-pagination-bullet {
+            background-color: #ffffff;
+        }
+
+
+        @media (min-width:1350px) {
+            .swiper-text-copy-bg .swiper-button-prev img {
+                margin-left: 40px;
+            }
+
+            .swiper-text-copy-bg .swiper-button-next img {
+                margin-right: 40px;
+            }
+        }
+
+        @media (max-width: 1300px) {
+            .swiper-text-copy-bg ptc-text-copy-with-background {
+                padding-left: 40px;
+                padding-right: 40px;
+            }
+
+        }
+    </style>
+<div class="ptc-container">
+        <br>
+        <ptc-title type='h3' upperline="no-upperline">Text copy with background</ptc-title>
+        <hr>
+        <br>
+    </div>
+    <section>
+        <ptc-text-copy-with-background is-background-blur="true" top-slit-background-color="white"
+            background-image="https://www.ptc.com/-/media/Images/new-org/1920x906/Augmented-Reality/CTA-FTIS2.jpg?h=660&w=1920&la=en&hash=0A8BE693C247D7FD02A74528B157A272">
+            <div class="ptc-container">
+                <div class="is-grid">
+                    <div class="is-col is-col-6-lg is-col-5-xl">
+                        <ptc-title title-color="white" type='h2' text-align='left' upperline="no-upperline"
+                            title-margin="margin-flush" title-size="xx-large">
+                            FactoryTalk Innovation Suite, powered by PTC </ptc-title>
+                        <ptc-para font-size="small" para-color="white" para-line-h="line-height-denser" font-weight="w-5"
+                            para-margin="margin-4">
+                            Transform your operations with the power of edge-to-enterprise analytics, machine learning, and
+                            industrial IoT.PTC and Rockwell Automation are driving production management.
+                        </ptc-para>
+                        <ptc-spacer size="medium"></ptc-spacer>
+                        <ptc-button type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">Request
+                            Free Trial
+                        </ptc-button>
+                    </div>
+                </div>
+            </div>
+        </ptc-text-copy-with-background>
+    </section>
+    <div class="ptc-container">
+        <br>
+        <ptc-title type='h3' upperline="no-upperline">Text copy with background Slider</ptc-title>
+        <hr>
+        <br>
+    </div>
+    
+    <div class="swiper-text-copy-bg">
+        
+        <div class="swiper-wrapper">
+            
+            <div class="swiper-slide">
+                <ptc-text-copy-with-background is-background-blur="true" top-slit-background-color="white"
+                    background-image="https://www.ptc.com/-/media/Images/new-org/1920x906/Augmented-Reality/CTA-FTIS2.jpg?h=660&w=1920&la=en&hash=0A8BE693C247D7FD02A74528B157A272">
+                    <div class="ptc-container">
+                        <div class="is-grid">
+                            <div class="is-col is-col-6-lg is-col-5-xl">
+                                <ptc-title title-color="white" type='h2' text-align='left' upperline="no-upperline"
+                                    title-margin="margin-flush" title-size="xx-large">
+                                    FactoryTalk Innovation Suite, powered by PTC </ptc-title>
+                                <ptc-para font-size="small" para-color="white" para-line-h="line-height-denser"
+                                    font-weight="w-5" para-margin="margin-4">
+                                    Transform your operations with the power of edge-to-enterprise analytics,
+                                    machine learning, and
+                                    industrial IoT.PTC and Rockwell Automation are driving production management.
+                                </ptc-para>
+                                <ptc-spacer size="medium"></ptc-spacer>
+                                <ptc-button type="link" color="ptc-primary" link-href="https://www.ptc.com"
+                                    target="_blank">Request
+                                    Free Trial
+                                </ptc-button>
+                            </div>
+                        </div>
+                    </div>
+                </ptc-text-copy-with-background>
+            </div>
+            <div class="swiper-slide">
+                <ptc-text-copy-with-background is-background-blur="true" top-slit-background-color="white"
+                    background-image="https://www.ptc.com/-/media/Images/new-org/1920x906/industries-aerospace-defense-air-force-military-plane_1920x906.jpg?h=906&w=1920&la=en&hash=D5CD71D782F275689309070A4AE960F4">
+                    <div class="ptc-container">
+                        <div class="is-grid">
+                            <div class="is-col is-col-6-lg is-col-5-xl">
+                                <ptc-title title-color="white" type='h2' text-align='left' upperline="no-upperline"
+                                    title-margin="margin-flush" title-size="xx-large">
+                                    US Air Force sets a new standard of operational excellence with Servigistics
+                                </ptc-title>
+                                <ptc-para font-size="small" para-color="white" para-line-h="line-height-denser"
+                                    font-weight="w-5" para-margin="margin-4">
+                                    The US Air Force manages one of the most complex and advanced service supply chains
+                                    in the world, supporting weapons systems across 1,500 global locations. With
+                                    cutting-edge capabilities and data science from Servigistic
+                                </ptc-para>
+                                <ptc-spacer size="medium"></ptc-spacer>
+                                <ptc-button type="link" color="ptc-primary" link-href="https://www.ptc.com"
+                                    target="_blank">Read the DoD Article </ptc-button>
+                            </div>
+                        </div>
+                    </div>
+                </ptc-text-copy-with-background>
+            </div>
+            <div class="swiper-slide">
+                <ptc-text-copy-with-background is-background-blur="true" top-slit-background-color="white"
+                    background-image="https://www.ptc.com/-/media/Images/new-org/1920x906/CAD/Tiger-Hero-1920x906.jpg?h=906&w=1920&la=en&hash=FDF7F4FCE2ED03DFC512EB630266CEC5">
+                    <div class="ptc-container">
+                        <div class="is-grid">
+                            <div class="is-col is-col-6-lg is-col-5-xl">
+                                <ptc-title title-color="white" type='h2' text-align='left' upperline="no-upperline"
+                                    title-margin="margin-flush" title-size="xx-large">Creo capabilities </ptc-title>
+                                <ptc-para font-size="small" para-color="white" para-line-h="line-height-denser"
+                                    font-weight="w-5" para-margin="margin-4">
+                                    PTC’s developers created Creo Parametric as a sound foundation software that allows
+                                    its users the ability to expand deeper functionality with each component. As your
+                                    products become more complex in their engineering, Creo offers expanded capabilities
+                                    to meet your requirements. Explore Creo’s capabilities that mold to your unique
+                                    craft.
+                                </ptc-para>
+                                <ptc-spacer size="medium"></ptc-spacer>
+                                <ptc-button type="link" color="ptc-primary" link-href="https://www.ptc.com"
+                                    target="_blank">Explore Capabilities </ptc-button>
+                            </div>
+                        </div>
+                    </div>
+                </ptc-text-copy-with-background>
+            </div>
+        </div>
+        
+        <div class="swiper-pagination"></div>
+
+        
+        <div class="swiper-button-prev"><img src="https://www-staging.ptc.com/dist/ptc/images/home-sidescroll-left.svg"
+                alt=""></div>
+        <div class="swiper-button-next"><img src="https://www-staging.ptc.com/dist/ptc/images/home-sidescroll-right.svg"
+                alt=""></div>
+    </div>
+    <div class="ptc-container">
+        <br>
+        <ptc-title type='h3' upperline="no-upperline">Hero footer CTA Demo</ptc-title>
+        <hr>
+        <br>
+    </div>
+    <section>
+        <ptc-text-copy-with-background type="hero-footer-cta" top-slit-background-color="white"
+            background-image="https://www.ptc.com/-/media/Images/new-org/1920x500/CTA-Hero-Alternate/industries-aerospace-and-defense-plane-turbine1920x500.jpg?h=500&w=1920&la=en&hash=5F771ACE5F6223EF724CE26B8B7D6A65">
+            <div class="ptc-container">
+                <div class="is-grid">
+                    <div class="is-col is-col-6-lg">
+                        <ptc-title title-color="white" type='h2' text-align='left' title-size="xxxx-large"
+                            upperline="no-upperline" title-margin="margin-flush">
+                            Contact PTC today
+                        </ptc-title>
+                        <ptc-para font-size="small" para-color="white" para-line-h="line-height-denser" font-weight="w-6"
+                            para-margin="margin-4">
+                            Whether you’re a government contractor or serving in our military, PTC can help you achieve
+                            excellence.
+                        </ptc-para>
+                    </div>
+                    <div class="is-col is-col-6-lg u-flex-md">
+                        <ptc-button class="u-align-center" type="link" color="ptc-quaternary"
+                            link-href="https://www.ptc.com" target="_blank">Contact PTC
+                        </ptc-button>
+                    </div>
+                </div>
+            </div>
+        </ptc-text-copy-with-background>
+    </section>
+
+    <script>
+        const swiper = new Swiper('.swiper-text-copy-bg', {
+            // Optional parameters
+            loop: true,
+            effect: "fade",
+            autoHeight: "true",
+            // If we need pagination
+            pagination: {
+                el: '.swiper-pagination',
+            },
+
+            // Navigation arrows
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            }
+        });
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Title Demo/preview.stories.js

@@ -0,0 +1,24 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Title Demo'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container ptc-section">
+    <ptc-title type='h1' upperline="solid" title-margin="margin-flush">H1 Title </ptc-title>
+  </div>
+  <div class="ptc-container ptc-section">
+    <ptc-title type='h2' upperline="solid" title-margin="margin-flush">H2 Title </ptc-title>
+  </div>
+  <div class="ptc-container ptc-section">
+    <ptc-title type='h3' upperline="solid" title-margin="margin-flush">H3 Title </ptc-title>
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Tooltip V3/preview.stories.js

@@ -0,0 +1,85 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Tooltip V3'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container">
+
+
+
+
+    <section>
+      <h3>Default tooltip: text without Tag</h3>
+      <hr>
+      <ptc-tooltip-v3 hide-on-mobile="true" max-lines="2" position="bottom" theme="danger" z-index="999">Digital
+        transformation is empowering industrial organizations to deliver sustainable innovation, disruption-proof
+        products and services, and continuous operational improvement. Explore how PTC technology—delivered as SaaS,
+        hybrid, or on-premises software solutions—can create value for your business by delivering accurate product and
+        process information to the right person, at the right time, in the right context, across your extended
+        enterprise.
+      </ptc-tooltip-v3>
+    </section>
+
+    <section>
+      <h3>Default tooltip: text with Tag</h3>
+      <hr>
+      <ptc-tooltip-v3 html-tag-type="h3" hide-on-mobile="true" max-lines="1" position="bottom" z-index="999">
+        <h3>Digital transformation is empowering industrial organizations to deliver sustainable innovation,
+          disruption-proof products </h3>
+      </ptc-tooltip-v3>
+    </section>
+
+    <section>
+      <h3>Ptc para tooltip</h3>
+      <hr>
+      <ptc-para font-weight="w-5" para-color="primary-grey" para-line-h="line-height-normal"
+       enable-tooltip="true"
+        max-lines="2" hide-tooltip-on-mobile="true" tooltip-z-index="999" seo-compatibility-mode tooltip-width="full-width">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          paratur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+          laborum.</p>
+      </ptc-para>
+
+      <h4>Ptc para without tooltip : New tooltip will not affect existing paragraphs</h4>
+      <hr>
+      <ptc-para font-weight="w-5" para-color="primary-grey" para-line-h="line-height-normal" seo-compatibility-mode
+        para-z-index="z-auto">
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla paratur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+      </ptc-para>
+
+    </section>
+
+
+    <section>
+      <h3>Ptc title with tooltip</h3>
+      <hr>
+      <ptc-title seo-compatibility-mode enable-tooltip="true" hide-tooltip-on-mobile="true" tooltip-z-index='999'
+        tooltip-position="bottom" max-lines="2" type="h2" text-align="left" upperline="no-upperline"
+        title-display="inline-block" title-margin="margin-flush" title-weight="w-8" >
+        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, rum. olor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim  id est laborum.</h2>
+
+      </ptc-title>
+
+      <h3>ptc-title without tooltip : New tooltip will not affect existing titles</h3>
+      <hr>
+      <ptc-title seo-compatibility-mode type="h2" text-align="left" upperline="no-upperline"
+        title-display="inline-block" title-margin="margin-3" title-weight="w-8">
+        <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+          doloremagna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nullapariatur.Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim  id est laborum.</h2>
+
+      </ptc-title>
+    </section>
+
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Two Column Two Media/preview.stories.js

@@ -0,0 +1,126 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Two Column Two Media'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container">
+        <br>
+        <ptc-title type='h3' upperline="no-upperline"> Two column two media image demo</ptc-title>
+        <hr>
+        <div class="ptc-section fef-two-column-two-media">
+            <div class="is-grid has-col-gap-lg">
+                <div class="is-col-6-md">
+                    <ptc-picture alt="image-test" is-full-width="true"
+                        src="https://www.ptc.com/-/media/Images/new-org/600x280/AR/ar-remote-assistance-600x280.jpg?h=280&w=600&la=en&hash=BDE202D9472D7E16F745DEB7436BD8D9"></ptc-picture>
+                    <ptc-title type='h3' upperline="no-upperline" title-size="large" title-weight="w-8">Bring Your
+                        Employees Together with AR
+                        Solutions</ptc-title>
+                    <ptc-para para-line-h="line-height-p">
+                        As products become more complex and seasoned employees age out of the workforce, providing
+                        frontline
+                        employees access to expertise on the job is critical. Industrial organizations are heeding the
+                        call
+                        and equipping field technicians and factory operators alike with augmented remote assistance,
+                        enabling them to engage with subject matter experts and resolve issues together in real-time.
+                        Get
+                        the eBook to see how.
+                    </ptc-para>
+                    <ptc-spacer size="small"></ptc-spacer>
+                    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Read
+                        the Report
+                    </ptc-button>
+
+                </div>
+                <div class="is-col-6-md">
+                    <ptc-picture alt="image-test" is-full-width="true"
+                        src="https://www.ptc.com/-/media/Images/new-org/600x280/AR/aberdeen-600x280.jpg?h=280&w=600&la=en&hash=8C76B82A24C363CC8F4AE7E01C632F1A"></ptc-picture>
+                    <ptc-title type='h3' upperline="no-upperline" title-size="large" title-weight="w-8">Aberdeen Report:
+                        AR for Service</ptc-title>
+                    <ptc-para para-line-h="line-height-p">
+                        Service companies are facing an expertise shortage, triggered by retiring veterans and
+                        increasingly complex requirements. Traditional tactics for preserving expertise have shown
+                        diminishing returns. Aberdeenhas identified AR as a key area of investment in their annual
+                        survey. Download this white paper to discover how the Best-in-Class are distinguishing
+                        themselves, and the AR solutions that are getting the best results for service.
+                    </ptc-para>
+                    <ptc-spacer size="small"></ptc-spacer>
+                    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Read
+                        the Report
+                    </ptc-button>
+
+                </div>
+            </div>
+        </div>
+        <br>
+        <ptc-title type='h3' upperline="no-upperline"> Two column two media video demo</ptc-title>
+        <hr>
+        <div class="ptc-section fef-two-column-two-media">
+            <div class="is-grid has-col-gap-lg">
+                <div class="is-col-6-md">
+                    <div class="video-module embed-responsive embed-responsive-16by9">
+                        
+                        <iframe class="embed-responsive-item"
+                            src="https://www.youtube.com/embed/iIHItYgrZs8" width="0" height="0"
+                            frameborder="0">
+                        </iframe>
+                    </div>
+
+                    <ptc-title type='h3' upperline="no-upperline" title-size="large" title-weight="w-8">Bring Your
+                        Employees Together with AR
+                        Solutions</ptc-title>
+                    <ptc-para para-line-h="line-height-p">
+                        As products become more complex and seasoned employees age out of the workforce, providing
+                        frontline
+                        employees access to expertise on the job is critical. Industrial organizations are heeding the
+                        call
+                        and equipping field technicians and factory operators alike with augmented remote assistance,
+                        enabling them to engage with subject matter experts and resolve issues together in real-time.
+                        Get
+                        the eBook to see how.
+                    </ptc-para>
+                    <ptc-spacer size="small"></ptc-spacer>
+                    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Read
+                        the Report
+                    </ptc-button>
+
+                </div>
+                <div class="is-col-6-md">
+                    <div class="video-module embed-responsive embed-responsive-16by9">
+                        
+                        <div>
+                            <video-js data-account="1532789042001" data-player="HknUe20R" data-embed="default"
+                                controls="" data-video-id="5822053656001" data-playlist-id="" data-application-id=""
+                                class="vjs-fluid">
+                            </video-js>
+                        </div>
+                        <script 
+                            src="https://players.brightcove.net/1532789042001/HknUe20R_default/index.min.js"></script>
+                    </div>
+                    <ptc-title type='h3' upperline="no-upperline" title-size="large" title-weight="w-8">Aberdeen Report:
+                        AR for Service</ptc-title>
+                    <ptc-para para-line-h="line-height-p">
+                        Service companies are facing an expertise shortage, triggered by retiring veterans and
+                        increasingly complex requirements. Traditional tactics for preserving expertise have shown
+                        diminishing returns. Aberdeenhas identified AR as a key area of investment in their annual
+                        survey. Download this white paper to discover how the Best-in-Class are distinguishing
+                        themselves, and the AR solutions that are getting the best results for service.
+                    </ptc-para>
+                    <ptc-spacer size="small"></ptc-spacer>
+                    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Read
+                        the Report
+                    </ptc-button>
+
+                </div>
+            </div>
+        </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();