wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,151 @@
+import { Host, h } from "@stencil/core";
+import { shadowSubmitForm } from "../../utils/form";
+import { combineClasses } from "../../utils/combine-classes";
+import { cloneAttributes } from "../../utils/clone-attributes";
+import { ICON_SIZE } from "./vds-icon-button.utils";
+export class VdsIconButton {
+    constructor() {
+        /** Set icon button's size */
+        this.size = "medium";
+        /** Set icon button's variant */
+        this.variant = "primary";
+        /** Enable icon button's disable state */
+        this.disabled = false;
+    }
+    handleSubmit() {
+        if (this.hostEl.getAttribute("type") === "submit") {
+            this.submitForm();
+        }
+    }
+    submitForm() {
+        shadowSubmitForm(this.hostEl);
+    }
+    render() {
+        return (h(Host, { key: '24a70db035999a301b74b3d82ade90716b43d4f7', class: combineClasses(`vds-icon-button`, this.disabled ? "vds-icon-button--disabled" : "") }, h("button", Object.assign({ key: '23fa3caf95ae19ae0f47ea5cbc2543195912f152', class: combineClasses(`vds-icon-button__element`, `vds-icon-button__variant--${this.variant}`, `vds-icon-button__size--${this.size}`, this.disabled ? "vds-icon-button-disabled" : ""), "aria-label": this.setAriaLabel, type: "button", disabled: this.disabled || null }, cloneAttributes(this.hostEl, "disabled", "class", "style")), h("vds-icon", { key: '65269751a986b1613cef4831c2435b969f5ca640', "svg-icon": this.icon, size: ICON_SIZE[this.size] }))));
+    }
+    static get is() { return "vds-icon-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-icon-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-icon-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"large\" | \"medium\" | \"small\" | \"extra-small\"",
+                    "resolved": "\"extra-small\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set icon button's size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "resolved": "\"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set icon button's variant"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"primary\""
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable icon button's disable state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "attribute": "icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the icon inside icon button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "setAriaLabel": {
+                "type": "string",
+                "attribute": "set-aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the button icon arial-label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleSubmit",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-icon-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-icon-button.js","sourceRoot":"","sources":["../../../src/components/icon-button/vds-icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAOpD,MAAM,OAAO,aAAa;IAL1B;QAME,6BAA6B;QACtB,SAAI,GAAiD,QAAQ,CAAC;QACrE,gCAAgC;QACzB,YAAO,GAAyC,SAAS,CAAC;QACjE,yCAAyC;QAClC,aAAQ,GAAY,KAAK,CAAC;KA4ClC;IAnCA,YAAY;QACX,IAAI,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE,CAAC;YACnD,IAAI,CAAC,UAAU,EAAE,CAAC;QACnB,CAAC;IACF,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,CAAC,iBAAiB,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,CAAC;YAC9F,6EACE,KAAK,EAAE,cAAc,CACnB,0BAA0B,EAC1B,6BAA6B,IAAI,CAAC,OAAO,EAAE,EAC3C,0BAA0B,IAAI,CAAC,IAAI,EAAE,EACrC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,0BAA0B,CAAC,CAAC,CAAC,EAAE,CAChD,gBACW,IAAI,CAAC,YAAY,EAC7B,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAG,IAAI,CAAC,QAAQ,IAAI,IAAI,IAC5B,eAAe,CACvB,IAAI,CAAC,MAAM,EACL,UAAU,EACV,OAAO,EACP,OAAO,CACR;gBAED,6EAAoB,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAa,CAC/D,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Listen, Prop, h } from '@stencil/core';\nimport { shadowSubmitForm } from '../../utils/form';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { cloneAttributes } from '../../utils/clone-attributes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { ICON_SIZE } from './vds-icon-button.utils';\n\n@Component({\n  tag: 'vds-icon-button',\n  styleUrl: 'vds-icon-button.scss',\n  shadow: true,\n})\nexport class VdsIconButton {\n  /** Set icon button's size */\n\t@Prop() size: \"large\" | \"medium\" | \"small\" | \"extra-small\" = \"medium\";\n  /** Set icon button's variant */\n\t@Prop() variant: \"primary\" | \"secondary\" | \"tertiary\" = \"primary\";\n  /** Enable icon button's disable state */\n\t@Prop() disabled: boolean = false;\n  /** Sets the icon inside icon button */\n\t@Prop() icon: string;\n  /** Sets the button icon arial-label */\n  @Prop({reflect: true}) setAriaLabel: string;\n  \n  @Element() hostEl: HTMLVdsButtonElement;\n\n  @Listen(\"click\")\n\thandleSubmit(): void {\n\t\tif (this.hostEl.getAttribute(\"type\") === \"submit\") {\n\t\t\tthis.submitForm();\n\t\t}\n\t}\n\n  private submitForm(): void {\n\t\tshadowSubmitForm(this.hostEl);\n\t}\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(`vds-icon-button`, this.disabled ? \"vds-icon-button--disabled\" : \"\")}>\n        <button\n          class={combineClasses(\n            `vds-icon-button__element`,\n            `vds-icon-button__variant--${this.variant}`,\n            `vds-icon-button__size--${this.size}`,\n            this.disabled ? \"vds-icon-button-disabled\" : \"\"\n          )}\n          aria-label={this.setAriaLabel}\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        >\n          <vds-icon svg-icon={this.icon} size={ICON_SIZE[this.size]}></vds-icon>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,98 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: 'VDS/Components/Buttons/Icon-Button',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        variant: {
+            options: ["primary", "secondary", "tertiary"],
+            control: { type: "select" }
+        },
+        size: {
+            options: ["large", "medium", "small", "extra-small"],
+            control: { type: "select" }
+        },
+        icon: {
+            options: ICON_LIST,
+            control: { type: "select" }
+        }
+    },
+};
+const styles = `vds-icon-button { margin: 20px }`;
+const basicCodeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-icon-button
+    icon="${args.icon}"
+    variant="${args.variant}"
+    size="${args.size || "medium"}"
+    disabled="${args.disabled || false}"
+></vds-icon-button>
+    `;
+};
+export const BasicUsage = basicCodeTemplate.bind({});
+BasicUsage.args = {
+    variant: "primary",
+    size: "medium",
+    icon: "star",
+    disabled: false
+};
+const primaryCodeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-icon-button
+    icon="${args.icon}"
+    variant="${args.variant}"
+    size="${args.size || "medium"}"
+    disabled="${args.disabled || false}"
+></vds-icon-button>
+    `;
+};
+export const Primary = primaryCodeTemplate.bind({});
+Primary.args = {
+    variant: "primary",
+    size: "medium",
+    icon: "home",
+    disabled: false
+};
+const secondaryCodeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-icon-button
+    icon="${args.icon}"
+    variant="${args.variant}"
+    size="${args.size || "medium"}"
+    disabled="${args.disabled || false}"
+></vds-icon-button>
+    `;
+};
+export const Secondary = secondaryCodeTemplate.bind({});
+Secondary.args = {
+    variant: "secondary",
+    size: "medium",
+    icon: "train",
+    disabled: false
+};
+const tertiaryCodeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-icon-button
+    icon="${args.icon}"
+    variant="${args.variant}"
+    size="${args.size || "medium"}"
+    disabled="${args.disabled || false}"
+></vds-icon-button>
+    `;
+};
+export const Tertiary = tertiaryCodeTemplate.bind({});
+Tertiary.args = {
+    variant: "tertiary",
+    size: "medium",
+    icon: "copy",
+    disabled: false
+};
+//# sourceMappingURL=vds-icon-button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-icon-button.stories.js","sourceRoot":"","sources":["../../../src/components/icon-button/vds-icon-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/Icon-Button',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n    },\n    argTypes: {\n        variant: {\n            options: [\"primary\", \"secondary\", \"tertiary\"],\n            control: { type: \"select\" }\n        },\n        size: {\n            options: [\"large\", \"medium\", \"small\", \"extra-small\"],\n            control: { type: \"select\" }\n        },\n        icon: {\n            options: ICON_LIST,\n            control: { type: \"select\" }\n        }\n    },\n};\n\nconst styles = `vds-icon-button { margin: 20px }`;\n \nconst basicCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const BasicUsage = basicCodeTemplate.bind({});\n\nBasicUsage.args = {\n    variant: \"primary\",\n    size: \"medium\",\n    icon: \"star\",\n    disabled: false\n};\n\n \nconst primaryCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const Primary = primaryCodeTemplate.bind({});\n\nPrimary.args = {\n    variant: \"primary\",\n    size: \"medium\",\n    icon: \"home\",\n    disabled: false\n};\n\n \nconst secondaryCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const Secondary = secondaryCodeTemplate.bind({});\n\nSecondary.args = {\n    variant: \"secondary\",\n    size: \"medium\",\n    icon: \"train\",\n    disabled: false\n};\n\n \nconst tertiaryCodeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-icon-button\n    icon=\"${args.icon}\"\n    variant=\"${args.variant}\"\n    size=\"${args.size || \"medium\"}\"\n    disabled=\"${args.disabled || false}\"\n></vds-icon-button>\n    `;    \n}\n\nexport const Tertiary = tertiaryCodeTemplate.bind({});\n\nTertiary.args = {\n    variant: \"tertiary\",\n    size: \"medium\",\n    icon: \"copy\",\n    disabled: false\n};\n"]}

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

@@ -0,0 +1,7 @@
+export const ICON_SIZE = {
+    "extra-small": "0.75rem",
+    "small": "1rem",
+    "medium": "1.25rem",
+    "large": "1.5rem",
+};
+//# sourceMappingURL=vds-icon-button.utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-icon-button.utils.js","sourceRoot":"","sources":["../../../src/components/icon-button/vds-icon-button.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,SAAS,GAAG;IACrB,aAAa,EAAE,SAAS;IACxB,OAAO,EAAE,MAAM;IACf,QAAQ,EAAE,SAAS;IACnB,OAAO,EAAE,QAAQ;CACpB,CAAC","sourcesContent":["export const ICON_SIZE = {\n    \"extra-small\": \"0.75rem\",\n    \"small\": \"1rem\",\n    \"medium\": \"1.25rem\",\n    \"large\": \"1.5rem\",\n};\n"]}