@ptcwebops/ptcw-design 1.8.8 → 1.9.0

package/dist/collection/stories/Announcement.stories.js

@@ -1,65 +1,65 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-announcement',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    barTitle: {
-      control: 'text',
-      description: 'bar title',
-      defaultValue: { summary: '' }
-    },
-    description: {
-      control: 'text',
-      description: 'bar description',
-      defaultValue: { summary: '' }
-    },
-    linkText: {
-      control: 'text',
-      description: 'link Text',
-      defaultValue: { summary: 'undefined' }
-    },
-    linkTitle: {
-      control: 'text',
-      description: 'link Title, will use Text if blank',
-      defaultValue: { summary: 'undefined' }
-    },
-    linkUrl: {
-      control: 'text',
-      description: 'Link Url',
-      defaultValue: { summary: '#' }
-    },
-    target: {
-      control: 'text',
-      description: 'Target',
-      defaultValue: { summary: '_self' }
-    },
-    visible: {
-      control: 'boolean',
-      description: 'Mutable Visibility',
-      defaultValue: { summary: false }
-    },
-  }
-};
-
-const Template = args => { return html `<ptc-announcement
-	bar-title=${args.barTitle}
-	description=${args.description}
-	link-text=${args.linkText}
-	link-title=${args.linkTitle}
-	link-url=${args.linkUrl}
-	target=${args.target}
-	visible=${args.visible}
-></ptc-announcement>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  barTitle: 'Title 50 characters Lorem Ipsum',
-  description: 'Description 80 characters lorem ipsum dolor sit amet consecutor',
-  linkText: 'CTA Action 25 characters',
-  linkTitle: 'Text on hover',
-  linkUrl: 'http://www.ptc.com',
-  target: '_blank',
-  visible: true,
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-announcement',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    barTitle: {
+      control: 'text',
+      description: 'bar title',
+      defaultValue: { summary: '' }
+    },
+    description: {
+      control: 'text',
+      description: 'bar description',
+      defaultValue: { summary: '' }
+    },
+    linkText: {
+      control: 'text',
+      description: 'link Text',
+      defaultValue: { summary: 'undefined' }
+    },
+    linkTitle: {
+      control: 'text',
+      description: 'link Title, will use Text if blank',
+      defaultValue: { summary: 'undefined' }
+    },
+    linkUrl: {
+      control: 'text',
+      description: 'Link Url',
+      defaultValue: { summary: '#' }
+    },
+    target: {
+      control: 'text',
+      description: 'Target',
+      defaultValue: { summary: '_self' }
+    },
+    visible: {
+      control: 'boolean',
+      description: 'Mutable Visibility',
+      defaultValue: { summary: false }
+    },
+  }
+};
+
+const Template = args => { return html `<ptc-announcement
+	bar-title=${args.barTitle}
+	description=${args.description}
+	link-text=${args.linkText}
+	link-title=${args.linkTitle}
+	link-url=${args.linkUrl}
+	target=${args.target}
+	visible=${args.visible}
+></ptc-announcement>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  barTitle: 'Title 50 characters Lorem Ipsum',
+  description: 'Description 80 characters lorem ipsum dolor sit amet consecutor',
+  linkText: 'CTA Action 25 characters',
+  linkTitle: 'Text on hover',
+  linkUrl: 'http://www.ptc.com',
+  target: '_blank',
+  visible: true,
 }

package/dist/collection/stories/BackgroundImage.stories.js

