npm - @ptcwebops/ptcw-design - Versions diffs - 6.3.32-beta → 6.3.32 - Mend

@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (421) hide show

package/dist/collection/stories/organisms/ptc/Footer V2/preview.stories.js ADDED Viewed

@@ -0,0 +1,138 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Footer V2'
+};
+const AlertsPage = args => {
+  return html`
+<ptc-footer
+    background-image="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/f529d0db850d44b8807dfd365cd46105?v=ef88a747">
+    <div class="ptc-container footer-top">
+      <div>
+        <div class="ft-grid">
+          <div class="ft-col ft-cards">
+            <ptc-title type="h4" seo-compatibility-mode upperline="none" title-weight="w-8" title-margin="margin-flush"
+              title-color="white" title-display="block">
+              <h4>
+                How can we help?
+              </h4>
+            </ptc-title>
+            <max-width-container max-width="413" breakpoint="992" content-align="left">
+              <div class="is-grid gap-20">
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="globe-icon"></icon-asset>
+                    <span slot="card-title">Support Portal</span>
+                  </ptc-icon-card>
+                </div>
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="chat-icon"></icon-asset>
+                    <span slot="card-title">Contact Us</span>
+                  </ptc-icon-card>
+                </div>
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="person-chart-icon"></icon-asset>
+                    <span slot="card-title">Training and Skills</span>
+                  </ptc-icon-card>
+                </div>
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="person-globe-icon"></icon-asset>
+                    <span slot="card-title">Join the PTC Community</span>
+                  </ptc-icon-card>
+                </div>
+              </div>
+            </max-width-container>
+          </div>
+          <div class="ft-col ft-menu">
+            <ptc-title type="h4" seo-compatibility-mode upperline="none" title-weight="w-8" title-margin="margin-flush"
+              title-color="white" title-display="block">
+              <h4>
+                Explore PTC
+              </h4>
+            </ptc-title>
+            <div class="u-flex f-menu ">
+              <ul class="f-menu-1 ">
+                <li><a href="#" title="About PTC">About PTC</a></li>
+                <li><a href="#" title="Products">Products</a></li>
+                <li><a href="#" title="PTC University">PTC University </a></li>
+                <li><a href="#" title="Careers">Careers</a></li>
+                <li><a href="#" title="Leadership">Leadership</a></li>
+              </ul>
+              <ul class="f-menu-2">
+                <li><a href="#" title="Investor Relations">Investor Relations</a></li>
+                <li><a href="#" title="News">News</a></li>
+                <li><a href="#" title="Partners">Partners </a></li>
+                <li><a href="#" title="Events">Events</a></li>
+                <li><a href="#" title="Global Locations">Global Locations</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="ft-col ft-social">
+            <ptc-social-icons-footer target="_blank" instagram-url="https://www.instagram.com/ptc_inc"
+              facebook-url="https://www.facebook.com/PTC.Inc" linkedin-url="https://www.linkedin.com/company/ptc"
+              x-url="https://twitter.com/PTC" youtube-url="https://www.youtube.com/ptc" ></ptc-social-icons-footer>
+            <ptc-mobile-select id="mobile-list" class="js-mobile-select-1" ensure-btn-text="confirm" cancel-btn-text="cancel"
+              trigger-name="lang-ddl" selected-text="中文 (繁體)" selected-id="https://www.ptc.com/tw" ></ptc-mobile-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot='footer-bottom-slot' class="u-bg-gray-11">
+      <div class="ptc-container footer-bottom">
+        <div class="logo">
+          <a href="#" title="PTC">
+            <svg xmlns="http://www.w3.org/2000/svg" alt="PTC Logo" width="78" height="28" viewBox="0 0 78 28"
+              fill="none">
+              <path
+                d="M12.1298 0.313477L0 7.32987V13.5186L12.1298 6.46458L18.9563 10.3772L17.5929 11.1673L12.1298 8.02587L7.37189 10.7722L18.2417 17.0644L24.2595 13.5374V7.32987L12.1298 0.313477Z"
+                fill="white" ></path>
+              <path
+                d="M12.1298 28.3138L24.2595 21.3256V15.1181L12.1298 22.1721L5.30325 18.2595L6.66667 17.4694L12.1298 20.6108L16.8782 17.8644L6.01787 11.5723L0 15.0993V21.3256L12.1298 28.3138Z"
+                fill="#40AA1D" ></path>
+              <path
+                d="M37.5118 9.40325C38.6025 7.80434 40.2292 7.00488 42.3919 7.00488C44.3571 7.00488 45.9462 7.69147 47.1686 9.05525C48.3909 10.4002 48.9927 12.065 48.9927 14.0495C48.9927 16.034 48.3815 17.6988 47.1686 19.0437C45.9462 20.4075 44.3101 21.0941 42.2602 21.0941C40.201 21.0941 38.6213 20.2852 37.5118 18.6675V26.2859H35.4619V7.22121H37.5118V9.40325ZM42.1192 8.85774C40.6429 8.85774 39.477 9.36563 38.6307 10.3908C37.8126 11.3596 37.3989 12.5729 37.3989 14.0495C37.3989 15.5261 37.8126 16.7394 38.6307 17.7082C39.4864 18.724 40.6523 19.2413 42.1192 19.2413C43.5766 19.2413 44.752 18.7334 45.6641 17.7082C46.5198 16.7488 46.9429 15.5261 46.9429 14.0495C46.9429 12.5729 46.5198 11.3596 45.6641 10.3908C44.7614 9.36563 43.5766 8.85774 42.1192 8.85774Z"
+                fill="white" ></path>
+              <path
+                d="M53.2538 20.8694V9.01862H50.1885V7.2222H53.2538V2.34082H55.3037V7.2222H58.3502V9.01862H55.3037V20.86H53.2538V20.8694Z"
+                fill="white" ></path>
+              <path
+                d="M67.0567 19.2325C67.9312 19.2325 68.7023 18.9879 69.3793 18.4988C70.0563 18.0098 70.5452 17.3702 70.8555 16.5896H73.0652C72.6421 17.9345 71.8804 19.0161 70.7709 19.8344C69.6049 20.6715 68.2227 21.0853 66.6242 21.0853C64.6214 21.0853 62.9947 20.3987 61.7441 19.035C60.5217 17.7088 59.9199 16.044 59.9199 14.0407C59.9199 12.0374 60.5311 10.3726 61.7441 9.04646C62.9947 7.68269 64.6308 6.99609 66.6242 6.99609C68.2227 6.99609 69.6049 7.41934 70.7709 8.24701C71.8804 9.06527 72.6421 10.1469 73.0652 11.4919H70.8555C70.5452 10.7112 70.0563 10.0716 69.3793 9.58257C68.7023 9.09349 67.9312 8.84895 67.0567 8.84895C66.1823 8.84895 65.4394 8.99003 64.8377 9.26279C64.2265 9.53554 63.7187 9.91175 63.2956 10.382C62.4023 11.3602 61.9604 12.5829 61.9604 14.0407C61.9604 15.4985 62.4023 16.7118 63.2956 17.6994C64.2077 18.7152 65.4582 19.2325 67.0567 19.2325Z"
+                fill="white" ></path>
+              <path
+                d="M75.987 7.22168C76.1939 7.22168 76.3819 7.2593 76.57 7.33454C76.7486 7.40979 76.9085 7.52265 77.0401 7.65433C77.1718 7.786 77.2846 7.94589 77.3598 8.12459C77.4351 8.3033 77.4727 8.50081 77.4727 8.70773C77.4727 8.91464 77.4351 9.10275 77.3598 9.28145C77.2846 9.46015 77.1718 9.62005 77.0401 9.75172C76.9085 9.8834 76.7486 9.99626 76.57 10.0715C76.3913 10.1467 76.1939 10.1844 75.987 10.1844C75.7801 10.1844 75.5921 10.1467 75.4134 10.0715C75.2348 9.99626 75.0749 9.8834 74.9433 9.75172C74.8116 9.62005 74.6988 9.46015 74.6236 9.28145C74.5483 9.10275 74.5107 8.90524 74.5107 8.70773C74.5107 8.50081 74.5483 8.3127 74.6236 8.12459C74.6988 7.94589 74.8116 7.786 74.9433 7.65433C75.0749 7.52265 75.2348 7.40979 75.4134 7.33454C75.5921 7.2593 75.7895 7.22168 75.987 7.22168ZM75.987 9.98685C76.3443 9.98685 76.6452 9.86458 76.8897 9.61064C77.0025 9.49778 77.0965 9.3567 77.1624 9.20621C77.2282 9.05572 77.2658 8.88643 77.2658 8.70773C77.2658 8.52902 77.2282 8.36913 77.1624 8.20924C77.0965 8.05876 77.0025 7.91768 76.8897 7.80481C76.6452 7.56027 76.3443 7.4286 75.987 7.4286C75.6297 7.4286 75.3288 7.55087 75.0843 7.80481C74.8398 8.05876 74.7082 8.35973 74.7082 8.70773C74.7082 8.87702 74.7458 9.04632 74.8116 9.19681C74.8775 9.34729 74.9715 9.48837 75.0843 9.60123C75.3382 9.85518 75.6391 9.98685 75.987 9.98685ZM76.7204 8.36913C76.7204 8.46319 76.6922 8.55724 76.6358 8.63248C76.5794 8.70773 76.4948 8.76416 76.4007 8.79237C76.5606 8.8394 76.6546 8.97108 76.6922 9.1874C76.7016 9.24383 76.7016 9.29086 76.7016 9.33789V9.5448H76.4007V9.37551C76.4007 9.25324 76.3913 9.15918 76.3631 9.10275C76.3067 8.98989 76.2127 8.93345 76.0716 8.93345H75.6485V9.5448H75.3476V7.88946H76.0528C76.2879 7.88946 76.4571 7.93649 76.57 8.02114C76.6734 8.10578 76.7204 8.22805 76.7204 8.36913ZM76.0246 8.6701C76.1468 8.6701 76.2409 8.65129 76.3161 8.60427C76.3913 8.55724 76.4289 8.4914 76.4289 8.40675C76.4289 8.32211 76.4007 8.25627 76.3443 8.20924C76.2879 8.16222 76.1751 8.134 76.0246 8.134H75.6579V8.6701H76.0246Z"
+                fill="white" ></path>
+            </svg>
+          </a>
+        </div>
+        <div class="copyright-list">
+          <span class="copyright">© Copyright 2024 PTC</span>
+          <ul class="u-flex u-flex-wrap flex-align-items-center u-flex-justify-center">
+            <li><a href="#" title="Legal">Legal</a></li>
+            <li><a href="#" title="Trust Center">Trust Center</a></li>
+            <li><a href="#" title="Privacy Policy">Privacy Policy</a></li>
+            <li><a href="#" title="Cookies Setting">Cookies Settings</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </ptc-footer>
+  <script>
+    const wheelList = document.getElementById('mobile-list');
+    wheelList.wheelData = [{id: "https://www.ptc.com/en", value: "English"}, {id: "https://www.ptc.com/fr", value: "Français"}, {id:"https://www.ptc.com/tw", value:"中文 (繁體)"}]
+  </script>
+  `;
+};
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Footer V2 Cn/preview.stories.js ADDED Viewed

