wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,426 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsTab {
+    constructor() {
+        /**
+         * @deprecated This property is now being overridden by the VdsTabsGroup,
+         * the activeTabIndex property is the new preferred way of setting the default tab.
+         * Sets tab to active state.
+         */
+        this.isActive = false;
+        /** Sets tab to disable state */
+        this.disabled = false;
+        /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */
+        this.type = 'default';
+    }
+    handleKeyDown(event) {
+        if (event.target.nodeName === "VDS-TAB" && event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            if (!this.isActive && !this.disabled) {
+                this.isActive = true;
+                this.isSelected.emit();
+            }
+        }
+    }
+    handleValueChange() {
+        this.valueChanged.emit(this.value);
+    }
+    generateIcon() {
+        const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon ? this.icon : null;
+        if (iconToUse) {
+            return (h("span", { class: "vds__tab--icon-container" }, h("vds-icon", { svgIcon: iconToUse, color: this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium', size: "1.25rem" })));
+        }
+        else {
+            console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');
+        }
+    }
+    generateActionIconButton() {
+        if (this.actionIcon) {
+            return (h("span", { class: "vds__tab--action-icon-button" }, h("vds-icon-button", { icon: this.actionIcon, variant: "tertiary", size: "small", setAriaLabel: this.actionAriaLabel, onClick: (evt) => {
+                    this.handleActionIconClick(evt);
+                }, disabled: this.disabled })));
+        }
+        else {
+            console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');
+        }
+    }
+    generateLabel() {
+        if ((this.value === undefined || this.value === '') && this.type !== 'icon') {
+            console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');
+        }
+        return (h("span", { class: combineClasses('vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '', this.type === 'default' ? 'vds__tab--label-default' : '', this.type === 'text' ? 'vds__tab--label-text' : '', this.type === 'withAction' ? 'vds__tab--label-with-action' : '', this.type === 'withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '', this.type === 'withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : '') }, this.value));
+    }
+    generateTypeDefault() {
+        return (h("div", { class: "vds__tab--default" }, this.generateIcon(), h("span", { class: "vds__tab--spacing-between-content" }), this.generateLabel()));
+    }
+    generateTypeIcon() {
+        return (h("div", { class: "vds__tab--icon" }, this.generateIcon()));
+    }
+    generateTypeWithAction() {
+        return (h("div", { class: "vds__tab--with-action" }, h("div", { class: "vds__tab--with-action-content", tabindex: this.disabled ? "-1" : "0" }, this.generateIcon(), h("span", { class: "vds__tab--spacing-between-content" }), this.generateLabel(), h("span", { class: "vds__tab--spacing-between-content" })), h("div", { class: "vds__tab--with-action-actionable" }, this.generateActionIconButton())));
+    }
+    generateTypeCustom() {
+        return (h("div", { class: "vds__tab--custom" }, h("slot", { name: "tab-header-content" })));
+    }
+    generateTypeText() {
+        return (h("div", { class: "vds__tab--text" }, this.generateLabel()));
+    }
+    // getType: return the formatted content
+    getType() {
+        switch (this.type) {
+            case 'default': {
+                return this.generateTypeDefault();
+            }
+            case 'icon': {
+                return this.generateTypeIcon();
+            }
+            case 'withAction': {
+                return this.generateTypeWithAction();
+            }
+            case 'custom': {
+                return this.generateTypeCustom();
+            }
+            case 'text': {
+                return this.generateTypeText();
+            }
+        }
+    }
+    handleClick(evt) {
+        if (!this.isActive && !this.disabled) {
+            this.isActive = true;
+            this.isSelected.emit(evt);
+        }
+    }
+    handleActionIconClick(evt) {
+        if (this.type === 'withAction') {
+            evt.stopPropagation();
+            this.clicked.emit(evt);
+        }
+    }
+    // setStyle define the width depending the properties prioritizing the width over the maxWidth
+    setStyle() {
+        if (this.width) {
+            return { '--tab-width': this.width };
+        }
+        else if (this.maxWidth) {
+            return { '--tab-max-width': this.maxWidth };
+        }
+        else {
+            return {};
+        }
+    }
+    render() {
+        return (h(Host, { key: 'e2ee87ae6558616c2ede1684f748f3c08e4d2468', style: this.setStyle(), class: this.disabled ? 'vds__tab--disabled' : '' }, h("div", { key: '2a83cef4c92324ebb68f9551bb880e5d8b9ec782', class: combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : ''), role: "tab", "aria-label": this.setAriaLabel ? this.setAriaLabel : this.value, tabindex: this.disabled ? "-1" : "0", onClick: (evt) => {
+                this.handleClick(evt);
+            } }, h("div", { key: '084df0fbd0b43092f5dd9f902033dc505bdca23d', class: "vds__tab-container" }, this.getType())), h("div", { key: 'f394e57f852d59f257ddf263853409ca94707547', class: this.isActive ? 'vds__tab--content-active' : 'vds__tab--content' }, h("slot", { key: 'e1827ac7b7b81b4d11e4f30005d9015090349f85', name: "tab-content" }))));
+    }
+    static get is() { return "vds-tab"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-tab.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-tab.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab title. The value of this property is used by default as an aria-label too."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isActive": {
+                "type": "boolean",
+                "attribute": "is-active",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This property is now being overridden by the VdsTabsGroup, \nthe activeTabIndex property is the new preferred way of setting the default tab. \nSets tab to active state."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab to disable state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "This property is being replaced by informativeIcon. \nSets tab icon. The tab icon is only a visual representation."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "informativeIcon": {
+                "type": "string",
+                "attribute": "informative-icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab icon. The tab icon is only a visual representation."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "attribute": "width",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab fixed width. This property can't be used at the same time with the property maxWidth"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "maxWidth": {
+                "type": "string",
+                "attribute": "max-width",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab maxWidth. This property can't be used at the same time with the property width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "type": {
+                "type": "string",
+                "attribute": "type",
+                "mutable": true,
+                "complexType": {
+                    "original": "'default' | 'icon' | 'withAction' | 'text' | 'custom'",
+                    "resolved": "\"custom\" | \"default\" | \"icon\" | \"text\" | \"withAction\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
+            "actionIcon": {
+                "type": "string",
+                "attribute": "action-icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab action icon button. Only available selecting withAction type."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "actionAriaLabel": {
+                "type": "string",
+                "attribute": "action-aria-label",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets tab action icon button aria-label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "setAriaLabel": {
+                "type": "string",
+                "attribute": "set-aria-label",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "isSelected",
+                "name": "isSelected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when the tab is selected (sets isActive prop to true)"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "clicked",
+                "name": "clicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when the action icon button is clicked"
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "valueChanged",
+                "name": "valueChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when the value is changed"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "handleValueChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-tab.js.map

package/dist/collection/components/tab/vds-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-tab.js","sourceRoot":"","sources":["../../../src/components/tab/vds-tab.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element, Listen, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-tab',\n  styleUrl: 'vds-tab.scss',\n  shadow: true,\n})\nexport class VdsTab {\n  @Element() hostEl: HTMLElement;\n  /** Sets tab title. The value of this property is used by default as an aria-label too. */\n  @Prop() value: string;\n  /** \n   * @deprecated This property is now being overridden by the VdsTabsGroup, \n   * the activeTabIndex property is the new preferred way of setting the default tab. \n   * Sets tab to active state.\n   */\n  @Prop({ mutable: true, reflect: true }) isActive: boolean = false;\n  /** Sets tab to disable state */\n  @Prop({ mutable: true, reflect: true }) disabled: boolean = false;\n  /** \n   * @deprecated This property is being replaced by informativeIcon. \n   * Sets tab icon. The tab icon is only a visual representation. \n   */\n  @Prop({ mutable: true }) icon?: string;\n  /** Sets tab icon. The tab icon is only a visual representation. */\n  @Prop({ mutable: true }) informativeIcon?: string;\n  /** Sets tab fixed width. This property can't be used at the same time with the property maxWidth */\n  @Prop({ mutable: true }) width: string;\n  /** Sets tab maxWidth. This property can't be used at the same time with the property width */\n  @Prop({ mutable: true }) maxWidth: string;\n  /** Sets tab type. Default shows Icon+Label. Icon shows only the Icon. withAction shows the Icon+Label+ActionIconButton. Custom permits define content in a slot. */\n  @Prop({ mutable: true }) type: 'default' | 'icon' | 'withAction' | 'text' | 'custom'= 'default';\n  /** Sets tab action icon button. Only available selecting withAction type. */\n  @Prop({ mutable: true }) actionIcon: string;\n  /** Sets tab action icon button aria-label*/\n  @Prop({ mutable: true }) actionAriaLabel: string;\n  /** Set aria-label for the tab. This property will be used only if the aria-label is required to be different from the value property. */\n  @Prop({ mutable: true }) setAriaLabel: string;\n  /** Emits event when the tab is selected (sets isActive prop to true) */\n  @Event() isSelected: EventEmitter<MouseEvent>;\n  /** Emits event when the action icon button is clicked */\n  @Event() clicked: EventEmitter<MouseEvent>;\n  /** Emits event when the value is changed */\n  @Event() valueChanged: EventEmitter<string>;\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if ((event.target as HTMLElement).nodeName === \"VDS-TAB\" && event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault(); \n      if (!this.isActive && !this.disabled) {\n        this.isActive = true;\n        this.isSelected.emit();\n      }\n    }\n  }\n\n  @Watch('value')\n  handleValueChange() {\n    this.valueChanged.emit(this.value);\n  }\n\n  private generateIcon() {\n    const iconToUse = this.informativeIcon ? this.informativeIcon : this.icon? this.icon : null;\n    if (iconToUse) {\n      return (\n        <span class=\"vds__tab--icon-container\">\n          <vds-icon \n            svgIcon={iconToUse} \n            color={this.disabled ? 'color-icon-disabled' : this.isActive ? 'color-icon-brand-default' : 'color-icon-medium'}\n            size=\"1.25rem\">\n          </vds-icon>\n        </span>\n      );\n    } else {\n      console.warn('Tab component warning: You must set the property informativeIcon to show the icon on the left side when you use default type.');\n    }\n  }\n\n  private generateActionIconButton() {\n    if (this.actionIcon) {\n      return (\n        <span class=\"vds__tab--action-icon-button\">\n          <vds-icon-button\n            icon={this.actionIcon}\n            variant=\"tertiary\"\n            size=\"small\"\n            setAriaLabel={this.actionAriaLabel}\n            onClick={(evt: MouseEvent) => {\n              this.handleActionIconClick(evt);\n            }}\n            disabled={this.disabled}\n          ></vds-icon-button>\n        </span>\n      );\n    } else {\n      console.warn('Tab component warning: You must set the property actionIcon to use the tab type withAction.');\n    }\n  }\n  private generateLabel() {\n    if ((this.value === undefined || this.value === '') && this.type !== 'icon') {\n      console.warn('Tab component warning: You must set the property value to use the tab type default, text or withAction.');\n    }  \n    return (\n      <span class={\n        combineClasses(\n          'vds__tab--label', this.isActive ? 'vds__tab--label-active' : '', this.disabled ? 'vds__tab--label-disabled' : '',\n          this.type==='default' ? 'vds__tab--label-default' : '',\n          this.type==='text' ? 'vds__tab--label-text' : '',\n          this.type==='withAction' ? 'vds__tab--label-with-action' : '',\n          this.type==='withAction' && this.width ? 'vds__tab--label-with-action-fixed-width' : '',\n          this.type==='withAction' && this.maxWidth ? 'vds__tab--label-with-action-fixed-max-width' : ''\n        )}\n      >\n        {this.value}\n      </span>\n    );\n  }\n  private generateTypeDefault() {\n    return (\n      <div class=\"vds__tab--default\">\n        {this.generateIcon()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        {this.generateLabel()}\n      </div>\n    );\n  }\n  private generateTypeIcon() {\n    return (\n      <div class=\"vds__tab--icon\">{this.generateIcon()}</div>\n    );\n  }\n\n  private generateTypeWithAction() {\n    return (\n      <div class=\"vds__tab--with-action\">\n        <div class=\"vds__tab--with-action-content\" tabindex={this.disabled ? \"-1\" :\"0\"}>\n        {this.generateIcon()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        {this.generateLabel()}\n        <span class=\"vds__tab--spacing-between-content\"></span>\n        </div>\n        <div class=\"vds__tab--with-action-actionable\">\n          {this.generateActionIconButton()}\n        </div>\n      </div>\n    );\n  }\n  private generateTypeCustom() {\n    return (\n      <div class=\"vds__tab--custom\">\n        <slot name=\"tab-header-content\"></slot>\n      </div>\n    );\n  }\n    private generateTypeText() {\n    return (\n      <div class=\"vds__tab--text\">\n        {this.generateLabel()}\n      </div>\n    );\n  }\n  // getType: return the formatted content\n  private getType() {\n    switch (this.type) {\n      case 'default': {\n        return this.generateTypeDefault();\n      }\n      case 'icon': {\n        return this.generateTypeIcon();\n      }\n      case 'withAction': {\n        return this.generateTypeWithAction();\n      }\n      case 'custom': {\n        return this.generateTypeCustom();\n      }\n      case 'text': {\n        return this.generateTypeText();\n      }\n    }\n  }\n  private handleClick(evt: MouseEvent): void {\n    if (!this.isActive && !this.disabled) {\n      this.isActive = true;\n      this.isSelected.emit(evt);\n    }\n  }\n  private handleActionIconClick(evt: MouseEvent): void {\n    if (this.type === 'withAction') {\n      evt.stopPropagation();\n      this.clicked.emit(evt);\n    }\n  }\n  \n  // setStyle define the width depending the properties prioritizing the width over the maxWidth\n  private setStyle() {\n    if (this.width) {\n      return { '--tab-width': this.width };\n    } else if (this.maxWidth) {\n      return { '--tab-max-width': this.maxWidth };\n    } else {\n      return {};\n    }\n  }\n\n  render() {\n    return (\n      <Host style={this.setStyle()} class={this.disabled ? 'vds__tab--disabled' : ''}>\n        <div\n          class={combineClasses('vds__tab vds__tab--spacing', this.isActive ? 'vds__tab--active' : '', this.disabled ? 'vds__tab--disabled' : '')}\n          role=\"tab\"\n          aria-label={this.setAriaLabel ? this.setAriaLabel : this.value}\n          tabindex={this.disabled ? \"-1\" :\"0\"}\n          onClick={(evt: MouseEvent) => {\n              this.handleClick(evt);\n            }}\n        >\n          <div class=\"vds__tab-container\">\n            {this.getType()}\n          </div>\n        </div>\n        <div class={this.isActive ? 'vds__tab--content-active' : 'vds__tab--content'}>\n          <slot name=\"tab-content\"></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/tab/vds-tab.stories.js

@@ -0,0 +1,138 @@
+export default {
+    title: 'VDS/Components/Tabs/Simple Tab',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        type: {
+            options: ['default', 'icon', 'text', 'withAction', 'custom'],
+            control: { type: 'select' },
+        },
+        isActive: {
+            options: ['true', 'false'],
+            control: { type: 'select' },
+        },
+        disabled: {
+            options: ['true', 'false'],
+            control: { type: 'select' },
+        },
+    },
+};
+const codeTemplate = args => {
+    return `
+<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>
+<div class="container" role="tablist">  
+  <vds-tab     
+    value="${args.value}"
+    informative-icon="${args.informativeIcon}"
+    type="${args.type}"
+    is-active="${args.isActive}"
+    disabled="${args.disabled}"
+    width="${args.width}"
+    max-width="${args.maxWidth}"
+  >
+    <div data-a11y-ignore slot="tab-content">
+      <div style="text-align:left;padding-top:20px">   
+        Tab 1 content.
+        <br>
+        <vds-button 
+        variant="primary"
+        textAlignment="center"
+        category="button"
+        size="medium"
+        danger="false"
+        disabled="false"
+        text="Button"
+        >Example button</vds-button>
+      </div>
+    </div>  
+  </vds-tab>
+</div>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    value: 'Tab 1',
+    informativeIcon: 'add',
+    type: 'default',
+    isActive: 'false',
+    disabled: 'false',
+    width: '',
+    maxWidth: '',
+};
+const codeTemplateWithActionIconButton = args => {
+    return `
+<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>
+<div class="container" role="tablist">  
+  <vds-tab     
+    value="${args.value}"
+    informative-icon="${args.informativeIcon}"
+    type="${args.type}"
+    is-active="${args.isActive}"
+    action-icon="${args.actionIcon}"
+    action-aria-label="${args.actionAriaLabel}"
+    disabled="${args.disabled}"
+    width="${args.width}"
+    max-width="${args.maxWidth}"
+  >
+    <div data-a11y-ignore slot="tab-content">
+      <div style="text-align:left;padding-top:20px">   
+        Tab 1 content.
+        <br>
+        <vds-button 
+        variant="primary"
+        textAlignment="center"
+        category= "button"
+        size= "medium"
+        danger= "false"
+        disabled= "false"
+        text="Button"
+        >Example button</vds-button>
+      </div>
+    </div>  
+  </vds-tab>
+</div>
+    `;
+};
+export const TabWithActionIconButtonUsage = codeTemplateWithActionIconButton.bind({});
+TabWithActionIconButtonUsage.args = {
+    value: 'Tab with Action Icon Button',
+    informativeIcon: 'add',
+    type: 'withAction',
+    isActive: 'false',
+    actionIcon: 'administration',
+    actionAriaLabel: 'Open Menu',
+    disabled: 'false',
+    width: '',
+    maxWidth: '',
+};
+const codeTemplateCustom = args => {
+    return `
+<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>
+<div class="container" role="tablist">  
+  <vds-tab     
+    type="${args.type}"
+    is-active="${args.isActive}"
+    disabled="${args.disabled}"
+  >
+    <div slot="tab-header-content">
+      <span>Tab 1 Custom</span>
+    </div>
+    <div slot="tab-content">
+      <div data-a11y-ignore style="text-align:left;padding-top:20px">   
+        Tab 1 content.
+      </div>
+    </div>  
+  </vds-tab>
+</div>
+    `;
+};
+export const TabCustomUsage = codeTemplateCustom.bind({});
+TabCustomUsage.args = {
+    type: 'custom',
+    isActive: 'false',
+    disabled: 'false',
+};
+//# sourceMappingURL=vds-tab.stories.js.map

package/dist/collection/components/tab/vds-tab.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-tab.stories.js","sourceRoot":"","sources":["../../../src/components/tab/vds-tab.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,gCAAgC;IACvC,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC;YAC5D,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC;YAC1B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAIF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;;;;aAII,IAAI,CAAC,KAAK;wBACC,IAAI,CAAC,eAAe;YAChC,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;iBACN,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;KAmBzB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IAChB,KAAK,EAAE,OAAO;IACd,eAAe,EAAE,KAAK;IACtB,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE,OAAO;IACjB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,gCAAgC,GAAG,IAAI,CAAC,EAAE;IAC9C,OAAO;;;;aAII,IAAI,CAAC,KAAK;wBACC,IAAI,CAAC,eAAe;YAChC,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;mBACX,IAAI,CAAC,UAAU;yBACT,IAAI,CAAC,eAAe;gBAC7B,IAAI,CAAC,QAAQ;aAChB,IAAI,CAAC,KAAK;iBACN,IAAI,CAAC,QAAQ;;;;;;;;;;;;;;;;;;;KAmBzB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,gCAAgC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEtF,4BAA4B,CAAC,IAAI,GAAG;IAClC,KAAK,EAAE,6BAA6B;IACpC,eAAe,EAAE,KAAK;IACtB,IAAI,EAAE,YAAY;IAClB,QAAQ,EAAE,OAAO;IACjB,UAAU,EAAE,gBAAgB;IAC5B,eAAe,EAAE,WAAW;IAC5B,QAAQ,EAAE,OAAO;IACjB,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,EAAE;CACb,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE;IAChC,OAAO;;;;YAIG,IAAI,CAAC,IAAI;iBACJ,IAAI,CAAC,QAAQ;gBACd,IAAI,CAAC,QAAQ;;;;;;;;;;;;KAYxB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,kBAAkB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAE1D,cAAc,CAAC,IAAI,GAAG;IACpB,IAAI,EAAE,QAAQ;IACd,QAAQ,EAAE,OAAO;IACjB,QAAQ,EAAE,OAAO;CAClB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Tabs/Simple Tab',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    type: {\n      options: ['default', 'icon', 'text', 'withAction', 'custom'],\n      control: { type: 'select' },\n    },\n    isActive: {\n      options: ['true', 'false'],\n      control: { type: 'select' },\n    },\n    disabled: {\n      options: ['true', 'false'],\n      control: { type: 'select' },\n    },\n  },\n};\n\n\n\nconst codeTemplate = args => {\n  return `\n<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>\n<div class=\"container\" role=\"tablist\">  \n  <vds-tab     \n    value=\"${args.value}\"\n    informative-icon=\"${args.informativeIcon}\"\n    type=\"${args.type}\"\n    is-active=\"${args.isActive}\"\n    disabled=\"${args.disabled}\"\n    width=\"${args.width}\"\n    max-width=\"${args.maxWidth}\"\n  >\n    <div data-a11y-ignore slot=\"tab-content\">\n      <div style=\"text-align:left;padding-top:20px\">   \n        Tab 1 content.\n        <br>\n        <vds-button \n        variant=\"primary\"\n        textAlignment=\"center\"\n        category=\"button\"\n        size=\"medium\"\n        danger=\"false\"\n        disabled=\"false\"\n        text=\"Button\"\n        >Example button</vds-button>\n      </div>\n    </div>  \n  </vds-tab>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: 'Tab 1',\n  informativeIcon: 'add',\n  type: 'default',\n  isActive: 'false',\n  disabled: 'false',\n  width: '',\n  maxWidth: '',\n};\n\nconst codeTemplateWithActionIconButton = args => {\n  return `\n<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>\n<div class=\"container\" role=\"tablist\">  \n  <vds-tab     \n    value=\"${args.value}\"\n    informative-icon=\"${args.informativeIcon}\"\n    type=\"${args.type}\"\n    is-active=\"${args.isActive}\"\n    action-icon=\"${args.actionIcon}\"\n    action-aria-label=\"${args.actionAriaLabel}\"\n    disabled=\"${args.disabled}\"\n    width=\"${args.width}\"\n    max-width=\"${args.maxWidth}\"\n  >\n    <div data-a11y-ignore slot=\"tab-content\">\n      <div style=\"text-align:left;padding-top:20px\">   \n        Tab 1 content.\n        <br>\n        <vds-button \n        variant=\"primary\"\n        textAlignment=\"center\"\n        category= \"button\"\n        size= \"medium\"\n        danger= \"false\"\n        disabled= \"false\"\n        text=\"Button\"\n        >Example button</vds-button>\n      </div>\n    </div>  \n  </vds-tab>\n</div>\n    `;\n};\n\nexport const TabWithActionIconButtonUsage = codeTemplateWithActionIconButton.bind({});\n\nTabWithActionIconButtonUsage.args = {\n  value: 'Tab with Action Icon Button',\n  informativeIcon: 'add',\n  type: 'withAction',\n  isActive: 'false',\n  actionIcon: 'administration',\n  actionAriaLabel: 'Open Menu',\n  disabled: 'false',\n  width: '',\n  maxWidth: '',\n};\n\nconst codeTemplateCustom = args => {\n  return `\n<h3>Disclaimer: Make sure the vds-tab is implemented inside a vds-tab-group for the expected behavior</h3>\n<div class=\"container\" role=\"tablist\">  \n  <vds-tab     \n    type=\"${args.type}\"\n    is-active=\"${args.isActive}\"\n    disabled=\"${args.disabled}\"\n  >\n    <div slot=\"tab-header-content\">\n      <span>Tab 1 Custom</span>\n    </div>\n    <div slot=\"tab-content\">\n      <div data-a11y-ignore style=\"text-align:left;padding-top:20px\">   \n        Tab 1 content.\n      </div>\n    </div>  \n  </vds-tab>\n</div>\n    `;\n};\n\nexport const TabCustomUsage = codeTemplateCustom.bind({});\n\nTabCustomUsage.args = {\n  type: 'custom',\n  isActive: 'false',\n  disabled: 'false',\n};\n"]}