@ptcwebops/ptcw-design 1.9.1 → 1.9.3

package/dist/collection/stories/Date.stories.js

@@ -1,81 +1,81 @@
-import { html } from 'lit';
-
-const getNumberRange = (start, end) => {
-    let numberRange = [];
-    for(let i = start; i <= end; i++) {
-        numberRange.push(i);
-    }
-    return numberRange;
-}
-
-export default {
-    title: 'Atoms/ptc-date',
-    tags: ['autodocs'],
-
-    argTypes: {
-        country: {
-            control: 'select',
-            options: ["en-US", "zh-CN", "zh-TW", "fr-FR", "ja-JP", "ru-RU", "de-DE", "ko-KR", "it-IT", "es-ES"],
-            description: "Country",
-            defaultValue: { summary: "en-US" }
-        },
-        dataSize: {
-            control: 'select',
-            options: ["medium", "small"],
-            description: "Date Font Size",
-            defaultValue: { summary: "small" }
-        },
-        dateColor: {
-            control: 'select',
-            options: ["primary-grey", "white"],
-            description: "Date Color",
-            defaultValue: { summary: "undefined" }
-        },  
-        dateString: {
-            control: 'text',
-            description: "Date examples: 2000-1-1 or 2000/01/01",
-            defaultValue: { summary: "undefined" }
-        },
-        day: {
-            control: 'select', 
-            options: getNumberRange(1, 31),
-            description: "Day",
-            defaultValue: { summary: 1 }
-        },
-        month: {
-            control: 'select', 
-            options: getNumberRange(1, 12),
-            description: "Month",
-            defaultValue: { summary: 1 }
-        },
-        year: {
-            control: 'select', 
-            options: getNumberRange(1900, (new Date).getFullYear()),
-            description: "Year",
-            defaultValue: { summary: 1900 }
-        },
-    }
-}
-
-const Template = args => {
-    return html `<ptc-date 
-        country="${args.country}"
-        data-size="${args.dataSize}"
-        date-color="${args.dateColor}"
-        date-string="${args.dateString}"
-        day="${args.day}"
-        month="${args.month}" 
-        year="${args.year}" 
-    ></ptc-date>`;
-}
-
-export const Example = Template.bind({});
-Example.args = {
-    country: "en-US",
-    dataSize: "small",
-    dateColor: undefined,
-    dateString: undefined,
-    day: 1,
-    month: 1,
-    year: 1900,
-}
+import { html } from 'lit';
+
+const getNumberRange = (start, end) => {
+    let numberRange = [];
+    for(let i = start; i <= end; i++) {
+        numberRange.push(i);
+    }
+    return numberRange;
+}
+
+export default {
+    title: 'Atoms/ptc-date',
+    tags: ['autodocs'],
+
+    argTypes: {
+        country: {
+            control: 'select',
+            options: ["en-US", "zh-CN", "zh-TW", "fr-FR", "ja-JP", "ru-RU", "de-DE", "ko-KR", "it-IT", "es-ES"],
+            description: "Country",
+            defaultValue: { summary: "en-US" }
+        },
+        dataSize: {
+            control: 'select',
+            options: ["medium", "small"],
+            description: "Date Font Size",
+            defaultValue: { summary: "small" }
+        },
+        dateColor: {
+            control: 'select',
+            options: ["primary-grey", "white"],
+            description: "Date Color",
+            defaultValue: { summary: "undefined" }
+        },  
+        dateString: {
+            control: 'text',
+            description: "Date examples: 2000-1-1 or 2000/01/01",
+            defaultValue: { summary: "undefined" }
+        },
+        day: {
+            control: 'select', 
+            options: getNumberRange(1, 31),
+            description: "Day",
+            defaultValue: { summary: 1 }
+        },
+        month: {
+            control: 'select', 
+            options: getNumberRange(1, 12),
+            description: "Month",
+            defaultValue: { summary: 1 }
+        },
+        year: {
+            control: 'select', 
+            options: getNumberRange(1900, (new Date).getFullYear()),
+            description: "Year",
+            defaultValue: { summary: 1900 }
+        },
+    }
+}
+
+const Template = args => {
+    return html `<ptc-date 
+        country="${args.country}"
+        data-size="${args.dataSize}"
+        date-color="${args.dateColor}"
+        date-string="${args.dateString}"
+        day="${args.day}"
+        month="${args.month}" 
+        year="${args.year}" 
+    ></ptc-date>`;
+}
+
+export const Example = Template.bind({});
+Example.args = {
+    country: "en-US",
+    dataSize: "small",
+    dateColor: undefined,
+    dateString: undefined,
+    day: 1,
+    month: 1,
+    year: 1900,
+}

package/dist/collection/stories/Dropdown.stories.js

