@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Ptc Icon Sprites/preview.stories.js

@@ -0,0 +1,150 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Icon Sprites'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+    html {
+      box-sizing: border-box
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+        "Droid Sans", "Helvetical Neue", sans-serif;
+      font-size: 1.125rem;
+      text-align: center;
+      background-color: var(--color-white-grey);
+    }
+
+    h1 {
+      font-weight: 100;
+      margin-bottom: 1em
+    }
+
+    small {
+      font-size: .34em
+    }
+
+    .icon {
+      width: 50px;
+      height: 50px;
+      margin: .5em;
+    }
+
+    .svg-container {
+      max-width: 1200px;
+      margin: auto;
+      padding: 0 1rem;
+    }
+
+    .icon-item {
+      margin: 1rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: start;
+    }
+
+    .icon-item span {
+      display: inline-block;
+      font-size: var(--ptc-font-size-small);
+      font-weight: var(--ptc-font-weight-bold);
+      line-height: var(--ptc-line-height-densest);
+      text-align: center;
+      margin: var(--ptc-element-spacing-03) var(--ptc-element-spacing-01) 0;
+      word-break: break-word;
+    }
+
+    icon-asset {
+      position: relative;
+      display: inline-flex;
+      border-radius: 50%;
+      background: var(--color-gray-12);
+      height: 72px;
+      width: 72px;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--ptc-shadow-small);
+      transition: box-shadow 250ms ease;
+    }
+
+    icon-asset.black {
+      background: var(--color-gray-01);
+    }
+
+    icon-asset:hover {
+      box-shadow: var(--ptc-shadow-large);
+    }
+  </style>
+<h1>
+    SVG Sprite Demo
+  </h1>
+  <icon-asset id="control" style="display: none;"></icon-asset>
+  <div class="svg-container is-grid"></div>
+  <script>
+    const iconControl = document.querySelector('#control');
+    async function loadSVGsFromFile(filePath) {
+      try {
+        const response = await fetch(filePath);
+        const svgContent = await response.text();
+
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svgContent, "image/svg+xml");
+
+        const svgs = doc.querySelectorAll("symbol");
+        return Array.from(svgs);
+
+      } catch (error) {
+        console.error("Error loading SVGs:", error);
+        return [];
+      }
+    }
+
+    if (iconControl) {
+      iconControl.addEventListener('ready', (e) => {
+        loadSVGsFromFile(e.detail['ptc-icons']).then(svgs => {
+          const container = document.querySelector(".svg-container");
+          const useWhiteBG = ['download-arrow-news', 'twitter-x-dark-circle', 'close-button-flat',
+          'twitter-blogs-icon','linkedin-blogs-icon','mail-blogs-icon','facebook-blogs-icon',
+          'footer-youtube-icon','footer-linkedin-icon','footer-twitter-icon','footer-wechat-icon',
+          'footer-instagram-icon','footer-facebook-icon'];
+
+          svgs.forEach(svg => {
+            let iconContainer = document.createElement('div');
+            let title = document.createElement('span');
+            let ia = document.createElement('icon-asset');
+
+            iconContainer.className = "icon-item is-col-2-lg is-col-3-md is-col-4-sm is-col-6";
+            title.textContent = '#'+svg.id;
+            ia.setAttribute('size', 'xxx-large');
+            ia.setAttribute('type', 'ptc');
+            ia.setAttribute('name', svg.id);
+
+            if (useWhiteBG.indexOf(svg.id) > -1) {
+              ia.setAttribute('color', 'black');
+              ia.className = "black";
+            } else {
+              ia.setAttribute('color', 'white');
+            }
+
+            iconContainer.appendChild(ia);
+            iconContainer.appendChild(title);
+            container.appendChild(iconContainer);
+          });
+        });
+      });
+    }
+
+  </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Ptc Innovator Toggle/preview.stories.js

