@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/organisms/ptc/Mvc Form/preview.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Mvc Form'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<ptc-form id="myForm"></ptc-form>
+<script>
+      const myForm = document.getElementById('myForm');
+      myForm.addEventListener('formSubmit', (event) => {
+        const formData = event.detail;
+        console.olog('Form submitted: ', formData)
+      })
+    </script>
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/New Buttons/preview.stories.js

@@ -0,0 +1,125 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/New Buttons'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="ptc-container ptc-section-standard">
+      <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h2>CTA Buttons</h2></ptc-title>
+      <div class="is-grid">
+        <div class="is-col-4-sm">
+          <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h3>Large</h3></ptc-title>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta1"> Example Text </ptc-button>
+          <br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta2">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta1">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta3" disabled>Example Text</ptc-button>
+        </div>
+        <div class="is-col-4-sm">
+          <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h3>Medium</h3></ptc-title>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta1" size="medium">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta2" size="medium">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta1" size="medium">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta3" size="medium" disabled>Example Text</ptc-button>
+        </div>
+        <div class="is-col-4-sm">
+          <ptc-title seo-compatibility-mode title-margin="margin-bottom-5" size="small"> <h3>Small</h3></ptc-title>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta1" size="small">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta2" size="small">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta1" size="small">Example Text</ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta3" size="small" disabled>Example Text</ptc-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="ptc-container ptc-section-standard">
+      <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h2>CTA Buttons with Icons</h2></ptc-title>
+      <div class="is-grid">
+        <div class="is-col-4-sm">
+          <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h3>Large</h3></ptc-title>
+
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta1">
+            <icon-asset name="creo" size="large" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span>
+          </ptc-button>
+          <br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta2">
+            <icon-asset name="creo" size="large" color="white" type="ptc"></icon-asset> <span>Example Text</span></ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta1">
+            <icon-asset name="creo" size="large" color="primary-gray" type="ptc"></icon-asset> <span>Example Text</span></ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta3" disabled>
+            <icon-asset name="creo" size="large" color="white" type="ptc"></icon-asset> <span>Example Text</span>
+          </ptc-button>
+        </div>
+        <div class="is-col-4-sm">
+          <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h3>Medium</h3></ptc-title>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta1" size="medium">
+            <icon-asset name="creo" size="medium" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta2" size="medium">
+            <icon-asset name="creo" size="medium" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta1" size="medium">
+            <icon-asset name="creo" size="medium" color="primary-gray" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta3" size="medium" disabled>
+            <icon-asset name="creo" size="medium" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span>
+          </ptc-button>
+        </div>
+        <div class="is-col-4-sm">
+          <ptc-title seo-compatibility-mode title-margin="margin-bottom-5" size="small"> <h3>Small</h3></ptc-title>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta1" size="small">
+            <icon-asset name="creo" size="x-small" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta2" size="small">
+            <icon-asset name="creo" size="x-small" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta1" size="small">
+            <icon-asset name="creo" size="x-small" color="primary-gray" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta3" size="small" disabled>
+            <icon-asset name="creo" size="x-small" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span>
+          </ptc-button>
+        </div>
+      </div>
+    </div>
+
+    <div class="ptc-container ptc-section-standard">
+      <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h2>CTA Buttons with Fullwidth</h2></ptc-title>
+      <div class="is-grid">
+        <div class="is-col-12">
+          <ptc-title seo-compatibility-mode title-margin="margin-bottom-5"> <h3>Large</h3></ptc-title>
+
+          <ptc-button seo-compatibility-mode type="button" color="primary-cta" tracker-id="cta1" cta-width="full-width">
+            <icon-asset name="creo" size="large" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span>
+          </ptc-button>
+
+          <br><br>
+
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-dark" tracker-id="cta2" cta-width="full-width">
+            <icon-asset name="creo" size="large" color="white" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="secondary-cta-light" tracker-id="cta1" cta-width="full-width">
+            <icon-asset name="creo" size="large" color="primary-gray" type="ptc"></icon-asset>
+            <span>Example Text</span> </ptc-button><br><br>
+          <ptc-button type="button" seo-compatibility-mode color="primary-cta" tracker-id="cta3" cta-width="full-width" disabled>
+            <icon-asset name="creo" size="large" color="primary-gray" type="ptc"></icon-asset>
+            <span>Example Text</span>
+          </ptc-button>
+
+
+        </div>
+      </div>
+    </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Partners Detail/preview.stories.js