@@ -1,49 +1,49 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-dropdown',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    label: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
-    },
-    // listItems: {
-    //   control: '',
-    //   description: '',
-    //   defaultValue: { summary: 'undefined' }
-    // },
-    theme: {
-      control: 'select',
-      options: ['sort', 'support'],
-      description: 'Theme',
-      defaultValue: { summary: 'sort' }
-    }
-  }
-};
-
-const Template = args => { return html `
-<div class="is-grid is-centered">
-    <div class="is-col-4 ptc-dropdown-demo">
-      <ptc-dropdown
-        label=${args.label}
-        listItems=${args.listItems}
-        theme=${args.theme}
-      >
-        <item selected label="Name"></item>
-        <item label="Price: Low - High"></item>
-        <item label="Price: High - Low"></item>
-        <item label="Product Type"></item>
-      </ptc-dropdown>
-  </div>
-</div>
-`;}
-
-export const Example = Template.bind({});
-
-Example.args = { 
-  label: 'Sort by:', 
-  // listItems: undefined, 
-  theme: 'sort' 
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-dropdown',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    label: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    },
+    // listItems: {
+    //   control: '',
+    //   description: '',
+    //   defaultValue: { summary: 'undefined' }
+    // },
+    theme: {
+      control: 'select',
+      options: ['sort', 'support'],
+      description: 'Theme',
+      defaultValue: { summary: 'sort' }
+    }
+  }
+};
+
+const Template = args => { return html `
+<div class="is-grid is-centered">
+    <div class="is-col-4 ptc-dropdown-demo">
+      <ptc-dropdown
+        label=${args.label}
+        listItems=${args.listItems}
+        theme=${args.theme}
+      >
+        <item selected label="Name"></item>
+        <item label="Price: Low - High"></item>
+        <item label="Price: High - Low"></item>
+        <item label="Product Type"></item>
+      </ptc-dropdown>
+  </div>
+</div>
+`;}
+
+export const Example = Template.bind({});
+
+Example.args = { 
+  label: 'Sort by:', 
+  // listItems: undefined, 
+  theme: 'sort' 
 }

package/dist/collection/stories/DynamicCard.stories.js

