@ptcwebops/ptcw-design 1.9.7 → 2.0.0

package/dist/collection/stories/Picture.stories.js

@@ -1,140 +1,140 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-picture',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    alt: {
-      control: 'text',
-      description: 'Image alt',
-      defaultValue: { summary: 'image' }
-    },
-    borderRadius: {
-      control: 'select',
-      options: ["radius-large", "radius-standard"],
-      description: 'Image border shape',
-      defaultValue: { summary: 'undefined' }
-    },
-    displayImage: {
-      control: 'select',
-      options: ["inline", "inline-block", "block"],
-      description: 'Display image: inline, inline-block, block',
-      defaultValue: { summary: 'block' }
-    },
-    height: {
-      control: 'number',
-      description: 'Set height Value unit: pixles Just put numbers without unit',
-      defaultValue: { summary: 'undefined' }
-    },
-    imageAlignment: {
-      control: 'select',
-      options: ["center", "left", "right"],
-      description: '(optional) Image alignment',
-      defaultValue: { summary: 'left' }
-    },
-    imagePosition: {
-      control: 'select',
-      options: ["absolute", "relative", "static"],
-      description: 'Image Position',
-      defaultValue: { summary: 'static' }
-    },
-    isFullHeight: {
-      control: 'boolean',
-      description: 'Stretch height to 100%?',
-      defaultValue: { summary: 'false' }
-    },
-    isFullWidth: {
-      control: 'boolean',
-      description: 'Stretch width to 100%?',
-      defaultValue: { summary: 'false' }
-    },
-    maxWidth: {
-      control: 'number',
-      description: '(optional) Set max-width value unit: pixles Just put numbers without unit',
-      defaultValue: { summary: 'undefined' }
-    },
-    objectFit: {
-      control: 'select',
-      options: ["contain", "cover", "fill", "inherit", "initial", "none", "scale-down"],
-      description: 'Object Fit Default: cover',
-      defaultValue: { summary: 'cover' }
-    },
-    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' }
-    },
-    src: {
-      control: 'text',
-      description: 'Image Render Src',
-      defaultValue: { summary: 'undefined' }
-    },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS styles',
-    //   defaultValue: { summary: 'undefined' }
-    // },
-    width: {
-      control: 'number',
-      description: 'Set Width value unit: pixles Just put numbers without unit',
-      defaultValue: { summary: 'undefined' }
-    }
-  }
-};
-
-const Template = args => { return html `<ptc-picture
-	alt=${args.alt}
-	border-radius=${args.borderRadius}
-	display-image=${args.displayImage}
-	height=${args.height}
-	image-alignment=${args.imageAlignment}
-	image-position=${args.imagePosition}
-	is-full-height=${args.isFullHeight}
-	is-full-width=${args.isFullWidth}
-	max-width=${args.maxWidth}
-	object-fit=${args.objectFit}
-	size-lg=${args.sizeLg}
-	size-md=${args.sizeMd}
-	size-sm=${args.sizeSm}
-	size-xs=${args.sizeXs}
-	src=${args.src}
-	styles=${args.styles}
-	width=${args.width}
-></ptc-picture>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  alt: 'image',
-  borderRadius: 'radius-large',
-  displayImage: 'inline',
-  height: 300,
-  imageAlignment: 'center',
-  imagePosition: 'relative',
-  isFullHeight: 'false',
-  isFullWidth: 'false',
-  maxWidth: 'undefined',
-  objectFit: 'cover',
-  sizeLg: '1920x1080',
-  sizeMd: '1366x500',
-  sizeSm: '1240x496',
-  sizeXs: '510x340',
-  src: 'https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data',
-  //styles: 'undefined',
-  width: 500
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-picture',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    alt: {
+      control: 'text',
+      description: 'Image alt',
+      defaultValue: { summary: 'image' }
+    },
+    borderRadius: {
+      control: 'select',
+      options: ["radius-large", "radius-standard"],
+      description: 'Image border shape',
+      defaultValue: { summary: 'undefined' }
+    },
+    displayImage: {
+      control: 'select',
+      options: ["inline", "inline-block", "block"],
+      description: 'Display image: inline, inline-block, block',
+      defaultValue: { summary: 'block' }
+    },
+    height: {
+      control: 'number',
+      description: 'Set height Value unit: pixles Just put numbers without unit',
+      defaultValue: { summary: 'undefined' }
+    },
+    imageAlignment: {
+      control: 'select',
+      options: ["center", "left", "right"],
+      description: '(optional) Image alignment',
+      defaultValue: { summary: 'left' }
+    },
+    imagePosition: {
+      control: 'select',
+      options: ["absolute", "relative", "static"],
+      description: 'Image Position',
+      defaultValue: { summary: 'static' }
+    },
+    isFullHeight: {
+      control: 'boolean',
+      description: 'Stretch height to 100%?',
+      defaultValue: { summary: 'false' }
+    },
+    isFullWidth: {
+      control: 'boolean',
+      description: 'Stretch width to 100%?',
+      defaultValue: { summary: 'false' }
+    },
+    maxWidth: {
+      control: 'number',
+      description: '(optional) Set max-width value unit: pixles Just put numbers without unit',
+      defaultValue: { summary: 'undefined' }
+    },
+    objectFit: {
+      control: 'select',
+      options: ["contain", "cover", "fill", "inherit", "initial", "none", "scale-down"],
+      description: 'Object Fit Default: cover',
+      defaultValue: { summary: 'cover' }
+    },
+    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' }
+    },
+    src: {
+      control: 'text',
+      description: 'Image Render Src',
+      defaultValue: { summary: 'undefined' }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // },
+    width: {
+      control: 'number',
+      description: 'Set Width value unit: pixles Just put numbers without unit',
+      defaultValue: { summary: 'undefined' }
+    }
+  }
+};
+
+const Template = args => { return html `<ptc-picture
+	alt=${args.alt}
+	border-radius=${args.borderRadius}
+	display-image=${args.displayImage}
+	height=${args.height}
+	image-alignment=${args.imageAlignment}
+	image-position=${args.imagePosition}
+	is-full-height=${args.isFullHeight}
+	is-full-width=${args.isFullWidth}
+	max-width=${args.maxWidth}
+	object-fit=${args.objectFit}
+	size-lg=${args.sizeLg}
+	size-md=${args.sizeMd}
+	size-sm=${args.sizeSm}
+	size-xs=${args.sizeXs}
+	src=${args.src}
+	styles=${args.styles}
+	width=${args.width}
+></ptc-picture>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  alt: 'image',
+  borderRadius: 'radius-large',
+  displayImage: 'inline',
+  height: 300,
+  imageAlignment: 'center',
+  imagePosition: 'relative',
+  isFullHeight: 'false',
+  isFullWidth: 'false',
+  maxWidth: 'undefined',
+  objectFit: 'cover',
+  sizeLg: '1920x1080',
+  sizeMd: '1366x500',
+  sizeSm: '1240x496',
+  sizeXs: '510x340',
+  src: 'https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data',
+  //styles: 'undefined',
+  width: 500
 }