@@ -0,0 +1,146 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Footer V2 Cn'
+};
+const AlertsPage = args => {
+  return html`
+<ptc-footer
+    background-image="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/f529d0db850d44b8807dfd365cd46105?v=ef88a747">
+    <div class="ptc-container footer-top">
+      <div>
+        <div class="ft-grid">
+          <div class="ft-col ft-cards">
+            <ptc-title type="h4" seo-compatibility-mode upperline="none" title-weight="w-8" title-margin="margin-flush"
+              title-color="white" title-display="block">
+              <h4>
+                How can we help?
+              </h4>
+            </ptc-title>
+            <max-width-container max-width="413" breakpoint="992" content-align="left">
+              <div class="is-grid gap-20">
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="globe-icon"></icon-asset>
+                    <span slot="card-title">Support Portal</span>
+                  </ptc-icon-card>
+                </div>
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="chat-icon"></icon-asset>
+                    <span slot="card-title">Contact Us</span>
+                  </ptc-icon-card>
+                </div>
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="person-chart-icon"></icon-asset>
+                    <span slot="card-title">Training and Skills</span>
+                  </ptc-icon-card>
+                </div>
+                <div class="is-col-6">
+                  <ptc-icon-card card-href="https://www.ptc.com/" target="_self">
+                    <icon-asset type="ptc" size="xx-large" name="person-globe-icon"></icon-asset>
+                    <span slot="card-title">Join the PTC Community</span>
+                  </ptc-icon-card>
+                </div>
+              </div>
+            </max-width-container>
+          </div>
+          <div class="ft-col ft-menu">
+            <ptc-title type="h4" seo-compatibility-mode upperline="none" title-weight="w-8" title-margin="margin-flush"
+              title-color="white" title-display="block">
+              <h4>
+                Explore PTC
+              </h4>
+            </ptc-title>
+            <div class="u-flex f-menu ">
+              <ul class="f-menu-1 ">
+                <li><a href="#" title="About PTC">About PTC</a></li>
+                <li><a href="#" title="Products">Products</a></li>
+                <li><a href="#" title="PTC University"> PTC University </a></li>
+                <li><a href="#" title="Careers">Careers</a></li>
+                <li><a href="#" title="Leadership">Leadership</a></li>
+              </ul>
+              <ul class="f-menu-2">
+                <li><a href="#" title="Investor Relations">Investor Relations</a></li>
+                <li><a href="#" title="News">News</a></li>
+                <li><a href="#" title="Partners">Partners</a></li>
+                <li><a href="#" title="Events">Events</a></li>
+                <li><a href="#" title="Global Locations">Global Locations</a></li>
+              </ul>
+            </div>
+          </div>
+          <div class="ft-col ft-social">
+            <ptc-social-icons-footer target="_blank" weibo-url="https://www.instagram.com/ptc_inc"
+              linkedin-url="https://www.linkedin.com/company/ptc" youku-url="https://www.facebook.com/PTC.Inc"
+              wechat-qr-image-url="https://www.ptc.com/dist/ptc/images/wechat-qr.png" wechat-qr-image-alt-text="weChat QR">
+            </ptc-social-icons-footer>
+            <ptc-mobile-select id="mobile-list" class="js-mobile-select-1" ensure-btn-text="confirm" cancel-btn-text="cancel"
+              trigger-name="lang-ddl" selected-text="中文 (简体)" selected-id="https://www.ptc.com/cn"></ptc-mobile-select>
+            <span class="u-text-medium f-mobile-div">市场咨询热线：400-602-2018</span>
+          </div>
+          <div class="ft-cn-contact  f-desktop-div">
+            <span class="u-text-medium">市场咨询热线：400-602-2018</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div slot='footer-bottom-slot' class="u-bg-gray-11">
+      <div class="ptc-container footer-bottom">
+        <div class="logo">
+          <a href="#" title="PTC">
+            <svg xmlns="http://www.w3.org/2000/svg" alt="PTC Logo" width="78" height="28" viewBox="0 0 78 28"
+              fill="none">
+              <path
+                d="M12.1298 0.313477L0 7.32987V13.5186L12.1298 6.46458L18.9563 10.3772L17.5929 11.1673L12.1298 8.02587L7.37189 10.7722L18.2417 17.0644L24.2595 13.5374V7.32987L12.1298 0.313477Z"
+                fill="white" ></path>
+              <path
+                d="M12.1298 28.3138L24.2595 21.3256V15.1181L12.1298 22.1721L5.30325 18.2595L6.66667 17.4694L12.1298 20.6108L16.8782 17.8644L6.01787 11.5723L0 15.0993V21.3256L12.1298 28.3138Z"
+                fill="#40AA1D" ></path>
+              <path
+                d="M37.5118 9.40325C38.6025 7.80434 40.2292 7.00488 42.3919 7.00488C44.3571 7.00488 45.9462 7.69147 47.1686 9.05525C48.3909 10.4002 48.9927 12.065 48.9927 14.0495C48.9927 16.034 48.3815 17.6988 47.1686 19.0437C45.9462 20.4075 44.3101 21.0941 42.2602 21.0941C40.201 21.0941 38.6213 20.2852 37.5118 18.6675V26.2859H35.4619V7.22121H37.5118V9.40325ZM42.1192 8.85774C40.6429 8.85774 39.477 9.36563 38.6307 10.3908C37.8126 11.3596 37.3989 12.5729 37.3989 14.0495C37.3989 15.5261 37.8126 16.7394 38.6307 17.7082C39.4864 18.724 40.6523 19.2413 42.1192 19.2413C43.5766 19.2413 44.752 18.7334 45.6641 17.7082C46.5198 16.7488 46.9429 15.5261 46.9429 14.0495C46.9429 12.5729 46.5198 11.3596 45.6641 10.3908C44.7614 9.36563 43.5766 8.85774 42.1192 8.85774Z"
+                fill="white" ></path>
+              <path
+                d="M53.2538 20.8694V9.01862H50.1885V7.2222H53.2538V2.34082H55.3037V7.2222H58.3502V9.01862H55.3037V20.86H53.2538V20.8694Z"
+                fill="white" ></path>
+              <path
+                d="M67.0567 19.2325C67.9312 19.2325 68.7023 18.9879 69.3793 18.4988C70.0563 18.0098 70.5452 17.3702 70.8555 16.5896H73.0652C72.6421 17.9345 71.8804 19.0161 70.7709 19.8344C69.6049 20.6715 68.2227 21.0853 66.6242 21.0853C64.6214 21.0853 62.9947 20.3987 61.7441 19.035C60.5217 17.7088 59.9199 16.044 59.9199 14.0407C59.9199 12.0374 60.5311 10.3726 61.7441 9.04646C62.9947 7.68269 64.6308 6.99609 66.6242 6.99609C68.2227 6.99609 69.6049 7.41934 70.7709 8.24701C71.8804 9.06527 72.6421 10.1469 73.0652 11.4919H70.8555C70.5452 10.7112 70.0563 10.0716 69.3793 9.58257C68.7023 9.09349 67.9312 8.84895 67.0567 8.84895C66.1823 8.84895 65.4394 8.99003 64.8377 9.26279C64.2265 9.53554 63.7187 9.91175 63.2956 10.382C62.4023 11.3602 61.9604 12.5829 61.9604 14.0407C61.9604 15.4985 62.4023 16.7118 63.2956 17.6994C64.2077 18.7152 65.4582 19.2325 67.0567 19.2325Z"
+                fill="white" ></path>
+              <path
+                d="M75.987 7.22168C76.1939 7.22168 76.3819 7.2593 76.57 7.33454C76.7486 7.40979 76.9085 7.52265 77.0401 7.65433C77.1718 7.786 77.2846 7.94589 77.3598 8.12459C77.4351 8.3033 77.4727 8.50081 77.4727 8.70773C77.4727 8.91464 77.4351 9.10275 77.3598 9.28145C77.2846 9.46015 77.1718 9.62005 77.0401 9.75172C76.9085 9.8834 76.7486 9.99626 76.57 10.0715C76.3913 10.1467 76.1939 10.1844 75.987 10.1844C75.7801 10.1844 75.5921 10.1467 75.4134 10.0715C75.2348 9.99626 75.0749 9.8834 74.9433 9.75172C74.8116 9.62005 74.6988 9.46015 74.6236 9.28145C74.5483 9.10275 74.5107 8.90524 74.5107 8.70773C74.5107 8.50081 74.5483 8.3127 74.6236 8.12459C74.6988 7.94589 74.8116 7.786 74.9433 7.65433C75.0749 7.52265 75.2348 7.40979 75.4134 7.33454C75.5921 7.2593 75.7895 7.22168 75.987 7.22168ZM75.987 9.98685C76.3443 9.98685 76.6452 9.86458 76.8897 9.61064C77.0025 9.49778 77.0965 9.3567 77.1624 9.20621C77.2282 9.05572 77.2658 8.88643 77.2658 8.70773C77.2658 8.52902 77.2282 8.36913 77.1624 8.20924C77.0965 8.05876 77.0025 7.91768 76.8897 7.80481C76.6452 7.56027 76.3443 7.4286 75.987 7.4286C75.6297 7.4286 75.3288 7.55087 75.0843 7.80481C74.8398 8.05876 74.7082 8.35973 74.7082 8.70773C74.7082 8.87702 74.7458 9.04632 74.8116 9.19681C74.8775 9.34729 74.9715 9.48837 75.0843 9.60123C75.3382 9.85518 75.6391 9.98685 75.987 9.98685ZM76.7204 8.36913C76.7204 8.46319 76.6922 8.55724 76.6358 8.63248C76.5794 8.70773 76.4948 8.76416 76.4007 8.79237C76.5606 8.8394 76.6546 8.97108 76.6922 9.1874C76.7016 9.24383 76.7016 9.29086 76.7016 9.33789V9.5448H76.4007V9.37551C76.4007 9.25324 76.3913 9.15918 76.3631 9.10275C76.3067 8.98989 76.2127 8.93345 76.0716 8.93345H75.6485V9.5448H75.3476V7.88946H76.0528C76.2879 7.88946 76.4571 7.93649 76.57 8.02114C76.6734 8.10578 76.7204 8.22805 76.7204 8.36913ZM76.0246 8.6701C76.1468 8.6701 76.2409 8.65129 76.3161 8.60427C76.3913 8.55724 76.4289 8.4914 76.4289 8.40675C76.4289 8.32211 76.4007 8.25627 76.3443 8.20924C76.2879 8.16222 76.1751 8.134 76.0246 8.134H75.6579V8.6701H76.0246Z"
+                fill="white" ></path>
+            </svg>
+          </a>
+        </div>
+        <div class="copyright-list">
+          <span class="copyright">© Copyright 2024 PTC</span>
+          <ul class="u-flex u-flex-wrap flex-align-items-center u-flex-justify-center">
+            <li><a href="#" title="Legal">Legal</a></li>
+            <li><a href="#" title="Trust Center">Trust Center</a></li>
+            <li><a href="#" title="Privacy Policy">Privacy Policy</a></li>
+            <li><a href="#" title="Basic information of business license"><img width="32" height="32"
+                  src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/f2d4c4857a9d418a8cbf0c6f34f42749"
+                  alt="Business check" title="Basic information of business license"></a></li>
+            <li><a href="#" title="Cookies Setting">Cookies Settings</a></li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </ptc-footer>
+  <script>
+    const wheelList = document.getElementById('mobile-list');
+    wheelList.wheelData = [{id: "https://www.ptc.com/en", value: "English"}, {id: "https://www.ptc.com/fr", value: "Français"}, {id:"https://www.ptc.com/cn", value:"中文 (简体)"}]
+  </script>
+  `;
+};
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Form Radio Button/preview.stories.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Form Radio Button'
+};
+const AlertsPage = args => {
+  return html`
+  <div class="ptc-container">
+  <div class="independent-radio-buttons">
+    <ptc-form-radio-button name="default">Default</ptc-form-radio-button>
+    <ptc-form-radio-button name="checked" is-checked=true>Checked</ptc-form-radio-button>
+    <ptc-form-radio-button name="disabled" is-disabled=true>Disabled</ptc-form-radio-button>
+    <ptc-form-radio-button name="checked-and-disabled" is-checked=true is-disabled=true>Checked & Disabled</ptc-form-radio-button>
+  </div>
+  <hr />
+  <ptc-para>Radiogroup</ptc-para>
+  <ptc-form-radio-group name="radio-group">
+    <ptc-form-radio-button radiogroup="radio-group" name="radio-1">Radio 1</ptc-form-radio-button>
+    <ptc-form-radio-button radiogroup="radio-group" name="radio-2" is-checked=true>Radio 2</ptc-form-radio-button>
+    <ptc-form-radio-button radiogroup="radio-group" name="radio-3">Radio 3</ptc-form-radio-button>
+    <ptc-form-radio-button radiogroup="radio-group" name="radio-4">Radio 4</ptc-form-radio-button>
+  </ptc-form-radio-group>
+</div>
+<script type="text/javascript">
+  let radioGroup = document.querySelector('ptc-form-radio-group');
+  radioGroup.addEventListener("groupCheckedChanged", (e) => {
+    let eventDetails = e.detail;
+    console.log("Radiogroup", eventDetails);
+  });
+  let independent = document.querySelector('.independent-radio-buttons');
+  independent.addEventListener("checkedChanged", (e) => {
+    let eventDetails = e.detail;
+    console.log("Independent", eventDetails);
+  });
+</script>
+  `;
+};
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Framed Video 16 9/preview.stories.js ADDED Viewed