@@ -1,82 +1,82 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-img',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    borderRadius: {
-      control: 'select',
-      options: ["", "radius-lg", "radius-standard", "radius-sm"],
-      description: 'Image border shape',
-      defaultValue: { summary: '' }
-    },
-    imageType: {
-      control: 'select',
-      options: ["smart-bg", "smart-img"],
-      description: 'Image type',
-      defaultValue: { summary: 'smart-bg' }
-    },
-    imgUrl: {
-      control: 'text',
-      description: 'Image Src',
-      defaultValue: { summary: 'undefined' }
-    },
-    loadMode: {
-      control: 'select',
-      options: ["eager-bg", "lazy-bg"],
-      description: 'Lazy loading option',
-      defaultValue: { summary: 'lazy-bg' }
-    },
-    sizeLg: {
-      control: 'text',
-      description: 'Image solution for large screen >=1200px',
-      defaultValue: { summary: '1920x1080' }
-    },
-    sizeMd: {
-      control: 'text',
-      description: 'Image size for medium screen >=992px and <=1199px',
-      defaultValue: { summary: '1366x500' }
-    },
-    sizeSm: {
-      control: 'text',
-      description: 'Image size for small screen >=768px and <=991px',
-      defaultValue: { summary: '1240x496' }
-    },
-    sizeXs: {
-      control: 'text',
-      description: 'Image size for smallest screen <=767px',
-      defaultValue: { summary: '510x340' }
-    },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS styles',
-    //   defaultValue: { summary: 'undefined' }
-    // }
-  }
-};
-
-const Template = args => { return html `<ptc-img
-	border-radius=${args.borderRadius}
-	image-type=${args.imageType}
-	img-url=${args.imgUrl}
-	load-mode=${args.loadMode}
-	size-lg=${args.sizeLg}
-	size-md=${args.sizeMd}
-	size-sm=${args.sizeSm}
-	size-xs=${args.sizeXs}
-	styles=${args.styles}
-></ptc-img>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  borderRadius: 'radius-standard',
-  imageType: 'smart-img',
-  imgUrl: "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway",
-  loadMode: 'lazy-bg',
-  sizeLg: '1920x1080',
-  sizeMd: '1366x500',
-  sizeSm: '1240x496',
-  sizeXs: '510x340',
-  // styles: 'undefined'
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-img',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    borderRadius: {
+      control: 'select',
+      options: ["", "radius-lg", "radius-standard", "radius-sm"],
+      description: 'Image border shape',
+      defaultValue: { summary: '' }
+    },
+    imageType: {
+      control: 'select',
+      options: ["smart-bg", "smart-img"],
+      description: 'Image type',
+      defaultValue: { summary: 'smart-bg' }
+    },
+    imgUrl: {
+      control: 'text',
+      description: 'Image Src',
+      defaultValue: { summary: 'undefined' }
+    },
+    loadMode: {
+      control: 'select',
+      options: ["eager-bg", "lazy-bg"],
+      description: 'Lazy loading option',
+      defaultValue: { summary: 'lazy-bg' }
+    },
+    sizeLg: {
+      control: 'text',
+      description: 'Image solution for large screen &gt;=1200px',
+      defaultValue: { summary: '1920x1080' }
+    },
+    sizeMd: {
+      control: 'text',
+      description: 'Image size for medium screen &gt;=992px and &lt;=1199px',
+      defaultValue: { summary: '1366x500' }
+    },
+    sizeSm: {
+      control: 'text',
+      description: 'Image size for small screen &gt;=768px and &lt;=991px',
+      defaultValue: { summary: '1240x496' }
+    },
+    sizeXs: {
+      control: 'text',
+      description: 'Image size for smallest screen &lt;=767px',
+      defaultValue: { summary: '510x340' }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // }
+  }
+};
+
+const Template = args => { return html `<ptc-img
+	border-radius=${args.borderRadius}
+	image-type=${args.imageType}
+	img-url=${args.imgUrl}
+	load-mode=${args.loadMode}
+	size-lg=${args.sizeLg}
+	size-md=${args.sizeMd}
+	size-sm=${args.sizeSm}
+	size-xs=${args.sizeXs}
+	styles=${args.styles}
+></ptc-img>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  borderRadius: 'radius-standard',
+  imageType: 'smart-img',
+  imgUrl: "http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway",
+  loadMode: 'lazy-bg',
+  sizeLg: '1920x1080',
+  sizeMd: '1366x500',
+  sizeSm: '1240x496',
+  sizeXs: '510x340',
+  // styles: 'undefined'
 }

package/dist/collection/stories/Breadcrumb.stories.js