package/dist/collection/stories/Quote.stories.js

@@ -1,107 +1,107 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-quote',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    ctaText: {
-      control: 'text',
-      description: 'Button CTA Text',
-      defaultValue: { summary: 'undefined' }
-    },
-    ctaUrl: {
-      control: 'text',
-      description: 'CTA Url',
-      defaultValue: { summary: 'undefined' }
-    },
-    imgSrc: {
-      control: 'text',
-      description: 'Image Src',
-      defaultValue: { summary: 'undefined' }
-    },
-    imgTitle: {
-      control: 'text',
-      description: 'Image Title',
-      defaultValue: { summary: 'undefined' }
-    },
-    quoteName: {
-      control: 'text',
-      description: 'Quote Name',
-      defaultValue: { summary: 'John Smith' }
-    },
-    quoteType: {
-      control: 'select',
-      options: ["image-quote", "plain-quote"],
-      description: 'Quote Type',
-      defaultValue: { summary: "'image-quote'" }
-    }
-  }
-};
-
-// const Template = args => { return html `<ptc-quote
-// 	cta-text=${args.ctaText}
-// 	cta-url=${args.ctaUrl}
-// 	img-src=${args.imgSrc}
-// 	img-title=${args.imgTitle}
-// 	quote-name=${args.quoteName}
-// 	quote-type=${args.quoteType}
-// ></ptc-quote>`;}
-
-// export const Example = Template.bind({});
-
-// Example.args = {
-//   ctaText: 'undefined',
-//   ctaUrl: 'undefined',
-//   imgSrc: 'undefined',
-//   imgTitle: 'undefined',
-//   quoteName: 'John Smith',
-//   quoteType: "'image-quote'"
-// }
-
-// ** Image Quote **
-
-const ImageQuoteTemplate = args => { return html `<ptc-quote
-	cta-text=${args.ctaText}
-	cta-url=${args.ctaUrl}
-	img-src=${args.imgSrc}
-	img-title=${args.imgTitle}
-	quote-name=${args.quoteName}
-	quote-type=${args.quoteType}
->
-Quote ~25-40 words recommended Tortor posuere ac ut consequat semper viverra. Mattis pellentesque id nibh tortor id aliquet.
-</ptc-quote>`;}
-
-export const ImageQuote = ImageQuoteTemplate.bind({});
-
-ImageQuote.args = {
-  ctaText: 'Button CTA',
-  ctaUrl: 'https://www.ptc.com',
-  imgSrc: 'https://via.placeholder.com/750x500',
-  imgTitle: 'Image Title ~20 characters',
-  quoteName: 'John Smith',
-  quoteType: "image-quote"
-}
-
-// ** Plain Quote **
-
-const PlainQuoteTemplate = args => { return html `<ptc-quote
-	cta-text=${args.ctaText}
-	cta-url=${args.ctaUrl}
-	img-src=${args.imgSrc}
-	img-title=${args.imgTitle}
-	quote-name=${args.quoteName}
-	quote-type=${args.quoteType}
->
-Customer Quote: 25 - 40 words recommended. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie sapien at purus sollicitudin, quis.
-</ptc-quote>`;}
-
-export const PlainQuote = PlainQuoteTemplate.bind({});
-
-PlainQuote.args = {
-  ctaText: 'Button CTA',
-  ctaUrl: 'https://www.ptc.com',
-  imgSrc: undefined,
-  imgTitle: 'undefined',
-  quoteName: 'John Smith',
-  quoteType: "plain-quote"
-}
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-quote',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    ctaText: {
+      control: 'text',
+      description: 'Button CTA Text',
+      defaultValue: { summary: 'undefined' }
+    },
+    ctaUrl: {
+      control: 'text',
+      description: 'CTA Url',
+      defaultValue: { summary: 'undefined' }
+    },
+    imgSrc: {
+      control: 'text',
+      description: 'Image Src',
+      defaultValue: { summary: 'undefined' }
+    },
+    imgTitle: {
+      control: 'text',
+      description: 'Image Title',
+      defaultValue: { summary: 'undefined' }
+    },
+    quoteName: {
+      control: 'text',
+      description: 'Quote Name',
+      defaultValue: { summary: 'John Smith' }
+    },
+    quoteType: {
+      control: 'select',
+      options: ["image-quote", "plain-quote"],
+      description: 'Quote Type',
+      defaultValue: { summary: "'image-quote'" }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-quote
+// 	cta-text=${args.ctaText}
+// 	cta-url=${args.ctaUrl}
+// 	img-src=${args.imgSrc}
+// 	img-title=${args.imgTitle}
+// 	quote-name=${args.quoteName}
+// 	quote-type=${args.quoteType}
+// ></ptc-quote>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = {
+//   ctaText: 'undefined',
+//   ctaUrl: 'undefined',
+//   imgSrc: 'undefined',
+//   imgTitle: 'undefined',
+//   quoteName: 'John Smith',
+//   quoteType: "'image-quote'"
+// }
+
+// ** Image Quote **
+
+const ImageQuoteTemplate = args => { return html `<ptc-quote
+	cta-text=${args.ctaText}
+	cta-url=${args.ctaUrl}
+	img-src=${args.imgSrc}
+	img-title=${args.imgTitle}
+	quote-name=${args.quoteName}
+	quote-type=${args.quoteType}
+>
+Quote ~25-40 words recommended Tortor posuere ac ut consequat semper viverra. Mattis pellentesque id nibh tortor id aliquet.
+</ptc-quote>`;}
+
+export const ImageQuote = ImageQuoteTemplate.bind({});
+
+ImageQuote.args = {
+  ctaText: 'Button CTA',
+  ctaUrl: 'https://www.ptc.com',
+  imgSrc: 'https://via.placeholder.com/750x500',
+  imgTitle: 'Image Title ~20 characters',
+  quoteName: 'John Smith',
+  quoteType: "image-quote"
+}
+
+// ** Plain Quote **
+
+const PlainQuoteTemplate = args => { return html `<ptc-quote
+	cta-text=${args.ctaText}
+	cta-url=${args.ctaUrl}
+	img-src=${args.imgSrc}
+	img-title=${args.imgTitle}
+	quote-name=${args.quoteName}
+	quote-type=${args.quoteType}
+>
+Customer Quote: 25 - 40 words recommended. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas molestie sapien at purus sollicitudin, quis.
+</ptc-quote>`;}
+
+export const PlainQuote = PlainQuoteTemplate.bind({});
+
+PlainQuote.args = {
+  ctaText: 'Button CTA',
+  ctaUrl: 'https://www.ptc.com',
+  imgSrc: undefined,
+  imgTitle: 'undefined',
+  quoteName: 'John Smith',
+  quoteType: "plain-quote"
+}