@ptcwebops/ptcw-design 6.3.35-beta → 6.3.35

package/dist/collection/stories/organisms/ptc/Eloqua Library Visitor PCenter/preview.stories.js

@@ -0,0 +1,60 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Eloqua Library Visitor PCenter'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="embedded-form-container">
+        <div id="contactinfo">
+            
+        </div>
+    </div>
+    <script type="text/javascript">
+        var _elqQ = _elqQ || [];
+        _elqQ.push(['elqSetSiteId', '2826']);
+        _elqQ.push(['elqTrackPageView']);//It's using third-party for testing purpose only
+        (function () {
+            function async_load() {
+                var s = document.createElement('script'); s.type = 'text/javascript'; s.async
+                    = true;
+                s.src = '//img.en25.com/i/elqCfg.min.js';
+                var x = document.getElementsByTagName('script')[0];
+                x.parentNode.insertBefore(s, x);
+            }
+            if (window.attachEvent) { window.attachEvent('onload', async_load); }
+            else { window.addEventListener('DOMContentLoaded', async_load, false); }
+        })();
+        function CreateRow(label, value) {
+            var p = document.createElement('p');
+            var b = document.createElement('b');
+            var label = document.createTextNode(label);
+            var value = document.createTextNode(value);
+            p.appendChild(b);
+            b.appendChild(label);
+            p.appendChild(value);
+            document.getElementById('contactinfo').appendChild(p);
+        }
+        function SetElqContent() {
+            if (this.GetElqContentPersonalizationValue) {
+                CreateRow('Contact Returned: ', GetElqContentPersonalizationValue(''));
+                CreateRow('Email Address: ', GetElqContentPersonalizationValue('V_Email_Address'));
+                CreateRow('ISP (from IP): ', GetElqContentPersonalizationValue('V_ISPFromIP'));
+                CreateRow('Country (from IP): ', GetElqContentPersonalizationValue('V_CountryFromIP'));
+                CreateRow('EmailRecipientID: ', GetElqContentPersonalizationValue('V_EmailRecipientID'));
+                CreateRow('Customer Guid: ', GetElqContentPersonalizationValue('CustomerGuid'));
+            } else {
+                CreateRow('Personalization functions not found', '');
+            }
+        }
+        _elqQ.push(['elqDataLookup', escape
+            ('bf7df9f5b15c4b47b3c75e50c902bd53'), '']);
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Eloqua Library Visitor Recipient Id/preview.stories.js

@@ -0,0 +1,59 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Eloqua Library Visitor Recipient Id'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="embedded-form-container">
+        <div id="contactinfo">
+            
+        </div>
+    </div>
+    <script type="text/javascript">
+        var _elqQ = _elqQ || [];
+        _elqQ.push(['elqSetSiteId', '2826']);
+        _elqQ.push(['elqTrackPageView']);//It's using third-party for testing purpose only
+        (function () {
+            function async_load() {
+                var s = document.createElement('script'); s.type = 'text/javascript'; s.async
+                    = true;
+                s.src = '//img.en25.com/i/elqCfg.min.js';
+                var x = document.getElementsByTagName('script')[0];
+                x.parentNode.insertBefore(s, x);
+            }
+            if (window.attachEvent) { window.attachEvent('onload', async_load); }
+            else { window.addEventListener('DOMContentLoaded', async_load, false); }
+        })();
+        function CreateRow(label, value) {
+            var p = document.createElement('p');
+            var b = document.createElement('b');
+            var label = document.createTextNode(label);
+            var value = document.createTextNode(value);
+            p.appendChild(b);
+            b.appendChild(label);
+            p.appendChild(value);
+            document.getElementById('contactinfo').appendChild(p);
+        }
+        function SetElqContent() {
+            if (this.GetElqContentPersonalizationValue) {
+                CreateRow('Contact Returned - Recipient ID: ', GetElqContentPersonalizationValue(''));
+                CreateRow('Email Address: ', GetElqContentPersonalizationValue('V_Email_Address'));
+                CreateRow('ISP (from IP): ', GetElqContentPersonalizationValue('V_ISPFromIP'));
+                CreateRow('Country (from IP): ', GetElqContentPersonalizationValue('V_CountryFromIP'));
+                CreateRow('EmailRecipientID: ', GetElqContentPersonalizationValue('V_EmailRecipientID'));
+                CreateRow('Customer Guid: ', GetElqContentPersonalizationValue('CustomerGuid'));
+            } else {
+                CreateRow('Personalization functions not found', '');
+            }
+        }_elqQ.push(['elqDataLookup', escape('8b298afe05d04541931066f9159c1679'),'<CustomerGuid>0a8b592b-aa7c-4ce7-a241-1cc6754a7683</CustomerGuid>']);
+        
+    </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

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

@@ -0,0 +1,23 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Embedded Form'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<div class="embedded-form-container">
+    <ptc-data-lookup elq-site-id="2826" elq-visitor-lookup-key="bf7df9f5b15c4b47b3c75e50c902bd53"
+      elq-contact-lookup-key="4da0a50be2db4a56a1a59d4bea5e0ea6">
+      <embedded-form>
+      </embedded-form>
+    </ptc-data-lookup>
+    
+  </div>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

