@ptcwebops/ptcw-design 6.3.38 → 6.3.40-beta

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/subnav/ptc-nav-submenu/ptc-nav-submenu.js

@@ -1,4 +1,4 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcNavSubmenu {
   constructor() {
     this.label = undefined;
@@ -9,8 +9,8 @@ export class PtcNavSubmenu {
     this.backBtnTrackerId = undefined;
   }
   calculateOffset() {
-    var dropdown = this.el.shadowRoot.querySelector(".submenu-container");
-    var container = this.el.closest("ptc-subnav");
+    var dropdown = this.el.shadowRoot.querySelector('.submenu-container');
+    var container = this.el.closest('ptc-subnav');
     if (dropdown && container) {
       if (window.innerWidth >= 1200) {
         let height = container.clientHeight;
@@ -19,7 +19,7 @@ export class PtcNavSubmenu {
         }
       }
       else {
-        dropdown.style.top = "";
+        dropdown.style.top = '';
       }
     }
   }
@@ -30,7 +30,10 @@ export class PtcNavSubmenu {
     }, 100);
   }
   render() {
-    return (h(Host, { class: `dropdown` }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName && (h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" })), h("div", { id: this.labelTrackerId, class: "tracker-div" }, this.label), h("div", { id: this.dropdownTrackerId, class: "tracker-div" }, this.iconSrc && (h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" })), !this.iconSrc && (h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
+    return (h(Host, { class: `dropdown` }, h("div", { id: this.backBtnTrackerId, class: "tracker-div" }, h("span", { class: `back-btn` }, h("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.97852 14.12L3.82515 8L9.97852 1.88L8.08414 -8.28059e-08L0.0229606 8L8.08414 16L9.97852 14.12Z", fill: "white" })), "Back")), h("span", { class: `submenu-toggle`, onClick: () => this.handleClick(this), onMouseOver: () => this.handleClick(this) }, this.iconAssetName &&
+      h("icon-asset", { type: "ptc", size: "xx-small", name: this.iconAssetName, color: "white" }), h("div", { id: this.labelTrackerId, class: "tracker-div" }, this.label), h("div", { id: this.dropdownTrackerId, class: "tracker-div" }, this.iconSrc &&
+      h("img", { src: this.iconSrc, alt: this.label, class: "custom-icon" }), !this.iconSrc &&
+      h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" })))), h("div", { class: `submenu-container` }, h("div", { class: "submenu-container-lg" }, h("slot", null)))));
   }
   static get is() { return "ptc-nav-submenu"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/subnav/ptc-subnav/ptc-subnav.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/subnav/ptc-subnav/ptc-subnav.js

@@ -1,23 +1,23 @@
-import { Host, h, } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcSubnav {
   constructor() {
-    this.mobileTitle = "See page topics";
+    this.mobileTitle = 'See page topics';
     this.navOpen = false;
   }
   toggleNav() {
     this.navOpen = !this.navOpen;
   }
   handleScroll() {
-    let elem = this.el.shadowRoot.querySelector("div.sticky-subnav");
+    let elem = this.el.shadowRoot.querySelector('div.sticky-subnav');
     if (elem) {
-      elem.classList.remove("sticky");
+      elem.classList.remove('sticky');
     }
   }
   handleNavLinkClickedEvent() {
     this.toggleNav();
   }
   render() {
-    return (h(Host, null, h("div", { class: "sticky-subnav" }, h("nav", { class: `navbar ${this.navOpen ? "navOpen" : ""}` }, h("button", { class: "navbar-toggle", onClick: () => {
+    return (h(Host, null, h("div", { class: "sticky-subnav" }, h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, h("button", { class: "navbar-toggle", onClick: () => {
         this.toggleNav();
       } }, this.mobileTitle, h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "white", class: "" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M13.2375 2.83325L7.5 8.60203L1.7625 2.83325L-7.76305e-08 4.60923L7.5 12.1666L15 4.60923L13.2375 2.83325Z", fill: "white" }))), h("div", { class: "navbar-inner" }, h("div", { class: "nav-wrapper" }, h("slot", { name: "subnav-menu-left" }), h("slot", { name: "subnav-menu-right" })))))));
   }
@@ -51,7 +51,7 @@ export class PtcSubnav {
         },
         "attribute": "mobile-title",
         "reflect": false,
-        "defaultValue": "\"See page topics\""
+        "defaultValue": "'See page topics'"
       }
     };
   }

package/dist/collection/components/subnav/ptc-subnav-card/ptc-subnav-card.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */

package/dist/collection/components/subnav/ptc-subnav-card/ptc-subnav-card.js

@@ -1,4 +1,4 @@
-import { Host, h } from "@stencil/core";
+import { Host, h } from '@stencil/core';
 export class PtcSubnavCard {
   constructor() {
     this.cardTitle = undefined;
@@ -10,7 +10,7 @@ export class PtcSubnavCard {
     this.target = undefined;
   }
   render() {
-    const Tag = !!this.cardHref ? "a" : "div";
+    const Tag = !!this.cardHref ? 'a' : 'div';
     return (h(Host, null, h(Tag, Object.assign({}, (!!this.cardHref ? { href: this.cardHref } : {}), (!!this.cardHref ? { target: this.target } : {})), h("h4", null, this.cardTitle), h("img", { src: this.cardImageSrc, alt: this.cardImageAlt }), h("slot", null), h("h4", { class: "cta" }, this.ctaText, h("icon-asset", { type: "ptc", size: "x-small", name: this.ctaIconAssetName, color: "white" })))));
   }
   static get is() { return "ptc-subnav-card"; }

package/dist/collection/components/tab-content/tab-content.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -58,16 +54,7 @@ ptc-footer {
   }
 }
 
-.tab-content p,
-.tab-content ul,
-.tab-content ol,
-.tab-content span,
-.tab-content h1,
-.tab-content h2,
-.tab-content h3,
-.tab-content h4,
-.tab-content h5,
-.tab-content h6 {
+.tab-content p, .tab-content ul, .tab-content ol, .tab-content span, .tab-content h1, .tab-content h2, .tab-content h3, .tab-content h4, .tab-content h5, .tab-content h6 {
   max-width: 720px;
   font-weight: var(--ptc-font-weight-normal);
 }

package/dist/collection/components/tab-content/tab-content.js

@@ -1,17 +1,17 @@
-import { h } from "@stencil/core";
+import { h } from '@stencil/core';
 export class TabContent {
   constructor() {
     this.name = undefined;
     this.isSelected = false;
   }
   componentWillLoad() {
-    this.parentReference = this.el.closest("ptc-tab-list");
+    this.parentReference = this.el.closest('ptc-tab-list');
   }
   async getChild() {
     return {
       select: this.select.bind(this),
       unselect: this.unselect.bind(this),
-      name: this.name,
+      name: this.name
     };
   }
   unselect() {
@@ -25,15 +25,13 @@ export class TabContent {
   }
   render() {
     const classes = {
-      "tab-content": true,
-      "tab-content-selected": this.isSelected,
+      'tab-content': true,
+      'tab-content-selected': this.isSelected
     };
-    const hidden = (this.isSelected ? false : "until-found");
-    return (h("div", { class: classes, hidden: hidden,
-      //@ts-ignore
-      onBeforeMatch: () => {
-        this.beforeMatch();
-      } }, h("slot", null)));
+    const hidden = (this.isSelected ? false : 'until-found');
+    return (
+    //@ts-ignore
+    h("div", { class: classes, hidden: hidden, onBeforeMatch: () => { this.beforeMatch(); } }, h("slot", null)));
   }
   static get is() { return "tab-content"; }
   static get originalStyleUrls() {

package/dist/collection/components/tab-header/tab-header.css

@@ -9,10 +9,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
   word-break: break-word;
   hyphens: manual;
   -webkit-hyphens: manual;
@@ -31,10 +29,8 @@ ul,
 li,
 ptc-subnav,
 ptc-tab-list,
-ptc-link,
-ptc-square-card,
-.hyphenate-text,
-ptc-footer {
+ptc-link, ptc-square-card,
+.hyphenate-text, ptc-footer {
     hyphens: auto;
     -webkit-hyphenate-limit-before: 3;
     /* For Safari */
@@ -117,7 +113,6 @@ tab-header:focus-visible .tab-header::after {
   background-color: var(--color-green-07);
 }
 
-.tab-header ::slotted([slot=seo-content]),
-.tab-header-selected ::slotted([slot=seo-content]) {
+.tab-header ::slotted([slot=seo-content]), .tab-header-selected ::slotted([slot=seo-content]) {
   display: none;
 }

package/dist/collection/components/tab-header/tab-header.js

@@ -1,4 +1,4 @@
-import { h, } from "@stencil/core";
+import { h } from '@stencil/core';
 export class TabHeader {
   constructor() {
     this.id = this.generateId();
@@ -30,7 +30,7 @@ export class TabHeader {
         unselect: self.unselect.bind(self),
         name: self.name,
         text: self.tabHeaderText,
-        id: self.id,
+        id: self.id
       };
       resolve(data);
     });
@@ -51,16 +51,16 @@ export class TabHeader {
   }
   componentDidLoad() {
     this.updateMaxLength(window.innerWidth);
-    this.el.addEventListener("keydown", (event) => {
-      if (event.key === "Enter") {
+    this.el.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
         this.onClick();
       }
     });
   }
   render() {
     const classes = {
-      "tab-header": true,
-      "tab-header-selected": this.isSelected,
+      'tab-header': true,
+      'tab-header-selected': this.isSelected
     };
     return [
       h("div", { class: classes, onClick: this.onClick.bind(this) }, h("slot", { name: "seo-content" }), h("span", { class: "header-content" }, h("span", { class: "text-cont" }, this.tabHeaderText))),

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

@@ -1,21 +1,53 @@
 import { html } from 'lit';
+import {action} from '@storybook/addon-actions'
 
 export default {
-  title: 'New/ptc-checkbox',
+  title: 'Molecules/ptc-checkbox',
   tags: [ 'autodocs' ],
   argTypes: {
-    default: {
-      description: 'Default slot content',
+    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: {
       control: 'text',
-      table: { category: 'slots' }
-    }
-  }
-};
-const Template = (args) => {
-  return html`<ptc-checkbox
->
-	${args.default}
-</ptc-checkbox>`;
+      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' }
+    },
+  },
 };
+
+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 = { default: 'Lorem ipsum text' };
+
+Example.args = {
+  checked: 'unchecked',
+  disabled: 'false',
+  inputName: 'undefined',
+  value: 'undefined'
+}

package/dist/collection/stories/Hero.stories.js

@@ -1,35 +1,120 @@
 import { html } from 'lit';
 
 export default {
-  title: 'New/ptc-hero',
+  title: 'Molecules/ptc-hero',
   tags: [ 'autodocs' ],
   argTypes: {
-    heroType: {
-      description: ' Hero Type',
-      defaultValue: { summary: '' },
-      control: 'select',
-      options: [ 'jumbotron', 'footer-cta', 'simple' ]
-    },
     bgUrl: {
-      description: ' Hero Background Image URL',
-      defaultValue: { summary: 'undefined' },
-      control: 'text'
+      control: 'text',
+      description: 'Hero Background Image URL',
+      defaultValue: { summary: 'undefined' }
     },
     contentAlignment: {
-      description: ' Content Alignment ',
-      defaultValue: { summary: '' },
       control: 'select',
-      options: [ 'left', 'right', 'center' ]
+      options: ['left', 'right', 'center'],
+      description: 'Content Alignment',
+      defaultValue: { summary: 'undefined' }
+    },
+    heroType: {
+      control: 'select',
+      options: ["footer-cta", "jumbotron", "simple"],
+      description: 'Hero Type',
+      defaultValue: { summary: 'undefined' }
     }
   }
 };
-const Template = (args) => {
-  return html`<ptc-hero
-	heroType=${args.heroType}
-	bgUrl=${args.bgUrl}
-	contentAlignment=${args.contentAlignment}
+
+// const Template = args => { return html `<ptc-hero
+// 	bg-url=${args.bgUrl}
+// 	content-alignment=${args.contentAlignment}
+// 	hero-type=${args.heroType}
+// ></ptc-hero>`;}
+
+// export const Example = Template.bind({});
+
+// Example.args = {
+//   bgUrl: 'undefined',
+//   contentAlignment: 'undefined',
+//   heroType: 'undefined'
+// }
+
+// ** Dark Theme Jumbotron **
+
+const DarkThemeJumbotronTemplate = args => { return html `<ptc-hero 
+	bg-url=${args.bgUrl}
+	content-alignment=${args.contentAlignment}
+	hero-type=${args.heroType}
 >
-</ptc-hero>`;
-};
-export const Example = Template.bind({});
-Example.args = { heroType: '', bgUrl: 'undefined', contentAlignment: '' };
+  <div class="ptc-container">
+    <div class="u-hero-width is-grid  has-row-gap-sm u-align-center">
+      <div class="is-col-12">
+        <ptc-spacer breakpoint="x-small" size="space-128"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="space-128"></ptc-spacer>
+      </div>
+      <ptc-span span-style="plm-hub-style" display="block" exportparts="part-ptc-span" class="is-col-12">Featured
+        Video</ptc-span>
+      <ptc-title type="h1" upperline="no-upperline" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8" class="is-col-12">Making Industrial Innovation a
+        Reality</ptc-title>
+      <ptc-para font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+        para-line-h="line-height-19" class="is-col-12">
+        See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation for
+        their customers.
+      </ptc-para>
+      <ptc-link class="has-m-top is-col-12" target="_blank" href="https://www.ptc.com" link-title="PTC" theme="d-green-underline">Watch
+        Now
+      </ptc-link>
+      <div class="is-col-12">
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="x-small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+        <ptc-spacer breakpoint="small" size="xxxx-large"></ptc-spacer>
+      </div>
+    </div>
+  </div>
+</ptc-hero>`;}
+
+export const DarkThemeJumbotron = DarkThemeJumbotronTemplate.bind({});
+
+DarkThemeJumbotron.args = {
+  bgUrl: 'http://s7d1.scene7.com/is/image/ptcinc/cs-boeing-planes-runway',
+  contentAlignment: 'left',
+  heroType: 'jumbotron'
+}
+
+// ** Dark Theme Footer CTA **
+
+const DarkThemeFooterCTATemplate = args => { return html `<ptc-hero
+	bg-url=${args.bgUrl}
+	content-alignment=${args.contentAlignment}
+	hero-type=${args.heroType}
+>
+  <div class="ptc-container has-p-lg">
+    <div class="u-hero-width u-margin-center is-col-12 is-grid has-row-gap-sm u-align-center">
+      <ptc-span class="is-col-12" span-style="plm-hub-style" display="block" exportparts="part-ptc-span">Featured
+        Video</ptc-span>
+      <ptc-title class="is-col-12" type="h2" upperline="no-upperline" is-plm-hub title-size="xxxx-large" title-height="densest" title-weight="w-8">Making
+        Industrial
+        Innovation a
+        Reality</ptc-title>
+      <ptc-para class="is-col-12" font-size="x-small" font-weight="w-5" para-margin="margin-flush" para-color="white"
+        para-line-h="line-height-19">
+        See how Polaris and Whirlpool Corporation are driving digital transformation and industrial innovation for
+        their customers.
+      </ptc-para>
+      <ptc-link class="has-m-top is-col-12 u" href="https://www.ptc.com" target="_blank" link-title="PTC" theme="d-green-underline">Watch
+        Now
+      </ptc-link>
+    </div>
+  </div>
+</ptc-hero>`;}
+
+export const DarkThemeFooterCTA = DarkThemeFooterCTATemplate.bind({});
+
+DarkThemeFooterCTA.args = {
+  bgUrl: 'https://s7d1.scene7.com/is/image/ptcinc/slts-access-real-time-data-service-compliance',
+  contentAlignment: undefined,
+  heroType: 'footer-cta'
+}

package/dist/collection/stories/Select.stories.js

@@ -1,27 +1,78 @@
 import { html } from 'lit';
 
 export default {
-  title: 'New/ptc-select',
-  tags: [ 'autodocs' ],
+  title: 'Atoms/ptc-select',
+  tags: ['autodocs'],
   argTypes: {
-    ptcDataEloquaName: {
-      description: ' Eloqua Data',
-      defaultValue: { summary: '' },
-      control: 'text'
+    disabled: {
+      control: 'boolean',
+      description: 'Disable the field?',
+      defaultValue: { summary: 'false' },
+    },
+    helpertext: {
+      control: 'text',
+      description: 'Help text',
+      defaultValue: { summary: 'Please select a value!' },
+    },
+    isRequired: {
+      control: 'boolean',
+      description: 'Is this field required?',
+      defaultValue: { summary: 'true' },
+    },
+    label: {
+      control: 'text',
+      description: 'Label text',
+      defaultValue: { summary: 'undefined' },
+    },
+    name: {
+      control: 'text',
+      description: 'Name attribute',
+      defaultValue: { summary: 'undefined' },
     },
-    default: {
-      description: 'Default slot content',
+    ptcDataEloquaName: {
       control: 'text',
-      table: { category: 'slots' }
-    }
-  }
+      description: 'Eloqua Data',
+      defaultValue: { summary: 'undefined' },
+    },
+  },
 };
-const Template = (args) => {
+
+const Template = args => {
   return html`<ptc-select
-	ptcDataEloquaName=${args.ptcDataEloquaName}
->
-	${args.default}
-</ptc-select>`;
+    disabled=${args.disabled}
+    helpertext=${args.helpertext}
+    is-required=${args.isRequired}
+    label=${args.label}
+    name=${args.name}
+    ptc-data-eloqua-name=${args.ptcDataEloquaName}
+  >
+    <ul class="mdc-list">
+      <li class="mdc-list-item" data-value="">
+        <span class="mdc-list-item__ripple"></span>
+      </li>
+      <li class="mdc-list-item" data-value="Augmented Reality (AR)">
+        <span class="mdc-list-item__ripple"></span>
+        <span class="mdc-list-item__text">Augmented Reality (AR)</span>
+      </li>
+      <li class="mdc-list-item" data-value="CAD">
+        <span class="mdc-list-item__ripple"></span>
+        <span class="mdc-list-item__text">Computer Aided Design</span>
+      </li>
+      <li class="mdc-list-item" data-value="Retail(FlexPLM)">
+        <span class="mdc-list-item__ripple"></span>
+        <span class="mdc-list-item__text">Fashion and Retail Product Lifecycle Management</span>
+      </li>
+    </ul>
+  </ptc-select>`;
 };
+
 export const Example = Template.bind({});
-Example.args = { ptcDataEloquaName: '', default: 'Lorem ipsum text' };
+
+Example.args = {
+  disabled: 'false',
+  helpertext: 'Please select a value!',
+  isRequired: 'true',
+  label: 'Lable Name',
+  name: 'examplename',
+  ptcDataEloquaName: 'data-eloqua-value',
+};