@@ -0,0 +1,31 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Framed Video 16 9'
+};
+const AlertsPage = args => {
+  return html`
+<div class="ptc-container ptc-section">
+    <ptc-title type="h2" text-align="center" title-size="x-large" title-color="gray" upperline="dotted" title-display="block" title-shadow="" title-height="densest" title-margin="margin-3">
+      When it's time to make change, make it a great one
+    </ptc-title>
+    <ptc-spacer size="x-large"></ptc-spacer>
+    <max-width-container max-width="888.90">
+      <ptc-background-video play-button-title="Play" pause-button-title="Pause"
+        video-src="https://edge.api.brightcove.com/playback/v1/accounts/1532789042001/videos/6332298695112/high.mp4?bcov_auth=eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhY2NpZCI6IjE1MzI3ODkwNDIwMDEiLCJjb25pZCI6IjYzMzIyOTg2OTUxMTIiLCJpYXQiOiIxNjkzNDQyMTQ0IiwiZXhwIjoxNjkzNDg1MzQ0fQ.GVjJf_C8-ULOVmWqb_WsSFkubIKAsS6tii-dIX4vPLfFIlqIOl2yrRr4IO6n_KOYD0e50xLZIRB2lIZ9wHnTsgAYHZYfGMuT8LWHZuJ23ckePkVBVyAv9IiGs9VrMyLUBFV_6NNniuXGhKUtp90uy98cz241eGs3OR2-Y8G-ZiYyKTt_8r1FTzMs2G04c-doZxAv9xchaMqCE_xuwN4WuAXQvI85fdUofEFKnYnzdFWaftoLeuLvtLDei_xRyc1DCcH4sZj5CUI4MNPoaY-FCUDv0OubTIHmBsU7yXieIZ8kEcvSsoqoSyLqoHL7ai0Prgf21380PCs35hPfG5soYw"
+        poster-src="https://www.ptc.com/-/media/Images/new-org/misc/W232501-LWX23-Hero-Banner-Video-FINAL-jebyrne-110922-screenshot.jpg">
+        <div class="aspect-ratio-container">
+          <div class="content"></div>
+        </div>
+      </ptc-background-video>
+    </max-width-container>
+  </div>
+  <br><br><br>
+  `;
+};
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Homepage Image Feature/preview.stories.js ADDED Viewed

