@ptcwebops/ptcw-design 6.3.36 → 6.3.37-beta

package/dist/collection/stories/organisms/ptc/Two Column Media/preview.stories.js

@@ -1,181 +0,0 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Organisms/ptc/Two Column Media'
-};
-
-const AlertsPage = args => {
-  return html`
-    
-
-<div class="ptc-container">
-    
-    <ptc-title type='h3' upperline="no-upperline">Media Component Demo</ptc-title>
-    <hr>
-    <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-m has-p has-col-gap-lg tcm-parent">
-      <div class="is-col-12 ">
-        <ptc-title type='h2' text-align='center' title-size="large">What is industrial augmented reality?
-        </ptc-title>
-      </div>
-      <div class="is-col is-col-6-md tcm-text">
-        <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-          Augmented reality is a highly visual, interactive <a href="#">method of presenting relevant digital
-            information in </a>the
-          context of the physical environment—connecting employees and improving business outcomes.
-        </ptc-para>
-        <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-          Industrial augmented reality offers a better way to create and deliver easily consumable work instructions
-          by
-          overlaying digital content onto real-world work environments.
-        </ptc-para>
-        <ptc-spacer size="x-large"></ptc-spacer>
-        <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank" tab-nav="0">
-          Request Free Trial
-        </ptc-button>
-      </div>
-      <div class="is-col is-col-6-md tcm-media">
-        <ptc-modal id="modal-example" show="false" size="lg">
-          <h1>Test</h1>
-        </ptc-modal>
-        <ptc-link href="javascript:void(0)" id="modal-example-btn" link-title="" theme="simple">
-          <ptc-picture alt="image-test" is-full-width="true" image-alignment="left" max-width="640"
-            src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/0e27bf5688094193abfffa797061e886?v=1969d507"
-            class="js-fade scale-up scale-up-animation">
-          </ptc-picture>
-        </ptc-link>
-      </div>
-
-    </div>
-
-    
-    <ptc-title type='h3' upperline="no-upperline">Media Icon List Component Demo</ptc-title>
-    <hr>
-    <div class="is-grid has-col has-col-gap-lg has-row-gap-md has-m has-p ">
-      <div class="is-col-12">
-        <ptc-title type='h2' text-align='center' title-size="large">Improve Efficiency for Your Workforce and
-          Operations</ptc-title>
-      </div>
-      <div class="is-col is-col-6-md">
-        <div class="img-wrap">
-          <ptc-picture alt="image-test"
-            src="https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/0e27bf5688094193abfffa797061e886?v=1969d507"
-            class="js-fade scale-up scale-up-animation" is-full-width="true" image-alignment="right" max-width="640">
-          </ptc-picture>
-        </div>
-      </div>
-      <div class="is-col is-col-6-md">
-        <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-          In a challenging global market, being able <a href="#">to do more with less—with speed and scalability—is
-            crucial</a> to
-          success. PTC helps our customers improve both manufacturing efficiency and field service automation to break
-          down barriers impacting productivity and output. From cutting factory downtime and boosting asset
-          performance
-          to enabling skilled technicians to deliver services faster, our customers are achieving:
-        </ptc-para>
-        <ptc-icon-list list-type="stat-icon-list" value-text="up&nbsp;to" value-with-unit="60%"
-          list-content="Increase in Operator Productivity">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="stat-icon-list" value-text="up&nbsp;to" value-with-unit="92%"
-          list-content=" First Time Fix Rate">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="stat-icon-list" value-text="up&nbsp;to" value-with-unit="30%"
-          list-content="Less Unscheduled Downtime">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-clock-checkmark" color="ptc-green">
-          </icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="stat-icon-list" value-text="up&nbsp;to" value-with-unit="75%"
-          list-content="Faster On-site Service">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-      </div>
-    </div>
-    
-    <ptc-title type='h3' upperline="no-upperline">Text Component Demo</ptc-title>
-    <hr>
-    <ptc-title type='h2' text-align='left' title-size="large">How does Creo support 3D design?</ptc-title>
-    <ptc-para font-size="small" font-weight="w-4" para-margin="margin-bottom-4" para-style="main">
-      In a challenging global market, being able to do more with less—with speed and scalability—is crucial to
-      success. PTC helps our customers improve both manufacturing efficiency and field service automation to break
-      down barriers impacting productivity and output. From cutting factory downtime and boosting asset
-      performance
-      to enabling skilled technicians to deliver services faster, our customers are achieving:
-    </ptc-para>
-    <ptc-para font-size="small" font-weight="w-7" para-margin="{margin-top-1, margin-bottom-1}" para-style="main">
-      The vast list of capabilities that support the 3D design process include:</ptc-para>
-    <div class="is-grid has-col has-col-gap-lg has-p">
-      <div class="is-col is-col-6-md">
-        <ptc-para font-size="small" font-weight="w-7" para-margin="margin-bottom-4" para-style="main">
-          3D part & assembly design</ptc-para>
-        <ptc-icon-list list-type="simple-icon-list"
-          list-content="Create precise geometry, regardless of model complexity">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="simple-icon-list"
-          list-content="Quickly build robust engineering features such as rounds, chamfers, holes, and more">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="simple-icon-list" is-last-item="true"
-          list-content="Create design variants using family tables">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-para font-size="small" font-weight="w-7" para-margin="margin-bottom-4" para-style="main">
-          Automated 2D drawing creation & update</ptc-para>
-        <ptc-icon-list list-type="simple-icon-list"
-          list-content="Quickly build robust engineering features such as rounds, chamfers, holes, and more">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="simple-icon-list" is-last-item=true
-          list-content="Create design variants using family tables">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-      </div>
-      <div class="is-col is-col-6-md">
-        <ptc-para font-size="small" font-weight="w-7" para-margin=" margin-bottom-4" para-style="main">
-          Assembly management & performance tools</ptc-para>
-        <ptc-icon-list list-type="simple-icon-list"
-          list-content="Create precise geometry, regardless of model complexity">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="simple-icon-list"
-          list-content="Create precise geometry, regardless of model complexity">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-        <ptc-icon-list list-type="simple-icon-list" is-last-item=true
-          list-content="Create precise geometry, regardless of model complexity">
-          <icon-asset slot="icon" type="ptc" size="large" name="icon-3d-cube" color="ptc-green"></icon-asset>
-        </ptc-icon-list>
-      </div>
-    </div>
-  </div>
-<script>
-  document.getElementById('modal-example-btn').addEventListener('click', () => {
-    document.getElementById('modal-example').show = true;
-  });
-
-
-  updateMediaPosition();
-  window.addEventListener('resize', updateMediaPosition);
-
-  function updateMediaPosition() {
-    const isMobile = window.innerWidth < 768;
-    const parentTc = document.querySelectorAll('.tcm-parent');
-
-    if (!parentTc.length) return; // Early exit if no elements found
-
-    parentTc.forEach((item) => {
-      const tcm = item.querySelector('.tcm-media');
-      const tct = item.querySelector('.tcm-text');
-
-      if (tcm && tct) { // Check that both elements exist
-        item.insertBefore(isMobile ? tcm : tct, isMobile ? tct : tcm);
-      }
-    });
-  }
-
-</script>
-  `;
-};
-
-export const Preview = AlertsPage.bind();