@ptcwebops/ptcw-design 6.4.1 → 6.4.2-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/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/ListItem.stories.js

@@ -5,56 +5,30 @@ export default {
   tags: [ 'autodocs' ],
   argTypes: {
     color: {
+      description: ' Theme color',
+      defaultValue: { summary: '' },
       control: 'select',
-      options: ['white', 'primary-gray', 'light-gray'],
-      description: 'Theme color',
-      defaultValue: { summary: 'undefined' }
+      options: [ 'white', 'primary-gray', 'light-gray' ]
     },
-    flushBefore: {
-      control: 'boolean',
-      description: '',
-      defaultValue: { summary: 'false' }
+    styles: {
+      description: ' (optional) Injected CSS styles ',
+      defaultValue: { summary: '' },
+      control: 'text'
     },
-    linkHref: {
+    default: {
+      description: 'Default slot content',
       control: 'text',
-      description: '',
-      defaultValue: { summary: 'undefined' }
-    },
-    linkTarget: {
-      control: 'text',
-      description: '',
-      defaultValue: { summary: '_self' }
-    },
-    listType: {
-      control: 'select',
-      options: ["breadcrumb", "list-footer", "list-primary", "list-green", "list-underline"],
-      description: '',
-      defaultValue: { summary: 'list-primary' }
-    },
-    // styles: {
-    //   control: '',
-    //   description: '(optional) Injected CSS styles',
-    //   defaultValue: { summary: 'undefined' }
-    // }
+      table: { category: 'slots' }
+    }
   }
 };
-
-const Template = args => { return html `<list-item
-	color=${args.color}
-	flush-before=${args.flushBefore}
-	link-href=${args.linkHref}
-	link-target=${args.linkTarget}
-	list-type=${args.listType}
-	styles=${args.styles}
->List item</list-item>`;}
-
+const Template = (args) => {
+  return html`<list-item
+  color=${args.color}
+  styles=${args.styles}
+>
+  ${args.default}
+</list-item>`;
+};
 export const Example = Template.bind({});
-
-Example.args = {
-  color: 'primary-gray',
-  flushBefore: 'false',
-  linkHref: 'https://www.ptc.com/',
-  linkTarget: '_blank',
-  listType: 'list-primary',
-  // styles: 'undefined'
-}
+Example.args = { color: '', styles: '', default: 'Lorem ipsum text' };

package/dist/collection/stories/Span.stories.js

@@ -1,57 +1,51 @@
 import { html } from 'lit';
 
 export default {
-    title: "Atoms/ptc-span",
-    tags: [
-      "autodocs"
-    ],
-    argTypes: {
-        display: {
-            control: "select",
-            options: ["block", "inline", "inline-block"],
-            description: "Display",
-            defaultValue: {
-                summary: "inline"
-            }
-        },
-        fontWeight: {
-            control: "select",
-            options: ["w-3", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9"],
-            description: "Span weight",
-            defaultValue: {
-                summary: "w-4"
-            }
-        },
-        spanStyle: {
-            control: "select",
-            options: ['link-style', 'tag-style', 'nav-style', 'plm-hub-style', 'plm-hub-style-smaller', 'blog-tag'],
-            description: "Span Style",
-            defaultValue: {
-                summary: "tag-style"
-            }
-        },
-        // styles: {
-        //     control: "",
-        //     description: "Injected Styles",
-        //     defaultValue: {
-        //         summary: "undefined"
-        //     }
-        // }
+  title: 'Atoms/ptc-span',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    display: {
+      description: "Display",
+      defaultValue: { summary: 'inline' },
+      control: 'select',
+      options: [ 'block', 'inline-block', 'inline' ]
+    },
+    fontWeight: {
+      description: ' Span weight',
+      defaultValue: { summary: 'w-4' },
+      control: 'select',
+      options: [
+        'w-3', 'w-4',
+        'w-5', 'w-6',
+        'w-7', 'w-8',
+        'w-9'
+      ]
+    },
+    styles: {
+      description: ' Injected Styles',
+      defaultValue: { summary: '' },
+      control: 'text'
+    },
+    default: {
+      description: 'Default slot content',
+      control: 'text',
+      table: { category: 'slots' }
     }
-}
-
-const Template = args => { 
-    return html `<ptc-span
-        display=${args.display}
-        font-weight=${args.fontWeight}
-        span-style=${args.spanStyle} 
-    >Example</ptc-span>`;
-}
-
+  }
+};
+const Template = (args) => {
+  return html`<ptc-span
+    display=${args.display}
+    fontWeight=${args.fontWeight}
+    styles=${args.styles}
+>
+    ${args.default}
+</ptc-span>`;
+};
 export const Example = Template.bind({});
 Example.args = {
-    display: "inline",
-    fontWeight: "w-4",
-    spanStyle: "tag-style",
-    // styles: "undefined",
-}
+  display: 'inline',
+  fontWeight: 'w-4',
+  styles: '',
+  default: 'Lorem ipsum text'
+};

package/dist/collection/stories/organisms/eSupport/CaseTracker/preview.stories.js

@@ -0,0 +1,45 @@
+import { html } from 'lit';
+
+export default  {
+    title: 'Organisms/E-Support Organisms/Case Tracker'
+
+}
+const CaseTracker = args => {
+    return html `
+
+    <ptc-spacer></ptc-spacer>
+ <ptc-spacer></ptc-spacer>
+ <ptc-spacer></ptc-spacer>
+ <div class="ptc-container is-grid">
+    <div class="is-col-12 is-col-6-md">
+      <ptc-title upperline="none">Case Tracker - Authorized Use Only</ptc-title>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-para>If you want to use this application on behalf of a customer use this search from to lookup the customer record. When you have found the customer hit the Next > button</ptc-para>
+      <ptc-textfield field-id="contact-email" label-text="Customer Name" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
+      <ptc-textfield field-id="contact-email" label-text="Customer Number" type="text" ptc-data-eloqua-name="C_EmailAddress" field-name="email"></ptc-textfield>
+      <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Search</ptc-button>
+      <ptc-button color="ptc-quaternary" disabled="false" link-href="https://www.ptc.com" link-title="PTC" rel="undefined" tab-nav="0" target="_self" text-align="undefined" type="button">Next</ptc-button>
+    </div>
+    <div class="is-col-12 is-col-2-md">
+
+    </div>
+    <div class="is-col-12 is-col-3-md">
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <ptc-spacer></ptc-spacer>
+      <div  style="border: solid; padding: 5px;">
+      <ptc-title upperline="none" type="h3">search tips</ptc-title>
+      <ul>
+        <li>You can use this search form to use this application on behalf of a customer.</li>
+        <li>You can use this search form to use this application on behalf of a customer.</li>
+      </ul>
+    </div>
+    </div>
+
+
+ </div>
+    `;}
+
+export const Preview = CaseTracker.bind();