@ptcwebops/ptcw-design 6.3.35-beta → 6.3.35

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

@@ -0,0 +1,58 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Announcement'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-title type='h1' text-align='center'><h1>Max Length</h1></ptc-title>
+  <ptc-announcement link-text="Title 60 characters Lorem Ipsum dolor sit amet consecutor sit am"
+        link-url="http://www.ptc.com" bar-title="Title 60 characters Lorem Ipsum dolor sit Ipsum dolor sit Ipsm"
+        description="Description 165 characters lorem ipsum dolor sit amet consecutor lorem ipsum dolor sit amet consecutor lorem ipsum dolor sit amet consecutor lorem ipsum dolor sit a ipsum dolor sit amet consecutor"
+        visible>
+  </ptc-announcement>
+  <hr>
+  <ptc-title type='h1' text-align='center'><h1>Recommended Length</h1></ptc-title>
+  <ptc-announcement link-text=" CTA Action 25 characters"
+        link-url="http://www.ptc.com" bar-title="Title 50 characters Lorem Ipsum"
+        description="Description 80 characters lorem ipsum dolor sit amet consecutor"
+        visible>
+  </ptc-announcement>
+  <ptc-title type='h1' text-align='center'><h1>Edge Case 1</h1></ptc-title>
+  <ptc-announcement link-text=" CTA Action 25 characters"
+        link-url="http://www.ptc.com" bar-title="65 Test Drive AR For Remote Assistance to Solve Problems On Site lorem ipsum dolor sit"
+        visible>
+  </ptc-announcement>
+  <ptc-title type='h1' text-align='center'><h1>Edge Case 2</h1></ptc-title>
+  <ptc-announcement link-text="Learn More"
+        link-url="http://www.ptc.com" bar-title="Call For Papers"
+        description="The PTC LiveWorx Call for Papers is now open. Submit your presentation proposal for your chance to speak at the 2023 event. PTC LiveWorx is a technology event that explores Augmented Reality Register Now showcasing"
+        visible>
+  </ptc-announcement>
+  <ptc-title type='h1' text-align='center'><h1>Edge Case 3</h1></ptc-title>
+  <ptc-announcement link-text="CTA Lorem ipsum characters lorem ipsum dolor sit amet consecutor"
+        link-url="http://www.ptc.com" bar-title="Title Ipsum"
+        description="Description lorem ipsum"
+        visible>
+  </ptc-announcement>
+  <ptc-title type='h1' text-align='center'><h1>Edge Case 4</h1></ptc-title>
+  <ptc-announcement link-text="Jetzt anmelden"
+        link-url="http://www.ptc.com" bar-title="PTC DACH Talks"
+        description="Die zweiwöchentliche Diskussionsrunde mit Anwendungsbeispielen der digitalen Transformation "
+        visible>
+  </ptc-announcement>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+  <br>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Background Video/preview.stories.js

@@ -0,0 +1,58 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Background Video'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .demo-height {
+            min-height: 330px;
+        }
+
+        @media (min-width: 767px) {
+            .demo-height {
+                min-height: 430px;
+            }
+        }
+    </style>
+<div class="ptc-container">
+        <ptc-title type='h3' upperline="no-upperline"><h3>Default background video Demo</h3> </ptc-title>
+        <hr>
+        <p> Content need to add inside the tag. For Example: </p><div> <ptc-background-video> Content  </ptc-background-video> </div>
+        
+    </div>
+    <ptc-background-video 
+        video-src="https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4"
+        poster-src="https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg">
+        <div class="demo-height"></div>
+    </ptc-background-video>
+
+    <ptc-spacer size="xxxx-large"></ptc-spacer>
+    <ptc-spacer size="xxxx-large"></ptc-spacer>
+
+    
+    <div class="ptc-container">
+        <ptc-title type='h3' upperline="no-upperline"><h3>Default background video Demo</h3> </ptc-title>
+        <hr>
+        <p>The blank tag need to add in any other setcon having relative parent.
+</p><div style="position: relative;">
+   <ptc-background-video type="legacy"></ptc-background-video>
+    Content
+</div>
+
+        
+    </div>
+    <div class="demo-height" style="position: relative;">
+        <ptc-background-video 
+            video-src="https://www.ptc.com/en/www.ptc.com//-/media/Videos/BRAND-FILM-CAR-SECTION-short-1mb.mp4"
+            poster-src="https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg"
+            type="legacy"></ptc-background-video>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Blog Author Listing/preview.stories.js

