@ptcwebops/ptcw-design 6.3.66-beta → 6.3.68-beta

package/dist/collection/stories/Hero.stories.js

@@ -1,120 +1,35 @@
 import { html } from 'lit';
 
 export default {
-  title: 'Molecules/ptc-hero',
+  title: 'New/ptc-hero',
   tags: [ 'autodocs' ],
   argTypes: {
+    heroType: {
+      description: ' Hero Type',
+      defaultValue: { summary: '' },
+      control: 'select',
+      options: [ 'jumbotron', 'footer-cta', 'simple' ]
+    },
     bgUrl: {
-      control: 'text',
-      description: 'Hero Background Image URL',
-      defaultValue: { summary: 'undefined' }
+      description: ' Hero Background Image URL',
+      defaultValue: { summary: 'undefined' },
+      control: 'text'
     },
     contentAlignment: {
+      description: ' Content Alignment ',
+      defaultValue: { summary: '' },
       control: 'select',
-      options: ['left', 'right', 'center'],
-      description: 'Content Alignment',
-      defaultValue: { summary: 'undefined' }
-    },
-    heroType: {
-      control: 'select',
-      options: ["footer-cta", "jumbotron", "simple"],
-      description: 'Hero Type',
-      defaultValue: { summary: 'undefined' }
+      options: [ 'left', 'right', 'center' ]
     }
   }
 };
-
-// const Template = args => { return html `<ptc-hero
-// 	bg-url=${args.bgUrl}
-// 	content-alignment=${args.contentAlignment}
-// 	hero-type=${args.heroType}
-// ></ptc-hero>`;}
-
-// export const Example = Template.bind({});
-
-// Example.args = {
-//   bgUrl: 'undefined',
-//   contentAlignment: 'undefined',
-//   heroType: 'undefined'
-// }
-
-// ** Dark Theme Jumbotron **
-
-const DarkThemeJumbotronTemplate = args => { return html `<ptc-hero 
-	bg-url=${args.bgUrl}
-	content-alignment=${args.contentAlignment}
-	hero-type=${args.heroType}
+const Template = (args) => {
+  return html`<ptc-hero
+	heroType=${args.heroType}
+	bgUrl=${args.bgUrl}
+	contentAlignment=${args.contentAlignment}
 >
-  <div class="ptc-container">
-    <div class="u-hero-width is-grid  has-row-gap-sm u-align-center">
-      <div class="is-col-12">
-        <ptc-spacer breakpoint="x-small" size="space-128"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="space-128"></ptc-spacer>
-      </div>
-      <ptc-span span-style="plm-hub-style" display="block" exportparts="part-ptc-span" class="is-col-12">Featured
-        Video</ptc-span>
-      <ptc-title type="h1" upperline="no-upperline" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8" class="is-col-12">Making Industrial Innovation a
-        Reality</ptc-title>
-      <ptc-para font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
-        para-line-h="line-height-19" class="is-col-12">
-        See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation for
-        their customers.
-      </ptc-para>
-      <ptc-link class="has-m-top is-col-12" target="_blank" href="https://www.ptc.com" link-title="PTC" theme="d-green-underline">Watch
-        Now
-      </ptc-link>
-      <div class="is-col-12">
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
-        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
-      </div>
-    </div>
-  </div>
-</ptc-hero>`;}
-
-export const DarkThemeJumbotron = DarkThemeJumbotronTemplate.bind({});
-
-DarkThemeJumbotron.args = {
-  bgUrl: 'http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway',
-  contentAlignment: 'left',
-  heroType: 'jumbotron'
-}
-
-// ** Dark Theme Footer CTA **
-
-const DarkThemeFooterCTATemplate = args => { return html `<ptc-hero
-	bg-url=${args.bgUrl}
-	content-alignment=${args.contentAlignment}
-	hero-type=${args.heroType}
->
-  <div class="ptc-container has-p-lg">
-    <div class="u-hero-width u-margin-center is-col-12 is-grid has-row-gap-sm u-align-center">
-      <ptc-span class="is-col-12" span-style="plm-hub-style" display="block" exportparts="part-ptc-span">Featured
-        Video</ptc-span>
-      <ptc-title class="is-col-12" type="h2" upperline="no-upperline" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8">Making
-        Industrial
-        Innovation a
-        Reality</ptc-title>
-      <ptc-para class="is-col-12" font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
-        para-line-h="line-height-19">
-        See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation for
-        their customers.
-      </ptc-para>
-      <ptc-link class="has-m-top is-col-12 u" href="https://www.ptc.com" target="_blank" link-title="PTC" theme="d-green-underline">Watch
-        Now
-      </ptc-link>
-    </div>
-  </div>
-</ptc-hero>`;}
-
-export const DarkThemeFooterCTA = DarkThemeFooterCTATemplate.bind({});
-
-DarkThemeFooterCTA.args = {
-  bgUrl: 'https://s7d1.scene7.com/is/image/ptcinc/slts-access-real-time-data-service-compliance',
-  contentAlignment: undefined,
-  heroType: 'footer-cta'
-}
+</ptc-hero>`;
+};
+export const Example = Template.bind({});
+Example.args = { heroType: '', bgUrl: 'undefined', contentAlignment: '' };

