@ptcwebops/ptcw-design 6.3.35-beta → 6.3.35

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/MultiSelect.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+
+export default { title: 'New/ptc-multi-select', tags: [ 'autodocs' ], argTypes: {} };
+const Template = (args) => {
+  return html`<ptc-multi-select
+>
+</ptc-multi-select>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

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/ScrollButton.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-scroll-button',
+  tags: [ 'autodocs' ],
+  argTypes: {}
+};
+const Template = (args) => {
+  return html`<ptc-scroll-button
+>
+</ptc-scroll-button>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

package/dist/collection/stories/SearchField.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-search-field',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    styles: {
+      description: ' (optional) Injected CSS styles ',
+      defaultValue: { summary: '' },
+      control: 'text'
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-search-field
+	styles=${args.styles}
+>
+</ptc-search-field>`;
+};
+export const Example = Template.bind({});
+Example.args = { styles: '' };

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

@@ -1,81 +1,27 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-select',
-  tags: ['autodocs'],
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-      description: '',
-      defaultValue: { summary: 'false' },
-    },
-    helpertext: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: 'Please select a value!' },
-    },
-    isRequired: {
-      control: 'boolean',
-      description: '',
-      defaultValue: { summary: 'true' },
-    },
-    label: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' },
-    },
-    name: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' },
-    },
-    ptcDataEloquaName: {
-      control: 'text',
-      description: 'Eloqua Data',
-      defaultValue: { summary: 'undefined' },
-    },
-    selectedValue: { control: 'text', description: '', defaultValue: { summary: '' } },
-  },
-};
-
-const Template = args => {
-  return html`<ptc-select
-    disabled=${args.disabled}
-    helpertext=${args.helpertext}
-    is-required=${args.isRequired}
-    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="">
-        <span class="mdc-list-item__ripple"></span>
-      </li>
-      <li class="mdc-list-item" data-value="Augmented Reality (AR)">
-        <span class="mdc-list-item__ripple"></span>
-        <span class="mdc-list-item__text">Augmented Reality (AR)</span>
-      </li>
-      <li class="mdc-list-item" data-value="CAD">
-        <span class="mdc-list-item__ripple"></span>
-        <span class="mdc-list-item__text">Computer Aided Design</span>
-      </li>
-      <li class="mdc-list-item" data-value="Retail(FlexPLM)">
-        <span class="mdc-list-item__ripple"></span>
-        <span class="mdc-list-item__text">Fashion and Retail Product Lifecycle Management</span>
-      </li>
-    </ul>
-  </ptc-select>`;
-};
-
-export const Example = Template.bind({});
-
-Example.args = {
-  disabled: 'false',
-  helpertext: 'Please select a value!',
-  isRequired: 'true',
-  label: 'Lable Name',
-  name: 'examplename',
-  ptcDataEloquaName: 'data-eloqua-value',
-  selectedValue: '',
-};
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-select',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    ptcDataEloquaName: {
+      description: ' Eloqua Data',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-select
+	ptcDataEloquaName=${args.ptcDataEloquaName}
+>
+	${args.default}
+</ptc-select>`;
+};
+export const Example = Template.bind({});
+Example.args = { ptcDataEloquaName: '', default: 'Lorem ipsum text' };

package/dist/collection/stories/SocialShare.stories.js

@@ -1,67 +1,83 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-social-share',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    display: {
-      control: 'select',
-      options: ["block", "flex", "inline", "inline-block"],
-      description: '',
-      defaultValue: { summary: 'inline-block' }
-    },
-    recipient: {
-      control: 'text',
-      description: 'Email recipient. If you want to use mail share, you need to use this property',
-      defaultValue: { summary: '' }
-    },
-    shareTitle: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
-    },
-    shareType: {
-      control: 'select',
-      options: ["facebook", "linkedin", "mail", "share-api", "twitter"],
-      description: '',
-      defaultValue: { summary: 'twitter' }
-    },
-    source: {
-      control: 'text',
-      description: 'Optional - source for linkedin',
-      defaultValue: { summary: '' }
-    },
-    text: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
-    },
-    url: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
-    },
-  }
-};
-
-const Template = args => { return html `<ptc-social-share
-  display=${args.display}
-  share-type=${args.shareType}
-  text=${args.text}
-  url=${args.url}
-  title=${args.title}
-  source=${args.source}
-  recipient=${args.recipient}
-></ptc-social-share>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  display: "inline-block",
-  recipient: "yqiantest@ptc.com",
-  shareTitle: "title goes here",
-  shareType: "facebook",
-  source: "Facebook source",
-  text: "summary",
-  url: "https://www.ptc.com",
-}
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-social-share',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    source: {
+      description: ' Optional - source for linkedin',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    recipient: {
+      description: ' Email recipient. If you want to use mail share, you need to use this property',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    iconColor: {
+      description: ' Icon asset color',
+      defaultValue: { summary: 'white' },
+      control: 'select',
+      options: [
+        'black',
+        'white',
+        'ptc-green',
+        'gray',
+        'primary-gray',
+        'inherit'
+      ]
+    },
+    iconHoverColor: {
+      description: ' Icon asset hover color',
+      defaultValue: { summary: 'gray' },
+      control: 'select',
+      options: [
+        'black',
+        'white',
+        'ptc-green',
+        'gray',
+        'primary-gray',
+        'inherit'
+      ]
+    },
+    iconSize: {
+      description: ' is hover or not / @State() isHover: boolean = false; / Icon Size',
+      defaultValue: { summary: 'large' },
+      control: 'select',
+      options: [
+        'small',
+        'medium',
+        'large',
+        'x-large',
+        'xx-large',
+        'xxx-large',
+        'xxxx-large'
+      ]
+    },
+    darkFocusState: {
+      description: ' darkFocusState for dark background',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-social-share
+	source=${args.source}
+	recipient=${args.recipient}
+	iconColor=${args.iconColor}
+	iconHoverColor=${args.iconHoverColor}
+	iconSize=${args.iconSize}
+	darkFocusState=${args.darkFocusState}
+>
+</ptc-social-share>`;
+};
+export const Example = Template.bind({});
+Example.args = {
+  source: '',
+  recipient: '',
+  iconColor: 'white',
+  iconHoverColor: 'gray',
+  iconSize: 'large',
+  darkFocusState: 'false'
+};

package/dist/collection/stories/SvgBtn.stories.js

@@ -0,0 +1,36 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-svg-btn',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    svgName: {
+      description: ' Options: "close", "slider-left", "slider-right", "back-arrow"',
+      defaultValue: { summary: 'close' },
+      control: 'text'
+    },
+    display: {
+      description: ' Display',
+      defaultValue: { summary: 'block' },
+      control: 'select',
+      options: [ 'block', 'inline', 'inline-block', 'flex' ]
+    },
+    zIndex: {
+      description: ' Z-Index',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    styles: { description: ' Injected Styles', defaultValue: { summary: '' } }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-svg-btn
+	svgName=${args.svgName}
+	display=${args.display}
+	zIndex=${args.zIndex}
+	styles=${args.styles}
+>
+</ptc-svg-btn>`;
+};
+export const Example = Template.bind({});
+Example.args = { svgName: 'close', display: 'block', zIndex: '', styles: '' };