@@ -0,0 +1,41 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Homepage Image Feature'
+};
+const AlertsPage = args => {
+  return html`
+<div class="ptc-container">
+    <div class="" style="height: 600px; background-color: rgb(87, 87, 87);"></div>
+    <div class="" style="height: 500px; background-color: rgb(126, 128, 129);"></div>
+  </div>
+  <div class="ptc-section-large ptc-container">
+    <ptc-homepage-image-feature>
+      <ptc-img slot='featured-image' image-type="smart-bg" border-radius="radius-standard"
+        img-url="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/eba3f83ad3fc436693e53f143c47bf34?v=ae0509b4">
+      </ptc-img>
+      <div class="card-title-wrap" slot='card-title'>
+        <ptc-title seo-compatibility-mode type="h2" upperline="no-upperline" title-margin="margin-flush">
+          <h2>Tempus venenatis elit hendrerit euismod diam suscipit</h2>
+        </ptc-title>
+      </div>
+      <p>Est diam etiam euismod et quis convallis diam sit viverra. Urna faucibus blandit.</p>
+      <div class="cta-wrap">
+        <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">Risus
+          Interdum</ptc-button>
+        <ptc-button type="link" color="ptc-tertiary" link-href="https://www.ptc.com" target="_blank">Gravida
+          Enim</ptc-button>
+      </div>
+    </ptc-homepage-image-feature>
+  </div>
+  `;
+};
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Homepage Jumbotron/preview.stories.js ADDED Viewed

