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

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

@@ -4,106 +4,190 @@ export default {
   title: 'Atoms/ptc-button',
   tags: [ 'autodocs' ],
   argTypes: {
-    color: {
+    disabled: {
+      description: ' Disabled button',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    active: {
+      description: ' Active Toggle button',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    type: {
+      description: ' Button type',
+      defaultValue: { summary: 'button' },
       control: 'select',
-      description: 'Button theme color',
+      options: [ 'button', 'reset', 'submit', 'link' ]
+    },
+    color: {
+      description: ' Button theme color',
       defaultValue: { summary: 'ptc-primary' },
+      control: 'select',
       options: [
+        'offwhite',
+        'blackgrey',
+        'turtlegreen',
+        'nav',
+        'legacy-green',
         'ptc-primary',
-        'ptc-quaternary',
         'ptc-secondary',
-        'ptc-tertiary'
+        'ptc-tertiary',
+        'ptc-quaternary',
+        'icon-toggle',
+        'clear-search',
+        'primary-cta',
+        'secondary-cta-dark',
+        'secondary-cta-light'
       ]
     },
-    disabled: {
-      control: 'boolean',
-      description: 'Disabled button',
-      defaultValue: { summary: 'false' }
+    iconAnimation: {
+      description: ' Icon Animation',
+      defaultValue: { summary: '' },
+      control: 'select',
+      options: [ 'animation-right', 'animation-down', 'reveal-down', '' ]
+    },
+    iconPosition: {
+      description: ' Icon Position',
+      defaultValue: { summary: 'icon-right' },
+      control: 'select',
+      options: [ 'icon-left', 'icon-right', 'none' ]
     },
     linkHref: {
-      control: 'text',
-      description: 'Link URL',
-      defaultValue: { summary: 'undefined' }
+      description: ' Link URL',
+      defaultValue: { summary: 'undefined' },
+      control: 'text'
     },
     linkTitle: {
-      control: 'text',
-      description: 'link Title',
-      defaultValue: { summary: 'undefined' }
+      description: ' link Title',
+      defaultValue: { summary: 'undefined' },
+      control: 'text'
+    },
+    target: {
+      description: ' Link target ',
+      defaultValue: { summary: '_self' },
+      control: 'text'
     },
     rel: {
-      control: 'text',
-      description: 'Link rel',
-      defaultValue: { summary: 'undefined' }
+      description: ' Link rel ',
+      defaultValue: { summary: 'undefined' },
+      control: 'text'
     },
     tabNav: {
-      control: '',
-      description: "(optional) tab-nav. indicates that its element can be focused, and where it participates in sequential keyboard navigation. A negative value (usually tabindex='-1') means that the element is not reachable via sequential keyboard navigation",
+      description: ' (optional) tab-nav. indicates that its element can be focused, and where it participates in sequential keyboard navigation. A negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation',
       defaultValue: { summary: '0' }
     },
-    target: {
-      control: 'text',
-      description: 'Link target',
-      defaultValue: { summary: '_self' }
+    styles: {
+      description: ' (optional) Injected CSS Styles',
+      defaultValue: { summary: '' },
+      control: 'text'
     },
     textAlign: {
+      description: ' Text Align',
+      defaultValue: { summary: '' },
       control: 'select',
-      description: 'Text Align',
-      defaultValue: { summary: 'undefined' },
-      options: [ 'center', 'left', 'right' ]
+      options: [ 'left', 'right', 'center' ]
     },
-    type: {
-      control: 'select',
-      description: 'Button type',
-      defaultValue: { summary: 'button' },
-      options: [ 'button', 'link', 'reset', 'submit' ]
+    enableAccessibilityAltStyle: {
+      description: ' Enable Accessibility Alternate Styling',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
     },
-    iconAnimation: {
+    size: {
+      description: ' Button theme color',
+      defaultValue: { summary: '' },
       control: 'select',
-      description: "Icon animation on hover type, requires a icon-asset element to be slotted to the 'slot-after-text' or 'slot-before-text' slots",
-      defaultValue: { summary: 'reveal-down' },
-      options: [ 'animation-right', 'animation-down', 'reveal-down' ]
+      options: [ 'small', 'medium', 'large' ]
     },
-    iconPosition: {
-      control: 'select',
-      description: "Icon position on hover type, requires a icon-asset element to be slotted to the 'slot-after-text' or 'slot-before-text' slots",
-      defaultValue: { summary: 'none' },
-      options: [ 'icon-right', 'icon-left', 'none' ]
+    seoCompatibilityMode: {
+      description: " Emitted when the button has focus. / @Event() clickEvent: EventEmitter<void>; clickEventHandler() { this.clickEvent.emit(); } // Properties for accessibilty / aria @Prop() buttonTitle?: string; @Prop() ariaLabel: string = ''; / (optional) enable support for seo tools that can only view source",
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    maintainContent: {
+      description: ' when support for seo tools is enabled will take inner element content and dublicate to slot for browser translation compatibility',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    darkFocusState: {
+      description: ' Add dark-focus-state property where button is present on dark backgrounds',
+      defaultValue: { summary: 'false' },
+      control: 'boolean'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
+    },
+    slotBeforeText: {
+      description: 'Slot: slot-before-text',
+      control: 'text',
+      table: { category: 'slots' }
+    },
+    slotAfterText: {
+      description: 'Slot: slot-after-text',
+      control: 'text',
+      table: { category: 'slots' }
     }
   }
 };
-
-const Template = args => { return html `<ptc-button
-	color=${args.color}
-	disabled=${args.disabled}
-	link-href=${args.linkHref}
-	link-title=${args.linkTitle}
-	rel=${args.rel}
-	tab-nav=${args.tabNav}
-	target=${args.target}
-	text-align=${args.textAlign}
-	type=${args.type}
->Button</ptc-button>`;}
-
+const Template = (args) => {
+  return html`<ptc-button
+  disabled=${args.disabled}
+  active=${args.active}
+  type=${args.type}
+  color=${args.color}
+  iconAnimation=${args.iconAnimation}
+  iconPosition=${args.iconPosition}
+  linkHref=${args.linkHref}
+  linkTitle=${args.linkTitle}
+  target=${args.target}
+  rel=${args.rel}
+  tabNav=${args.tabNav}
+  styles=${args.styles}
+  textAlign=${args.textAlign}
+  enableAccessibilityAltStyle=${args.enableAccessibilityAltStyle}
+  size=${args.size}
+  seoCompatibilityMode=${args.seoCompatibilityMode}
+  maintainContent=${args.maintainContent}
+  darkFocusState=${args.darkFocusState}
+>
+  ${args.default}
+  <span slot="slot-before-text">${args.slotBeforeText}</span>
+  <span slot="slot-after-text">${args.slotAfterText}</span>
+</ptc-button>`;
+};
 export const Example = Template.bind({});
-
 Example.args = {
-  color: 'ptc-primary',
   disabled: 'false',
-  linkHref: 'https://www.ptc.com',
-  linkTitle: 'PTC',
+  active: 'false',
+  type: 'button',
+  color: 'ptc-primary',
+  iconAnimation: '',
+  iconPosition: 'icon-right',
+  linkHref: 'undefined',
+  linkTitle: 'undefined',
+  target: '_self',
   rel: 'undefined',
   tabNav: '0',
-  target: '_self',
-  textAlign: 'undefined',
-  type: 'button'
-}
+  styles: '',
+  textAlign: '',
+  enableAccessibilityAltStyle: 'false',
+  size: '',
+  seoCompatibilityMode: 'false',
+  maintainContent: 'false',
+  darkFocusState: 'false',
+  default: 'Button Text',
+  slotBeforeText: '',
+  slotAfterText: ''
+};
 
 const IconTemplate = args => { return html `<ptc-button
-	color=${args.color}
-	disabled=${args.disabled}
-	tab-nav=${args.tabNav}
-	text-align=${args.textAlign}
-	type=${args.type}
+  color=${args.color}
+  disabled=${args.disabled}
+  tab-nav=${args.tabNav}
+  text-align=${args.textAlign}
+  type=${args.type}
   icon-animation=${args.iconAnimation}
   icon-position=${args.iconPosition}
 >Download<icon-asset slot="slot-after-text" class="is-centered" size="medium" type="ptc" name="download-arrow-2" color="white"></icon-asset></ptc-button>`;}

package/dist/collection/stories/Checkbox.stories.js

@@ -1,53 +1,21 @@
 import { html } from 'lit';
-import {action} from '@storybook/addon-actions'
 
 export default {
-  title: 'Molecules/ptc-checkbox',
+  title: 'New/ptc-checkbox',
   tags: [ 'autodocs' ],
   argTypes: {
-    checked: {
-      control: 'select',
-      options: ["checked", "unchecked"],
-      description: 'Whether checkbox state is checked or not',
-      defaultValue: { summary: 'unchecked' }
-    },
-    disabled: {
-      control: 'boolean',
-      description: 'Whether checkbox is disabled or not',
-      defaultValue: { summary: 'undefined' }
-    },
-    inputName: {
+    default: {
+      description: 'Default slot content',
       control: 'text',
-      description: 'The name of the underlying form input',
-      defaultValue: { summary: 'undefined' }
-    },
-    value: {
-      control: 'text',
-      description: 'The name of the underlying form input',
-      defaultValue: { summary: 'undefined' }
-    },
-  },
+      table: { category: 'slots' }
+    }
+  }
+};
+const Template = (args) => {
+  return html`<ptc-checkbox
+>
+	${args.default}
+</ptc-checkbox>`;
 };
-
-const Template = args => { 
-  const handleClick = (e) => {
-    e.stopPropagation();
-    action('onClick')(e);
-  };
-
-  return html `<ptc-checkbox
-	checked=${args.checked}
-	disabled=${args.disabled}
-	input-name=${args.inputName}
-	value=${args.value}
-  @click=${handleClick}
->Checkbox item</ptc-checkbox>`;}
-
 export const Example = Template.bind({});
-
-Example.args = {
-  checked: 'unchecked',
-  disabled: 'false',
-  inputName: 'undefined',
-  value: 'undefined'
-}
+Example.args = { default: 'Lorem ipsum text' };

package/dist/collection/stories/CheckboxGroup.stories.js

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

package/dist/collection/stories/CloseIcon.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+
+export default { title: 'New/ptc-close-icon', tags: [ 'autodocs' ], argTypes: {} };
+const Template = (args) => {
+  return html`<ptc-close-icon
+>
+</ptc-close-icon>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

package/dist/collection/stories/CollapseList.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-collapse-list',
+  tags: [ 'autodocs' ],
+  argTypes: {}
+};
+const Template = (args) => {
+  return html`<ptc-collapse-list
+>
+</ptc-collapse-list>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

package/dist/collection/stories/Countdown.stories.js

@@ -0,0 +1,10 @@
+import { html } from 'lit';
+
+export default { title: 'New/ptc-countdown', tags: [ 'autodocs' ], argTypes: {} };
+const Template = (args) => {
+  return html`<ptc-countdown
+>
+</ptc-countdown>`;
+};
+export const Example = Template.bind({});
+Example.args = {};

package/dist/collection/stories/DataLookup.stories.js

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

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

@@ -1,81 +1,76 @@
 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 }
-        },
+  title: 'Atoms/ptc-date',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    year: { description: ' Year', defaultValue: { summary: '1900' } },
+    month: {
+      description: ' Month An integer between 1 (January) and 12 (December) representing the month.If omitted, defaults to 0.',
+      defaultValue: { summary: '0' }
+    },
+    day: {
+      description: ' Day An integer between 1 and 31 representing the day of the month. If omitted, defaults to 1.',
+      defaultValue: { summary: '1' }
+    },
+    country: {
+      description: ' Country examples: en-US, zh-CN, zh-TW, fr-FR, ja-JP, ru-RU, de-DE, ko-KR, it-IT, es-ES',
+      defaultValue: { summary: 'en-US' },
+      control: 'select',
+      options: [ 'string', 'undefined' ]
+    },
+    dateString: {
+      description: ' Date examples: 2000-1-1 or 2000/01/01',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    dateColor: {
+      description: ' Date Color',
+      defaultValue: { summary: '' },
+      control: 'select',
+      options: [ 'white', 'primary-grey' ]
+    },
+    dateStyles: {
+      description: ' Injected styles',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    dataSize: {
+      description: ' Date Font Size',
+      defaultValue: { summary: 'small' },
+      control: 'select',
+      options: [ 'medium', 'small' ]
+    },
+    formatOptions: {
+      description: ' Custom object for formatting date e.i. { weekday: "long", year: "numeric", month: "long", day: "numeric" }',
+      defaultValue: { summary: '' },
+      control: 'text'
     }
-}
-
-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>`;
-}
-
+  }
+};
+const Template = (args) => {
+  return html`<ptc-date
+    year=${args.year}
+    month=${args.month}
+    day=${args.day}
+    country=${args.country}
+    dateString=${args.dateString}
+    dateColor=${args.dateColor}
+    dateStyles=${args.dateStyles}
+    dataSize=${args.dataSize}
+    formatOptions=${args.formatOptions}
+>
+</ptc-date>`;
+};
 export const Example = Template.bind({});
 Example.args = {
-    country: "en-US",
-    dataSize: "small",
-    dateColor: undefined,
-    dateString: undefined,
-    day: 1,
-    month: 1,
-    year: 1900,
-}
+  year: '1900',
+  month: '0',
+  day: '1',
+  country: 'en-US',
+  dateString: '',
+  dateColor: '',
+  dateStyles: '',
+  dataSize: 'small',
+  formatOptions: ''
+};

package/dist/collection/stories/EllipsisDropdown.stories.js

@@ -0,0 +1,14 @@
+import { html } from 'lit';
+
+export default {
+  title: 'New/ptc-ellipsis-dropdown',
+  tags: [ 'autodocs' ],
+  argTypes: {}
+};
+const Template = (args) => {
+  return html`<ptc-ellipsis-dropdown
+>
+</ptc-ellipsis-dropdown>`;
+};
+export const Example = Template.bind({});
+Example.args = {};