package/dist/collection/stories/organisms/ptc/Embedded Form Floating/preview.stories.js

@@ -0,0 +1,165 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Embedded Form Floating'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+<style>
+    .emb-floating-form {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+    }
+  </style>
+<ptc-jumbotron jumbotron-type="light"
+    sub-title="totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo."
+    bg-src="https://images.unsplash.com/photo-1675285972028-45dc2add07be?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Nzc3ODk2NTE&ixlib=rb-4.0.3&q=80">
+    
+    
+    <ptc-breadcrumb slot="breadcrumb" color="primary-gray">
+      <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us" color="primary-gray">
+        PLM Video Hub
+      </list-item>
+      <list-item list-type="breadcrumb" color="primary-gray">
+        Current Page
+      </list-item>
+    </ptc-breadcrumb>
+    <ptc-title slot="main-title" type="h1" upperline="no-upperline" title-size="xxxx-large" title-height="densest"
+      title-weight="w-8" title-margin="margin-flush" text-align="left" title-color="gray">
+      Sed ut perspiciatis unde omnis iste natus
+    </ptc-title>
+    <ptc-button slot="j-cta" type="link" color="ptc-primary" link-href="https://www.ptc.com" target="_blank">
+      CTA 1
+    </ptc-button>
+    <ptc-button slot="j-cta" type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">
+      CTA 2
+    </ptc-button>
+  </ptc-jumbotron>
+  <section class="ptc-section-standard">
+    <div class="ptc-container">
+      <max-width-container max-width="746px">
+        <ptc-title type='h2' text-align='left' upperline="no-upperline" title-margin="margin-flush"
+          title-height="xx-large">
+          <ptc-tooltip max-length="70" z-index="z-2"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+            position="bottom" mode="text-only"></ptc-tooltip>
+        </ptc-title>
+        <hr style="background-color: #9AA6AD; margin: 12px 0;">
+        <ptc-para font-size="small" font-weight="w-4" para-margin="margin-top-1" para-line-h="line-height-p"
+          para-align="left">
+          <ptc-readmore visible-lines-custom="7" more-text="Read More" less-text="Read Less" read-more-position="left"
+            display="inline" size="medium">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+            orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+            orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+          </ptc-readmore>
+        </ptc-para>
+      </max-width-container>
+    </div>
+  </section>
+
+
+  <section 
+    style="background-image: url('https://ptc-p-001.sitecorecontenthub.cloud/api/public/content/029cc36cea5d43728f440192ea27b1cc'); background-repeat: no-repeat;background-size: cover; ">
+    <div class="ptc-container emb-form-wrapper" style="    display: flex;    align-items: center;    width: 100%;">
+      <div class="is-grid" style="width: 100%; position: relative;">
+        <div class="is-col-12 is-col-6-lg content-flex-adjustments">
+          <div class="content-wrapper">
+            <slot name="form-content"></slot>
+          </div>
+        </div>
+        <div class="is-col-12 is-col-6-lg flex-adjustments">
+          <embedded-form class="emb-floating-form">
+          </embedded-form>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <section class="ptc-section-standard">
+    <div class="ptc-container">
+      <max-width-container max-width="746px">
+        <ptc-title type='h2' text-align='left' upperline="no-upperline" title-margin="margin-flush"
+          title-height="xx-large">
+          <ptc-tooltip max-length="70" z-index="z-2"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+            position="bottom" mode="text-only"></ptc-tooltip>
+        </ptc-title>
+        <hr style="background-color: #9AA6AD; margin: 12px 0;">
+        <ptc-para font-size="small" font-weight="w-4" para-margin="margin-top-1" para-line-h="line-height-p"
+          para-align="left">
+          <ptc-readmore visible-lines-custom="7" more-text="Read More" less-text="Read Less" read-more-position="left"
+            display="inline" size="medium">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+            dolore magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+            orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+            orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+            magna aliqua.
+            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+            laborum.
+          </ptc-readmore>
+        </ptc-para>
+      </max-width-container>
+    </div>
+  </section>
+
+
+
+  <script>
+
+
+    setTimeout(() => {
+      const embForm = document.querySelector('.emb-floating-form');
+      const embFormWrapper = document.querySelector('.emb-form-wrapper');
+      const textFieldCount = document.querySelectorAll('ptc-textfield');
+      const selectFieldCount = document.querySelectorAll('ptc-select');
+      const checkboxFieldCount = document.querySelectorAll('ptc-form-checkbox');
+      console.log(textFieldCount.length);
+      console.log(selectFieldCount.length);
+      console.log(checkboxFieldCount.length);
+      const totalValidationSpace = (textFieldCount.length + selectFieldCount.length + checkboxFieldCount.length) * 20;
+      if (embFormWrapper) {
+        //embFormWrapper.style.height = (embForm.offsetHeight + totalValidationSpace) + 'px';
+        embFormWrapper.style.height = (embForm.offsetHeight) + 'px';
+        embForm.parentElement.style.minHeight = (embForm.offsetHeight + 0) + 'px';
+
+      }
+    }, 1000)
+
+
+  </script>
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();

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

@@ -0,0 +1,16 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Event Detail'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+
+
+  `;
+};
+
+export const Preview = AlertsPage.bind();