@@ -0,0 +1,166 @@
+import { html } from 'lit';
+export default {
+  title: 'Organisms/ptc/Homepage Jumbotron'
+};
+const AlertsPage = args => {
+  return html`
+<style>
+    jumbotron-sub-menu {
+      position: absolute;
+      top: 32px;
+      margin-bottom: 32px;
+      /* make sure long text won's touch the sub menu */
+    }
+    homepage-jumbotron .hp-h1 {
+      color: var(--color-white);
+      font-family: var(--ptc-font-latin);
+      font-size: var(--ptc-font-size-xxx-large);
+      font-weight: var(--ptc-font-weight-extrabold);
+      line-height: var(--ptc-line-height-densest);
+      margin: 0 0 16px 0;
+    }
+    homepage-jumbotron .hp-sub-title {
+      color: var(--color-white);
+      /* Paragraph Large */
+      font-family: var(--ptc-font-latin);
+      font-size: var(--ptc-font-size-small);
+      font-weight: var(--ptc-font-weight-regular);
+      line-height: var(--ptc-line-height-p);
+      margin: 0 0 32px 0;
+    }
+    @media screen and (min-width: 992px) {
+      homepage-jumbotron .hp-h1 {
+        font-size: var(--ptc-font-size-xxxx-large);
+      }
+    }
+    homepage-jumbotron .tile-h {
+      color: var(--color-blue-07);
+      font-family: Raleway;
+      font-size: 14px;
+      font-weight: 500;
+    }
+    homepage-jumbotron .tile-para {
+      color: var(--color-gray-10);
+      font-family: Raleway;
+      font-size: 16px;
+      font-weight: 700;
+      line-height: 24px;
+      /* 150% */
+    }
+    homepage-jumbotron video{
+      width: 100%;
+      height: auto;
+    }
+  </style>
+<section class="jumbotron-section ptc-section-hp">
+    <homepage-jumbotron play-btn-text="hp-play" pause-btn-text="hp-pause">
+      <jumbotron-sub-menu slot="breadcrumb">
+              <div slot="menu-item-0">Bibendum Egestas Bibendum Egestas Bibendum Egestas</div>
+              <div slot="menu-item-1">Pellentesque Egestas</div>
+              <div slot="menu-item-2">Tristique Enim</div>
+              <div slot="menu-item-3">Quis ut Mattis</div>
+              <div slot="menu-item-4">Ultricies Venenatis</div>
+      </jumbotron-sub-menu>
+      <video slot="bg-video-src-0" src="https://www.ptc.com/-/media/Videos/wind-turbine.mp4"></video>
+      <div slot="main-title-0" class="hp-h1">Lorem Ipsum Dolor Sit Amet Consectetur Elementum Tristique 0</div>
+      <div slot="sub-title-0" class="hp-sub-title">Sub Title 0</div>
+      <div slot="j-cta-0">
+        <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">
+          Lorem ipsum dolor sit amet 0
+        </ptc-button>
+      </div>
+      <img slot="bg-video-src-1" style="width: 100%;height:auto;"src="https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80" >
+      <div slot="main-title-1" class="hp-h1">Engineers Rely on PTC</div>
+      <div slot="sub-title-1" class="hp-sub-title">Design innovation requires the right team and the right software solutions. See why engineers prefer PTC.</div>
+      <div slot="j-cta-1">
+        <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">
+          Lorem ipsum
+        </ptc-button>
+      </div>
+      <video slot="bg-video-src-2" src="https://www.ptc.com/-/media/Videos/wind-turbine.mp4"></video>
+      <div slot="main-title-2" class="hp-h1">Lorem Ipsum Dolor Sit Amet Consectetur Elementum Tristique Sollicitudin 2
+      </div>
+      <div slot="sub-title-2" class="hp-sub-title">Sub Title 2</div>
+      <div slot="j-cta-2">
+        <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">
+          Lorem ipsum dolor sit amet 2
+        </ptc-button>
+      </div>
+      <video slot="bg-video-src-3" src="https://www.ptc.com/-/media/Videos/wind-turbine.mp4"></video>
+      <div slot="main-title-3" class="hp-h1">Lorem Ipsum Dolor Sit Amet Consectetur Elementum Tristique Sollicitudin 3
+      </div>
+      <div slot="sub-title-3" class="hp-sub-title">Sub Title 3</div>
+      <div slot="j-cta-3">
+        <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">
+          Lorem ipsum dolor sit amet 3
+        </ptc-button>
+      </div>
+      <video slot="bg-video-src-4" src="https://www.ptc.com/-/media/Videos/wind-turbine.mp4"></video>
+      <div slot="main-title-4" class="hp-h1">Lorem Ipsum Dolor Sit Amet Consectetur Elementum Tristique Sollicitudin 4
+      </div>
+      <div slot="sub-title-4" class="hp-sub-title">Sub Title 4</div>
+      <div slot="j-cta-4">
+        <ptc-button type="link" color="ptc-quaternary" link-href="https://www.ptc.com" target="_blank">
+          Lorem ipsum dolor sit amet 4
+        </ptc-button>
+      </div>
+      <div hidden>
+        <ptc-info-tile tabindex="0" slot="jumbotron-tile-0" variant="image" link="https://www.ptc.com">
+          <span slot="tile-title">Tile 0-0 Title</span>
+          <img slot="tile-image" src="https://placehold.co/500?text=image00">
+          <p slot="tile-description">Description 0-0</p>
+        </ptc-info-tile>
+        <ptc-info-tile tabindex="0" slot="jumbotron-tile-0" variant="image" link="https://www.ptc.com">
+          <span slot="tile-title">Tile 0-1 Title</span>
+          <img slot="tile-image" src="https://placehold.co/500?text=image01">
+          <p slot="tile-description">Description 0-1</p>
+        </ptc-info-tile>
+        <ptc-info-tile tabindex="0" slot="jumbotron-tile-0" variant="image" link="https://www.ptc.com">
+          <span slot="tile-title">Tile 0-2 Title</span>
+          <img slot="tile-image" src="https://placehold.co/500?text=image02">
+          <p slot="tile-description">Tellus aliquam </p>
+        </ptc-info-tile>
+        <ptc-info-tile tabindex="0" slot="jumbotron-tile-1" variant="image" link="https://www.ptc.com">
+          <span slot="tile-title">Tile 1-0 Title</span>
+          <img slot="tile-image" src="https://placehold.co/500x1200?text=image10">
+          <h3 slot="tile-description">Tellus aliquam sit pharetra facilisis sed non Lorem ipsum. </h3>
+        </ptc-info-tile>
+        <ptc-info-tile tabindex="0" slot="jumbotron-tile-1" variant="image">
+          <p slot="tile-title">Tile 1-1 Title</p>
+          <img slot="tile-image" src="https://placehold.co/500x1200?text=image11">
+          <h2 class="h3-tile-text" slot="tile-description">Description 1-1</h2>
+        </ptc-info-tile>
+      </div>
+    </homepage-jumbotron>
+  </section>
+  `;
+};
+export const Preview = AlertsPage.bind();