@ptcwebops/ptcw-design 6.3.37 → 6.3.38-beta

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

@@ -1,150 +0,0 @@
-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

@@ -1,421 +0,0 @@
-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();