wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,176 @@
+import { Host, h } from "@stencil/core";
+import { shadowSubmitForm } from "../../utils/form";
+import { combineClasses } from "../../utils/combine-classes";
+import { cloneAttributes } from "../../utils/clone-attributes";
+export class VdsButton {
+    constructor() {
+        /** Set button's size */
+        this.size = "medium";
+        /** Set button's variant */
+        this.variant = "primary";
+        /** Allow to change the button's text alignment */
+        this.textAlignment = "center";
+        /** Enable button's danger/error state */
+        this.danger = false;
+        /** Enable button's disable state */
+        this.disabled = false;
+        /** Enable button's full width. This prop permits to the component will be adaptable to the container available horizontal space. */
+        this.isFullWidth = false;
+    }
+    handleSubmit(event) {
+        if (this.disabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+        }
+        else {
+            if (this.hostEl.getAttribute("type") === "submit") {
+                this.submitForm();
+            }
+        }
+    }
+    submitForm() {
+        shadowSubmitForm(this.hostEl);
+    }
+    render() {
+        return (h(Host, { key: 'dac867786ec1eea3e08fa680b792c696224801df', class: combineClasses("vds-button", this.isFullWidth ? "vds-button--fullwidth" : "", this.disabled ? "disabled" : "") }, h("button", Object.assign({ key: 'df4252153c3d0b292623710bcc4fcb867055a0f5', onClick: (evt) => this.handleSubmit(evt), class: combineClasses(`vds-button__element`, `vds-button__variant--${this.variant}`, `vds-button__align--${this.textAlignment}`, `vds-button__size--${this.size}`, this.danger ? "vds-button__danger" : "", this.disabled ? "vds-button-disabled" : "", this.isFullWidth ? "vds-button__element_fullwidth" : ""), type: "button", disabled: this.disabled || null }, cloneAttributes(this.hostEl, "disabled", "class", "style")), h("slot", { key: 'e73234af158119b1801bec1059644c9007da3229', name: "icon-left" }), h("slot", { key: '7a3182f7b21887259238ab959561826c0c33f709' }), h("slot", { key: 'dfabfe5fdc62b123ccfdc2234db4d7547285bf95', name: "icon-right" }))));
+    }
+    static get is() { return "vds-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set button's size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"ghost-alt\"",
+                    "resolved": "\"ghost\" | \"ghost-alt\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set button's variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"primary\""
+            },
+            "textAlignment": {
+                "type": "string",
+                "attribute": "text-alignment",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"right\" | \"left\" | \"center\"",
+                    "resolved": "\"center\" | \"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow to change the button's text alignment"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"center\""
+            },
+            "danger": {
+                "type": "boolean",
+                "attribute": "danger",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable button's danger/error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable button's disable state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isFullWidth": {
+                "type": "boolean",
+                "attribute": "is-full-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable button's full width. This prop permits to the component will be adaptable to the container available horizontal space."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=vds-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-button.js","sourceRoot":"","sources":["../../../src/components/button/vds-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAO/D,MAAM,OAAO,SAAS;IALtB;QAME,wBAAwB;QACjB,SAAI,GAAiC,QAAQ,CAAC;QACrD,2BAA2B;QACpB,YAAO,GAAiE,SAAS,CAAC;QACzF,kDAAkD;QAC3C,kBAAa,GAAgC,QAAQ,CAAC;QAC3D,yCAAyC;QACnC,WAAM,GAAY,KAAK,CAAC;QAChC,oCAAoC;QAC7B,aAAQ,GAAY,KAAK,CAAC;QACjC,oIAAoI;QAC7H,gBAAW,GAAY,KAAK,CAAC;KAsDrC;IAlDA,YAAY,CAAC,KAAY;QACtB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,KAAK,CAAC,wBAAwB,EAAE,CAAC;QACnC,CAAC;aAAM,CAAC;YACN,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;gBAClD,IAAI,CAAC,UAAU,EAAE,CAAC;YACpB,CAAC;QACH,CAAC;IACJ,CAAC;IAEQ,UAAU;QAClB,gBAAgB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/B,CAAC;IAEA,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,cAAc,CACzB,YAAY,EACZ,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,EAC/C,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,CAChC;YACC,6EACE,OAAO,EAAE,CAAC,GAAU,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAC/C,KAAK,EAAE,cAAc,CACnB,qBAAqB,EACrB,wBAAwB,IAAI,CAAC,OAAO,EAAE,EACtC,sBAAsB,IAAI,CAAC,aAAa,EAAE,EAC1C,qBAAqB,IAAI,CAAC,IAAI,EAAE,EAChC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EACvC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAC1C,IAAI,CAAC,WAAW,CAAA,CAAC,CAAC,+BAA+B,CAAA,CAAC,CAAA,EAAE,CACrD,EACD,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,IAC5B,eAAe,CACvB,IAAI,CAAC,MAAM,EACL,UAAU,EACV,OAAO,EACP,OAAO,CAAC;gBAEV,6DAAM,IAAI,EAAC,WAAW,GAAQ;gBAC9B,8DAAa;gBACb,6DAAM,IAAI,EAAC,YAAY,GAAQ,CACxB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\nimport { shadowSubmitForm } from '../../utils/form';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\n\n@Component({\n  tag: 'vds-button',\n  styleUrl: 'vds-button.scss',\n  shadow: true,\n})\nexport class VdsButton {\n  /** Set button's size */\n\t@Prop() size: \"large\" | \"medium\" | \"small\" = \"medium\";\n  /** Set button's variant */\n\t@Prop() variant: \"primary\" | \"secondary\" | \"tertiary\" | \"ghost\" | \"ghost-alt\" = \"primary\";\n  /** Allow to change the button's text alignment */\n\t@Prop() textAlignment: \"right\" | \"left\" | \"center\" = \"center\";\n    /** Enable button's danger/error state */\n  @Prop() danger: boolean = false;\n  /** Enable button's disable state */\n\t@Prop() disabled: boolean = false;\n  /** Enable button's full width. This prop permits to the component will be adaptable to the container available horizontal space. */\n\t@Prop() isFullWidth: boolean = false;\n\n  @Element() hostEl: HTMLButtonElement;\n\n\thandleSubmit(event: Event): void {\n    if (this.disabled) {\n      event.preventDefault();\n      event.stopPropagation();\n      event.stopImmediatePropagation();\n    } else {\n      if (this.hostEl.getAttribute(\"type\") === \"submit\") {\n        this.submitForm();\n      }\n    }\n\t}\n\n  private submitForm(): void {\n\t\tshadowSubmitForm(this.hostEl);\n\t}\n\n  render() {\n    return (\n      <Host class={combineClasses(\n        \"vds-button\",\n        this.isFullWidth ? \"vds-button--fullwidth\" : \"\",\n        this.disabled ? \"disabled\" : \"\"\n      )}>\n        <button\n          onClick={(evt: Event) => this.handleSubmit(evt)}\n          class={combineClasses(\n            `vds-button__element`,\n            `vds-button__variant--${this.variant}`,\n            `vds-button__align--${this.textAlignment}`,\n            `vds-button__size--${this.size}`,\n            this.danger ? \"vds-button__danger\" : \"\",\n            this.disabled ? \"vds-button-disabled\" : \"\",\n            this.isFullWidth? \"vds-button__element_fullwidth\":\"\"\n          )}\n          type=\"button\"\n          disabled={ this.disabled || null}\n          {...cloneAttributes(\n\t\t\t\t\t\tthis.hostEl,\n            \"disabled\",\n            \"class\",\n            \"style\")}\n        >\n          <slot name=\"icon-left\"></slot>\n          <slot></slot>\n          <slot name=\"icon-right\"></slot>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"]}

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

@@ -0,0 +1,204 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: 'VDS/Components/Buttons/Button',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28590-13838"
+        }
+    },
+    argTypes: {
+        variant: {
+            options: ["primary", "secondary", "tertiary", "ghost", "ghost-alt"],
+            control: { type: "select" }
+        },
+        size: {
+            options: ["large", "medium", "small"],
+            control: { type: "select" }
+        },
+        textAlignment: {
+            options: ["right", "left", "center"],
+            control: { type: "select" }
+        },
+        iconLeft: {
+            options: ICON_LIST,
+            control: { type: "select" }
+        },
+        iconRight: {
+            options: ICON_LIST,
+            control: { type: "select" }
+        }
+    },
+};
+const getIconSize = size => {
+    switch (size) {
+        case 'small':
+            return '1rem';
+        case 'large':
+            return '1.5rem';
+        default:
+            return '1.25rem';
+    }
+};
+const styles = `vds-button { margin: 20px }`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-button
+    id="btn-test"
+    variant="${args.variant}"
+    text-alignment="${args.textAlignment}"
+    size="${args.size || "medium"}"
+    disabled="${args.disabled || false}"
+    danger="${args.danger || false}"
+    is-full-width="${args.isFullWidth || false}"
+>
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+    ${args.text}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+</vds-button>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    variant: "primary",
+    textAlignment: "center",
+    size: "medium",
+    danger: false,
+    disabled: false,
+    text: "Button",
+    iconLeft: undefined,
+    iconRight: undefined,
+    isFullWidth: false
+};
+const sizesCodeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-button
+    variant="${args.variant}"
+    size="large"
+    disabled="${args.disabled || false}"
+    danger="${args.danger || false}"
+    is-full-width="${args.isFullWidth || false}"
+>
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1.5rem"></vds-icon>` : ""}
+    ${args.text}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1.5rem"></vds-icon>` : ""}
+</vds-button>
+<vds-button
+    variant="${args.variant}"
+    size="medium"
+    disabled="${args.disabled || false}"
+    danger="${args.danger || false}"
+    is-full-width="${args.isFullWidth || false}"
+>
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1.25rem"></vds-icon>` : ""}
+    ${args.text}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1.25rem"></vds-icon>` : ""}
+</vds-button>
+<vds-button
+    variant="${args.variant}"
+    size="small"
+    disabled="${args.disabled || false}"
+    danger="${args.danger || false}"
+    is-full-width="${args.isFullWidth || false}"    
+>
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="1rem"></vds-icon>` : ""}
+    ${args.text}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="1rem"></vds-icon>` : ""}
+</vds-button>
+    `;
+};
+export const Sizes = sizesCodeTemplate.bind({});
+Sizes.args = {
+    variant: "primary",
+    danger: false,
+    disabled: false,
+    text: "Button",
+    iconLeft: undefined,
+    iconRight: undefined,
+    isFullWidth: false
+};
+const buttonsCodeTemplate = (args, variant) => {
+    return `
+<style>${styles}</style>
+<vds-button
+    variant="${variant}"
+    text-alignment="center"
+    size="${args.size || "medium"}"
+    disabled="${args.disabled || false}"
+    danger="${args.danger || false}"
+    is-full-width="${args.isFullWidth || false}" 
+>
+    ${args.iconLeft ? `<vds-icon slot="icon-left" svg-icon="${args.iconLeft}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+    ${args.text}
+    ${args.iconRight ? `<vds-icon slot="icon-right" svg-icon="${args.iconRight}" size="${getIconSize(args.size)}"></vds-icon>` : ""}
+</vds-button>
+    `;
+};
+export const Primary = (args) => buttonsCodeTemplate(args, "primary");
+Primary.args = {
+    size: "medium",
+    danger: false,
+    disabled: false,
+    text: "Primary Button",
+    iconLeft: undefined,
+    iconRight: undefined,
+    isFullWidth: false
+};
+export const Secondary = (args) => buttonsCodeTemplate(args, "secondary");
+Secondary.args = {
+    size: "medium",
+    danger: false,
+    disabled: false,
+    text: "Secondary Button",
+    iconLeft: undefined,
+    iconRight: undefined,
+    isFullWidth: false
+};
+export const Tertiary = (args) => buttonsCodeTemplate(args, "tertiary");
+Tertiary.args = {
+    size: "medium",
+    danger: false,
+    disabled: false,
+    text: "Tertiary Button",
+    iconLeft: undefined,
+    iconRight: undefined,
+    isFullWidth: false
+};
+export const Ghost = (args) => buttonsCodeTemplate(args, "ghost");
+Ghost.args = {
+    size: "medium",
+    danger: false,
+    disabled: false,
+    text: "Ghost Button",
+    iconLeft: undefined,
+    iconRight: undefined,
+    isFullWidth: false
+};
+export const GhostAlt = (args) => buttonsCodeTemplate(args, "ghost-alt");
+GhostAlt.args = {
+    size: "medium",
+    danger: false,
+    disabled: false,
+    text: "Ghost-Alt Button",
+    iconLeft: undefined,
+    iconRight: undefined,
+    isFullWidth: false
+};
+const dangerCodeTemplate = (args) => {
+    const variants = ["primary", "secondary", "ghost", "ghost-alt"];
+    return `
+<style>${styles}</style>
+${variants.map(variant => `<vds-button variant="${variant}" is-full-width="${args.isFullWidth || false}"  size="medium" danger="true">${variant} button</vds-button>`).join("")}`;
+};
+//export const Danger = dangerCodeTemplate.bind({});
+export const Danger = (args) => dangerCodeTemplate(args);
+Danger.args = {
+    isFullWidth: false
+};
+//# sourceMappingURL=vds-button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-button.stories.js","sourceRoot":"","sources":["../../../src/components/button/vds-button.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n    title: 'VDS/Components/Buttons/Button',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n        design: {\n            type: \"figma\",\n            url: \"https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=28590-13838\"\n        }\n    },\n    argTypes: {\n        variant: {\n            options: [\"primary\", \"secondary\", \"tertiary\", \"ghost\", \"ghost-alt\"],\n            control: { type: \"select\" }\n        },\n        size: {\n            options: [\"large\", \"medium\", \"small\"],\n            control: { type: \"select\" }\n        },\n        textAlignment: {\n            options: [\"right\", \"left\", \"center\"],\n            control: { type: \"select\" }\n        },\n        iconLeft: {\n            options: ICON_LIST,\n            control: { type: \"select\" }\n        },\n        iconRight: {\n            options: ICON_LIST,\n            control: { type: \"select\" }\n        }\n    },\n};\n\nconst getIconSize = size => {\n    switch (size) {\n      case 'small':\n        return '1rem';\n      case 'large':\n        return '1.5rem';\n      default:\n        return '1.25rem';\n    }\n};\n\nconst styles = `vds-button { margin: 20px }`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-button\n    id=\"btn-test\"\n    variant=\"${args.variant}\"\n    text-alignment=\"${args.textAlignment}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n    danger=\"${args.danger || false}\"\n    is-full-width=\"${args.isFullWidth || false}\"\n>\n    ${args.iconLeft  ? `<vds-icon slot=\"icon-left\" svg-icon=\"${args.iconLeft}\" size=\"${getIconSize(args.size)}\"></vds-icon>` : \"\"}\n    ${args.text}\n    ${args.iconRight  ? `<vds-icon slot=\"icon-right\" svg-icon=\"${args.iconRight}\" size=\"${getIconSize(args.size)}\"></vds-icon>` : \"\"}\n</vds-button>\n    `;    \n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    variant: \"primary\",\n    textAlignment: \"center\",\n    size: \"medium\",\n    danger: false,\n    disabled: false,\n    text: \"Button\",\n    iconLeft: undefined,\n    iconRight: undefined,\n    isFullWidth: false\n};\n\nconst sizesCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-button\n    variant=\"${args.variant}\"\n    size=\"large\"\n    disabled=\"${args.disabled || false}\"\n    danger=\"${args.danger || false}\"\n    is-full-width=\"${args.isFullWidth || false}\"\n>\n    ${args.iconLeft  ? `<vds-icon slot=\"icon-left\" svg-icon=\"${args.iconLeft}\" size=\"1.5rem\"></vds-icon>` : \"\"}\n    ${args.text}\n    ${args.iconRight  ? `<vds-icon slot=\"icon-right\" svg-icon=\"${args.iconRight}\" size=\"1.5rem\"></vds-icon>` : \"\"}\n</vds-button>\n<vds-button\n    variant=\"${args.variant}\"\n    size=\"medium\"\n    disabled=\"${args.disabled || false}\"\n    danger=\"${args.danger || false}\"\n    is-full-width=\"${args.isFullWidth || false}\"\n>\n    ${args.iconLeft  ? `<vds-icon slot=\"icon-left\" svg-icon=\"${args.iconLeft}\" size=\"1.25rem\"></vds-icon>` : \"\"}\n    ${args.text}\n    ${args.iconRight  ? `<vds-icon slot=\"icon-right\" svg-icon=\"${args.iconRight}\" size=\"1.25rem\"></vds-icon>` : \"\"}\n</vds-button>\n<vds-button\n    variant=\"${args.variant}\"\n    size=\"small\"\n    disabled=\"${args.disabled || false}\"\n    danger=\"${args.danger || false}\"\n    is-full-width=\"${args.isFullWidth || false}\"    \n>\n    ${args.iconLeft  ? `<vds-icon slot=\"icon-left\" svg-icon=\"${args.iconLeft}\" size=\"1rem\"></vds-icon>` : \"\"}\n    ${args.text}\n    ${args.iconRight  ? `<vds-icon slot=\"icon-right\" svg-icon=\"${args.iconRight}\" size=\"1rem\"></vds-icon>` : \"\"}\n</vds-button>\n    `;    \n}\n\nexport const Sizes = sizesCodeTemplate.bind({});\n\nSizes.args = {\n    variant: \"primary\",\n    danger: false,\n    disabled: false,\n    text: \"Button\",\n    iconLeft: undefined,\n    iconRight: undefined,\n    isFullWidth: false\n};\n\n\nconst buttonsCodeTemplate = (args, variant) => {\n    return `\n<style>${styles}</style>\n<vds-button\n    variant=\"${variant}\"\n    text-alignment=\"center\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n    danger=\"${args.danger || false}\"\n    is-full-width=\"${args.isFullWidth || false}\" \n>\n    ${args.iconLeft  ? `<vds-icon slot=\"icon-left\" svg-icon=\"${args.iconLeft}\" size=\"${getIconSize(args.size)}\"></vds-icon>` : \"\"}\n    ${args.text}\n    ${args.iconRight  ? `<vds-icon slot=\"icon-right\" svg-icon=\"${args.iconRight}\" size=\"${getIconSize(args.size)}\"></vds-icon>` : \"\"}\n</vds-button>\n    `;    \n}\n\nexport const Primary = (args) => buttonsCodeTemplate(args, \"primary\");\n\nPrimary.args = {\n    size: \"medium\",\n    danger: false,\n    disabled: false,\n    text: \"Primary Button\",\n    iconLeft: undefined,\n    iconRight: undefined,\n    isFullWidth: false\n};\n\nexport const Secondary  = (args) => buttonsCodeTemplate(args, \"secondary\");\n\nSecondary.args = {\n    size: \"medium\",\n    danger: false,\n    disabled: false,\n    text: \"Secondary Button\",\n    iconLeft: undefined,\n    iconRight: undefined,\n    isFullWidth: false\n};\n\nexport const Tertiary  = (args) => buttonsCodeTemplate(args, \"tertiary\");\n\nTertiary.args = {\n    size: \"medium\",\n    danger: false,\n    disabled: false,\n    text: \"Tertiary Button\",\n    iconLeft: undefined,\n    iconRight: undefined,\n    isFullWidth: false\n};\n\nexport const Ghost  = (args) => buttonsCodeTemplate(args, \"ghost\");\n\nGhost.args = {\n    size: \"medium\",\n    danger: false,\n    disabled: false,\n    text: \"Ghost Button\",\n    iconLeft: undefined,\n    iconRight: undefined,\n    isFullWidth: false\n};\n\nexport const GhostAlt  = (args) => buttonsCodeTemplate(args, \"ghost-alt\");\n\nGhostAlt.args = {\n    size: \"medium\",\n    danger: false,\n    disabled: false,\n    text: \"Ghost-Alt Button\",\n    iconLeft: undefined,\n    iconRight: undefined,\n    isFullWidth: false\n};\n\nconst dangerCodeTemplate = (args) => {\n    const variants = [\"primary\", \"secondary\", \"ghost\", \"ghost-alt\"];\n    return `\n<style>${styles}</style>\n${variants.map(variant => \n    `<vds-button variant=\"${variant}\" is-full-width=\"${args.isFullWidth || false}\"  size=\"medium\" danger=\"true\">${variant} button</vds-button>`\n).join(\"\")}`;    \n}\n\n//export const Danger = dangerCodeTemplate.bind({});\nexport const Danger  = (args) => dangerCodeTemplate(args);\n\nDanger.args = {\n    isFullWidth: false\n};"]}