@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Ptc Showcase Card/preview.stories.js

@@ -0,0 +1,177 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Showcase Card'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-section">
+      <div class="ptc-container">
+        <div class="is-grid showcase-section-col-gap has-row-gap-md">
+          <div class="is-col is-col-4-md">
+            <ptc-showcase-card 
+              heading-icon-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/ec135adea74e444f8842936d16bb9647?v=aebbe658"
+              heading-icon-alt-text="Awards icon"
+            >
+              <ptc-title slot="heading" seo-compatibility-mode upperline="no-upperline" title-margin="margin-flush">
+                <h3>Awards</h3>
+              </ptc-title>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="Winner of Gainsight Dream Team Award"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">Winner of Gainsight Dream Team Award</a>
+              </ptc-link>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="Ranked a Leader on Forrester Research’s Industrial IoT Software Platforms Report"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">Ranked a Leader on Forrester Research’s Industrial IoT Software Platforms Report</a>
+              </ptc-link>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="Ranked Top 4 on IDC’s MarketScape Report for Industrial IoT Platforms"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">Ranked Top 4 on IDC’s MarketScape Report for Industrial IoT Platforms</a>
+              </ptc-link>
+            </ptc-showcase-card>
+          </div>
+          <div class="is-col is-col-4-md">
+            <ptc-showcase-card 
+              heading-icon-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/598db5670068495fa33975fe808b28f0?v=257efb97"
+              heading-icon-alt-text="Awards icon"
+            >
+              <ptc-title slot="heading" seo-compatibility-mode upperline="no-upperline" title-margin="margin-flush">
+                <h3>Podcasts</h3>
+              </ptc-title>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="Connected Engineer Series"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">Connected Engineer Series</a>
+              </ptc-link>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="Speaking of Service Series"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">Speaking of Service Series</a>
+              </ptc-link>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="Third Angle Podcast"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">Third Angle Podcast</a>
+              </ptc-link>
+            </ptc-showcase-card>
+          </div>
+          <div class="is-col is-col-4-md">
+            <ptc-showcase-card 
+              heading-icon-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/7ccfaa4ff952417b945c1cfe3851479b?v=a5b8757d"
+              heading-icon-alt-text="Awards icon"
+            >
+              <ptc-title slot="heading" seo-compatibility-mode upperline="no-upperline" title-margin="margin-flush">
+                <h3>Events</h3>
+              </ptc-title>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="Webinar: Agile Product Development: How to Develop Hardware Like Software"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">Webinar: Agile Product Development: How to Develop Hardware Like Software</a>
+              </ptc-link>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="CAD on Tap"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">CAD on Tap</a>
+              </ptc-link>
+
+              <ptc-link 
+                disabled="false"
+                external="false"
+                font-size="medium-large"
+                font-weight="w-semibold"
+                href="https://www.ptc.com"
+                link-title="[Virtual Roundtable] Power Your Technical Development with PTCU LEARN Online"
+                target="_blank"
+                theme="global"
+                styles="a{ text-decoration: none !important;   color: #323B42 !important; }"
+                seo-compatibility-mode
+                ><a href="href">[Virtual Roundtable] Power Your Technical Development with PTCU LEARNOnline</a>
+              </ptc-link>
+            </ptc-showcase-card>
+          </div>
+        </div>
+      </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Sticky Share Icons/preview.stories.js