package/dist/collection/stories/HeroFooterCTA.stories.js

@@ -0,0 +1,21 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-hero-footer-cta',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    cta: {
+      description: 'Slot: cta',
+      control: 'text',
+      table: { category: 'slots' }
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-hero-footer-cta
+>
+	<span slot="cta">${args.cta}</span>
+</ptc-hero-footer-cta>`;
+};
+export const Example = Template.bind({});
+Example.args = { cta: 'Lorem for cta' };

package/dist/collection/stories/ListItem.stories.js

@@ -5,56 +5,30 @@ export default {
   tags: [ 'autodocs' ],
   argTypes: {
     color: {
+      description: ' Theme color',
+      defaultValue: { summary: '' },
       control: 'select',
-      options: ['white', 'primary-gray', 'light-gray'],
-      description: 'Theme color',
-      defaultValue: { summary: 'undefined' }
+      options: [ 'white', 'primary-gray', 'light-gray' ]
     },
-    flushBefore: {
-      control: 'boolean',
-      description: '',
-      defaultValue: { summary: 'false' }
+    styles: {
+      description: ' (optional) Injected CSS styles ',
+      defaultValue: { summary: '' },
+      control: 'text'
     },
-    linkHref: {
+    default: {
+      description: 'Default slot content',
       control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
-    },
-    linkTarget: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: '_self' }
-    },
-    listType: {
-      control: 'select',
-      options: ["breadcrumb", "list-footer", "list-primary", "list-green", "list-underline"],
-      description: '',
-      defaultValue: { summary: 'list-primary' }
-    },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS styles',
-    //   defaultValue: { summary: 'undefined' }
-    // }
+      table: { category: 'slots' }
+    }
   }
 };
-
-const Template = args => { return html `<list-item
-	color=${args.color}
-	flush-before=${args.flushBefore}
-	link-href=${args.linkHref}
-	link-target=${args.linkTarget}
-	list-type=${args.listType}
-	styles=${args.styles}
->List item</list-item>`;}
-
+const Template = (args) => {
+  return html`<list-item
+  color=${args.color}
+  styles=${args.styles}
+>
+  ${args.default}
+</list-item>`;
+};
 export const Example = Template.bind({});
-
-Example.args = {
-  color: 'primary-gray',
-  flushBefore: 'false',
-  linkHref: 'https://www.ptc.com/',
-  linkTarget: '_blank',
-  listType: 'list-primary',
-  // styles: 'undefined'
-}
+Example.args = { color: '', styles: '', default: 'Lorem ipsum text' };

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

package/dist/collection/stories/Span.stories.js

@@ -1,57 +1,51 @@
 import { html } from 'lit';
 
 export default {
-    title: "Atoms/ptc-span",
-    tags: [
-      "autodocs"
-    ],
-    argTypes: {
-        display: {
-            control: "select",
-            options: ["block", "inline", "inline-block"],
-            description: "Display",
-            defaultValue: {
-                summary: "inline"
-            }
-        },
-        fontWeight: {
-            control: "select",
-            options: ["w-3", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9"],
-            description: "Span weight",
-            defaultValue: {
-                summary: "w-4"
-            }
-        },
-        spanStyle: {
-            control: "select",
-            options: ['link-style', 'tag-style', 'nav-style', 'plm-hub-style', 'plm-hub-style-smaller', 'blog-tag'],
-            description: "Span Style",
-            defaultValue: {
-                summary: "tag-style"
-            }
-        },
-        // styles: {
-        //     control: "",
-        //     description: "Injected Styles",
-        //     defaultValue: {
-        //         summary: "undefined"
-        //     }
-        // }
+  title: 'Atoms/ptc-span',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    display: {
+      description: "Display",
+      defaultValue: { summary: 'inline' },
+      control: 'select',
+      options: [ 'block', 'inline-block', 'inline' ]
+    },
+    fontWeight: {
+      description: ' Span weight',
+      defaultValue: { summary: 'w-4' },
+      control: 'select',
+      options: [
+        'w-3', 'w-4',
+        'w-5', 'w-6',
+        'w-7', 'w-8',
+        'w-9'
+      ]
+    },
+    styles: {
+      description: ' Injected Styles',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
     }
-}
-
-const Template = args => { 
-    return html `<ptc-span
-        display=${args.display}
-        font-weight=${args.fontWeight}
-        span-style=${args.spanStyle} 
-    >Example</ptc-span>`;
-}
-
+  }
+};
+const Template = (args) => {
+  return html`<ptc-span
+    display=${args.display}
+    fontWeight=${args.fontWeight}
+    styles=${args.styles}
+>
+    ${args.default}
+</ptc-span>`;
+};
 export const Example = Template.bind({});
 Example.args = {
-    display: "inline",
-    fontWeight: "w-4",
-    spanStyle: "tag-style",
-    // styles: "undefined",
-}
+  display: 'inline',
+  fontWeight: 'w-4',
+  styles: '',
+  default: 'Lorem ipsum text'
+};

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: '' };