@@ -0,0 +1,32 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Blog Author Listing'
+};
+
+const AlertsPage = args => {
+  return html`
+<ptc-jumbotron jumbotron-type="text"    sub-title="">
+    <!-- Please make sure to define the slot name, it will inject html and content into the designed position -->
+    <!-- set breadcrumb color and list item to be primary gray, position: center-->
+    <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" color="primary-gray"
+        styles=":host(.breadcrumb) li{line-height:var(--ptc-line-height-looser) !important; text-transform: uppercase;}">
+        BLOG AUTHORS
+      </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 -->
+      <h1>Blog Authors</h1>
+    </ptc-title>
+  </ptc-jumbotron>
+  <div class="ptc-container ptc-section-standard">
+    <author-listing-example default-author-image="https://www.ptc.com/-/media/Images/blog/Authors/MaleDefaultImage.jpg" >
+    </author-listing-example>
+  </section>
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Blog Content/preview.stories.js

@@ -0,0 +1,317 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Blog Content'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        .tag-wrapper {
+            display: block;
+            margin-top: var(--ptc-element-spacing-08);
+            margin-bottom: var(--ptc-layout-spacing-05);
+            /* 64 */
+        }
+
+        .related-card-wrapper {
+            margin-top: var(--ptc-layout-spacing-07);
+        }
+    </style>
+<ptc-preloader-section class="min-height" section-type="case-content">
+        <ptc-sticky-title bar-title="Three AR Applications That Boost Frontline Worker Productivity">
+            <div slot="social-share-slot" class="social-share-slot">
+                <ptc-social-share class="icon" display="inline-block" share-type="blog-facebook" text="summary"
+                    url="https://www.ptc.com" share-title="title goes here" source="linkedin source"
+                    recipient="yqiantest@ptc.com"></ptc-social-share>
+
+                <ptc-social-share class="icon" display="inline-block" share-type="blog-twitter" text="summary"
+                    url="https://www.ptc.com" share-title="title goes here" source="linkedin source" icon-color="black"
+                    recipient="yqiantest@ptc.com"></ptc-social-share>
+
+                <ptc-social-share class="icon" display="inline-block" share-type="blog-linkedin" text="summary"
+                    url="https://www.ptc.com" share-title="title goes here" source="linkedin source"
+                    recipient="yqiantest@ptc.com"></ptc-social-share>
+
+                <ptc-social-share class="icon" display="inline-block" share-type="blog-mail" text="summary"
+                    url="https://www.ptc.com" share-title="title goes here" source="linkedin source"
+                    recipient="yqiantest@ptc.com"></ptc-social-share>
+            </div>
+        </ptc-sticky-title>
+        <div class="ptc-container ptc-section-standard">
+            
+            <max-width-container max-width="960" breakpoint="1200">
+                <section class="top-section">
+                    <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+                    <ptc-title type='h1' text-align='left' title-color="gray" title-size="xxxx-large-allbp"
+                        upperline="no-upperline" title-weight="w-8" title-height="densest" title-margin="margin-flush">
+                        <h1>Three AR Applications That Boost Frontline Worker Productivity</h1>
+                    </ptc-title>
+                    <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                    
+                    <div class="u-flex flex-align-items-center">
+                        <ptc-span class="u-marginRight-xs" font-weight="w-6">
+                            Written By:
+                        </ptc-span>
+                        
+                        
+                        <a href="https://www.ptc.com"> Tiffany Bailey </a>
+                    </div>
+                    <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="small"></ptc-spacer>
+
+                    
+                    <ptc-tag>4/9/2019 Read Time : 2 min</ptc-tag>
+                    <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="small"></ptc-spacer>
+
+                    
+                    <ptc-picture 
+                        src="https://www.ptc.com/-/media/Images/Redesign/Blogs/ThingWorx/expert-capture-blog-900x420.png?h=420&iar=0&w=900"
+                        alt="replace it with real alt">
+                    </ptc-picture>
+                </section>
+
+                <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+
+                <section class="content-section">
+                    
+                    <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-p"
+                        para-margin="margin-flush">
+                        <p>The manufacturing industry is experiencing a well-documented skills shortage, as the number
+                            of
+                            retiring workers shows no sign of slowing down. With product complexity and customer demand
+                            on the
+                            rise, organizations around the world are facing intense pressure to stay competitive by
+                            getting more
+                            productivity out of their frontline workers. Heavier workloads are not a viable option;
+                            product
+                            quality and worker safety would be compromised while the burden on senior experts could
+                            drive even
+                            more into retirement.
+
+                            As a result, many organizations are turning to emerging technologies such as augmented
+                            reality (AR)
+                            to increase the effectiveness of their current workers. There are three applications of AR
+                            that can
+                            help companies find meaningful gains in frontline worker productivity.
+                        </p>
+                    </ptc-para>
+                    <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                    
+                    <ptc-title type="h2" upperline="no-upperline" title-margin="margin-flush" title-size="x-large"
+                        title-weight="w-6">
+                        <h2>Augmented work instructions</h2>
+                    </ptc-title>
+                    <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                    <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-p"
+                        para-margin="margin-flush">
+                        <p>
+                            High workforce turnover means a larger number of inexperienced or seasonal workers. New
+                            employees
+                            often require more training and guidance, especially those performing more complicated tasks
+                            and
+                            procedures. With the ability to overlay pre-authored step-by-step work instructions onto a
+                            real-world work environment, AR can help new hires become effective on the job almost
+                            immediately.
+
+                            Using AR authoring solutions, subject matter experts with backgrounds in process
+                            engineering,
+                            documentation, training, product development, or IT can use their deep institutional
+                            knowledge along
+                            with existing CAD and IoT data to create and refine detailed, product-specific content.
+                        </p>
+                    </ptc-para>
+                    <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                    
+                    <ptc-title type="h2" upperline="no-upperline" title-margin="margin-flush" title-size="x-large"
+                        title-weight="w-6">
+                        <h2>Real-time remote assistance</h2>
+                    </ptc-title>
+                    <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                    <ptc-para font-size="small" font-weight="w-4" para-line-h="line-height-p"
+                        para-margin="margin-flush">
+                        <p>
+                            High workforce turnover means a larger number of inexperienced or seasonal workers. New
+                            employees
+                            often require more training and guidance, especially those performing more complicated tasks
+                            and
+                            procedures. With the ability to overlay pre-authored step-by-step work instructions onto a
+                            real-world work environment, AR can help new hires become effective on the job almost
+                            immediately.
+
+                            Using AR authoring solutions, subject matter experts with backgrounds in process
+                            engineering,
+                            documentation, training, product development, or IT can use their deep institutional
+                            knowledge along
+                            with existing CAD and IoT data to create and refine detailed, product-specific content.
+                        </p>
+                    </ptc-para>
+                    <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                    
+                    <div class="is-flex u-flex-justify-center">
+                        <ptc-picture 
+                            src="https://www.ptc.com/-/media/Images/new-org/600x280/AR/Closing-the-Industrial-Skills-Gap-with-Augmented-Reality.jpg?h=278&w=598"
+                            alt="replace it with real alt"></ptc-picture>
+                    </div>
+
+
+                    
+                    <div class="tag-wrapper">
+                        <ptc-span span-style="blog-tag" font-weight="w-6">Tags:</ptc-span>
+                        <ptc-span span-style="blog-tag">Augmented Reality, </ptc-span>
+                        <ptc-span span-style="blog-tag">Life Sciences, </ptc-span>
+                        <ptc-span span-style="blog-tag">Digital Transformation, </ptc-span>
+                        <ptc-span span-style="blog-tag">Industry 4.0</ptc-span>
+                    </div>
+
+                    
+                    <ptc-title type="h2" title-margin="margin-flush">
+                        <h2>About the Author</h2>
+                    </ptc-title>
+                    <ptc-spacer breakpoint="x-small" size="x-large"></ptc-spacer>
+                    <ptc-spacer breakpoint="small" size="large"></ptc-spacer>
+                    
+                    <ptc-link theme="standard-link" font-size="medium" href="https://www.ptc.com" dark-focus-state> Tiffany Bailey
+                    </ptc-link>
+
+                    
+                    <ptc-para para-line-h="line-height-p" font-size="small" para-margin="margin-top-5">
+                        <p>
+                            Tiffany Bailey is a content writer and editor for PTC. She has more than a decade of
+                            experience as a
+                            technical
+                            writer/editor. And over 5 years of experience writing about mechanical engineering, 3D CAD,
+                            and PDM.
+                            Her
+                            work
+                            spans
+                            topics like data migration and management, IoT and big data, IT security, additive
+                            manufacturing,
+                            simulation,
+                            and SaaS.
+                            She especially enjoys interviewing customers, product managers, and thought leaders to
+                            uncover new
+                            ideas
+                            and
+                            innovations.
+                        </p>
+                    </ptc-para>
+
+                </section>
+            </max-width-container>
+            <div class="related-card-wrapper">
+                
+                <ptc-title type="h2" text-align='center' title-margin="margin-flush">
+                    <h2>You Might Also Be Interested In:</h2>
+                </ptc-title>
+                <hr>
+                <div class="is-grid has-col-gap-lg has-row-gap-lg u-marginTop-4xl">
+                    <div class="is-col-12 is-col-4-md is-placed-center">
+                        
+                        <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com"
+                            ribbon-text="eBook">
+                            <ptc-img slot="slot-image"
+                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                            <div slot="slot-description">
+                                <ptc-para font-size="medium" font-weight="w-6" para-line-h="line-height-densest"
+                                    para-margin="margin-bottom-3">
+                                    <p>
+                                        <ptc-tooltip-v2 width="full-width" max-lines="3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptate, natus consectetur. Excepturi?
+                                        </ptc-tooltip-v2>
+                                    </p>
+                                </ptc-para>
+                                <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest"
+                                    para-margin="margin-flush" para-z-index="z-auto">
+                                    <p>
+                                        <ptc-tooltip 
+                                            description="Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter. Preliga posaling dektigt. Adepiv nehet sperar inte eur, ad.Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter."
+                                            text-lines="4" z-index="z-auto">
+                                        </ptc-tooltip>
+                                    </p>
+                                </ptc-para>
+                            </div>
+                        </ptc-card>
+                    </div>
+                    <div class="is-col-12 is-col-4-md is-placed-center">
+                        <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com"
+                            ribbon-text="eBook">
+                            <ptc-img slot="slot-image"
+                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                            <div slot="slot-description">
+                                <ptc-para font-size="medium" font-weight="w-6" para-line-h="line-height-densest"
+                                    para-margin="margin-bottom-3">
+                                    <p>
+                                        <ptc-tooltip 
+                                            description="Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality."
+                                            text-lines="3" z-index="z-3">
+                                        </ptc-tooltip>
+                                    </p>
+
+                                </ptc-para>
+                                <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest"
+                                    para-margin="margin-flush" para-z-index="z-auto">
+                                    <p>
+                                        <ptc-tooltip 
+                                            description="Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter. Preliga posaling dektigt. Adepiv nehet sperar inte eur, ad.Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter."
+                                            text-lines="4" z-index="z-auto">
+                                        </ptc-tooltip>
+                                    </p>
+                                </ptc-para>
+                            </div>
+                        </ptc-card>
+                    </div>
+                    <div class="is-col-12 is-col-4-md is-placed-center">
+                        <ptc-card has-image="true" card-type="related-card" card-href="http://www.google.com"
+                            ribbon-text="eBook">
+                            <ptc-img slot="slot-image"
+                                img-url="http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway"
+                                image-type="smart-img" load-mode="lazy-bg"></ptc-img>
+                            <div slot="slot-description">
+                                <ptc-para font-size="medium" font-weight="w-6" para-line-h="line-height-densest"
+                                    para-margin="margin-bottom-3">
+                                    <p>
+                                        <ptc-tooltip 
+                                            description="Join us for live presentations and hear about the latest updates for Creo, Windchill PLM, and Thingworx IOT and Augmented Reality."
+                                            text-lines="3" z-index="z-3">
+                                        </ptc-tooltip>
+                                    </p>
+                                </ptc-para>
+                                <ptc-para font-size="x-small" font-weight="w-4" para-line-h="line-height-densest"
+                                    para-margin="margin-flush" para-z-index="z-auto">
+                                    <p>
+                                        <ptc-tooltip 
+                                            description="Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter. Preliga posaling dektigt. Adepiv nehet sperar inte eur, ad.Lörem ipsum deling äsåv astrodoponade. Nevis. Asade gibinas, och ter."
+                                            text-lines="4" z-index="z-auto">
+                                        </ptc-tooltip>
+                                    </p>
+                                </ptc-para>
+                            </div>
+                        </ptc-card>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </ptc-preloader-section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();