@@ -1,51 +1,51 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-breadcrumb',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    // color: {
-    //   control: 'select',
-    //   options: ['black', 'white', 'ptc-green', 'gray', 'light-gray', 'primary-gray', 'default', 'inherit'],
-    //   description: 'Theme Color',
-    //   defaultValue: { summary: 'white' }
-    // },
-    position: {
-      control: 'select',
-      options: ['left', 'center', 'right'],    
-      description: 'breadcrumb position',
-      defaultValue: { summary: 'undefined' }
-    },
-    removeTopMargin: {
-      control: 'boolean',
-      description: 'remove topMargin',
-      defaultValue: { summary: 'false' }
-    },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS styles',
-    //   defaultValue: { summary: 'undefined' }
-    // }
-  }
-};
-
-const Template = args => { return html `<div class="demo-with-bgcolor">
-  <ptc-breadcrumb
-    color=${args.color}
-    position=${args.position}
-    remove-top-margin=${args.removeTopMargin}
-    styles=${args.styles}
-  >
-    <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us">PLM Video Hub</list-item>
-    <list-item list-type="breadcrumb">Current Page</list-item>
-  </ptc-breadcrumb>
-</div>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  // color: 'white',
-  position: 'undefined',
-  removeTopMargin: 'false',
-  // styles: 'undefined'
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-breadcrumb',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    // color: {
+    //   control: 'select',
+    //   options: ['black', 'white', 'ptc-green', 'gray', 'light-gray', 'primary-gray', 'default', 'inherit'],
+    //   description: 'Theme Color',
+    //   defaultValue: { summary: 'white' }
+    // },
+    position: {
+      control: 'select',
+      options: ['left', 'center', 'right'],    
+      description: 'breadcrumb position',
+      defaultValue: { summary: 'undefined' }
+    },
+    removeTopMargin: {
+      control: 'boolean',
+      description: 'remove topMargin',
+      defaultValue: { summary: 'false' }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // }
+  }
+};
+
+const Template = args => { return html `<div class="demo-with-bgcolor">
+  <ptc-breadcrumb
+    color=${args.color}
+    position=${args.position}
+    remove-top-margin=${args.removeTopMargin}
+    styles=${args.styles}
+  >
+    <list-item list-type="breadcrumb" link-href="https://www.ptc.com/contact-us">PLM Video Hub</list-item>
+    <list-item list-type="breadcrumb">Current Page</list-item>
+  </ptc-breadcrumb>
+</div>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  // color: 'white',
+  position: 'undefined',
+  removeTopMargin: 'false',
+  // styles: 'undefined'
 }

package/dist/collection/stories/Button.stories.js

@@ -1,43 +1,43 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-button',
-  tags: ['autodocs'],
-
-  argTypes: {
-    color: {
-      control: { type: 'select' },
-      options: ['ptc-primary', 'ptc-secondary', 'ptc-tertiary', 'ptc-quaternary'],
-      description: 'Theme of the button',
-      defaultValue: { summary: 'ptc-primary' },
-    },
-    //by default, the control is 'text'
-    target: {
-      control: 'text',
-      description: 'Link target',
-      defaultValue: { summary: '_self' },
-    },
-    type: {
-      description: 'We support button or link now',
-      control: { type: 'select' },
-      options: ['button', 'reset', 'submit', 'link'],
-      defaultValue: { summary: 'button' },
-    },
-    linkHref: {
-      description: 'Link URL',
-    },
-  },
-};
-
-const Template = args => {
-  return html`<ptc-button type="${args.type}" color="${args.color}" link-href="${args.linkHref}" target="${args.target}">Request Free Trial </ptc-button>`;
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  type: 'link',
-  color: 'ptc-primary',
-  linkHref: 'https://www.ptc.com',
-  target: '_blank',
-};
-
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-button',
+  tags: ['autodocs'],
+
+  argTypes: {
+    color: {
+      control: { type: 'select' },
+      options: ['ptc-primary', 'ptc-secondary', 'ptc-tertiary', 'ptc-quaternary'],
+      description: 'Theme of the button',
+      defaultValue: { summary: 'ptc-primary' },
+    },
+    //by default, the control is 'text'
+    target: {
+      control: 'text',
+      description: 'Link target',
+      defaultValue: { summary: '_self' },
+    },
+    type: {
+      description: 'We support button or link now',
+      control: { type: 'select' },
+      options: ['button', 'reset', 'submit', 'link'],
+      defaultValue: { summary: 'button' },
+    },
+    linkHref: {
+      description: 'Link URL',
+    },
+  },
+};
+
+const Template = args => {
+  return html`<ptc-button type="${args.type}" color="${args.color}" link-href="${args.linkHref}" target="${args.target}">Request Free Trial </ptc-button>`;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  type: 'link',
+  color: 'ptc-primary',
+  linkHref: 'https://www.ptc.com',
+  target: '_blank',
+};
+