@@ -0,0 +1,421 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Ptc Innovator Toggle'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+      .swiper-button-next-thumb,
+      .swiper-button-prev-thumb {
+        width: 100%;
+        height: 30px;
+        position: absolute;
+        text-align: center;
+        padding: 5px 0;
+        cursor: pointer;
+        background-color: #4a4a4a;
+      }
+      .swiper-button-next-thumb:focus-visible,
+      .swiper-button-prev-thumb:focus-visible,
+      .swiper-slide:focus-visible {
+        border-radius: var(--ptc-border-radius-standard); 
+        border: 2px solid rgb(255, 255, 255);
+        outline: 5px solid var(--keyboard-nav-outline);
+      }
+      .swiper-button-prev-thumb {
+        top: 0;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+
+      .swiper-button-next-thumb {
+        bottom: 0;
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+
+      .swiper.thumbSwiper {
+        width: 100%;
+        height: 100%;
+        background-color: #4a4a4a;
+        border-radius: 4px;
+        color: #fff;
+      }
+
+      .swiper.thumbSwiper .swiper-wrapper {
+        max-height: 340px;
+      }
+      .thumbSwiper .swiper-slide {
+        text-align: center;
+        font-size: 18px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        cursor: pointer;
+        padding: 10px 15px;
+        text-align: left;
+      }
+
+      .thumbSwiper .swiper-slide:hover {
+        background-color: #000000;
+      }
+      .thumbSwiper .swiper-slide h3 {
+        font-size: 18px;
+        margin: 0;
+        line-height: 1.25;
+      }
+      .thumbSwiper .swiper-slide.swiper-slide-thumb-active {
+        background-color: #fff;
+      }
+      .thumbSwiper .swiper-slide.swiper-slide-thumb-active h3 {
+        color: #323b42;
+      }
+      .thumbSwiper .swiper-slide.swiper-slide-thumb-active:hover {
+        background-color: #000000;
+      }
+      .thumbSwiper .swiper-slide.swiper-slide-thumb-active:hover h3 {
+        color: #e4e7e9;
+      }
+      .thumb-swiper-section {
+        position: relative;
+        padding: 30px 0;
+        margin-top: 30px;
+      }
+      @media (min-width: 991px) {
+        .thumb-swiper-section {
+          margin-top: 0px;
+        }
+      }
+      .cardSwiper .swiper-button-next,
+      .cardSwiper .swiper-button-prev {
+        display: none;
+      }
+    </style>
+<br><br><br><br>
+    <innovator-toggle-container 
+      background-image="https://www.ptc.com/-/media/Images/new-org/1920x1080/ptc-brand-digital-medical-device-maximize-revenue-growthV2.jpg?h=1080&w=1920&la=en&hash=B53047C5E584BA213F565583C167C0A7"
+      section-title="What Our Executives Are Saying"
+      description="Read insights from our executive team to learn how PTC is working to improve the world around us and build a better tomorrow. "
+    >
+      <div class="is-grid has-col-gap-lg column-gap-mobile" style="align-items: center">
+        <div class="is-col-12 is-col-8-lg grid-order-2-lg">
+          <div class="swiper cardSwiper">
+            <div class="swiper-wrapper">
+              <div class="swiper-slide">
+                <div class="is-grid" style="align-items: center">
+                  <div class="is-col is-col-6-lg grid-order-2-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      is-full-width="true"
+                      src="https://www.ptc.com/-/media/Images/new-org/600x280/Manufacturing/3-pillars-600x280.jpg?h=280&w=600&la=en&hash=1B8F91FC1A7AB65F11246BA9EF965385"
+                    ></ptc-picture>
+                  </div>
+                  <div class="is-col is-col-6-lg grid-order-1-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      src="https://www.ptc.com/dist/ptc/images/squares.svg"
+                      size-xs=""
+                      size-sm=""
+                      size-md=""
+                      size-lg=""
+                      width="44"
+                      height="44"
+                      object-fit="contain"
+                    ></ptc-picture>
+
+                    <ptc-para font-size="small" font-weight="w-5" para-color="white" para-line-h="line-height-densest">
+                      1 In this data-driven digital transformation framework, PTC's EVP and Chief Strategy and Marketing Officer Catherine Kniker presents three ways to significantly
+                      improve success and drive better value and outcomes.
+                    </ptc-para>
+                    <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Read More </ptc-button>
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="is-grid" style="align-items: center">
+                  <div class="is-col is-col-6-lg grid-order-2-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      is-full-width="true"
+                      src="https://www.ptc.com/-/media/Images/new-org/600x280/ptc-dei-journey-600x280.jpg?h=280&w=600&la=en&hash=032284B8F95ACEABA0AFB72644BC3703"
+                    ></ptc-picture>
+                  </div>
+                  <div class="is-col is-col-6-lg grid-order-1-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      src="https://www.ptc.com/dist/ptc/images/squares.svg"
+                      size-xs=""
+                      size-sm=""
+                      size-md=""
+                      size-lg=""
+                      width="44"
+                      height="44"
+                      object-fit="contain"
+                    ></ptc-picture>
+
+                    <ptc-para font-size="small" font-weight="w-5" para-color="white" para-line-h="line-height-densest">
+                     2 Kameelah Benjamin-Fuller, Chief Diversity Officer & Corporate Social Responsibility Leader, breaks down the tangible ways that PTC is fostering DEI today and
+                      into the future.
+                    </ptc-para>
+                    <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Read More </ptc-button>
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="is-grid" style="align-items: center">
+                  <div class="is-col is-col-6-lg grid-order-2-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      is-full-width="true"
+                      src="https://www.ptc.com/-/media/Images/blog/post/corporate/saas-tipping-point-tile.png?h=280&w=600&la=en&hash=677FD4F5DB276361396375395DD9E64E"
+                    ></ptc-picture>
+                  </div>
+                  <div class="is-col is-col-6-lg grid-order-1-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      src="https://www.ptc.com/dist/ptc/images/squares.svg"
+                      size-xs=""
+                      size-sm=""
+                      size-md=""
+                      size-lg=""
+                      width="44"
+                      height="44"
+                      object-fit="contain"
+                    ></ptc-picture>
+
+                    <ptc-para font-size="small" font-weight="w-5" para-color="white" para-line-h="line-height-densest">
+                     3 PTC's CEO Jim Heppelmann talks through the SaaS tipping point in product development, as well as the company’s SaaS strategy during and post COVID-19. Read
+                      more.
+                    </ptc-para>
+                    <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Read More </ptc-button>
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="is-grid" style="align-items: center">
+                  <div class="is-col is-col-6-lg grid-order-2-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      is-full-width="true"
+                      src="https://www.ptc.com/-/media/Images/new-org/600x280/IIoT/state-of-digital-transformation-600x280.jpg?h=280&w=600&la=en&hash=1F1538249F8A4731E5893EF3873CD0A3"
+                    ></ptc-picture>
+                  </div>
+                  <div class="is-col is-col-6-lg grid-order-1-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      src="https://www.ptc.com/dist/ptc/images/squares.svg"
+                      size-xs=""
+                      size-sm=""
+                      size-md=""
+                      size-lg=""
+                      width="44"
+                      height="44"
+                      object-fit="contain"
+                    ></ptc-picture>
+
+                    <ptc-para font-size="small" font-weight="w-5" para-color="white" para-line-h="line-height-densest">
+                     4 Read PTC’s research report for the latest trends and insights on DX. Benchmark your company’s journey and leverage our strategic guidance from Craig Melrose,
+                      EVP, Digital Transformation Solutions.
+                    </ptc-para>
+                    <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Read More </ptc-button>
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="is-grid" style="align-items: center">
+                  <div class="is-col is-col-6-lg grid-order-2-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      is-full-width="true"
+                      src="https://www.ptc.com/-/media/Images/blog/post/corporate/executive-leadership-600x280.jpg?h=280&w=600&la=en&hash=114A00B3CE70E4D50DEF41C5FD2C6091"
+                    ></ptc-picture>
+                  </div>
+                  <div class="is-col is-col-6-lg grid-order-1-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      src="https://www.ptc.com/dist/ptc/images/squares.svg"
+                      size-xs=""
+                      size-sm=""
+                      size-md=""
+                      size-lg=""
+                      width="44"
+                      height="44"
+                      object-fit="contain"
+                    ></ptc-picture>
+
+                    <ptc-para font-size="small" font-weight="w-5" para-color="white" para-line-h="line-height-densest">
+                    5  PTC's EVP and Chief Strategy and Marketing Officer Catherine Kniker explains how leadership that has bold vision, enables cross-functional collaboration, and
+                      nurtures a culture focused on change is nine times more likely to achieve succeed in digital transformation.
+                    </ptc-para>
+                    <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Read More </ptc-button>
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="is-grid" style="align-items: center">
+                  <div class="is-col is-col-6-lg grid-order-2-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      is-full-width="true"
+                      src="https://www.ptc.com/-/media/Images/blog/post/plr-blog/onshape-team-stem-600.jpg?h=280&w=600&la=en&hash=6487DACD6F83BA3B3C3C9B1180C2C284"
+                    ></ptc-picture>
+                  </div>
+                  <div class="is-col is-col-6-lg grid-order-1-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      src="https://www.ptc.com/dist/ptc/images/squares.svg"
+                      size-xs=""
+                      size-sm=""
+                      size-md=""
+                      size-lg=""
+                      width="44"
+                      height="44"
+                      object-fit="contain"
+                    ></ptc-picture>
+
+                    <ptc-para font-size="small" font-weight="w-5" para-color="white" para-line-h="line-height-densest">
+                     6 Jon Hirschtick, EVP & General Manager, Onshape & Atlas, explains the ways Onshape makes STEM accessible and fun, turning today’s students into the engineers
+                      of tomorrow.
+                    </ptc-para>
+                    <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Read More </ptc-button>
+                  </div>
+                </div>
+              </div>
+              <div class="swiper-slide">
+                <div class="is-grid" style="align-items: center">
+                  <div class="is-col is-col-6-lg grid-order-2-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      is-full-width="true"
+                      src="https://www.ptc.com/-/media/Images/blog/post/corporate/industrial-metaverse-600.jpg?h=280&w=600&la=en&hash=C0485B6413F1FE4F5F338F8B1CDF4F71"
+                    ></ptc-picture>
+                  </div>
+                  <div class="is-col is-col-6-lg grid-order-1-lg">
+                    <ptc-picture 
+                      alt="image-test"
+                      src="https://www.ptc.com/dist/ptc/images/squares.svg"
+                      size-xs=""
+                      size-sm=""
+                      size-md=""
+                      size-lg=""
+                      width="44"
+                      height="44"
+                      object-fit="contain"
+                    ></ptc-picture>
+
+                    <ptc-para font-size="small" font-weight="w-5" para-color="white" para-line-h="line-height-densest">
+                     7 For industrial companies, there are both simple and complex ways to leverage the metaverse that may, in time, offer tremendous opportunities. Discover how PTC
+                      envisions these possibilities.
+                    </ptc-para>
+                    <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Read More </ptc-button>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="swiper-button-next" id="nextBtn"></div>
+            <div class="swiper-button-prev" id="prevBtn"></div>
+          </div>
+        </div>
+        <div class="is-col-12 is-col-4-lg grid-order-1-lg">
+          <div class="thumb-swiper-section">
+            <div class="swiper-button-prev-thumb" onclick="document.getElementById('prevBtn').click()">
+              <svg style="transform: rotate(180deg); max-width: 20px" viewBox="0 0 16.55 10.68">
+                <defs>
+                  <style>
+                    .cls-1 {
+                      fill: #fff;
+                    }
+                  </style>
+                </defs>
+                <g id="Layer_2" data-name="Layer 2">
+                  <g data-name="Layer 1"><path id="Path_8825" data-name="Path 8825" class="cls-1" d="M0,0V5.2l8.23,5.48,8.32-6.09V0L8.23,6.25Z"></path></g>
+                </g>
+              </svg>
+            </div>
+            <div class="swiper-button-next-thumb" onclick="document.getElementById('nextBtn').click()">
+              <svg viewBox="0 0 16.55 10.68" style="max-width: 20px">
+                <defs>
+                  <style>
+                    .cls-1 {
+                      fill: #fff;
+                    }
+                  </style>
+                </defs>
+                <g id="Layer_2" data-name="Layer 2">
+                  <g data-name="Layer 1"><path id="Path_8825" data-name="Path 8825" class="cls-1" d="M0,0V5.2l8.23,5.48,8.32-6.09V0L8.23,6.25Z"></path></g>
+                </g>
+              </svg>
+            </div>
+            <div thumbsSlider="" class="swiper thumbSwiper">
+              <div class="swiper-wrapper">
+                <div class="swiper-slide">
+                  <h3>3 Pillars of Success for Industrial Digital Transformation</h3>
+                </div>
+                <div class="swiper-slide">
+                  <h3>Exploring PTC’s ‘Power to Create’ Diversity, Equity & Inclusion</h3>
+                </div>
+                <div class="swiper-slide">
+                  <h3>PTC’s Perspective on the SaaS Tipping Point in Product Development</h3>
+                </div>
+                <div class="swiper-slide">
+                  <h3>The State of Digital Transformation</h3>
+                </div>
+                <div class="swiper-slide">
+                  <h3>Executive Leadership Vital to Digital Transformation Success</h3>
+                </div>
+                <div class="swiper-slide">
+                  <h3>How Onshape Makes Engineering Accessible & Fun</h3>
+                </div>
+                <div class="swiper-slide">
+                  <h3>Defining the Metaverse for Industrial Companies</h3>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </innovator-toggle-container>
+    <br><br><br>
+    
+    <script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.js"></script>
+    
+    <script>
+      var thumbSwiper = new Swiper('.thumbSwiper', {
+        direction: 'vertical',
+        loop: false,
+        // spaceBetween: 10,
+        slidesPerView: 4,
+        watchSlidesProgress: true,
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        navigation: {
+          nextEl: '.swiper-button-next-thumb',
+          prevEl: '.swiper-button-prev-thumb',
+        },
+      });
+      var cardSwiper = new Swiper('.cardSwiper', {
+        loop: false,
+        spaceBetween: 10,
+        effect: 'fade',
+        fadeEffect: {
+          crossFade: true,
+        },
+        navigation: {
+          nextEl: '.swiper-button-next',
+          prevEl: '.swiper-button-prev',
+        },
+        thumbs: {
+          swiper: thumbSwiper,
+        },
+      });
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();