@@ -0,0 +1,184 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Sticky Share Icons'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<section style="min-height: 400px; background-color: rgb(204, 204, 251);">
+    </section>
+    <br><br>
+    <section>
+        <div class="ptc-container">
+            <div class="is-grid has-col-gap-md has-row-gap-md">
+                <div class="is-col-3-md">The standard Lorem Ipsum passage, used since the 1500s
+                    "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 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum."
+
+                    Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
+                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+                    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+                    est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
+                    modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
+                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+                    commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+                    molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"</div>
+                <div class="is-col-9-md">
+                    <ptc-sticky-icons>
+                        <ptc-social-share display="inline-block" share-type="facebook" text="summary" icon-color="primary-gray"
+                            url="https://www.ptc.com" title="title goes here" source="linkedin source"
+                            recipient="yqiantest@ptc.com"></ptc-social-share>
+                        <ptc-social-share display="inline-block" share-type="twitter" text="summary" icon-color="primary-gray"
+                            url="https://www.ptc.com" title="title goes here" source="linkedin source"
+                            recipient="yqiantest@ptc.com"></ptc-social-share>
+                        <ptc-social-share display="inline-block" share-type="linkedin" text="summary" icon-color="primary-gray"
+                            url="https://www.ptc.com" title="title goes here" source="linkedin source"
+                            recipient="yqiantest@ptc.com"></ptc-social-share>
+                        <ptc-social-share display="inline-block" share-type="mail" text="summary" icon-color="primary-gray"
+                            url="https://www.ptc.com" title="title goes here" source="linkedin source"
+                            recipient="yqiantest@ptc.com"></ptc-social-share>
+                        <ptc-social-share display="inline-block" share-type="share-api" text="summary"
+                            icon-color="primary-gray" url="https://www.ptc.com" title="title goes here"
+                            source="linkedin source" recipient="yqiantest@ptc.com"></ptc-social-share>
+                    </ptc-sticky-icons>
+                    The standard Lorem Ipsum passage, used since the 1500s
+                    "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 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum."
+
+                    Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
+                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+                    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+                    est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
+                    modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
+                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+                    commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+                    molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
+
+                    1914 translation by H. Rackham
+                    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
+                    born and I will give you a complete account of the system, and expound the actual teachings of the
+                    great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
+                    avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
+                    pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
+                    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
+                    circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
+                    example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
+                    from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
+                    annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
+
+                    Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
+                    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+                    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+                    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
+                    est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis
+                    voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis
+                    aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+                    maiores alias consequatur aut perferendis doloribus asperiores repellat."
+                    The standard Lorem Ipsum passage, used since the 1500s
+                    "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 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum."
+
+                    Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
+                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+                    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+                    est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
+                    modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
+                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+                    commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+                    molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
+
+                    1914 translation by H. Rackham
+                    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
+                    born and I will give you a complete account of the system, and expound the actual teachings of the
+                    great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
+                    avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
+                    pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
+                    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
+                    circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
+                    example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
+                    from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
+                    annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
+
+                    Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
+                    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+                    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+                    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
+                    est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis
+                    voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis
+                    aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+                    maiores alias consequatur aut perferendis doloribus asperiores repellat."
+                    The standard Lorem Ipsum passage, used since the 1500s
+                    "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 pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+                    culpa qui officia deserunt mollit anim id est laborum."
+
+                    Section 1.10.32 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
+                    "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
+                    totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
+                    dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
+                    sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam
+                    est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius
+                    modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
+                    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea
+                    commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil
+                    molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
+
+                    1914 translation by H. Rackham
+                    "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
+                    born and I will give you a complete account of the system, and expound the actual teachings of the
+                    great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or
+                    avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue
+                    pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who
+                    loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally
+                    circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial
+                    example, which of us ever undertakes laborious physical exercise, except to obtain some advantage
+                    from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no
+                    annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
+
+                    Section 1.10.33 of "de Finibus Bonorum et Malorum", written by Cicero in 45 BC
+                    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
+                    deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
+                    provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
+                    fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis
+                    est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis
+                    voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis
+                    aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
+                    recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
+                    maiores alias consequatur aut perferendis doloribus asperiores repellat."
+
+                </div>
+            </div>
+        </div>
+    </section>
+    <br><br><br>
+    <section style="min-height: 400px; background-color: #323b42;">
+    </section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Subnav V1/preview.stories.js