@@ -1,69 +1,69 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-dynamic-card',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    cardImgAlt: {
-      control: 'text',
-      description: 'Card Image Alt',
-      defaultValue: { summary: 'undefined' }
-    },
-    cardImgSrc: {
-      control: 'text',
-      description: 'Card Image Src',
-      defaultValue: { summary: 'undefined' }
-    },
-    cardScreen: {
-      control: 'select',
-      options: ['mobile', 'desktop'],
-      description: 'Card varients',
-      defaultValue: { summary: 'desktop' }
-    },
-    cardTitle: {
-      control: 'text',
-      description: 'Card Title',
-      defaultValue: { summary: 'Card Title Goes Here' }
-    },
-    cardType: {
-      control: 'select',
-      options: ['sequential'],
-      description: 'Dynamic Card Type',
-      defaultValue: { summary: 'sequential' }
-    },
-    isExpanded: {
-      control: 'boolean',
-      description: 'is card expanded?',
-      defaultValue: { summary: false }
-    }
-  }
-};
-
-const Template = args => { return html `<div class="ptc-container is-centered" style="height: 610px;">
-  <ptc-dynamic-card
-    card-img-alt=${args.cardImgAlt}
-    card-img-src=${args.cardImgSrc}
-    card-screen=${args.cardScreen}
-    card-title=${args.cardTitle}
-    card-type=${args.cardType}
-    is-expanded=${args.isExpanded}
-  >
-    <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
-      The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
-    </ptc-para>
-    <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
-    <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
-    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Learn More</ptc-button>
-  </ptc-dynamic-card>
-</div>`;}
-
-export const Example = Template.bind({});
-
-Example.args = {
-  cardImgAlt: 'image-test',
-  cardImgSrc: 'https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data',
-  cardScreen: 'desktop',
-  cardTitle: 'iWarranty Business Update Webinar',
-  cardType: 'sequential',
-  isExpanded: false,
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-dynamic-card',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    cardImgAlt: {
+      control: 'text',
+      description: 'Card Image Alt',
+      defaultValue: { summary: 'undefined' }
+    },
+    cardImgSrc: {
+      control: 'text',
+      description: 'Card Image Src',
+      defaultValue: { summary: 'undefined' }
+    },
+    cardScreen: {
+      control: 'select',
+      options: ['mobile', 'desktop'],
+      description: 'Card varients',
+      defaultValue: { summary: 'desktop' }
+    },
+    cardTitle: {
+      control: 'text',
+      description: 'Card Title',
+      defaultValue: { summary: 'Card Title Goes Here' }
+    },
+    cardType: {
+      control: 'select',
+      options: ['sequential'],
+      description: 'Dynamic Card Type',
+      defaultValue: { summary: 'sequential' }
+    },
+    isExpanded: {
+      control: 'boolean',
+      description: 'is card expanded?',
+      defaultValue: { summary: false }
+    }
+  }
+};
+
+const Template = args => { return html `<div class="ptc-container is-centered" style="height: 610px;">
+  <ptc-dynamic-card
+    card-img-alt=${args.cardImgAlt}
+    card-img-src=${args.cardImgSrc}
+    card-screen=${args.cardScreen}
+    card-title=${args.cardTitle}
+    card-type=${args.cardType}
+    is-expanded=${args.isExpanded}
+  >
+    <ptc-para font-size="x-small" font-weight="w-4" para-margin="margin-flush" para-color="white" para-line-h="line-height-p">
+      The Leading Warranty & Contract Management System just got even better... iWarranty v5.3 now available!
+    </ptc-para>
+    <ptc-spacer breakpoint="x-small" size="xx-large"></ptc-spacer>
+    <ptc-spacer breakpoint="small" size="x-large"></ptc-spacer>
+    <ptc-button type="link" color="ptc-secondary" link-href="https://www.ptc.com" target="_blank">Learn More</ptc-button>
+  </ptc-dynamic-card>
+</div>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  cardImgAlt: 'image-test',
+  cardImgSrc: 'https://s7d1.scene7.com/is/image/ptcinc//dpm-male-worker-laptop-factory-data',
+  cardScreen: 'desktop',
+  cardTitle: 'iWarranty Business Update Webinar',
+  cardType: 'sequential',
+  isExpanded: false,
 }

package/dist/collection/stories/FilterTag.stories.js

@@ -1,73 +1,73 @@
-import { html } from 'lit';
-
-export default {
-  title: 'Molecules/ptc-filter-tag',
-  tags: [ 'autodocs' ],
-  argTypes: {
-    theme: {
-      control: 'select',
-      options: ["link", "link-lg", "button", "bubble", "standard"],
-      description: '',
-      defaultValue: { summary: 'bubble' }
-    }
-  }
-};
-
-// const Template = args => { return html `<ptc-filter-tag
-// 	theme=${args.theme}
-// ></ptc-filter-tag>`;}
-
-// export const Example = Template.bind({});
-
-// Example.args = { theme: 'bubble' }
-
-// ** Bubble **
-
-const BubbleTemplate = args => { return html `<ptc-filter-tag
-	theme=${args.theme}
->Filter Tag</ptc-filter-tag>`;}
-
-export const Bubble = BubbleTemplate.bind({});
-
-Bubble.args = { theme: 'bubble' }
-
-// ** Standard **
-
-const StandardTemplate = args => { return html `<ptc-filter-tag
-	theme=${args.theme}
->Filter Tag</ptc-filter-tag>`;}
-
-export const Standard = StandardTemplate.bind({});
-
-Standard.args = { theme: 'standard' }
-
-
-// ** Link **
-
-const LinkTemplate = args => { return html `<ptc-filter-tag
-	theme=${args.theme}
->Filter Tag</ptc-filter-tag>`;}
-
-export const Link = LinkTemplate.bind({});
-
-Link.args = { theme: 'link' }
-
-// ** LinkLg **
-
-const LinkLgTemplate = args => { return html `<ptc-filter-tag
-	theme=${args.theme}
->Filter Tag</ptc-filter-tag>`;}
-
-export const LinkLg = LinkLgTemplate.bind({});
-
-LinkLg.args = { theme: 'link-lg' }
-
-// ** Button **
-
-const ButtonTemplate = args => { return html `<ptc-filter-tag
-	theme=${args.theme}
->Filter Tag</ptc-filter-tag>`;}
-
-export const Button = ButtonTemplate.bind({});
-
-Button.args = { theme: 'button' }
+import { html } from 'lit';
+
+export default {
+  title: 'Molecules/ptc-filter-tag',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    theme: {
+      control: 'select',
+      options: ["link", "link-lg", "button", "bubble", "standard"],
+      description: '',
+      defaultValue: { summary: 'bubble' }
+    }
+  }
+};
+
+// const Template = args => { return html `<ptc-filter-tag
+// 	theme=${args.theme}
+// ></ptc-filter-tag>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = { theme: 'bubble' }
+
+// ** Bubble **
+
+const BubbleTemplate = args => { return html `<ptc-filter-tag
+	theme=${args.theme}
+>Filter Tag</ptc-filter-tag>`;}
+
+export const Bubble = BubbleTemplate.bind({});
+
+Bubble.args = { theme: 'bubble' }
+
+// ** Standard **
+
+const StandardTemplate = args => { return html `<ptc-filter-tag
+	theme=${args.theme}
+>Filter Tag</ptc-filter-tag>`;}
+
+export const Standard = StandardTemplate.bind({});
+
+Standard.args = { theme: 'standard' }
+
+
+// ** Link **
+
+const LinkTemplate = args => { return html `<ptc-filter-tag
+	theme=${args.theme}
+>Filter Tag</ptc-filter-tag>`;}
+
+export const Link = LinkTemplate.bind({});
+
+Link.args = { theme: 'link' }
+
+// ** LinkLg **
+
+const LinkLgTemplate = args => { return html `<ptc-filter-tag
+	theme=${args.theme}
+>Filter Tag</ptc-filter-tag>`;}
+
+export const LinkLg = LinkLgTemplate.bind({});
+
+LinkLg.args = { theme: 'link-lg' }
+
+// ** Button **
+
+const ButtonTemplate = args => { return html `<ptc-filter-tag
+	theme=${args.theme}
+>Filter Tag</ptc-filter-tag>`;}
+
+export const Button = ButtonTemplate.bind({});
+
+Button.args = { theme: 'button' }