wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,225 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsSegmentedButton {
+    constructor() {
+        /** Sets the segment button in active state */
+        this.isActive = false;
+        /** When is-active is true, shows checkmark */
+        this.hasCheckmark = false;
+        /** Set the segmented-button to disabled state */
+        this.disabled = false;
+        /** Allows the component to be adaptable to the container available horizontal space */
+        this.fullWidth = false;
+    }
+    setActiveProp() {
+        if (this.isActive) {
+            this.selected.emit();
+        }
+        else {
+            this.deselected.emit();
+        }
+    }
+    handleClick(evt) {
+        evt.preventDefault();
+        this.segmentedButtonClicked.emit({
+            value: this.value,
+            selected: this.isActive
+        });
+    }
+    generateInformativeIcon() {
+        return (h("vds-icon", { class: "vds-segmented-button__informative-icon", "svg-icon": this.isActive && this.hasCheckmark ? "good" : this.informativeIcon, size: "1.25rem", alt: this.value }));
+    }
+    render() {
+        return (h(Host, { key: '667325f36f9bba31175f0a52c36a33c42981ec77', class: combineClasses(this.disabled ? "vds-segmented-button--disabled" : "", this.fullWidth ? "vds-segmented-button--full-width" : "") }, h("button", { key: 'c25d9d7e9db5b638d01bc0f2bb70ca44ce2726f6', class: combineClasses("vds-segmented-button", this.disabled ? "vds-segmented-button--disabled" : "", this.isActive ? "vds-segmented-button--active" : ""), title: this.value, disabled: this.disabled, onClick: (evt) => this.handleClick(evt) }, (this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon(), h("span", { key: '50258b210cb86e63c866f1daba637c929f6a77be', class: "vds-segmented-button__text" }, h("slot", { key: '14997013726895ef2d96694845f5beac14381e8d' })))));
+    }
+    static get is() { return "vds-segmented-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-segmented-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-segmented-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "informativeIcon": {
+                "type": "string",
+                "attribute": "informative-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the icon at the left of the segment button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "isActive": {
+                "type": "boolean",
+                "attribute": "is-active",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sets the segment button in active state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "hasCheckmark": {
+                "type": "boolean",
+                "attribute": "has-checkmark",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When is-active is true, shows checkmark"
+                },
+                "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": "Set the segmented-button to disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set the segmented-button value"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "attribute": "full-width",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the component to be adaptable to the container available horizontal space"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "segmentedButtonClicked",
+                "name": "segmentedButtonClicked",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when item gets clicked"
+                },
+                "complexType": {
+                    "original": "{ value: string, selected: boolean }",
+                    "resolved": "{ value: string; selected: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "selected",
+                "name": "selected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when item is selected"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "deselected",
+                "name": "deselected",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when item is deselected"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+    static get watchers() {
+        return [{
+                "propName": "isActive",
+                "methodName": "setActiveProp"
+            }];
+    }
+}
+//# sourceMappingURL=vds-segmented-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-segmented-button.js","sourceRoot":"","sources":["../../../src/components/segmented-button/vds-segmented-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAQ7D,MAAM,OAAO,kBAAkB;IAL/B;QAQE,8CAA8C;QACrB,aAAQ,GAAY,KAAK,CAAC;QACnD,8CAA8C;QACtC,iBAAY,GAAY,KAAK,CAAC;QACtC,iDAAiD;QACxB,aAAQ,GAAY,KAAK,CAAC;QAGnD,uFAAuF;QAC/E,cAAS,GAAY,KAAK,CAAA;KAgEnC;IApDC,aAAa;QACX,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,WAAW,CAAC,GAAe;QACzB,GAAG,CAAC,cAAc,EAAE,CAAC;QAErB,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC;YAC/B,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB,CAAC,CAAA;IACJ,CAAC;IAED,uBAAuB;QACrB,OAAO,CACL,gBACE,KAAK,EAAE,wCAAwC,cACrC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,EAC5E,IAAI,EAAE,SAAS,EACf,GAAG,EAAE,IAAI,CAAC,KAAK,GACf,CACH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,cAAc,CACnB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EACrD,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,CACzD;YAED,+DACE,KAAK,EAAE,cAAc,CACnB,sBAAsB,EACtB,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,EACrD,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,CACpD,EACD,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,GAAG,EAAQ,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC;gBAE5C,CAAC,IAAI,CAAC,eAAe,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,CAAC,CAAC,IAAI,IAAI,CAAC,uBAAuB,EAAE;gBACjG,6DAAM,KAAK,EAAE,4BAA4B,IAAG,8DAAa,CAAQ,CAC1D,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Element, Watch } from '@stencil/core';\nimport { combineClasses } from '../../utils/combine-classes';\nimport { HTMLStencilElement } from '@stencil/core/internal';\n\n@Component({\n  tag: 'vds-segmented-button',\n  styleUrl: 'vds-segmented-button.scss',\n  shadow: true,\n})\nexport class VdsSegmentedButton {\n  /** Sets the icon at the left of the segment button */\n  @Prop() informativeIcon: string\n  /** Sets the segment button in active state */\n  @Prop({ reflect: true }) isActive: boolean = false;\n  /** When is-active is true, shows checkmark */\n  @Prop() hasCheckmark: boolean = false;\n  /** Set the segmented-button to disabled state */\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Set the segmented-button value */\n  @Prop({ reflect: true }) value: string;\n  /** Allows the component to be adaptable to the container available horizontal space */\n  @Prop() fullWidth: boolean = false\n\n  /** Emits event when item gets clicked */\n  @Event() segmentedButtonClicked: EventEmitter<{ value: string, selected: boolean }>;\n  /** Emits event when item is selected */\n  @Event() selected: EventEmitter<void>;\n  /** Emits event when item is deselected */\n  @Event() deselected: EventEmitter<void>;\n\n  @Element() hostEl: HTMLElement;\n\n  @Watch(\"isActive\")\n  setActiveProp(): void {\n    if (this.isActive) {\n      this.selected.emit();\n    } else {\n      this.deselected.emit();\n    }\n  }\n\n  handleClick(evt: MouseEvent): void {\n    evt.preventDefault();\n\n    this.segmentedButtonClicked.emit({\n      value: this.value,\n      selected: this.isActive\n    })\n  }\n\n  generateInformativeIcon(): HTMLStencilElement {\n    return (\n      <vds-icon\n        class={\"vds-segmented-button__informative-icon\"}\n        svg-icon={this.isActive && this.hasCheckmark ? \"good\" : this.informativeIcon}\n        size={\"1.25rem\"}\n        alt={this.value}\n      />\n    )\n  }\n\n  render() {\n    return (\n      <Host\n        class={combineClasses(\n          this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n          this.fullWidth ? \"vds-segmented-button--full-width\" : \"\",\n        )}\n      >\n        <button\n          class={combineClasses(\n            \"vds-segmented-button\",\n            this.disabled ? \"vds-segmented-button--disabled\" : \"\",\n            this.isActive ? \"vds-segmented-button--active\" : \"\",\n          )}\n          title={this.value}\n          disabled={this.disabled}\n          onClick={(evt): void => this.handleClick(evt)}\n        >\n          {(this.informativeIcon || (this.isActive && this.hasCheckmark)) && this.generateInformativeIcon()}\n          <span class={\"vds-segmented-button__text\"}>{<slot></slot>}</span>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,130 @@
+import { getIconsFromSpriteFile } from "../../utils/icon-utils";
+const ICON_LIST = getIconsFromSpriteFile();
+export default {
+    title: 'VDS/Components/Segmented/Segmented-button',
+    parameters: {
+        docs: {
+            toc: true,
+        }
+    },
+    argTypes: {
+        informativeIcon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+        icon: {
+            options: [...ICON_LIST, undefined],
+            control: { type: "select" }
+        },
+    }
+};
+const styles = `
+    .container {
+        width: 500px;
+        padding: 10px;
+        margin: auto;
+    }    
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <vds-segmented-button
+        value="${args.value}"
+        ${args.informativeIcon ? `informative-icon="${args.informativeIcon}"` : ""}
+        is-active="${args.isActive || false}"
+        has-checkmark="${args.hasCheckmark || false}"
+        disabled="${args.disabled || false}"
+        full-width="${args.fullWidth || false}"
+        >
+    ${args.value}
+    </vds-segmented-button>
+</div>
+`;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    disabled: false,
+    value: 'Text 1',
+    informativeIcon: 'bell',
+    hasCheckmark: false,
+    isActive: false,
+    fullWidth: false,
+};
+const codeIconTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <vds-segmented-button
+        value="${args.value}"
+        is-active="${args.isActive || false}"
+        has-checkmark="${args.hasCheckmark || false}"
+        disabled="${args.disabled || false}"
+    >
+        <vds-icon svg-icon="${args.icon}"></vds-icon>
+    </vds-segmented-button>
+</div>
+`;
+};
+export const IconUsage = codeIconTemplate.bind({});
+IconUsage.args = {
+    disabled: false,
+    value: 'Text 1',
+    icon: 'bell',
+    hasCheckmark: false,
+    isActive: false,
+};
+const customColorsCodeTemplate = args => {
+    return `
+<style>
+${styles}
+.custom-segmented-button {
+    --vds-segmented-button-background: #FFFFFF00;
+    --vds-segmented-button-border: var(--radius-medium);
+    --vds-segmented-button-text-color: #28a745;
+    --vds-segmented-button-icon-color: #28a745;
+
+    --vds-segmented-button-disabled-background: #FFFFFF00;
+    --vds-segmented-button-disabled-border: var(--radius-medium);
+    --vds-segmented-button-disabled-text-color: #888888;
+    --vds-segmented-button-disabled-icon-color: #AAAAAA;
+
+    --vds-segmented-button-active-background: #c3e6cb;
+    --vds-segmented-button-active-border: var(--radius-medium);
+    --vds-segmented-button-active-text-color: #28a745;
+    --vds-segmented-button-active-icon-color: #28a745;
+
+    --vds-segmented-button-hover-background: #c3e6cb;
+    --vds-segmented-button-hover-border: var(--radius-medium);
+    --vds-segmented-button-hover-text-color: #28a745;
+    --vds-segmented-button-hover-icon-color: #28a745;
+
+    --vds-segmented-button-focus-background: transparent;
+    --vds-segmented-button-focus-border: var(--radius-medium);
+    --vds-segmented-button-focus-text-color: #333333;
+    --vds-segmented-button-focus-icon-color: #555555;
+}
+</style>
+
+<div class="container">
+    <vds-segmented-button
+        class="custom-segmented-button"
+        value="${args.value}"    
+        informative-icon="${args.informativeIcon}"
+        is-active="${args.isActive || false}"
+        has-checkmark="${args.hasCheckmark || false}"
+        disabled="${args.disabled || false}"
+        >
+    </vds-segmented-button>
+</div>
+`;
+};
+export const CustomColorsUsage = customColorsCodeTemplate.bind({});
+CustomColorsUsage.args = {
+    disabled: false,
+    value: 'Button 1',
+    informativeIcon: 'desktop-computer',
+    hasCheckmark: false,
+    isActive: false,
+};
+//# sourceMappingURL=vds-segmented-button.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-segmented-button.stories.js","sourceRoot":"","sources":["../../../src/components/segmented-button/vds-segmented-button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,wBAAwB,CAAC;AAEhE,MAAM,SAAS,GAAG,sBAAsB,EAAE,CAAC;AAG3C,eAAe;IACX,KAAK,EAAE,2CAA2C;IAClD,UAAU,EAAE;QACR,IAAI,EAAE;YACF,GAAG,EAAE,IAAI;SACZ;KACJ;IACD,QAAQ,EAAE;QACN,eAAe,EAAE;YACb,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;QACD,IAAI,EAAE;YACF,OAAO,EAAE,CAAC,GAAG,SAAS,EAAE,SAAS,CAAC;YAClC,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC9B;KACJ;CACJ,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;CAMd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC5B,OAAO;SACE,MAAM;;;iBAGE,IAAI,CAAC,KAAK;UACjB,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,qBAAqB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,EAAE;qBAC7D,IAAI,CAAC,QAAQ,IAAI,KAAK;yBAClB,IAAI,CAAC,YAAY,IAAI,KAAK;oBAC/B,IAAI,CAAC,QAAQ,IAAI,KAAK;sBACpB,IAAI,CAAC,SAAS,IAAI,KAAK;;MAEvC,IAAI,CAAC,KAAK;;;CAGf,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEhD,UAAU,CAAC,IAAI,GAAG;IACd,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,QAAQ;IACf,eAAe,EAAE,MAAM;IACvB,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;IACf,SAAS,EAAE,KAAK;CACnB,CAAC;AAEF,MAAM,gBAAgB,GAAG,IAAI,CAAC,EAAE;IAChC,OAAO;SACE,MAAM;;;iBAGE,IAAI,CAAC,KAAK;qBACN,IAAI,CAAC,QAAQ,IAAI,KAAK;yBAClB,IAAI,CAAC,YAAY,IAAI,KAAK;oBAC/B,IAAI,CAAC,QAAQ,IAAI,KAAK;;8BAEZ,IAAI,CAAC,IAAI;;;CAGtC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnD,SAAS,CAAC,IAAI,GAAG;IACb,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,MAAM;IACZ,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAClB,CAAC;AAEF,MAAM,wBAAwB,GAAG,IAAI,CAAC,EAAE;IACxC,OAAO;;EAEL,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgCS,IAAI,CAAC,KAAK;4BACC,IAAI,CAAC,eAAe;qBAC3B,IAAI,CAAC,QAAQ,IAAI,KAAK;yBAClB,IAAI,CAAC,YAAY,IAAI,KAAK;oBAC/B,IAAI,CAAC,QAAQ,IAAI,KAAK;;;;CAIzC,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEnE,iBAAiB,CAAC,IAAI,GAAG;IACrB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,UAAU;IACjB,eAAe,EAAE,kBAAkB;IACnC,YAAY,EAAE,KAAK;IACnB,QAAQ,EAAE,KAAK;CAClB,CAAC","sourcesContent":["import { getIconsFromSpriteFile } from \"../../utils/icon-utils\";\n\nconst ICON_LIST = getIconsFromSpriteFile();\n\n\nexport default {\n    title: 'VDS/Components/Segmented/Segmented-button',\n    parameters: {\n        docs: {\n            toc: true,\n        }\n    },\n    argTypes: {\n        informativeIcon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n        icon: {\n            options: [...ICON_LIST, undefined],\n            control: { type: \"select\" }\n        },\n    }\n};\n  \nconst styles = `\n    .container {\n        width: 500px;\n        padding: 10px;\n        margin: auto;\n    }    \n`;\n  \nconst codeTemplate = args => {\nreturn `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-segmented-button\n        value=\"${args.value}\"\n        ${args.informativeIcon ? `informative-icon=\"${args.informativeIcon}\"` : \"\"}\n        is-active=\"${args.isActive || false}\"\n        has-checkmark=\"${args.hasCheckmark || false}\"\n        disabled=\"${args.disabled || false}\"\n        full-width=\"${args.fullWidth || false}\"\n        >\n    ${args.value}\n    </vds-segmented-button>\n</div>\n`;\n};\n  \nexport const BasicUsage = codeTemplate.bind({});\n  \nBasicUsage.args = {\n    disabled: false,\n    value: 'Text 1',\n    informativeIcon: 'bell',\n    hasCheckmark: false,\n    isActive: false,\n    fullWidth: false,\n};\n\nconst codeIconTemplate = args => {\nreturn `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-segmented-button\n        value=\"${args.value}\"\n        is-active=\"${args.isActive || false}\"\n        has-checkmark=\"${args.hasCheckmark || false}\"\n        disabled=\"${args.disabled || false}\"\n    >\n        <vds-icon svg-icon=\"${args.icon}\"></vds-icon>\n    </vds-segmented-button>\n</div>\n`;\n};\n    \nexport const IconUsage = codeIconTemplate.bind({});\n    \nIconUsage.args = {\n    disabled: false,\n    value: 'Text 1',\n    icon: 'bell',\n    hasCheckmark: false,\n    isActive: false,\n};\n  \nconst customColorsCodeTemplate = args => {\nreturn `\n<style>\n${styles}\n.custom-segmented-button {\n    --vds-segmented-button-background: #FFFFFF00;\n    --vds-segmented-button-border: var(--radius-medium);\n    --vds-segmented-button-text-color: #28a745;\n    --vds-segmented-button-icon-color: #28a745;\n\n    --vds-segmented-button-disabled-background: #FFFFFF00;\n    --vds-segmented-button-disabled-border: var(--radius-medium);\n    --vds-segmented-button-disabled-text-color: #888888;\n    --vds-segmented-button-disabled-icon-color: #AAAAAA;\n\n    --vds-segmented-button-active-background: #c3e6cb;\n    --vds-segmented-button-active-border: var(--radius-medium);\n    --vds-segmented-button-active-text-color: #28a745;\n    --vds-segmented-button-active-icon-color: #28a745;\n\n    --vds-segmented-button-hover-background: #c3e6cb;\n    --vds-segmented-button-hover-border: var(--radius-medium);\n    --vds-segmented-button-hover-text-color: #28a745;\n    --vds-segmented-button-hover-icon-color: #28a745;\n\n    --vds-segmented-button-focus-background: transparent;\n    --vds-segmented-button-focus-border: var(--radius-medium);\n    --vds-segmented-button-focus-text-color: #333333;\n    --vds-segmented-button-focus-icon-color: #555555;\n}\n</style>\n\n<div class=\"container\">\n    <vds-segmented-button\n        class=\"custom-segmented-button\"\n        value=\"${args.value}\"    \n        informative-icon=\"${args.informativeIcon}\"\n        is-active=\"${args.isActive || false}\"\n        has-checkmark=\"${args.hasCheckmark || false}\"\n        disabled=\"${args.disabled || false}\"\n        >\n    </vds-segmented-button>\n</div>\n`;\n};\n      \nexport const CustomColorsUsage = customColorsCodeTemplate.bind({});\n    \nCustomColorsUsage.args = {\n    disabled: false,\n    value: 'Button 1',\n    informativeIcon: 'desktop-computer',\n    hasCheckmark: false,\n    isActive: false,\n};\n      "]}