@ptcwebops/ptcw-design 6.3.32-beta → 6.3.32

package/dist/collection/stories/Link.stories.js

@@ -74,22 +74,33 @@ export default {
         'underline',
       ],
     },
+    slotContent: {
+      name: 'Default Slot',
+      description: 'Text Content between the <ptc-link> tags.',
+      control: 'text',
+      table: {
+        category: 'Default Slot',
+        type: {
+            summary: 'plain text',
+        },
+      }
+    }
   },
 };
 
-const Template = args => {
-  return html`<ptc-link
-    disabled=${args.disabled}
-    external=${args.external}
-    font-size=${args.fontSize}
-    font-weight=${args.fontWeight}
-    href=${args.href}
-    link-area=${args.linkArea}
-    link-title=${args.linkTitle}
-    target=${args.target}
-    theme=${args.theme}
-    >Link Text</ptc-link
-  >`;
+const Template = args => { return html`<ptc-link
+  disabled=${args.disabled}
+  external=${args.external}
+  font-size=${args.fontSize}
+  font-weight=${args.fontWeight}
+  href=${args.href}
+  link-area=${args.linkArea}
+  link-title=${args.linkTitle}
+  target=${args.target}
+  theme=${args.theme}
+  >
+    ${args.slotContent}
+</ptc-link>`;
 };
 
 export const Example = Template.bind({});
@@ -104,4 +115,5 @@ Example.args = {
   linkTitle: 'Title attribute goes here',
   target: '_blank',
   theme: 'simple',
+  slotContent:'Link text goes here',
 };

package/dist/collection/stories/MinimizedFooter.stories.js

@@ -0,0 +1,18 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-minimized-footer',
+  tags: [ 'autodocs' ]
+};
+
+const Template = () => { return html `<ptc-minimized-footer class="ptc-min-footer mini-footer">
+                <list-item class="list-footer list-primary">© Copyright 2022 PTC</list-item>
+                <list-item class="list-footer list-primary" link-target="_blank" link-href=https://www.ptc.com/en/documents/policies>Legal</list-item>
+                <list-item class="list-footer list-primary" link-target="_blank" link-href=https://www.ptc.com/en/about/trust-center>Trust Center</list-item>
+                <list-item class="list-footer list-primary" link-target="_blank" link-href=https://www.ptc.com/en/documents/policies/privacy>Privacy Policy</list-item>
+                <list-item class="list-footer navbar--preheader-links homepage-secondary-link popup-link ot-sdk-show-settings list-primary hydrated" link-href="#">Cookies Settings</list-item>
+</ptc-minimized-footer>
+`;}
+
+export const Example = Template.bind({});
+

package/dist/collection/stories/Paragraph.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Atoms/ptc-para',
@@ -45,18 +46,24 @@ export default {
       description: 'Paragraph Margin',
       defaultValue: { summary: 'undefined' }
     },
-    // paraStyle: {
-    //   control: 'select',
-    //   options: ["announcement", "default", "flush-style", "intro", "main", "small"],
-    //   description: 'Paragraph Style',
-    //   defaultValue: { summary: 'default' }
-    // },
+
     paraZIndex: {
       control: 'select',
       options: ["z-1", "z-2", "z-3", "z-99", "z-999", "z-auto"],
       description: 'sep z-index',
       defaultValue: { summary: 'undefined' }
     },
+    slotContent: {
+      name: 'Default Slot',
+      description: 'Text Content between the <ptc-para> tags.',
+      control: 'text',
+      table: {
+        category: 'Default Slot',
+        type: {
+            summary: 'html',
+        },
+      }
+    }
     // styles: {
     //   control: '',
     //   description: '(optional) Injected CSS Styles',
@@ -65,7 +72,7 @@ export default {
   }
 };
 
-let paragraphContent = "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.";
+//let paragraphContent = "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.";
 
 const Template = args => { return html `<ptc-para
 	ellipsis-line-cutoff=${args.ellipsisLineCutoff}
@@ -78,7 +85,9 @@ const Template = args => { return html `<ptc-para
 	para-style=${args.paraStyle}
 	para-z-index=${args.paraZIndex}
 	styles=${args.styles}
->${paragraphContent}</ptc-para>`;}
+>
+  ${unsafeHTML(args.slotContent)}
+</ptc-para>`;}
 
 export const Example = Template.bind({});
 
@@ -90,7 +99,6 @@ Example.args = {
   paraColor: 'primary-grey',
   paraLineH: 'line-height-normal',
   paraMargin: 'margin-5',
-  // paraStyle: 'default',
+  slotContent:'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.',
   paraZIndex: 'z-1',
-  // styles: 'undefined'
 }