@@ -0,0 +1,149 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Subnav V1'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-jumbotron jumbotron-type="light" bg-src="/-/media/Images/Redesign/all-products/arena/Arena-Jumbotron-2.ashx" png-src="" gif-src="" bg-video-src="" poster-src="" sub-title="Streamline product development and deliver innovative products fast in the Cloud. Explore the benefits of Arena’s cloud-native product lifecycle management (PLM) and quality management system (QMS) solutions." play-button-title="play" pause-button-title="pause" class="hydrated"><ptc-breadcrumb slot="breadcrumb" class="hydrated"><list-item list-type="breadcrumb" class="breadcrumb primary-gray hydrated">arena</list-item></ptc-breadcrumb><ptc-title slot="main-title" class="jumbotron-title sc-ptc-title-h sc-ptc-title-s hydrated" title-size="xxxx-large" title-height="densest" title-weight="w-8" title-margin="margin-flush"><div class="left no-upperline is-standard margin-flush w-8 xxxx-large densest gray inline-block sc-ptc-title"><h1 class="sc-ptc-title sc-ptc-title-s">Arena PLM and QMS Solutions </h1></div></ptc-title><ptc-button slot="j-cta" link-title="Explore Arena PLM and QMS solutions" link-href="#" class="hydrated">Explore Arena</ptc-button></ptc-jumbotron>
+
+    <ptc-sticky-section>
+        <ptc-subnav>
+            <div slot="subnav-menu-left" class="menu-left" id="slider">
+                <ptc-nav-slider>
+                    <ptc-nav-link title-text="" class="slide subnav-first-item" href="#.">Life at PTC</ptc-nav-link>
+                    <ptc-nav-link title-text="" class="slide" href="#test">Culture </ptc-nav-link>
+                    <ptc-nav-submenu class="slide dropdown-btn" label="Locations">
+                        <div class="dropdown-content">
+                            <ptc-nav-slider>
+                                <ptc-nav-link title-text="" href="" class="subnav-first-item">China</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Germany</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">India</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Romania</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Spain</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">United States</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Other Locations</ptc-nav-link>
+                            </ptc-nav-slider>
+                        </div>
+                    </ptc-nav-submenu>
+                    <ptc-nav-submenu class="slide dropdown-btn" label="Teams">
+                        <div class="dropdown-content">
+                            <ptc-nav-slider>
+                                <ptc-nav-link title-text="" href="" class="subnav-first-item">Customer Success</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Finance</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Marketing</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">People Team</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">R&D and Products</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Sales</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Strategy</ptc-nav-link>
+
+                            </ptc-nav-slider>
+                        </div>
+                    </ptc-nav-submenu>
+                    <ptc-nav-link title-text="" class="slide" href="/en/careers/students">Students</ptc-nav-link>
+                    <ptc-nav-link title-text="" class="slide"
+                        href="/en/careers/diversity-equity-and-inclusion">Diversity, Equity &amp; Inclusion</ptc-nav-link>
+                    <ptc-nav-submenu class="slide dropdown-btn" label="Teams">
+                        <div class="dropdown-content">
+                            <ptc-nav-slider>
+                                <ptc-nav-link title-text="" href="">Customer Success</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Finance</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Marketing</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">People Team</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">R&D and Products</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Sales</ptc-nav-link>
+                                <ptc-nav-link title-text="" href="">Strategy</ptc-nav-link>
+
+                            </ptc-nav-slider>
+                        </div>
+                    </ptc-nav-submenu>
+                    <ptc-nav-link title-text="" class="slide" href="/en/careers/students">Students</ptc-nav-link>
+                    <ptc-nav-link title-text="" class="slide"
+                        href="/en/careers/diversity-equity-and-inclusion">Diversity, Equity &amp; Inclusion</ptc-nav-link>
+                </ptc-nav-slider>
+            </div>
+
+            <div slot="subnav-menu-right" class="menu-right u-flex-lg">
+                
+                
+                <ptc-nav-submenu label="Other links" class="short-dropdown dropdown-btn" icon-asset-name="doc">
+                    <div class="dropdown-content">
+                        <ptc-subnav-card card-title="Read “What is Spatial Computing?”" card-href="https://www.ptc.com"
+                            card-image-src="https://www-dev.ptc.com/-/media/test/asset-doc.svg"
+                            card-image-alt="Doc Image" cta-text="Download Asset"
+                            cta-icon-asset-name="download-arrow"></ptc-subnav-card>
+                    </div>
+                </ptc-nav-submenu>
+            </div>
+        </ptc-subnav>
+    </ptc-sticky-section>
+    <div class="ptc-container">
+    <ptc-title><h2>Default Title</h2></ptc-title></div>
+    <section style="height: 700px;">
+      <div class="ptc-container">
+        <p>this is test para text   </p>
+      </div>
+    </section>
+    <section 
+        style="height: 400px; background-image: url(https://www.ptc.com/-/media/Images/new-org/1240x496/CAD/Design-And-Innovate-With-Creo-1200x496.jpg); background-size: cover;">
+    </section>
+    <section style="height: 700px;"  id="test"></section>
+    <section style="height: 400px; background-color: #323b42"></section>
+    <script>
+        // Get all dropdown buttons and content
+        const dropdownBtns = document.querySelectorAll('.dropdown-btn');
+        const dropdownContents = document.querySelectorAll('.dropdown-content');
+
+        const closeAllDropdowns = () => {
+            for (const element of dropdownContents) {
+                element.classList.remove('open');
+            }
+            for (const ele of dropdownBtns) {
+                ele.classList.remove('active');
+            }
+        };
+
+        // Add click event listener to menu
+        document.querySelector('ptc-subnav').addEventListener('click', (event) => {
+            const target = event.target;
+            // console.log(target.classList);
+            if (target.classList.contains('dropdown-btn')) {
+                const dropdownContent = target.children[0];
+                const isOpen = dropdownContent.classList.contains('open');
+
+                closeAllDropdowns();
+                if (!isOpen) {
+                    dropdownContent.classList.add('open');
+                    target.classList.add('active');
+                }
+            } else if (target.classList.contains('nav-slider')) {
+
+            } else {
+                closeAllDropdowns();
+            }
+
+
+
+            // Create a media condition that targets viewports at least 768px wide
+            const mediaQuery = window.matchMedia('(max-width: 1199px)')
+            // Check if the media query is true
+            if (mediaQuery.matches) {
+                // Then trigger an alert
+                // alert('Media Query Matched!')
+                if (target.classList.contains('short-dropdown') && target.classList.contains('active')) {
+                    // console.log(target);
+                    document.querySelector('.menu-left').style.display = "none";
+                } else {
+                    document.querySelector('.menu-left').style.display = "block";
+                }
+            }
+        });
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Subnav V2/preview.stories.js

