wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,248 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsLink {
+    constructor() {
+        /** Sets icon position relative to the label text */
+        this.iconPosition = "right";
+        /** Enable / Disable underline text decoration */
+        this.underline = false;
+        /** Sets url link for the internal href */
+        this.url = "#";
+        /** Sets href target */
+        this.target = "_self";
+        /** Sets the link rel value */
+        this.rel = null;
+        /** Set the link size */
+        this.size = "medium";
+        /** Sets the link variant - footer variant is the same as secondary.
+         * @tobedeprecated footer variant will be deprecated in the future.
+         */
+        this.variant = "primary";
+    }
+    /** Sets the informative icon in the vds-link
+     *
+     * @returns HTMLStencilElement
+     */
+    getIcon() {
+        let size = "1.5rem";
+        switch (this.size) {
+            case "2x-small":
+                size = "0.75rem";
+                break;
+            case "extra-small":
+                size = "1rem";
+                break;
+            case "small":
+                size = "1.25rem";
+                break;
+            case "medium":
+                size = "1.5rem";
+                break;
+            case "large":
+                size = "1.75rem";
+                break;
+        }
+        return h("vds-icon", { svgIcon: this.informativeIcon, size: this.variant === "footer" ? "1rem" : size, color: "color-link-default" });
+    }
+    render() {
+        return (h(Host, { key: '707d08b871293bc2cb49f58a60dc7dfd4eacdb66' }, h("a", { key: 'bb0b85941e873eff8daaa7d81ae9f771ef969d53', class: combineClasses(`vds-link vds-link--variant-${this.variant}`, `vds-link vds-link--size-${this.size}`), href: this.url, target: this.target, rel: this.rel }, h("span", { key: 'b9e6bf775faabb49f98b8db0d94c0a636aa307a3', class: combineClasses(`vds-link--container`, `vds-link--icon-position-${this.iconPosition}`) }, this.informativeIcon && this.getIcon(), h("span", { key: 'e4bf728b48fc551de8f027e8feb2b8ddd20b9a0e', class: combineClasses(`vds-link--content ${this.underline ? "vds-link--underline" : ""}`) }, this.value)))));
+    }
+    static get is() { return "vds-link"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-link.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 the value for the label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "iconPosition": {
+                "type": "string",
+                "attribute": "icon-position",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"right\" | \"left\"",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets icon position relative to the label text"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"right\""
+            },
+            "underline": {
+                "type": "boolean",
+                "attribute": "underline",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Enable / Disable underline text decoration"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "url": {
+                "type": "string",
+                "attribute": "url",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets url link for the internal href"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"#\""
+            },
+            "target": {
+                "type": "string",
+                "attribute": "target",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"_self\" | \"_blank\" | \"_parent\" | \"_top\"",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets href target"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"_self\""
+            },
+            "rel": {
+                "type": "string",
+                "attribute": "rel",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the link rel value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "null"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"large\" | \"medium\" | \"small\" | \"extra-small\" | \"2x-small\"",
+                    "resolved": "\"2x-small\" | \"extra-small\" | \"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the link size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
+            "informativeIcon": {
+                "type": "string",
+                "attribute": "informative-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the informative icon in the vds-link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"primary\" | \"secondary\" | \"footer\"",
+                    "resolved": "\"footer\" | \"primary\" | \"secondary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "tobedeprecated",
+                            "text": "footer variant will be deprecated in the future."
+                        }],
+                    "text": "Sets the link variant - footer variant is the same as secondary."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"primary\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=vds-link.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-link.js","sourceRoot":"","sources":["../../../src/components/link/vds-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,MAAM,OAAO,OAAO;IALpB;QAQE,oDAAoD;QAC5C,iBAAY,GAAqB,OAAO,CAAC;QACjD,iDAAiD;QACzC,cAAS,GAAY,KAAK,CAAC;QACnC,0CAA0C;QAClC,QAAG,GAAW,GAAG,CAAC;QAC1B,uBAAuB;QACf,WAAM,GAA4C,OAAO,CAAC;QAClE,8BAA8B;QACtB,QAAG,GAAW,IAAI,CAAC;QAC3B,wBAAwB;QAChB,SAAI,GAA8D,QAAQ,CAAC;QAGnF;;WAEG;QACK,YAAO,GAAuC,SAAS,CAAC;KAgEjE;IA7DC;;;OAGG;IACH,OAAO;QACL,IAAI,IAAI,GAAG,QAAQ,CAAC;QACpB,QAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACjB,KAAK,UAAU;gBACb,IAAI,GAAG,SAAS,CAAC;gBACjB,MAAM;YACR,KAAK,aAAa;gBAChB,IAAI,GAAG,MAAM,CAAC;gBACd,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,GAAG,SAAS,CAAC;gBACjB,MAAM;YACR,KAAK,QAAQ;gBACX,IAAI,GAAG,QAAQ,CAAC;gBAChB,MAAM;YACR,KAAK,OAAO;gBACV,IAAI,GAAG,SAAS,CAAC;gBACjB,MAAM;QACV,CAAC;QAED,OAAO,gBACL,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,IAAI,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,EAC/C,KAAK,EAAC,oBAAoB,GAAY,CAAC;IAC3C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,0DACE,KAAK,EAAE,cAAc,CACnB,8BAA8B,IAAI,CAAC,OAAO,EAAE,EAC5C,2BAA2B,IAAI,CAAC,IAAI,EAAE,CAEvC,EACD,IAAI,EAAE,IAAI,CAAC,GAAG,EACd,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,GAAG,EAAE,IAAI,CAAC,GAAG;gBAEb,6DACA,KAAK,EAAE,cAAc,CAAC,qBAAqB,EACxC,2BAA2B,IAAI,CAAC,YAAY,EAAE,CAChD;oBAEE,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,OAAO,EAAE;oBACvC,6DACE,KAAK,EAAE,cAAc,CACnB,qBAAqB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,EAAE,CACnE,IAEA,IAAI,CAAC,KAAK,CACN,CACF,CACL,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h } from \"@stencil/core\";\nimport { combineClasses } from \"../../utils/combine-classes\";\nimport { HTMLStencilElement } from \"@stencil/core/internal\";\n\n@Component({\n  tag: \"vds-link\",\n  styleUrl: \"vds-link.scss\",\n  shadow: true,\n})\nexport class VdsLink {\n  /** Sets the value for the label text */\n  @Prop() value: string;\n  /** Sets icon position relative to the label text */\n  @Prop() iconPosition: \"right\" | \"left\" = \"right\";\n  /** Enable / Disable underline text decoration */\n  @Prop() underline: boolean = false;\n  /** Sets url link for the internal href */\n  @Prop() url: string = \"#\";\n  /** Sets href target */\n  @Prop() target: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" = \"_self\";\n  /** Sets the link rel value */\n  @Prop() rel: string = null;\n  /** Set the link size */\n  @Prop() size: \"large\" | \"medium\" | \"small\" | \"extra-small\" | \"2x-small\" = \"medium\";\n  /** Sets the informative icon in the vds-link */\n  @Prop() informativeIcon: string;\n  /** Sets the link variant - footer variant is the same as secondary.\n   * @tobedeprecated footer variant will be deprecated in the future.\n   */\n  @Prop() variant: \"primary\" | \"secondary\" | \"footer\" = \"primary\";\n\n\n  /** Sets the informative icon in the vds-link\n   * \n   * @returns HTMLStencilElement\n   */\n  getIcon(): HTMLStencilElement {\n    let size = \"1.5rem\";\n    switch(this.size) {\n      case \"2x-small\":\n        size = \"0.75rem\";\n        break;\n      case \"extra-small\":\n        size = \"1rem\";\n        break;\n      case \"small\":\n        size = \"1.25rem\";\n        break;\n      case \"medium\":\n        size = \"1.5rem\";\n        break;\n      case \"large\":\n        size = \"1.75rem\";\n        break;\n    }\n\n    return <vds-icon\n      svgIcon={this.informativeIcon}\n      size={this.variant === \"footer\" ? \"1rem\" : size}\n      color=\"color-link-default\"></vds-icon>;\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <a\n          class={combineClasses(\n            `vds-link vds-link--variant-${this.variant}`,\n            `vds-link vds-link--size-${this.size}`,\n           \n          )}\n          href={this.url}\n          target={this.target}\n          rel={this.rel}\n        >\n          <span\n          class={combineClasses(`vds-link--container`,\n             `vds-link--icon-position-${this.iconPosition}`\n          )}\n          >\n            {this.informativeIcon && this.getIcon()}\n            <span\n              class={combineClasses(\n                `vds-link--content ${this.underline ? \"vds-link--underline\" : \"\"}`\n              )}\n            >\n              {this.value}\n            </span>\n          </span>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,100 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: "VDS/Components/Link",
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        size: {
+            options: ["2x-small", "extra-small", "small", "medium", "large"],
+            control: { type: "select" },
+        },
+        informativeIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+        iconPosition: {
+            options: ["left", "right"],
+            control: { type: "select" },
+        },
+        target: {
+            options: ["_self", "_blank", "_parent", "_top"],
+            control: { type: "select" },
+        },
+        variant: {
+            options: ["primary", "secondary"],
+            control: { type: "select" },
+        },
+        rel: {
+            control: { type: "text" }
+        }
+    },
+};
+const styles = `
+    .container {
+      margin: 10px;
+    }    
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <vds-link
+        value="${args.value || "Link Item"}"    
+        underline="${args.underline || false}"
+        url="${args.url || "#"}"
+        target="${args.target || "_blank"}"
+        size="${args.size || "medium"}"
+        variant="${args.variant || "primary"}"
+        icon-position="${args.iconPosition || "right"}"
+        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}"
+       >
+    </vds-link>
+</div>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    value: "Link Item",
+    underline: false,
+    url: "https://example.com",
+    target: "_blank",
+    size: "medium",
+    variant: "primary",
+    informativeIcon: undefined,
+    rel: undefined
+};
+const codeWithIconTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <vds-link
+        value="${args.value || "Link Item"}"    
+        underline="${args.underline || false}"
+        url="${args.url || "#"}"
+        target="${args.target || "_blank"}"
+        size="${args.size || "medium"}"
+        variant="${args.variant || "primary"}"
+        icon-position="${args.iconPosition || "right"}"
+        rel="${args.rel}"
+        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}"
+       >
+    </vds-link>
+</div>
+    `;
+};
+export const BasicIconUsage = codeWithIconTemplate.bind({});
+BasicIconUsage.args = {
+    value: "Link Item",
+    underline: false,
+    url: "https://example.com",
+    target: "_blank",
+    size: "large",
+    variant: "primary",
+    iconPosition: "rigth",
+    informativeIcon: "barcode"
+};
+//# sourceMappingURL=vds-link.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-link.stories.js","sourceRoot":"","sources":["../../../src/components/link/vds-link.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nexport default {\n  title: \"VDS/Components/Link\",\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    size: {\n      options: [\"2x-small\",\"extra-small\", \"small\", \"medium\", \"large\"],\n      control: { type: \"select\" },\n    },\n    informativeIcon: {\n      options: [...ICON_LIST, undefined],\n      control: { type: \"select\" }\n    },\n    iconPosition: {\n      options: [\"left\", \"right\"],\n      control: { type: \"select\" },\n    },\n    target: {\n      options: [\"_self\", \"_blank\", \"_parent\", \"_top\"],\n      control: { type: \"select\" },\n    },\n    variant: {\n      options: [\"primary\", \"secondary\"],\n      control: { type: \"select\" },\n    },\n    rel: {\n      control: { type: \"text\" }\n    }\n  },\n};\n\nconst styles = `\n    .container {\n      margin: 10px;\n    }    \n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-link\n        value=\"${args.value || \"Link Item\"}\"    \n        underline=\"${args.underline || false}\"\n        url=\"${args.url || \"#\"}\"\n        target=\"${args.target || \"_blank\"}\"\n        size=\"${args.size || \"medium\"}\"\n        variant=\"${args.variant || \"primary\"}\"\n        icon-position=\"${args.iconPosition || \"right\"}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\"\n       >\n    </vds-link>\n</div>\n    `;\n};\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n  value: \"Link Item\",\n  underline: false,\n  url: \"https://example.com\",\n  target: \"_blank\",\n  size: \"medium\",\n  variant: \"primary\",\n  informativeIcon: undefined,\n  rel: undefined\n};\n\nconst codeWithIconTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-link\n        value=\"${args.value || \"Link Item\"}\"    \n        underline=\"${args.underline || false}\"\n        url=\"${args.url || \"#\"}\"\n        target=\"${args.target || \"_blank\"}\"\n        size=\"${args.size || \"medium\"}\"\n        variant=\"${args.variant || \"primary\"}\"\n        icon-position=\"${args.iconPosition || \"right\"}\"\n        rel=\"${args.rel}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\"\n       >\n    </vds-link>\n</div>\n    `;\n};\n\nexport const BasicIconUsage = codeWithIconTemplate.bind({});\n\nBasicIconUsage.args = {\n  value: \"Link Item\",\n  underline: false,\n  url: \"https://example.com\",\n  target: \"_blank\",\n  size: \"large\",\n  variant: \"primary\",\n  iconPosition: \"rigth\",\n  informativeIcon: \"barcode\"\n};\n"]}