npm - wabtec-internal-volt-basic-components - Versions diffs - 1.0.0 - Mend

wabtec-internal-volt-basic-components 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1131) hide show

package/dist/collection/components/icon/vds-icon.js ADDED Viewed

@@ -0,0 +1,178 @@
+import { Host, h } from "@stencil/core";
+import * as svgs from "../../constants/icon-sprite";
+import { combineClasses } from "../../utils/combine-classes";
+import { GenerateVdsSvg } from "../../utils/icon-generation.utils";
+export class VdsIcon {
+    constructor() {
+        /** Set icon color based in volt palette */
+        this.color = 'brand-main';
+    }
+    async componentWillLoad() {
+        if (this.isValidUrl(this.svgIcon) && this.isValidSvgUrl(this.svgIcon)) {
+            this.svgContent = await this.setSvgContent(this.svgIcon);
+        }
+    }
+    isSvgString(svgIcon) {
+        var _a;
+        return (_a = svgIcon === null || svgIcon === void 0 ? void 0 : svgIcon.trim().startsWith('<svg')) !== null && _a !== void 0 ? _a : false;
+    }
+    isValidUrl(svgIcon) {
+        try {
+            new URL(svgIcon);
+            return true;
+        }
+        catch (err) {
+            return false;
+        }
+    }
+    isInternalIcon(svgIcon) {
+        const icons = Object.keys(svgs.default);
+        return icons.some(icon => icon === svgIcon + '.svg');
+    }
+    isValidSvgUrl(svgIcon) {
+        return svgIcon === null || svgIcon === void 0 ? void 0 : svgIcon.endsWith('.svg');
+    }
+    async setSvgContent(svgIcon) {
+        return await this.fetchSvgContent(svgIcon);
+    }
+    async fetchSvgContent(url) {
+        try {
+            const response = await fetch(url);
+            return !response.ok ? null : await response.text();
+        }
+        catch (error) {
+            return null;
+        }
+    }
+    getSize() {
+        if (this.size && this.size.indexOf(',') > -1) {
+            const sizes = this.size.split(',');
+            return {
+                width: sizes[0] ? sizes[0] : '1rem',
+                height: sizes[1] ? sizes[1] : '1rem',
+            };
+        }
+        return { width: this.size ? this.size : '1rem', height: this.size ? this.size : '1rem' };
+    }
+    getSvgContent() {
+        if (this.isSvgString(this.svgIcon)) {
+            return GenerateVdsSvg(this.svgIcon);
+        }
+        if (this.isValidSvgUrl(this.svgIcon) && this.svgContent) {
+            return GenerateVdsSvg(this.svgContent);
+        }
+        return svgs.default[`${this.svgIcon}.svg`];
+    }
+    render() {
+        return (h(Host, { key: '6f239066b1496a9ed04a3752fb67c7851297eee0', class: combineClasses('volt-icon', `color-${this.color}`) }, this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ?
+            (h("div", { part: "svg-icon", style: this.getSize(), class: combineClasses('volt-icon-svg'), innerHTML: this.getSvgContent() }))
+            :
+                (h("img", { style: this.getSize(), src: this.svgIcon, alt: `${this.alt} icon` }))));
+    }
+    static get is() { return "vds-icon"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-icon.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-icon.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "svgIcon": {
+                "type": "string",
+                "attribute": "svg-icon",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set svg icon name to display"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set icon size in px or rem, IE: 1.25rem"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "color": {
+                "type": "string",
+                "attribute": "color",
+                "mutable": true,
+                "complexType": {
+                    "original": "IconColors | Colors",
+                    "resolved": "\"color-background-disabled\" | \"color-background-brand-default\" | \"color-background-brand-hover\" | \"color-background-brand-press\" | \"color-background-caution-default\" | \"color-background-caution-lowest-default\" | \"color-background-caution-lowest-hover\" | \"color-background-caution-lowest-press\" | \"color-background-danger-default\" | \"color-background-danger-high-default\" | \"color-background-danger-high-hover\" | \"color-background-danger-high-press\" | \"color-background-danger-lowest-default\" | \"color-background-danger-lowest-hover\" | \"color-background-danger-lowest-press\" | \"color-background-general-default\" | \"color-background-general-lowest-default\" | \"color-background-general-lowest-hover\" | \"color-background-general-lowest-press\" | \"color-background-healthy-default\" | \"color-background-healthy-lowest-default\" | \"color-background-healthy-lowest-hover\" | \"color-background-healthy-lowest-press\" | \"color-background-information-default\" | \"color-background-information-lowest-default\" | \"color-background-information-lowest-hover\" | \"color-background-information-lowest-press\" | \"color-background-neutral-default\" | \"color-background-neutral-hover\" | \"color-background-neutral-press\" | \"color-background-neutral-lowest-default\" | \"color-background-neutral-lowest-hover\" | \"color-background-neutral-lowest-press\" | \"color-background-warning-default\" | \"color-background-warning-lowest-default\" | \"color-background-warning-lowest-hover\" | \"color-background-warning-lowest-press\" | \"color-border-high\" | \"color-border-medium\" | \"color-border-low\" | \"color-border-lower\" | \"color-border-lowest\" | \"color-border-brand\" | \"color-border-brand-hover\" | \"color-border-disabled\" | \"color-border-danger\" | \"color-border-healthy\" | \"color-border-caution\" | \"color-border-warning\" | \"color-border-information\" | \"color-border-general\" | \"color-border-focus-1\" | \"color-border-focus-2\" | \"color-border-white-high\" | \"color-border-white-medium\" | \"color-border-white-low\" | \"color-border-white-lower\" | \"color-border-white-lowest\" | \"color-icon-high\" | \"color-icon-medium\" | \"color-icon-low\" | \"color-icon-disabled\" | \"color-icon-healthy\" | \"color-icon-caution\" | \"color-icon-warning\" | \"color-icon-danger\" | \"color-icon-information\" | \"color-icon-general\" | \"color-icon-brand-default\" | \"color-icon-brand-hover\" | \"color-icon-brand-press\" | \"color-icon-white-high\" | \"color-icon-white-medium\" | \"color-icon-white-low\" | \"color-interaction-black-medium\" | \"color-interaction-black-low\" | \"color-interaction-black-lower\" | \"color-interaction-black-lowest\" | \"color-interaction-brand-medium\" | \"color-interaction-brand-low\" | \"color-interaction-brand-lower\" | \"color-interaction-brand-lowest\" | \"color-interaction-danger-medium\" | \"color-interaction-danger-low\" | \"color-interaction-danger-lower\" | \"color-interaction-danger-lowest\" | \"color-interaction-white-medium\" | \"color-interaction-white-low\" | \"color-interaction-white-lower\" | \"color-interaction-white-lowest\" | \"color-interaction-backdrop\" | \"color-link-default\" | \"color-link-hover\" | \"color-link-press\" | \"color-text-high\" | \"color-text-medium\" | \"color-text-low\" | \"color-text-disabled\" | \"color-text-brand\" | \"color-text-caution-high\" | \"color-text-caution-medium\" | \"color-text-danger-high\" | \"color-text-danger-medium\" | \"color-text-general-high\" | \"color-text-general-medium\" | \"color-text-healthy-high\" | \"color-text-healthy-medium\" | \"color-text-information-high\" | \"color-text-information-medium\" | \"color-text-warning-high\" | \"color-text-warning-medium\" | \"color-text-white-high\" | \"color-text-white-medium\" | \"color-text-white-low\" | \"surface-higher\" | \"surface-high\" | \"surface-medium\" | \"surface-low\" | \"surface-lower\" | \"surface-neutral-default\" | \"surface-neutral-hover\" | \"surface-neutral-press\" | \"surface-overlay-default\" | \"surface-overlay-hover\" | \"surface-overlay-press\" | \"surface-elevation-01\" | \"surface-elevation-02\" | \"surface-elevation-03\" | \"surface-elevation-04\" | \"box-shadow-color-01\" | \"box-shadow-color-02\" | \"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": {
+                        "IconColors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::IconColors"
+                        },
+                        "Colors": {
+                            "location": "import",
+                            "path": "../../definitions/colors",
+                            "id": "src/definitions/colors.ts::Colors"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set icon color based in volt palette"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'brand-main'"
+            },
+            "alt": {
+                "type": "string",
+                "attribute": "alt",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set alt text for accesibility"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=vds-icon.js.map

package/dist/collection/components/icon/vds-icon.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-icon.js","sourceRoot":"","sources":["../../../src/components/icon/vds-icon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { Element, HostElement, Prop } from '@stencil/core/internal';\nimport * as svgs from '../../constants/icon-sprite';\nimport { Colors, IconColors } from '../../definitions/colors';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { GenerateVdsSvg } from '../../utils/icon-generation.utils';\n\n@Component({\n tag: 'vds-icon',\n styleUrl: 'vds-icon.scss',\n shadow: true,\n})\nexport class VdsIcon {\n /** Set svg icon name to display */\n @Prop({ mutable: true }) svgIcon: string;\n /** Set icon size in px or rem, IE: 1.25rem */\n @Prop({ mutable: true }) size: string;\n /** Set icon color based in volt palette */\n @Prop({ mutable: true }) color: IconColors | Colors = 'brand-main';\n /** Set alt text for accesibility */\n @Prop({ mutable: true }) alt: string;\n\n @Element() host: HTMLDivElement; \n \n private svgContent: string;\n\n async componentWillLoad(): Promise<void> {\n if (this.isValidUrl(this.svgIcon) && this.isValidSvgUrl(this.svgIcon)) {\n this.svgContent = await this.setSvgContent(this.svgIcon);\n }\n }\n\n private isSvgString(svgIcon: string): boolean {\n return svgIcon?.trim().startsWith('<svg')?? false;\n }\n\n private isValidUrl(svgIcon: string): boolean {\n try {\n new URL(svgIcon);\n return true;\n } catch (err) {\n return false;\n }\n }\n\n private isInternalIcon(svgIcon: string): boolean {\n const icons = Object.keys(svgs.default);\n\n return icons.some(icon => icon === svgIcon+'.svg');\n }\n private isValidSvgUrl(svgIcon: string): boolean {\n return svgIcon?.endsWith('.svg');\n }\n\n private async setSvgContent(svgIcon: string): Promise<string | null> {\n return await this.fetchSvgContent(svgIcon);\n }\n\n private async fetchSvgContent(url: string): Promise<string | null> {\n try {\n const response = await fetch(url);\n return !response.ok ? null : await response.text();\n } catch (error) {\n return null;\n }\n }\n private getSize() {\n if (this.size && this.size.indexOf(',') > -1) {\n const sizes = this.size.split(',');\n return {\n width: sizes[0] ? sizes[0] : '1rem',\n height: sizes[1] ? sizes[1] : '1rem',\n };\n }\n return { width: this.size ? this.size : '1rem', height: this.size ? this.size : '1rem' };\n }\n\n private getSvgContent(): string {\n if (this.isSvgString(this.svgIcon)) {\n return GenerateVdsSvg(this.svgIcon);\n }\n\n if (this.isValidSvgUrl(this.svgIcon) && this.svgContent) {\n return GenerateVdsSvg(this.svgContent);\n }\n\n return svgs.default[`${this.svgIcon}.svg`];\n }\n\n render(): HostElement {\n return (\n <Host class={combineClasses('volt-icon', `color-${this.color}`)}>\n {this.isInternalIcon(this.svgIcon) || this.isSvgString(this.svgIcon) ? \n (\n <div\n part=\"svg-icon\"\n style={this.getSize()}\n class={combineClasses('volt-icon-svg')}\n innerHTML={this.getSvgContent()}>\n </div>\n ) \n : \n (\n <img style={this.getSize()} src={this.svgIcon} alt={`${this.alt} icon`} />\n )\n }\n </Host>\n );\n }\n}"]}

package/dist/collection/components/icon/vds-icon.stories.js ADDED Viewed

@@ -0,0 +1,215 @@
+import { ACTION, BRAND, CONTROL, DATA, DEVICE, FILES, INVENTORY, NAVIGATION, STATUS, TIME, TOGGLE, TOOL, TRANSPORT, USER, getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+const svgExample = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4624 2.41407C17.2587 2.01855 18.6488 3.97488 17.6844 5.54106L11.2391 16.0079C10.2496 17.6149 7.80416 17.1834 7.42439 15.3348L6.5649 11.1512C6.54844 11.071 6.49972 11.0012 6.43018 10.9581L2.98664 8.82337C1.39738 7.83814 1.81021 5.42017 3.63634 5.01807L15.4624 2.41407ZM16.1639 4.60473C16.3016 4.38099 16.103 4.10151 15.8464 4.15802L4.02034 6.76201C3.75947 6.81946 3.70049 7.16488 3.92753 7.30563L7.37107 9.44037C7.85779 9.74211 8.19885 10.2309 8.31409 10.7918L9.17358 14.9755C9.22783 15.2395 9.57717 15.3012 9.71854 15.0716L16.1639 4.60473Z" fill="white"/>
+</svg>`;
+export default {
+    title: 'VDS/Components/Icon',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        color: {
+            options: ["color-icon-high", "color-icon-medium", "color-icon-low",
+                "color-icon-disabled", "color-icon-healthy", "color-icon-caution",
+                "color-icon-warning", "color-icon-danger", "color-icon-white-low"],
+            control: { type: "select" }
+        },
+        svgIcon: {
+            options: ICON_LIST,
+            control: { type: "select" }
+        },
+        size: {
+            options: ["12px", "1rem", "20px", "2em", "5rem"],
+            control: { type: "select" }
+        }
+    },
+};
+const codeTemplate = (args) => {
+    return `
+<vds-icon
+    svg-icon="${args.svgIcon}"
+    size="${args.size}"
+    color="${args.color}"
+    alt="${args.alt}"
+></vds-icon>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    svgIcon: "star",
+    size: "5rem",
+    color: "color-icon-warning",
+    alt: "Star icon",
+};
+const codeTemplateSvgFile = (args) => {
+    return `
+<vds-icon
+    svg-icon='${svgExample}'
+    size="${args.size}"
+    color="${args.color}"
+    alt="${args.alt}"
+></vds-icon>
+    `;
+};
+export const BasicUsageWithSvgVariable = codeTemplateSvgFile.bind({});
+BasicUsageWithSvgVariable.args = {
+    size: "3rem",
+    color: "color-icon-brand",
+    alt: "Custom icon",
+};
+const codeTemplateSvgURL = (args) => {
+    return `
+<vds-icon
+    svg-icon='${args.svgIcon}'
+    size="${args.size}"
+    color="${args.color}"
+    alt="${args.alt}"
+></vds-icon>
+    `;
+};
+export const BasicUsageWithSvgURL = codeTemplateSvgURL.bind({});
+BasicUsageWithSvgURL.args = {
+    size: "3rem",
+    color: "color-icon-brand",
+    alt: "Custom icon",
+    svgIcon: "http://localhost:3333/assets/send.svg"
+};
+const codeTemplatImgURL = (args) => {
+    return `
+<vds-icon
+    svg-icon='${args.imgUrl}'
+    size="${args.size}"
+    color="${args.color}"
+    alt="${args.alt}"
+></vds-icon>
+    `;
+};
+export const BasicUsageWithImgURL = codeTemplatImgURL.bind({});
+BasicUsageWithImgURL.args = {
+    size: "3rem",
+    color: "color-icon-brand",
+    alt: "Custom icon",
+    imgUrl: "https://cdn-icons-png.flaticon.com/128/1865/1865273.png"
+};
+const styles = `
+    .icon-container {
+        display: flex;
+        flex-wrap: wrap;
+    }
+    .icon-container > .icon {
+        display: flex;
+        flex: 0 0 15%;
+        justify-content: center;
+        align-items: center;
+        padding: 20px;
+        flex-direction: column;
+    }
+    .icon-container > .icon > span {
+        margin-top: 5px;
+    }
+    h2 {
+        color: var(--text-high);
+        font-size: 3.125rem;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 3.5rem;
+        padding-left: 60px;
+    }
+`;
+const codeListTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<div class="icon-container">
+${args.list.map((icon) => {
+        return `
+    <div class="icon">
+        <vds-icon svg-icon="${icon}" size="2rem" color="color-icon-high"></vds-icon>
+        <span>${icon}</span>
+    </div>
+    `;
+    }).join("")}
+</div>
+    `;
+};
+export const navigationIcons = codeListTemplate.bind({});
+navigationIcons.args = {
+    list: NAVIGATION,
+    title: "Navigation icons",
+};
+export const filesIcons = codeListTemplate.bind({});
+filesIcons.args = {
+    list: FILES,
+    title: "File icons",
+};
+export const statusIcons = codeListTemplate.bind({});
+statusIcons.args = {
+    list: STATUS,
+    title: "Status icons",
+};
+export const deviceIcons = codeListTemplate.bind({});
+deviceIcons.args = {
+    list: DEVICE,
+    title: "Device icons",
+};
+export const userIcons = codeListTemplate.bind({});
+userIcons.args = {
+    list: USER,
+    title: "user icons",
+};
+export const actionIcons = codeListTemplate.bind({});
+actionIcons.args = {
+    list: ACTION,
+    title: "Action icons",
+};
+export const controlIcons = codeListTemplate.bind({});
+controlIcons.args = {
+    list: CONTROL,
+    title: "Control icons",
+};
+export const timeIcons = codeListTemplate.bind({});
+timeIcons.args = {
+    list: TIME,
+    title: "Time icons",
+};
+export const toolIcons = codeListTemplate.bind({});
+toolIcons.args = {
+    list: TOOL,
+    title: "Tool icons",
+};
+export const transportIcons = codeListTemplate.bind({});
+transportIcons.args = {
+    list: TRANSPORT,
+    title: "Transport icons",
+};
+export const toggleIcons = codeListTemplate.bind({});
+toggleIcons.args = {
+    list: TOGGLE,
+    title: "Toggle icons",
+};
+export const dataIcons = codeListTemplate.bind({});
+dataIcons.args = {
+    list: DATA,
+    title: "Data icons",
+};
+export const inventoryIcons = codeListTemplate.bind({});
+inventoryIcons.args = {
+    list: INVENTORY,
+    title: "Inventory icons",
+};
+export const brandIcons = codeListTemplate.bind({});
+brandIcons.args = {
+    list: BRAND,
+    title: "Brand icons",
+};
+export const IconList = codeListTemplate.bind({});
+IconList.args = {
+    list: ICON_LIST,
+    title: "Icon list",
+};
+//# sourceMappingURL=vds-icon.stories.js.map

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

@@ -0,0 +1 @@

+ {"version":3,"file":"vds-icon.stories.js","sourceRoot":"","sources":["../../../src/components/icon/vds-icon.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { ACTION, BRAND, CONTROL, DATA, DEVICE, FILES, INVENTORY, NAVIGATION, STATUS, TIME, TOGGLE, TOOL, TRANSPORT, USER, getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\nconst svgExample= `<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M15.4624 2.41407C17.2587 2.01855 18.6488 3.97488 17.6844 5.54106L11.2391 16.0079C10.2496 17.6149 7.80416 17.1834 7.42439 15.3348L6.5649 11.1512C6.54844 11.071 6.49972 11.0012 6.43018 10.9581L2.98664 8.82337C1.39738 7.83814 1.81021 5.42017 3.63634 5.01807L15.4624 2.41407ZM16.1639 4.60473C16.3016 4.38099 16.103 4.10151 15.8464 4.15802L4.02034 6.76201C3.75947 6.81946 3.70049 7.16488 3.92753 7.30563L7.37107 9.44037C7.85779 9.74211 8.19885 10.2309 8.31409 10.7918L9.17358 14.9755C9.22783 15.2395 9.57717 15.3012 9.71854 15.0716L16.1639 4.60473Z\" fill=\"white\"/>\n</svg>`;\n\nexport default {\n title: 'VDS/Components/Icon',\n parameters: {\n docs: {\n toc: true,\n },\n },\n argTypes: {\n color: {\n options: [\"color-icon-high\", \"color-icon-medium\", \"color-icon-low\", \n \"color-icon-disabled\", \"color-icon-healthy\", \"color-icon-caution\", \n \"color-icon-warning\", \"color-icon-danger\", \"color-icon-white-low\"],\n control: { type: \"select\" }\n },\n svgIcon: {\n options: ICON_LIST,\n control: { type: \"select\" }\n },\n size: {\n options: [\"12px\", \"1rem\", \"20px\", \"2em\", \"5rem\"],\n control: { type: \"select\" }\n }\n },\n};\n \nconst codeTemplate = (args) => {\n return `\n<vds-icon\n svg-icon=\"${args.svgIcon}\"\n size=\"${args.size}\"\n color=\"${args.color}\"\n alt=\"${args.alt}\"\n></vds-icon>\n `;\n}\n\nexport const BasicUsage = codeTemplate.bind({});\n\nBasicUsage.args = {\n svgIcon: \"star\",\n size: \"5rem\",\n color: \"color-icon-warning\",\n alt: \"Star icon\",\n};\nconst codeTemplateSvgFile = (args) => {\n return `\n<vds-icon\n svg-icon='${svgExample}' \n size=\"${args.size}\"\n color=\"${args.color}\"\n alt=\"${args.alt}\"\n></vds-icon>\n `;\n}\n\nexport const BasicUsageWithSvgVariable = codeTemplateSvgFile.bind({});\n\nBasicUsageWithSvgVariable.args = {\n size: \"3rem\",\n color: \"color-icon-brand\",\n alt: \"Custom icon\",\n};\n\nconst codeTemplateSvgURL = (args) => {\n return `\n<vds-icon\n svg-icon='${args.svgIcon}' \n size=\"${args.size}\"\n color=\"${args.color}\"\n alt=\"${args.alt}\"\n></vds-icon>\n `;\n}\n\nexport const BasicUsageWithSvgURL = codeTemplateSvgURL.bind({});\n\nBasicUsageWithSvgURL.args = {\n size: \"3rem\",\n color: \"color-icon-brand\",\n alt: \"Custom icon\",\n svgIcon: \"http://localhost:3333/assets/send.svg\"\n};\n\nconst codeTemplatImgURL = (args) => {\n return `\n<vds-icon\n svg-icon='${args.imgUrl}' \n size=\"${args.size}\"\n color=\"${args.color}\"\n alt=\"${args.alt}\"\n></vds-icon>\n `;\n}\n\nexport const BasicUsageWithImgURL = codeTemplatImgURL.bind({});\n\nBasicUsageWithImgURL.args = {\n size: \"3rem\",\n color: \"color-icon-brand\",\n alt: \"Custom icon\",\n imgUrl: \"https://cdn-icons-png.flaticon.com/128/1865/1865273.png\"\n};\n\nconst styles = `\n .icon-container {\n display: flex;\n flex-wrap: wrap; \n }\n\n .icon-container > .icon {\n display: flex;\n flex: 0 0 15%;\n justify-content: center;\n align-items: center;\n padding: 20px;\n flex-direction: column;\n }\n\n .icon-container > .icon > span {\n margin-top: 5px;\n }\n\n h2 {\n color: var(--text-high);\n font-size: 3.125rem;\n font-style: normal;\n font-weight: 400;\n line-height: 3.5rem;\n padding-left: 60px;\n }\n`;\n\n\nconst codeListTemplate = (args) => {\n return `\n<style>${styles}</style>\n<div class=\"icon-container\">\n${args.list.map((icon) => {\n return `\n <div class=\"icon\">\n <vds-icon svg-icon=\"${icon}\" size=\"2rem\" color=\"color-icon-high\"></vds-icon>\n <span>${icon}</span>\n </div>\n `;\n}).join(\"\")}\n</div>\n `\n}\n\nexport const navigationIcons = codeListTemplate.bind({});\n\nnavigationIcons.args = {\n list: NAVIGATION,\n title: \"Navigation icons\",\n}\n\nexport const filesIcons = codeListTemplate.bind({});\n\nfilesIcons.args = {\n list: FILES,\n title: \"File icons\",\n}\n\nexport const statusIcons = codeListTemplate.bind({});\n\nstatusIcons.args = {\n list: STATUS,\n title: \"Status icons\",\n}\n\nexport const deviceIcons = codeListTemplate.bind({});\n\ndeviceIcons.args = {\n list: DEVICE,\n title: \"Device icons\",\n}\n\nexport const userIcons = codeListTemplate.bind({});\n\nuserIcons.args = {\n list: USER,\n title: \"user icons\",\n}\n\nexport const actionIcons = codeListTemplate.bind({});\n\nactionIcons.args = {\n list: ACTION,\n title: \"Action icons\",\n}\n\nexport const controlIcons = codeListTemplate.bind({});\n\ncontrolIcons.args = {\n list: CONTROL,\n title: \"Control icons\",\n}\n\nexport const timeIcons = codeListTemplate.bind({});\n\ntimeIcons.args = {\n list: TIME,\n title: \"Time icons\",\n}\n\nexport const toolIcons = codeListTemplate.bind({});\n\ntoolIcons.args = {\n list: TOOL,\n title: \"Tool icons\",\n}\n\nexport const transportIcons = codeListTemplate.bind({});\n\ntransportIcons.args = {\n list: TRANSPORT,\n title: \"Transport icons\",\n}\n\nexport const toggleIcons = codeListTemplate.bind({});\n\ntoggleIcons.args = {\n list: TOGGLE,\n title: \"Toggle icons\",\n}\n\nexport const dataIcons = codeListTemplate.bind({});\n\ndataIcons.args = {\n list: DATA,\n title: \"Data icons\",\n}\n\nexport const inventoryIcons = codeListTemplate.bind({});\n\ninventoryIcons.args = {\n list: INVENTORY,\n title: \"Inventory icons\",\n}\n\nexport const brandIcons = codeListTemplate.bind({});\n\nbrandIcons.args = {\n list: BRAND,\n title: \"Brand icons\",\n}\n\nexport const IconList = codeListTemplate.bind({});\n\nIconList.args = {\n list: ICON_LIST,\n title: \"Icon list\",\n}\n"]}