@ptcwebops/ptcw-design 2.2.9 → 2.3.2

package/dist/collection/stories/Pagination.stories.js

@@ -1,102 +1,102 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-pagenation',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    // appendArray: { control: '', description: '', defaultValue: { summary: 'true' } },
-    clickedPageNumber: { 
-      control: 'number', 
-      description: 'Initially selected page number', 
-      defaultValue: { summary: 1 } 
-    },
-    lastValue: {
-      control: 'text',
-      description: 'Label for "next" button',
-      defaultValue: { summary: "Next" }
-    },
-    // maxPageNumber: { control: '', description: '', defaultValue: { summary: '4' } },
-    // minPageNumber: { control: '', description: '', defaultValue: { summary: '1' } },
-    nextArrowImg: {
-      control: 'text',
-      description: 'Image for "next" button',
-      // defaultValue: { summary: "'/dist/ptc/images/sidescroll-right-curved.svg'" }
-      defaultValue: { summary: "//www.ptc.com/dist/ptc/images/sidescroll-right-curved.svg" }
-    },
-    numberOfItems: { 
-      control: 'number', 
-      description: 'Number of items per page', 
-      defaultValue: { summary: "undefined" } 
-    },
-    prevArrowImg: {
-      control: 'text',
-      description: 'Image for "previous" button',
-      // defaultValue: { summary: "'/dist/ptc/images/sidescroll-left-curved.svg'" }
-      defaultValue: { summary: "//www.ptc.com/dist/ptc/images/sidescroll-left-curved.svg" }
-    },
-    previousValue: {
-      control: 'text',
-      description: 'Label for "previous" button',
-      defaultValue: { summary: "Previous" }
-    },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS styles',
-    //   defaultValue: { summary: 'undefined' }
-    // },
-    theme: {
-      control: 'select',
-      options: ['events', 'standard'],
-      description: 'Pagination theme',
-      defaultValue: { summary: 'events' }
-    },
-    totalCount: {
-      control: 'number',
-      description: 'Total number of items',
-      defaultValue: { summary: 'undefined' }
-    }
-  }
-};
-
-// const Template = args => { return html `<ptc-pagenation
-// 	append-array=${args.appendArray}
-// 	clicked-page-number=${args.clickedPageNumber}
-// 	last-value=${args.lastValue}
-// 	max-page-number=${args.maxPageNumber}
-// 	min-page-number=${args.minPageNumber}
-// 	next-arrow-img=${args.nextArrowImg}
-// 	number-of-items=${args.numberOfItems}
-// 	prev-arrow-img=${args.prevArrowImg}
-// 	previous-value=${args.previousValue}
-// 	styles=${args.styles}
-// 	theme=${args.theme}
-// 	total-count=${args.totalCount}
-// ></ptc-pagenation>`;}
-
-const Template = args => { return html `<ptc-pagenation 
-  clicked-page-number=${args.clickedPageNumber}
-  last-value=${args.lastValue}
-  next-arrow-img=${args.prevArrowImg} 
-  number-of-items=${args.numberOfItems}
-  prev-arrow-img=${args.nextArrowImg} 
-  previous-value=${args.previousValue}
-  theme=${args.theme}
-  total-count=${args.totalCount} 
-></ptc-pagenation>`}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  // appendArray: 'true',
-  clickedPageNumber: 1,
-  lastValue: "Next",
-  // maxPageNumber: '4',
-  // minPageNumber: '1',
-  nextArrowImg: "//www.ptc.com/dist/ptc/images/sidescroll-right-curved.svg",
-  numberOfItems: 9,
-  prevArrowImg: "//www.ptc.com/dist/ptc/images/sidescroll-left-curved.svg",
-  previousValue: "Previous",
-  // styles: 'undefined',
-  theme: 'events',
-  totalCount: 45
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-pagenation',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    // appendArray: { control: '', description: '', defaultValue: { summary: 'true' } },
+    clickedPageNumber: { 
+      control: 'number', 
+      description: 'Initially selected page number', 
+      defaultValue: { summary: 1 } 
+    },
+    lastValue: {
+      control: 'text',
+      description: 'Label for "next" button',
+      defaultValue: { summary: "Next" }
+    },
+    // maxPageNumber: { control: '', description: '', defaultValue: { summary: '4' } },
+    // minPageNumber: { control: '', description: '', defaultValue: { summary: '1' } },
+    nextArrowImg: {
+      control: 'text',
+      description: 'Image for "next" button',
+      // defaultValue: { summary: "'/dist/ptc/images/sidescroll-right-curved.svg'" }
+      defaultValue: { summary: "//www.ptc.com/dist/ptc/images/sidescroll-right-curved.svg" }
+    },
+    numberOfItems: { 
+      control: 'number', 
+      description: 'Number of items per page', 
+      defaultValue: { summary: "undefined" } 
+    },
+    prevArrowImg: {
+      control: 'text',
+      description: 'Image for "previous" button',
+      // defaultValue: { summary: "'/dist/ptc/images/sidescroll-left-curved.svg'" }
+      defaultValue: { summary: "//www.ptc.com/dist/ptc/images/sidescroll-left-curved.svg" }
+    },
+    previousValue: {
+      control: 'text',
+      description: 'Label for "previous" button',
+      defaultValue: { summary: "Previous" }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS styles',
+    //   defaultValue: { summary: 'undefined' }
+    // },
+    theme: {
+      control: 'select',
+      options: ['events', 'standard'],
+      description: 'Pagination theme',
+      defaultValue: { summary: 'events' }
+    },
+    totalCount: {
+      control: 'number',
+      description: 'Total number of items',
+      defaultValue: { summary: 'undefined' }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-pagenation
+// 	append-array=${args.appendArray}
+// 	clicked-page-number=${args.clickedPageNumber}
+// 	last-value=${args.lastValue}
+// 	max-page-number=${args.maxPageNumber}
+// 	min-page-number=${args.minPageNumber}
+// 	next-arrow-img=${args.nextArrowImg}
+// 	number-of-items=${args.numberOfItems}
+// 	prev-arrow-img=${args.prevArrowImg}
+// 	previous-value=${args.previousValue}
+// 	styles=${args.styles}
+// 	theme=${args.theme}
+// 	total-count=${args.totalCount}
+// ></ptc-pagenation>`;}
+
+const Template = args => { return html `<ptc-pagenation 
+  clicked-page-number=${args.clickedPageNumber}
+  last-value=${args.lastValue}
+  next-arrow-img=${args.prevArrowImg} 
+  number-of-items=${args.numberOfItems}
+  prev-arrow-img=${args.nextArrowImg} 
+  previous-value=${args.previousValue}
+  theme=${args.theme}
+  total-count=${args.totalCount} 
+></ptc-pagenation>`}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  // appendArray: 'true',
+  clickedPageNumber: 1,
+  lastValue: "Next",
+  // maxPageNumber: '4',
+  // minPageNumber: '1',
+  nextArrowImg: "//www.ptc.com/dist/ptc/images/sidescroll-right-curved.svg",
+  numberOfItems: 9,
+  prevArrowImg: "//www.ptc.com/dist/ptc/images/sidescroll-left-curved.svg",
+  previousValue: "Previous",
+  // styles: 'undefined',
+  theme: 'events',
+  totalCount: 45
 }

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

@@ -1,96 +1,96 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Atoms/ptc-para',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    ellipsisLineCutoff: {
-      control: 'number',
-      description: 'Line number to cut text off at and add ellipsis',
-      defaultValue: { summary: 'undefined' }
-    },
-    fontSize: {
-      control: 'select',
-      options: ["large", "medium", "small", "x-large", "x-small", "xx-large", "xx-small", "xxx-large", "xxx-small", "xxxx-large"],
-      description: 'Paragraph font size',
-      defaultValue: { summary: 'x-small' }
-    },
-    fontWeight: {
-      control: 'select',
-      options: ["w-3", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9"],
-      description: 'Paragraph font weight',
-      defaultValue: { summary: 'w-4' }
-    },
-    paraAlign: {
-      control: 'select',
-      options: ["center", "justify", "left", "right"],
-      description: 'Para text Alignment',
-      defaultValue: { summary: 'undefined' }
-    },
-    paraColor: {
-      control: 'select',
-      options: ["primary-grey", "white"],
-      description: 'Paragraph Color',
-      defaultValue: { summary: 'primary-grey' }
-    },
-    paraLineH: {
-      control: 'select',
-      options: ["line-height-dense", "line-height-denser", "line-height-densest", "line-height-loose", "line-height-looser", "line-height-normal", "line-height-p"],
-      description: 'line height',
-      defaultValue: { summary: 'line-height-normal' }
-    },
-    paraMargin: {
-      control: 'select',
-      options: ["margin-1", "margin-2", "margin-3", "margin-4", "margin-5", "margin-6", "margin-bottom-1", "margin-bottom-2", "margin-bottom-3", "margin-bottom-4", "margin-bottom-5", "margin-bottom-6", "margin-flush", "margin-top-2", "margin-top-3", "margin-top-4", "margin-top-5", "margin-top-6", "maring-top-1"],
-      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' }
-    },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS Styles',
-    //   defaultValue: { summary: 'undefined' }
-    // }
-  }
-};
-
-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}
-	font-size=${args.fontSize}
-	font-weight=${args.fontWeight}
-	para-align=${args.paraAlign}
-	para-color=${args.paraColor}
-	para-line-h=${args.paraLineH}
-	para-margin=${args.paraMargin}
-	para-style=${args.paraStyle}
-	para-z-index=${args.paraZIndex}
-	styles=${args.styles}
->${paragraphContent}</ptc-para>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  ellipsisLineCutoff: '2',
-  fontSize: 'small',
-  fontWeight: 'w-5',
-  paraAlign: 'justify',
-  paraColor: 'primary-grey',
-  paraLineH: 'line-height-normal',
-  paraMargin: 'margin-5',
-  // paraStyle: 'default',
-  paraZIndex: 'z-1',
-  // styles: 'undefined'
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-para',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    ellipsisLineCutoff: {
+      control: 'number',
+      description: 'Line number to cut text off at and add ellipsis',
+      defaultValue: { summary: 'undefined' }
+    },
+    fontSize: {
+      control: 'select',
+      options: ["large", "medium", "small", "x-large", "x-small", "xx-large", "xx-small", "xxx-large", "xxx-small", "xxxx-large"],
+      description: 'Paragraph font size',
+      defaultValue: { summary: 'x-small' }
+    },
+    fontWeight: {
+      control: 'select',
+      options: ["w-3", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9"],
+      description: 'Paragraph font weight',
+      defaultValue: { summary: 'w-4' }
+    },
+    paraAlign: {
+      control: 'select',
+      options: ["center", "justify", "left", "right"],
+      description: 'Para text Alignment',
+      defaultValue: { summary: 'undefined' }
+    },
+    paraColor: {
+      control: 'select',
+      options: ["primary-grey", "white"],
+      description: 'Paragraph Color',
+      defaultValue: { summary: 'primary-grey' }
+    },
+    paraLineH: {
+      control: 'select',
+      options: ["line-height-dense", "line-height-denser", "line-height-densest", "line-height-loose", "line-height-looser", "line-height-normal", "line-height-p"],
+      description: 'line height',
+      defaultValue: { summary: 'line-height-normal' }
+    },
+    paraMargin: {
+      control: 'select',
+      options: ["margin-1", "margin-2", "margin-3", "margin-4", "margin-5", "margin-6", "margin-bottom-1", "margin-bottom-2", "margin-bottom-3", "margin-bottom-4", "margin-bottom-5", "margin-bottom-6", "margin-flush", "margin-top-2", "margin-top-3", "margin-top-4", "margin-top-5", "margin-top-6", "maring-top-1"],
+      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' }
+    },
+    // styles: {
+    //   control: '',
+    //   description: '(optional) Injected CSS Styles',
+    //   defaultValue: { summary: 'undefined' }
+    // }
+  }
+};
+
+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}
+	font-size=${args.fontSize}
+	font-weight=${args.fontWeight}
+	para-align=${args.paraAlign}
+	para-color=${args.paraColor}
+	para-line-h=${args.paraLineH}
+	para-margin=${args.paraMargin}
+	para-style=${args.paraStyle}
+	para-z-index=${args.paraZIndex}
+	styles=${args.styles}
+>${paragraphContent}</ptc-para>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  ellipsisLineCutoff: '2',
+  fontSize: 'small',
+  fontWeight: 'w-5',
+  paraAlign: 'justify',
+  paraColor: 'primary-grey',
+  paraLineH: 'line-height-normal',
+  paraMargin: 'margin-5',
+  // paraStyle: 'default',
+  paraZIndex: 'z-1',
+  // styles: 'undefined'
 }