@@ -0,0 +1,91 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Subnav V2'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+        html {
+            scroll-behavior: smooth;
+        }
+    </style>
+<ptc-jumbotron jumbotron-type="light" bg-src="/-/media/Images/Redesign/all-products/arena/Arena-Jumbotron-2.ashx" png-src="" gif-src="" bg-video-src="" poster-src="" sub-title="Streamline product development and deliver innovative products fast in the Cloud. Explore the benefits of Arena’s cloud-native product lifecycle management (PLM) and quality management system (QMS) solutions." play-button-title="play" pause-button-title="pause" class="hydrated"><ptc-breadcrumb slot="breadcrumb" class="hydrated"><list-item list-type="breadcrumb" class="breadcrumb primary-gray hydrated">arena</list-item></ptc-breadcrumb><ptc-title slot="main-title" class="jumbotron-title sc-ptc-title-h sc-ptc-title-s hydrated" title-size="xxxx-large" title-height="densest" title-weight="w-8" title-margin="margin-flush"><div class="left no-upperline is-standard margin-flush w-8 xxxx-large densest gray inline-block sc-ptc-title"><h1 class="sc-ptc-title sc-ptc-title-s">Arena PLM and QMS Solutions </h1></div></ptc-title><ptc-button slot="j-cta" link-title="Explore Arena PLM and QMS solutions" link-href="#" class="hydrated">Explore Arena</ptc-button></ptc-jumbotron>
+
+    <ptc-sticky-section>
+        <ptc-subnav>
+            <div slot="subnav-menu-left" class="menu-left" id="slider">
+                <ptc-nav-slider>
+                    <ptc-nav-link class="slide" href="#overview">Overview</ptc-nav-link>
+                    <ptc-nav-link class="slide" href="#features-and-benefits">Features & Benefits </ptc-nav-link>
+                    <ptc-nav-link class="slide" href="#portfolio">Portfolio</ptc-nav-link>
+                    <ptc-nav-link class="slide" href="#extensions">Extensions</ptc-nav-link>
+                    <ptc-nav-link class="slide" href="#contact-us">Contact Us</ptc-nav-link>
+                </ptc-nav-slider>
+            </div>
+        </ptc-subnav>
+    </ptc-sticky-section>
+
+    <section id="overview" style="height: 700px;"></section>
+    <section id="features-and-benefits"
+        style="height: 400px; background-image: url(https://www.ptc.com/-/media/Images/new-org/1240x496/CAD/Design-And-Innovate-With-Creo-1200x496.jpg); background-size: cover;">
+    </section>
+    <section id="portfolio" style="height: 700px;"></section>
+    <section id="extensions" style="height: 400px; background-color: #323b42"></section>
+    <script>
+        // Get all dropdown buttons and content
+        const dropdownBtns = document.querySelectorAll('.dropdown-btn');
+        const dropdownContents = document.querySelectorAll('.dropdown-content');
+
+        const closeAllDropdowns = () => {
+            for (const element of dropdownContents) {
+                element.classList.remove('open');
+            }
+            for (const ele of dropdownBtns) {
+                ele.classList.remove('active');
+            }
+        };
+
+        // Add click event listener to menu
+        document.querySelector('ptc-subnav').addEventListener('click', (event) => {
+            const target = event.target;
+            console.log(target.classList);
+            if (target.classList.contains('dropdown-btn')) {
+                const dropdownContent = target.children[0];
+                const isOpen = dropdownContent.classList.contains('open');
+
+                closeAllDropdowns();
+                if (!isOpen) {
+                    dropdownContent.classList.add('open');
+                    target.classList.add('active');
+                }
+            } else if (target.classList.contains('nav-slider')) {
+
+            } else {
+                closeAllDropdowns();
+            }
+
+
+
+            // Create a media condition that targets viewports at least 768px wide
+            const mediaQuery = window.matchMedia('(max-width: 1199px)')
+            // Check if the media query is true
+            if (mediaQuery.matches) {
+                // Then trigger an alert
+                // alert('Media Query Matched!')
+                if (target.classList.contains('short-dropdown') && target.classList.contains('active')) {
+                    console.log(target);
+                    document.querySelector('.menu-left').style.display = "none";
+                } else {
+                    document.querySelector('.menu-left').style.display = "block";
+                }
+            }
+        });
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();