@@ -0,0 +1,151 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Partners Detail'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<section>
+        <div class="ptc-container">
+            <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="xxx-large"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="xxx-large"></ptc-spacer>
+            <div class="is-grid">
+                <div class="is-col-12 media-thumb-feature">
+                    <div class="media-thumb">
+                        <ptc-picture alt="image-test" src="https://ptc.file.force.com/servlet/servlet.ImageServer?id=0155A00000A7JP3QAN&oid=00DA0000000YLPa" 
+                                    width="300" height="200" object-fit="cover" disable-resize="true"></ptc-picture>
+                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/vuforia-advanced.svg" 
+                                width="300" object-fit="cover" disable-resize="true"></ptc-picture>
+                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/thingworx-advanced.svg" 
+                                width="300" object-fit="cover" disable-resize="true"></ptc-picture>
+                        <ptc-picture alt="image-test" src="https://www.ptc.com/-/media/Partners/Windchill-preferred.svg" 
+                                width="300" object-fit="cover" disable-resize="true"></ptc-picture>
+                    </div>
+                    <div class="media-feature">
+                        <ptc-title type="h1" upperline="no-upperline" title-margin="margin-flush">Econocap</ptc-title>
+                        <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-3" para-style="main">
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec finibus arcu. Praesent fermentum ullamcorper nulla. 
+                            Etiam vitae sapien sapien. Ut ut mi vel ligula sollicitudin dapibus. Nulla elit nibh, lobortis at turpis non, porta tempus velit.
+                            Integer in rutrum augue. Pellentesque ullamcorper eu ipsum vitae porttitor. Etiam rutrum mi tortor, sit amet luctus urna porta ut. 
+                            Duis maximus purus id magna ullamcorper interdum. Integer congue scelerisque neque a efficitur.
+                        </ptc-para>
+                        <ptc-spacer breakpoint="x-small" size="x-small"></ptc-spacer>
+                        <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+                        <ptc-spacer breakpoint="medium" size="large"></ptc-spacer>
+                        <ptc-button type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">Visit Econocap Website</ptc-button>
+                    </div>
+                </div>
+            </div>
+            <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="large"></ptc-spacer>
+            <div class="is-grid has-no-row">
+                <div class="is-col-12">
+                    <ptc-title type="h2" upperline="no-upperline" title-margin="margin-flush">Partner Details</ptc-title>
+                </div>
+                <div class="is-col-12 is-col-6-sm">
+                    <ptc-title type="h3" upperline="no-upperline" title-margin="margin-bottom-1">Partner Type</ptc-title>
+                    <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-style="main">Solution Provider, System Integrator</ptc-para>
+                </div>
+                <div class="is-col-12 is-col-6-sm">
+                    <ptc-title type="h3" upperline="no-upperline" title-margin="margin-bottom-1">Solution Segments</ptc-title>
+                    <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-style="main">ALM, AR, CAD, IoT, Kepware, PLM</ptc-para>
+                </div>
+            </div>
+            <hr class="hr-3 u-marginTop-4xl">
+            <ptc-accordion id="inner-accordion" theme="minimalist">
+                <ptc-accordion-item heading="Areas Served" active>
+                    <ul class="minimalist">
+                        <li>Canada</li>
+                        <li>Canada - Alberta</li>
+                        <li>Canada - British Columbia</li>
+                        <li>Canada - Manitoba</li>
+                        <li>Canada - New Brunswick</li>
+                        <li>Canada - Newfoundland</li>
+                        <li>Canada - Northwest Territories</li>
+                        <li>Canada - Nova Scotia</li>
+                        <li>Canada - Nunavat</li>
+                        <li>Canada - Ontario</li>
+                        <li>Canada - Prince Edward Island</li>
+                        <li>Canada - Quebec</li>
+                        <li>Canada - Saskatchewan</li>
+                        <li>Canada - Yukon</li>
+                        <li>USA</li>
+                        <li>USA - Alabama</li>
+                        <li>USA - Alaska</li>
+                        <li>USA - Arizona</li>
+                        <li>USA - Arkansas</li>
+                        <li>USA - California</li>
+                        <li>USA - Colorado</li>
+                        <li>USA - Connecticut</li>
+                        <li>USA - Delaware</li>
+                        <li>USA - District Of Columbia</li>
+                        <li>USA - Florida</li>
+                        <li>USA - Georgia (USA)</li>
+                        <li>USA - Georgia(USA)</li>
+                        <li>USA - Hawaii</li>
+                        <li>USA - Idaho</li>
+                        <li>USA - Illinois</li>
+                        <li>USA - Indiana</li>
+                        <li>USA - Iowa</li>
+                        <li>USA - Maine</li>
+                        <li>USA - Maryland</li>
+                        <li>USA - Massachusetts</li>
+                        <li>USA - Michigan</li>
+                        <li>USA - Minnesota</li>
+                        <li>USA - Mississippi</li>
+                        <li>USA - Missouri</li>
+                        <li>USA - California</li>
+                        <li>USA - Colorado</li>
+                        <li>USA - Connecticut</li>
+                        <li>USA - Delaware</li>
+                        <li>USA - District Of Columbia</li>
+                        <li>USA - Florida</li>
+                        <li>USA - Georgia (USA)</li>
+                        <li>USA - Georgia(USA)</li>
+                        <li>USA - Hawaii</li>
+                        <li>USA - Idaho</li>
+                        <li>USA - Illinois</li>
+                        <li>USA - Indiana</li>
+                        <li>USA - Iowa</li>
+                        <li>USA - Maine</li>
+                        <li>USA - Maryland</li>
+                        <li>USA - Massachusetts</li>
+                        <li>USA - Michigan</li>
+                        <li>USA - Minnesota</li>
+                        <li>USA - Mississippi</li>
+                        <li>USA - Missouri</li>
+                        <li>USA - Montana</li>
+                        <li>USA - Nebraska</li>
+                        <li>USA - Nevada</li>
+                        <li>USA - New Hampshire</li>
+                        <li>USA - New Jersey</li>
+                        <li>USA - New Mexico</li>
+                        <li>USA - New York</li>
+                        <li>USA - North Carolina</li>
+                        <li>USA - North Dakota</li>
+                        <li>USA - Ohio</li>
+                        <li>USA - Oklahoma</li>
+                        <li>USA - Oregon</li>
+                        <li>USA - Pennsylvania</li>
+                        <li>USA - Puerto Rico</li>
+                        <li>USA - Rhode Island</li>
+                    </ul>
+                </ptc-accordion-item>
+            </ptc-accordion>
+            <ptc-spacer breakpoint="small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="small" size="xxx-large"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="medium"></ptc-spacer>
+            <ptc-spacer breakpoint="x-small" size="xxx-large"></ptc-spacer>
+        </div>
+    </section>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();