package/dist/collection/stories/ResponsiveWrapper.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Utilities/Responsive Wrapper',
+  tags: [ 'autodocs' ],
+};
+
+const Template = args => { return html `<ptc-responsive-wrapper>
+    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.
+</ptc-responsive-wrapper>`;}
+
+export const Example = Template.bind({});
+
+
+Example.parameters = {
+  docs: {
+    description: {
+      story: `<h4>Please note: This atom is based on the content’s width</h4>`,
+    },
+  },
+};

package/dist/collection/stories/Select.stories.js

@@ -6,27 +6,27 @@ export default {
   argTypes: {
     disabled: {
       control: 'boolean',
-      description: '',
+      description: 'Disable the field?',
       defaultValue: { summary: 'false' },
     },
     helpertext: {
       control: 'text',
-      description: '',
+      description: 'Help text',
       defaultValue: { summary: 'Please select a value!' },
     },
     isRequired: {
       control: 'boolean',
-      description: '',
+      description: 'Is this field required?',
       defaultValue: { summary: 'true' },
     },
     label: {
       control: 'text',
-      description: '',
+      description: 'Label text',
       defaultValue: { summary: 'undefined' },
     },
     name: {
       control: 'text',
-      description: '',
+      description: 'Name attribute',
       defaultValue: { summary: 'undefined' },
     },
     ptcDataEloquaName: {
@@ -34,7 +34,6 @@ export default {
       description: 'Eloqua Data',
       defaultValue: { summary: 'undefined' },
     },
-    selectedValue: { control: 'text', description: '', defaultValue: { summary: '' } },
   },
 };
 
@@ -46,7 +45,6 @@ const Template = args => {
     label=${args.label}
     name=${args.name}
     ptc-data-eloqua-name=${args.ptcDataEloquaName}
-    selected-value=${args.selectedValue}
   >
     <ul class="mdc-list">
       <li class="mdc-list-item" data-value="">
@@ -77,5 +75,4 @@ Example.args = {
   label: 'Lable Name',
   name: 'examplename',
   ptcDataEloquaName: 'data-eloqua-value',
-  selectedValue: '',
 };

package/dist/collection/stories/Textfield.stories.js

@@ -4,79 +4,122 @@ export default {
   title: 'Atoms/ptc-textfield',
   tags: [ 'autodocs' ],
   argTypes: {
+    alertText: {
+      control: 'text',
+      description: 'Alert text (blue)',
+      defaultValue: { summary: '' }
+    },
+    alertTextContent: {
+      control: 'text',
+      description: 'Alert text content - below alert text (grey)',
+      defaultValue: { summary: '' }
+    },
     disabled: {
       control: 'boolean',
-      description: '',
+      description: 'Disable the field?',
       defaultValue: { summary: 'false' }
     },
     fieldId: {
       control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
+      description: 'ID',
+      defaultValue: { summary: '' }
     },
-    helpertext: {
+    fieldName: {
       control: 'text',
-      description: '',
-      defaultValue: { summary: 'Please enter a value' }
+      description: 'input "name" value. e.g.: phone, email, firstname, lastname',
+      defaultValue: { summary: 'email' }
+    },
+    helpertext: { control: 'text', description: 'Validation text (red)', defaultValue: { summary: '' } },
+    ignoreBlindSubmit: {
+      control: 'boolean',
+      description: 'Ignore Blind Submit?',
+      defaultValue: { summary: 'false' }
     },
-    inputValue: { control: 'text', description: '', defaultValue: { summary: '' } },
+    infoText: {
+      control: 'text',
+      description: 'Info Text (black)',
+      defaultValue: { summary: '' }
+    },
+    // inputValue: { control: 'text', description: '', defaultValue: { summary: '' } },
     labelText: {
       control: 'text',
-      description: '',
+      description: 'Label Text',
       defaultValue: { summary: 'Email' }
     },
-    name: {
+    placeholderText: {
       control: 'text',
-      description: '',
-      defaultValue: { summary: 'email' }
+      description: 'Place holder Text',
+      defaultValue: { summary: '' }
     },
     ptcDataEloquaName: {
       control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
+      description: 'Eloqua Data Name (for the eloqua)',
+      defaultValue: { summary: '' }
+    },
+    ptcDataTargetEloquaName: {
+      control: 'text',
+      description: 'Eloqua Target Data Name (for the eloqua)',
+      defaultValue: { summary: '' }
     },
     ptcMaxLength: {
-      control: '',
-      description: '',
-      defaultValue: { summary: 'undefined' }
+      control: 'number',
+      description: 'Text counter limit',
+      defaultValue: { summary: '' }
     },
     required: {
       control: 'boolean',
-      description: '',
+      description: 'Is this a mandatory field?',
       defaultValue: { summary: 'true' }
     },
+    styles: {
+      control: 'text',
+      description: 'Inject styles for customization',
+      defaultValue: { summary: '' }
+    },
     type: {
       control: 'text',
-      description: 'button, email, file and etc. ',
+      description: 'text, button, email, file and etc. This value triggers different validation',
       defaultValue: { summary: 'text' }
     }
   }
 };
 
 const Template = args => { return html `<ptc-textfield
+	alert-text=${args.alertText}
+	alert-text-content=${args.alertTextContent}
 	disabled=${args.disabled}
 	field-id=${args.fieldId}
+	field-name=${args.fieldName}
 	helpertext=${args.helpertext}
-	input-value=${args.inputValue}
+	ignore-blind-submit=${args.ignoreBlindSubmit}
+	info-text=${args.infoText}
 	label-text=${args.labelText}
-	name=${args.name}
+	placeholder-text=${args.placeholderText}
 	ptc-data-eloqua-name=${args.ptcDataEloquaName}
+	ptc-data-target-eloqua-name=${args.ptcDataTargetEloquaName}
 	ptc-max-length=${args.ptcMaxLength}
 	required=${args.required}
+	styles=${args.styles}
 	type=${args.type}
 ></ptc-textfield>`;}
 
 export const Example = Template.bind({});
 
 Example.args = {
+  alertText: 'Alert text',
+  alertTextContent: 'Alert text content',
   disabled: 'false',
-  fieldId: 'ptc-field-name',
-  helpertext: 'Please enter a value',
-  inputValue: '',
-  labelText: 'Email',
-  name: 'email',
-  ptcDataEloquaName: 'data-eloqua-name-value',
-  ptcMaxLength: 'undefined',
+  fieldId: 'ID',
+  fieldName: 'company field',
+  helpertext: 'Helper text',
+  ignoreBlindSubmit: 'false',
+  infoText: 'Info text',
+  labelText: 'Lable Name',
+  placeholderText: 'Place hoder text goes here',
+  ptcDataEloquaName: 'C_EmailAddress',
+  ptcDataTargetEloquaName: '',
+  ptcMaxLength: '',
   required: 'true',
-  type: 'email'
+  styles: '',
+  type: 'text'
 }

package/dist/collection/stories/Title.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Atoms/ptc-title',
@@ -77,26 +78,36 @@ export default {
     isPlmHub: {
         description: "is it a title for PLM Hub page?",
         defaultValue: {summary: false}
+    },
+    slotContent: {
+      name: 'Default Slot',
+      description: 'Text Content between the <ptc-title> tags.',
+      control: 'text',
+      table: {
+        category: 'Default Slot',
+        type: {
+            summary: 'html',
+        },
+      }
     }
   },
 };
 
-const Template = args => {
-  return html`<ptc-title
-    type="${args.type}"
-    text-align="${args.textAlign}"
-    title-size="${args.titleSize}"
-    title-color="${args.titleColor}"
-    upperline="${args.upperline}"
-    title-display="${args.titleDisplay}"
-    title-shadow="${args.titleShadow}"
-    title-height="${args.titleHeight}"
-    title-margin="${args.titleMargin}"
-    title-weight="${args.titleWeight}"
-    is-plm-hub="${args.isPlmHub}"
-  >
-    Title Example
-  </ptc-title>`;
+const Template = args => {return html`<ptc-title
+  type="${args.type}"
+  text-align="${args.textAlign}"
+  title-size="${args.titleSize}"
+  title-color="${args.titleColor}"
+  upperline="${args.upperline}"
+  title-display="${args.titleDisplay}"
+  title-shadow="${args.titleShadow}"
+  title-height="${args.titleHeight}"
+  title-margin="${args.titleMargin}"
+  title-weight="${args.titleWeight}"
+  is-plm-hub="${args.isPlmHub}"
+>
+  ${unsafeHTML(args.slotContent)}
+</ptc-title>`;
 };
 
 export const Example = Template.bind({});
@@ -112,4 +123,5 @@ Example.args = {
   titleWeight: 'w-8',
   titleShadow: '',
   isPlmHub: false,
+  slotContent:'Lorem ipsum',
 };

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

@@ -0,0 +1,22 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Organisms/ptc/Academic Form'
+};
+
+const AlertsPage = args => {
+  return html`
+    
+
+<academic-form-test id="myForm"></academic-form-test>
+<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();