wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,184 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsField {
+    constructor() {
+        /** Toggles the required sign in the field */
+        this.isRequired = false;
+        /** Sets the field in disabled state */
+        this.isDisabled = false;
+        /** Sets the field's size */
+        this.size = "medium";
+    }
+    getLabel() {
+        if (!this.label)
+            return null;
+        return (h("vds-label", { labelValue: this.label, required: this.isRequired, size: this.size }));
+    }
+    getHelperText() {
+        if (!this.helperText)
+            return null;
+        return (h("span", { class: `vds__field--helper-text ${this.helperTextColor ? `vds__field--helper-text-${this.helperTextColor}` : ""}` }, this.helperText));
+    }
+    render() {
+        return (h(Host, { key: 'a70a8ca4b447d74e228ae36ab39b5f7c3b642124', class: this.isDisabled ? "vds-field--disabled" : "" }, h("div", { key: '09902d46505d9b1bee24bfa000f6c9c47d91680b', class: combineClasses("vds__field__container", `vds__field__container--size-${this.size}`, `${this.isDisabled ? "vds__field__container--disabled" : ""}`) }, this.getLabel(), h("slot", { key: 'e36af7a1cb3e4eab8e0490814cae9b40a1f94b5c' }), this.getHelperText(), this.errorMessage && h("span", { key: '9418935b1330d4e7ac6ae07ebf07875ae27215ba', class: "vds__field--error-message" }, this.errorMessage))));
+    }
+    static get is() { return "vds-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-field.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the field's label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isRequired": {
+                "type": "boolean",
+                "attribute": "is-required",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles the required sign in the field"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isDisabled": {
+                "type": "boolean",
+                "attribute": "is-disabled",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the field in disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "helperText": {
+                "type": "string",
+                "attribute": "helper-text",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the field's helper text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "helperTextColor": {
+                "type": "string",
+                "attribute": "helper-text-color",
+                "mutable": true,
+                "complexType": {
+                    "original": "Colors",
+                    "resolved": "ThemeColors | \"brand-50\" | \"brand-100\" | \"brand-200\" | \"brand-300\" | \"brand-400\" | \"brand-500\" | \"brand-main\" | \"brand-600\" | \"brand-700\" | \"brand-800\" | \"brand-900\" | \"brand-950\" | \"brand-1000\" | \"brand-1000-medium\" | \"brand-1000-low\" | \"brand-1000-lower\" | \"brand-1000-lowest\" | \"green-50\" | \"green-100\" | \"green-200\" | \"green-300\" | \"green-400\" | \"green-500\" | \"green-main\" | \"green-600\" | \"green-700\" | \"green-800\" | \"green-900\" | \"green-950\" | \"grey-50\" | \"grey-100\" | \"grey-200\" | \"grey-300\" | \"grey-400\" | \"grey-500\" | \"grey-main\" | \"grey-600\" | \"grey-700\" | \"grey-800\" | \"grey-900\" | \"grey-950\" | \"neutral-50\" | \"neutral-100\" | \"neutral-200\" | \"neutral-300\" | \"neutral-400\" | \"neutral-500\" | \"neutral-main\" | \"neutral-600\" | \"neutral-700\" | \"neutral-800\" | \"neutral-900\" | \"neutral-950\" | \"neutral-400-medium\" | \"neutral-400-low\" | \"neutral-400-lower\" | \"neutral-800-medium\" | \"neutral-800-low\" | \"orange-50\" | \"orange-100\" | \"orange-200\" | \"orange-300\" | \"orange-400\" | \"orange-500\" | \"orange-main\" | \"orange-600\" | \"orange-700\" | \"orange-800\" | \"orange-900\" | \"orange-950\" | \"red-50\" | \"red-100\" | \"red-200\" | \"red-300\" | \"red-400\" | \"red-500\" | \"red-main\" | \"red-600\" | \"red-700\" | \"red-800\" | \"red-900\" | \"red-950\" | \"yellow-50\" | \"yellow-100\" | \"yellow-200\" | \"yellow-300\" | \"yellow-400\" | \"yellow-500\" | \"yellow-main\" | \"yellow-600\" | \"yellow-700\" | \"yellow-800\" | \"yellow-900\" | \"yellow-950\" | \"white\" | \"black\"",
+                    "references": {
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Colors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the field's helper text color"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "errorMessage": {
+                "type": "string",
+                "attribute": "error-message",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the field's error message"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the field's size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=vds-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-field.js","sourceRoot":"","sources":["../../../src/components/field/vds-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAsB,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAElE,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAO7D,MAAM,OAAO,QAAQ;IALrB;QAQE,6CAA6C;QACpB,eAAU,GAAY,KAAK,CAAA;QACpD,uCAAuC;QACd,eAAU,GAAY,KAAK,CAAA;QAOpD,4BAA4B;QACpB,SAAI,GAAiC,QAAQ,CAAC;KA2CvD;IAzCS,QAAQ;QACd,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAC;QAE7B,OAAO,CACL,iBACE,UAAU,EAAE,IAAI,CAAC,KAAK,EACtB,QAAQ,EAAE,IAAI,CAAC,UAAU,EACzB,IAAI,EAAE,IAAI,CAAC,IAAI,GAEL,CACb,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO,IAAI,CAAC;QAElC,OAAO,CACL,YACE,KAAK,EAAE,2BAA2B,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,2BAA2B,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,IAC9G,IAAI,CAAC,UAAU,CACb,CACR,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE;YACvD,4DACE,KAAK,EACH,cAAc,CAAC,uBAAuB,EACtC,+BAA+B,IAAI,CAAC,IAAI,EAAE,EAC1C,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,iCAAiC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;gBAE/D,IAAI,CAAC,QAAQ,EAAE;gBAChB,8DAAa;gBACZ,IAAI,CAAC,aAAa,EAAE;gBACpB,IAAI,CAAC,YAAY,IAAI,6DAAM,KAAK,EAAE,2BAA2B,IAAG,IAAI,CAAC,YAAY,CAAQ,CACtF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop } from '@stencil/core/internal';\nimport { Colors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-field',\n  styleUrl: 'vds-field.scss',\n  shadow: true,\n})\nexport class VdsField {\n  /** Sets the field's label */\n  @Prop() label: string\n  /** Toggles the required sign in the field */\n  @Prop({ mutable: true }) isRequired: boolean = false \n  /** Sets the field in disabled state */\n  @Prop({ mutable: true }) isDisabled: boolean = false \n  /** Sets the field's helper text */\n  @Prop({ mutable: true }) helperText: string;\n  /** Sets the field's helper text color */\n  @Prop({ mutable: true }) helperTextColor: Colors;\n  /** Sets the field's error message */\n  @Prop({ mutable: true }) errorMessage: string;\n  /** Sets the field's size */\n  @Prop() size: \"small\" | \"medium\" | \"large\" = \"medium\";\n\n  private getLabel(): HTMLStencilElement | null {\n    if (!this.label) return null;\n\n    return (\n      <vds-label \n        labelValue={this.label}\n        required={this.isRequired}\n        size={this.size}\n      >\n      </vds-label>\n    );\n  }\n\n  private getHelperText(): HTMLStencilElement | null {\n    if (!this.helperText) return null;\n\n    return (\n      <span \n        class={`vds__field--helper-text ${this.helperTextColor ? `vds__field--helper-text-${this.helperTextColor}` : \"\"}`}>\n          {this.helperText}\n      </span>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={this.isDisabled ? \"vds-field--disabled\" : \"\"}>\n        <div \n          class={\n            combineClasses(\"vds__field__container\",\n            `vds__field__container--size-${this.size}`,\n            `${this.isDisabled ? \"vds__field__container--disabled\" : \"\"}`)}\n        >\n          {this.getLabel()}\n          <slot></slot>\n          {this.getHelperText()}\n          {this.errorMessage && <span class={\"vds__field--error-message\"}>{this.errorMessage}</span>}\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,62 @@
+import variables from "../../constants/color-vars";
+const COLORS_KEY = Object.keys(variables.palette.all);
+export default {
+    title: 'VDS/Components/Field',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        colors: {
+            options: [...COLORS_KEY, undefined],
+            control: { type: "select" }
+        },
+        size: {
+            options: ["small", "medium", "large"],
+            control: { type: "select" }
+        },
+    },
+};
+const styles = `
+    vds-field {
+        padding: 20px;
+    }
+    .content {
+        height: 2.25rem;
+        width: 19.6rem;
+        background: var(--surface-overlay-hover);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-field
+    label="${args.label}"
+    error-message="${args.errorMessage}"
+    helper-text="${args.helperText}"
+    helper-text-color="${args.colors}"
+    size="${args.size}"
+    is-required="${args.isRequired}"
+    is-disabled="${args.isDisabled}"
+>
+    <div class="content">
+        <vds-icon svg-icon="reverse" color="color-icon-white-high"></vds-icon>
+    </div>
+</vds-field>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    label: "Field 1",
+    errorMessage: "",
+    helperText: "",
+    colors: undefined,
+    size: "medium",
+    isRequired: false,
+    isDisabled: false
+};
+//# sourceMappingURL=vds-field.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-field.stories.js","sourceRoot":"","sources":["../../../src/components/field/vds-field.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,4BAA4B,CAAC;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAEtD,eAAe;IACX,KAAK,EAAE,sBAAsB;IAC7B,UAAU,EAAE;QACR,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACJ;IACD,QAAQ,EAAE;QACN,MAAM,EAAE;YACJ,OAAO,EAAE,CAAC,GAAG,UAAU,EAAE,SAAS,CAAC;YACnC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YACrC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;;;;;;;CAYd,CAAC;AAEF,MAAM,YAAY,GAAG,CAAC,IAAI,EAAE,EAAE;IAC1B,OAAO;SACF,MAAM;;aAEF,IAAI,CAAC,KAAK;qBACF,IAAI,CAAC,YAAY;mBACnB,IAAI,CAAC,UAAU;yBACT,IAAI,CAAC,MAAM;YACxB,IAAI,CAAC,IAAI;mBACF,IAAI,CAAC,UAAU;mBACf,IAAI,CAAC,UAAU;;;;;;CAMjC,CAAC;AACF,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,KAAK,EAAE,SAAS;IAChB,YAAY,EAAE,EAAE;IAChB,UAAU,EAAE,EAAE;IACd,MAAM,EAAE,SAAS;IACjB,IAAI,EAAE,QAAQ;IACd,UAAU,EAAE,KAAK;IACjB,UAAU,EAAE,KAAK;CACpB,CAAC","sourcesContent":["import variables from \"../../constants/color-vars\";\n\nconst COLORS_KEY = Object.keys(variables.palette.all);\n\nexport default {\n    title: 'VDS/Components/Field',\n    parameters: {\n        docs: {\n          toc: true,\n        },\n    },\n    argTypes: {\n        colors: {\n            options: [...COLORS_KEY, undefined],\n            control: { type: \"select\" }\n        },\n        size: {\n            options: [\"small\", \"medium\", \"large\"],\n            control: { type: \"select\" }\n        },\n    },\n};\n\nconst styles = `\n    vds-field {\n        padding: 20px;\n    }\n    .content {\n        height: 2.25rem;\n        width: 19.6rem;\n        background: var(--surface-overlay-hover);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n`;\n \nconst codeTemplate = (args) => {\n    return `\n<style>${styles}</style>\n<vds-field\n    label=\"${args.label}\"\n    error-message=\"${args.errorMessage}\"\n    helper-text=\"${args.helperText}\"\n    helper-text-color=\"${args.colors}\"\n    size=\"${args.size}\"\n    is-required=\"${args.isRequired}\"\n    is-disabled=\"${args.isDisabled}\"\n>\n    <div class=\"content\">\n        <vds-icon svg-icon=\"reverse\" color=\"color-icon-white-high\"></vds-icon>\n    </div>\n</vds-field>\n`;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n    label: \"Field 1\",\n    errorMessage: \"\",\n    helperText: \"\",\n    colors: undefined,\n    size: \"medium\",\n    isRequired: false,\n    isDisabled: false\n};"]}