@ptcwebops/ptcw-design 6.3.37 → 6.3.38-beta

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

@@ -74,33 +74,22 @@ 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}
-  >
-    ${args.slotContent}
-</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}
+    >Link Text</ptc-link
+  >`;
 };
 
 export const Example = Template.bind({});
@@ -115,5 +104,4 @@ Example.args = {
   linkTitle: 'Title attribute goes here',
   target: '_blank',
   theme: 'simple',
-  slotContent:'Link text goes here',
 };

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

@@ -1,5 +1,4 @@
 import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 export default {
   title: 'Atoms/ptc-para',
@@ -46,24 +45,18 @@ 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',
@@ -72,7 +65,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}
@@ -85,9 +78,7 @@ const Template = args => { return html `<ptc-para
 	para-style=${args.paraStyle}
 	para-z-index=${args.paraZIndex}
 	styles=${args.styles}
->
-  ${unsafeHTML(args.slotContent)}
-</ptc-para>`;}
+>${paragraphContent}</ptc-para>`;}
 
 export const Example = Template.bind({});
 
@@ -99,6 +90,7 @@ Example.args = {
   paraColor: 'primary-grey',
   paraLineH: 'line-height-normal',
   paraMargin: 'margin-5',
-  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.',
+  // paraStyle: 'default',
   paraZIndex: 'z-1',
+  // styles: 'undefined'
 }

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

@@ -1,27 +1,78 @@
 import { html } from 'lit';
 
 export default {
-  title: 'New/ptc-select',
-  tags: [ 'autodocs' ],
+  title: 'Atoms/ptc-select',
+  tags: ['autodocs'],
   argTypes: {
-    ptcDataEloquaName: {
-      description: ' Eloqua Data',
-      defaultValue: { summary: '' },
-      control: 'text'
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the field?',
+      defaultValue: { summary: 'false' },
+    },
+    helpertext: {
+      control: 'text',
+      description: 'Help text',
+      defaultValue: { summary: 'Please select a value!' },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Is this field required?',
+      defaultValue: { summary: 'true' },
+    },
+    label: {
+      control: 'text',
+      description: 'Label text',
+      defaultValue: { summary: 'undefined' },
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute',
+      defaultValue: { summary: 'undefined' },
     },
-    default: {
-      description: 'Default slot content',
+    ptcDataEloquaName: {
       control: 'text',
-      table: { category: 'slots' }
-    }
-  }
+      description: 'Eloqua Data',
+      defaultValue: { summary: 'undefined' },
+    },
+  },
 };
-const Template = (args) => {
+
+const Template = args => {
   return html`<ptc-select
-	ptcDataEloquaName=${args.ptcDataEloquaName}
->
-	${args.default}
-</ptc-select>`;
+    disabled=${args.disabled}
+    helpertext=${args.helpertext}
+    is-required=${args.isRequired}
+    label=${args.label}
+    name=${args.name}
+    ptc-data-eloqua-name=${args.ptcDataEloquaName}
+  >
+    <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 = { ptcDataEloquaName: '', default: 'Lorem ipsum text' };
+
+Example.args = {
+  disabled: 'false',
+  helpertext: 'Please select a value!',
+  isRequired: 'true',
+  label: 'Lable Name',
+  name: 'examplename',
+  ptcDataEloquaName: 'data-eloqua-value',
+};

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

@@ -1,83 +1,67 @@
 import { html } from 'lit';
 
 export default {
-  title: 'New/ptc-social-share',
+  title: 'Molecules/ptc-social-share',
   tags: [ 'autodocs' ],
   argTypes: {
-    source: {
-      description: ' Optional - source for linkedin',
-      defaultValue: { summary: '' },
-      control: 'text'
+    display: {
+      control: 'select',
+      options: ["block", "flex", "inline", "inline-block"],
+      description: '',
+      defaultValue: { summary: 'inline-block' }
     },
     recipient: {
-      description: ' Email recipient. If you want to use mail share, you need to use this property',
-      defaultValue: { summary: '' },
-      control: 'text'
+      control: 'text',
+      description: 'Email recipient. If you want to use mail share, you need to use this property',
+      defaultValue: { summary: '' }
     },
-    iconColor: {
-      description: ' Icon asset color',
-      defaultValue: { summary: 'white' },
-      control: 'select',
-      options: [
-        'black',
-        'white',
-        'ptc-green',
-        'gray',
-        'primary-gray',
-        'inherit'
-      ]
+    shareTitle: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
-    iconHoverColor: {
-      description: ' Icon asset hover color',
-      defaultValue: { summary: 'gray' },
+    shareType: {
       control: 'select',
-      options: [
-        'black',
-        'white',
-        'ptc-green',
-        'gray',
-        'primary-gray',
-        'inherit'
-      ]
+      options: ["facebook", "linkedin", "mail", "share-api", "twitter"],
+      description: '',
+      defaultValue: { summary: 'twitter' }
     },
-    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'
-      ]
+    source: {
+      control: 'text',
+      description: 'Optional - source for linkedin',
+      defaultValue: { summary: '' }
+    },
+    text: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    },
+    url: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
     },
-    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>`;
-};
+
+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 = {
-  source: '',
-  recipient: '',
-  iconColor: 'white',
-  iconHoverColor: 'gray',
-  iconSize: 'large',
-  darkFocusState: 'false'
-};
+  display: "inline-block",
+  recipient: "yqiantest@ptc.com",
+  shareTitle: "title goes here",
+  shareType: "facebook",
+  source: "Facebook source",
+  text: "summary",
+  url: "https://www.ptc.com",
+}