@ptcwebops/ptcw-design 2.6.6 → 2.6.8

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

@@ -0,0 +1,351 @@
+import { h, Host } from '@stencil/core';
+import { MDCTextField } from '@material/textfield';
+import intlTelInput from 'intl-tel-input';
+export class PtcTextfield {
+  constructor() {
+    this.phoneValidity = 'validating';
+    this.fieldId = undefined;
+    this.type = 'text';
+    this.required = true;
+    this.ptcMaxLength = undefined;
+    this.labelText = 'Email';
+    this.helpertext = 'Please enter a value';
+    this.disabled = false;
+    this.name = 'email';
+    this.ptcDataEloquaName = undefined;
+    this.inputValue = '';
+  }
+  handleInput(event) {
+    this.inputValue = event.target.value;
+    this.setHelperText();
+  }
+  inputBlurHandler() {
+    // console.log(event.target)
+    // this.getPhoneValidation();
+    this.setErrorBackground();
+    setTimeout(() => {
+      this.getPhoneValidation();
+    }, 100);
+  }
+  componentDidLoad() {
+    this.mdcTextfieldComponent = MDCTextField.attachTo(this.mdcTextfield);
+    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
+      this.iti = intlTelInput(this.customInput, {
+        separateDialCode: true,
+        initialCountry: 'us',
+        nationalMode: true,
+        utilsScript: 'https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.2.1/js/utils.min.js', // Required for formatting/validation
+      });
+    }
+  }
+  getPhoneValidation() {
+    if (this.fieldId === 'contact-phone' && this.name === 'phone') {
+      if (this.iti.isValidNumber()) {
+        if (this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+          this.mdcTextfield.classList.remove('mdc-text-field--invalid');
+        }
+        if (this.el.classList.contains('invalid-field')) {
+          this.el.classList.remove('invalid-field');
+        }
+        // console.log("text field class list: " + this.mdcTextfield.className)
+      }
+      else if (!this.iti.isValidNumber()) {
+        if (!this.mdcTextfield.classList.contains('mdc-text-field--invalid')) {
+          this.mdcTextfield.classList.add('mdc-text-field--invalid');
+        }
+        if (!this.el.classList.contains('invalid-field')) {
+          this.el.classList.add('invalid-field');
+        }
+        // console.log("text field class list: " + this.mdcTextfield.className);
+        // console.log("this class list: " + this.el.className)
+      }
+      // console.log('hello!');
+    }
+  }
+  setErrorBackground() {
+    if (this.customInput.checkValidity()) {
+      if (this.el.classList.contains('invalid-field')) {
+        this.el.classList.remove('invalid-field');
+      }
+    }
+    else if (!this.customInput.checkValidity()) {
+      if (!this.el.classList.contains('invalid-field')) {
+        this.el.classList.add('invalid-field');
+      }
+    }
+  }
+  getInputClassName() {
+    let className = 'mdc-text-field__input';
+    if (this.type === 'tel' && this.name === 'phone') {
+      className = `${className}  intl-tel-input`;
+    }
+    else if (this.type === 'text' && this.ptcMaxLength) {
+      className = `${className}  mdc-text-field--with-internal-counter`;
+    }
+    return className;
+  }
+  getValidationPattern() {
+    let validationPattern = '';
+    // if (this.type === 'email' && this.name === 'email') {
+    //   validationPattern = '[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}';
+    // }
+    if (this.name === 'firstname' || this.name === 'lastname') {
+      validationPattern = '[A-Za-z ]+';
+    }
+    return validationPattern;
+  }
+  setHelperText() {
+    if (this.type === 'email' && this.name === 'email') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = 'Email is required.';
+      }
+      else if (this.customInput.validity.typeMismatch) {
+        this.helpertext = 'Please enter a valid email.';
+      }
+    }
+    else if (this.name === 'firstname') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = 'Please enter your first name.';
+      }
+      else if (this.customInput.validity.patternMismatch) {
+        this.helpertext = 'Please check your first name';
+      }
+    }
+    else if (this.name === 'lastname') {
+      if (this.customInput.validity.valueMissing) {
+        this.helpertext = 'Please enter your last name.';
+      }
+      else if (this.customInput.validity.patternMismatch) {
+        this.helpertext = 'Please check your last name';
+      }
+    }
+    else if (this.fieldId === 'contact-phone') {
+      if (this.iti) {
+        if (this.inputValue === '') {
+          this.helpertext = 'Phone number is required';
+        }
+        else if (!this.iti.isValidNumber()) {
+          this.helpertext = 'Phone number is invalid';
+        }
+      }
+    }
+  }
+  render() {
+    return (h(Host, { class: `ptc-text-field 
+        ${this.fieldId === 'contact-phone' ? 'phone-field-style' : ''}` }, h("label", { class: "ptc-label" }, this.labelText), h("div", { class: `mdc-text-field mdc-text-field--outlined mdc-text-field--no-label
+          ${this.fieldId === 'contact-phone' ? 'intl-phone-adjustments' : ''}`, ref: mdcTextfield => {
+        this.mdcTextfield = mdcTextfield;
+      } }, h("span", { class: "mdc-notched-outline ptc-textfield-outline" }, h("span", { class: "mdc-notched-outline__leading" }), h("span", { class: "mdc-notched-outline__trailing" })), h("input", Object.assign({ ref: customInput => {
+        this.customInput = customInput;
+      } }, (this.getInputClassName() ? { class: this.getInputClassName() } : null), { type: this.type }, (this.required ? { required: true } : null), (this.ptcMaxLength ? { maxlength: this.ptcMaxLength } : null), { "aria-controls": this.name, "aria-describedby": this.name, "data-eloqua-name": this.ptcDataEloquaName, value: this.inputValue }, (this.getValidationPattern() ? { pattern: this.getValidationPattern() } : null)))), h("div", { class: `mdc-text-field-helper-line
+                   ${!!this.ptcMaxLength ? 'field-with-counter' : ''}` }, h("div", { class: "mdc-text-field-helper-text mdc-text-field-helper-text--validation-msg", id: this.name }, h("svg", { class: "input-error-svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { "clip-path": "url(#clip0_12_1424)" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M11.3156 0L16 4.68444V11.3156L11.3156 16H4.68444L0 11.3156V4.68444L4.68444 0H11.3156ZM8 10.4C7.36 10.4 6.84444 10.9156 6.84444 11.5556C6.84444 12.1956 7.36 12.7111 8 12.7111C8.64 12.7111 9.15556 12.1956 9.15556 11.5556C9.15556 10.9156 8.64 10.4 8 10.4ZM8.88889 3.55556H7.11111V8.88889H8.88889V3.55556Z", fill: "#AF3231" })), h("defs", null, h("clipPath", { id: "clip0_12_1424" }, h("rect", { width: "16", height: "16", fill: "white" })))), this.helpertext), this.ptcMaxLength ? (h("div", { class: "mdc-text-field-character-counter" }, this.inputValue.length, " / ", this.ptcMaxLength)) : null)));
+  }
+  static get is() { return "ptc-textfield"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["ptc-textfield.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["ptc-textfield.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "fieldId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "field-id",
+        "reflect": false
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "type",
+        "reflect": false,
+        "defaultValue": "'text'"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "true"
+      },
+      "ptcMaxLength": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-max-length",
+        "reflect": false
+      },
+      "labelText": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "label-text",
+        "reflect": false,
+        "defaultValue": "'Email'"
+      },
+      "helpertext": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "helpertext",
+        "reflect": false,
+        "defaultValue": "'Please enter a value'"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "'email'"
+      },
+      "ptcDataEloquaName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "ptc-data-eloqua-name",
+        "reflect": false
+      },
+      "inputValue": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "input-value",
+        "reflect": false,
+        "defaultValue": "''"
+      }
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get listeners() {
+    return [{
+        "name": "input",
+        "method": "handleInput",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "blur",
+        "method": "inputBlurHandler",
+        "target": undefined,
+        "capture": true,
+        "passive": false
+      }];
+  }
+}

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

@@ -31,7 +31,7 @@
   display: inline-block;
   border-bottom: 2px solid transparent;
   margin-left: 34%;
-  padding: 22px 12px;
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-03);
   font-size: var(--ptc-font-size-xx-small);
   line-height: var(--ptc-line-height-denser);
   font-weight: var(--ptc-font-weight-bold);
@@ -48,6 +48,7 @@
 }
 @media only screen and (min-width: 1200px) {
   :host a {
+    padding: 22px var(--ptc-element-spacing-03);
     margin-left: 0;
     display: flex;
     align-items: center;

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

@@ -5,14 +5,17 @@ export class PtcNavLink {
     this.isOutsideLink = false;
     this.titleText = "";
   }
-  handleClick() {
-    // Check if the href starts with #   
+  handleClick(event) {
+    // Prevent the event from propagating to the underlying <a> element
+    event.stopPropagation();
+    // Check if the href starts with #
     if (this.href && this.href.startsWith('#')) {
       // Find the corresponding section
       const section = document.querySelector(this.href);
       section.scrollIntoView({
         behavior: 'smooth'
       });
+      this.navLinkClicked.emit();
     }
   }
   componentWillLoad() {
@@ -29,7 +32,7 @@ export class PtcNavLink {
     }
   }
   render() {
-    return (h(Host, null, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: () => { this.handleClick(); } }, h("slot", null), !(this.href.startsWith('#')) &&
+    return (h(Host, null, h("a", { href: this.href, target: this.isOutsideLink ? '_blank' : '_self', title: this.titleText, onClick: (event) => { this.handleClick(event); } }, h("slot", null), !(this.href.startsWith('#')) &&
       h("svg", { class: "icon-arrow-right", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "10", viewBox: "0 0 14 10", fill: "none" }, h("path", { d: "M8.84921 0.77792L8.81313 3.41153L0.51545 3.55584L0.515449 6.5863L8.81313 6.44199L8.81313 9.40029L13.1424 5.07107L8.84921 0.77792Z", fill: "#AEB8BD" })))));
   }
   static get is() { return "ptc-nav-link"; }
@@ -101,6 +104,24 @@ export class PtcNavLink {
       }
     };
   }
+  static get events() {
+    return [{
+        "method": "navLinkClicked",
+        "name": "navLinkClicked",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Creating navLinkClicked to check if the link is clicked and toggle the subnav on mobile"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
   static get listeners() {
     return [{

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

@@ -4,7 +4,7 @@ export class PtcNavSlider {
     this.sliderId = `ptc-nav-slider-${Math.floor(Math.random() * 1000000)}`;
   }
   componentDidLoad() {
-    // use the ID to select elements within the component's shadow root    
+    // use the ID to select elements within the component's shadow root
     this.updateSlider(undefined);
     const { shadowRoot } = document.querySelector(`#${this.sliderId}`);
     const boxWrap = shadowRoot.querySelector('.box-wrap');
@@ -84,7 +84,7 @@ export class PtcNavSlider {
     }
   }
   render() {
-    return (h(Host, { class: `nav-slider`, id: this.sliderId }, h("div", { class: "btn-wrap-left" }, h("button", { id: "prevBtn", class: "navArrows", onClick: () => this.leftScroll(this) }, h("svg", { width: "11", height: "15", viewBox: "0 0 11 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.166 13.2375L4.39723 7.5L10.166 1.7625L8.39004 0L0.832683 7.5L8.39004 15L10.166 13.2375Z", fill: "white" })))), h("div", { class: "box-wrap" }, h("slot", null)), h("div", { class: "btn-wrap-right" }, h("button", { id: "nextBtn", class: "navArrows ", onClick: () => this.rightScroll(this) }, h("svg", { width: "11", height: "15", viewBox: "0 0 11 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833984 1.7625L6.60277 7.5L0.833984 13.2375L2.60996 15L10.1673 7.5L2.60996 0L0.833984 1.7625Z", fill: "white" }))))));
+    return (h(Host, { class: `nav-slider`, id: this.sliderId }, h("div", { class: "btn-wrap-left" }, h("button", { id: "prevBtn", class: "navArrows", onClick: () => this.leftScroll(this) }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M10.166 13.2375L4.39723 7.5L10.166 1.7625L8.39004 0L0.832683 7.5L8.39004 15L10.166 13.2375Z", fill: "white" })))), h("div", { class: "box-wrap" }, h("slot", null)), h("div", { class: "btn-wrap-right" }, h("button", { id: "nextBtn", class: "navArrows ", onClick: () => this.rightScroll(this) }, h("svg", { width: "12", height: "12", viewBox: "0 0 12 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0.833984 1.7625L6.60277 7.5L0.833984 13.2375L2.60996 15L10.1673 7.5L2.60996 0L0.833984 1.7625Z", fill: "white" }))))));
   }
   static get is() { return "ptc-nav-slider"; }
   static get encapsulation() { return "shadow"; }

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

@@ -50,7 +50,7 @@
   line-height: var(--ptc-line-height-denser);
   font-weight: var(--ptc-font-weight-bold);
   white-space: nowrap;
-  padding: 22px var(--ptc-element-spacing-03);
+  padding: var(--ptc-element-spacing-04) var(--ptc-element-spacing-03);
   margin-left: 34%;
   position: relative;
 }
@@ -63,7 +63,12 @@
   width: calc(100% - 20px);
   left: 0;
   right: 0;
-  bottom: 20px;
+  bottom: 14px;
+}
+@media only screen and (min-width: 1200px) {
+  :host .submenu-toggle::after {
+    bottom: 20px;
+  }
 }
 @media only screen and (min-width: 480px) {
   :host .submenu-toggle {
@@ -77,6 +82,7 @@
 }
 @media only screen and (min-width: 1200px) {
   :host .submenu-toggle {
+    padding: 22px var(--ptc-element-spacing-03);
     margin-left: 0;
     display: flex;
     align-items: center;

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

@@ -1,9 +1,14 @@
 :host {
   display: block;
   width: 100%;
-  background-color: var(--color-gray-10);
+  background-color: var(--color-gray-12);
   position: relative;
 }
+@media only screen and (min-width: 1200px) {
+  :host {
+    background-color: var(--color-gray-10);
+  }
+}
 :host .stickyEl.sticky {
   top: 0;
   position: fixed;
@@ -37,16 +42,17 @@
   width: auto;
   margin: auto 0;
   min-width: 163px;
+  max-height: calc(100vh - 53px);
 }
 @media only screen and (min-width: 1200px) {
   :host .navbar .navbar-inner .nav-wrapper {
     width: auto;
     display: flex;
     justify-content: space-between;
+    max-height: auto;
   }
 }
 :host .navbar.navOpen .navbar-inner {
-  background-color: var(--color-gray-12);
   display: block;
 }
 :host .navbar .navbar-toggle {

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

@@ -9,9 +9,13 @@ export class PtcSubnav {
     this.navOpen = !this.navOpen;
   }
   handleScroll() {
-    this.el.shadowRoot.querySelector('nav.navbar').classList.remove('navOpen');
+    //this.el.shadowRoot.querySelector('nav.navbar').classList.remove('navOpen');
     this.el.shadowRoot.querySelector('div.sticky-subnav').classList.remove('sticky');
   }
+  handleNavLinkClickedEvent() {
+    console.log('link clicked');
+    this.toggleNav();
+  }
   firstChildfuncID() {
     const firstChildLi = document.querySelector('ptc-nav-link:first-child');
     if (firstChildLi) {
@@ -40,7 +44,7 @@ export class PtcSubnav {
   }
   render() {
     return (h(Host, null, h("div", { class: "sticky-subnav" }, h("nav", { class: `navbar ${this.navOpen ? 'navOpen' : ''}` }, h("button", { class: "navbar-toggle", onClick: () => {
-        this.scrollToSection(this.firstChildfuncID());
+        //this.scrollToSection(this.firstChildfuncID());
         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" })))))));
   }
@@ -91,6 +95,12 @@ export class PtcSubnav {
         "target": "window",
         "capture": false,
         "passive": true
+      }, {
+        "name": "navLinkClicked",
+        "method": "handleNavLinkClickedEvent",
+        "target": undefined,
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/stories/FormCheckbox.stories.js

@@ -0,0 +1,58 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-form-checkbox',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    checkboxId: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    },
+    helpertext: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'This field is required' }
+    },
+    isChecked: {
+      control: 'boolean',
+      description: '',
+      defaultValue: { summary: 'false' }
+    },
+    label: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    },
+    name: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    },
+    required: {
+      control: 'boolean',
+      description: '',
+      defaultValue: { summary: 'true' }
+    }
+  }
+};
+
+const Template = args => { return html `<ptc-form-checkbox
+	checkbox-id=${args.checkboxId}
+	helpertext=${args.helpertext}
+	is-checked=${args.isChecked}
+	label=${args.label}
+	name=${args.name}
+	required=${args.required}
+></ptc-form-checkbox>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  checkboxId: 'undefined',
+  helpertext: 'This field is required',
+  isChecked: 'false',
+  label: 'undefined',
+  name: 'undefined',
+  required: 'true'
+}

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

@@ -0,0 +1,61 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Atoms/ptc-select',
+  tags: [ 'autodocs' ],
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+      description: '',
+      defaultValue: { summary: 'false' }
+    },
+    helpertext: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'Please select a value!' }
+    },
+    isRequired: {
+      control: 'boolean',
+      description: '',
+      defaultValue: { summary: 'true' }
+    },
+    label: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    },
+    name: {
+      control: 'text',
+      description: '',
+      defaultValue: { summary: 'undefined' }
+    },
+    ptcDataEloquaName: {
+      control: 'text',
+      description: 'Eloqua Data',
+      defaultValue: { summary: 'undefined' }
+    },
+    selectedValue: { control: 'text', description: '', defaultValue: { summary: '' } }
+  }
+};
+
+const Template = args => { return html `<ptc-select
+	disabled=${args.disabled}
+	helpertext=${args.helpertext}
+	is-required=${args.isRequired}
+	label=${args.label}
+	name=${args.name}
+	ptc-data-eloqua-name=${args.ptcDataEloquaName}
+	selected-value=${args.selectedValue}
+></ptc-select>`;}
+
+export const Example = Template.bind({});
+
+Example.args = {
+  disabled: 'false',
+  helpertext: 'Please select a value!',
+  isRequired: 'true',
+  label: 'undefined',
+  name: 'undefined',
+  ptcDataEloquaName: 'undefined',
+  selectedValue: ''
+}