wabtec-internal-volt-basic-components 1.0.0

package/dist/collection/components/sidenav-item-category/vds-sidenav-item-category.js

@@ -0,0 +1,152 @@
+import { Host, h } from "@stencil/core";
+import { generateGroupHeaderContainer } from "../base-group-header/base-group-header";
+export class VdsSidenavItemCategory {
+    constructor() {
+        /** When true expands the nav item to show both text and icon. When false, only shows the icon */
+        this.expanded = false;
+        /** Toggles static mode in nav-item */
+        this.isStatic = false;
+        /** Size of the group header when expanded */
+        this.size = 'medium';
+    }
+    getCollapsedView() {
+        return (h("div", { class: "vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--collapsed" }, h("span", { class: "vds-sidenav-item-category__divider vds-sidenav-item-category__divider--collapsed" })));
+    }
+    getStaticView() {
+        return (h("div", { class: "vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--static" }, h("span", { class: "vds-sidenav-item-category__divider vds-sidenav-item-category__divider--static" })));
+    }
+    getExpandedView() {
+        return generateGroupHeaderContainer(this.size, this.value);
+    }
+    setView() {
+        return this.expanded
+            ? this.getExpandedView()
+            : this.isStatic
+                ? this.getStaticView()
+                : this.getCollapsedView();
+    }
+    setSlot() {
+        if (this.value && this.expanded && !this.isStatic) {
+            return (h("div", { class: `vds-sidenav-item-category__action-slot vds-sidenav-item-category__action-slot--${this.size}` }, h("slot", { name: "action-slot" })));
+        }
+    }
+    componentDidRender() {
+        try {
+            const sidenavItems = Array.from(this.hostEl.querySelectorAll('vds-sidenav-item, vds-sidenav-item-app'));
+            sidenavItems.forEach((sidenavItem, sidenavItemIndex) => {
+                sidenavItem.setAttribute('vds-sidenavItem-Index', `${sidenavItemIndex}`);
+                sidenavItem.expanded = this.expanded;
+                sidenavItem.isStatic = this.isStatic;
+            });
+        }
+        catch (error) {
+            console.warn('Error updating sidenav items: ', error);
+        }
+    }
+    render() {
+        return (h(Host, { key: '4fbd60f466280a93de1cf659af3ef832f716d538' }, h("div", { key: '0bd28e91b9583798ac0045febbf2f0e1a2e3e513', class: "vds-sidenav-item-category" }, h("div", { key: '5a213c8d5513199f0af8f3aba7ad7955e9ee23f5', class: "vds-sidenav-item-category__header" }, this.setView(), this.setSlot()), h("div", { key: 'd3e34a012d2ef402e967e9dc6242d2caf217b393', class: "vds-sidenav-item-category__content" }, h("slot", { key: '3e6b1345bf437728c9252becf6644e29b20b6b4d', name: "category-items" })))));
+    }
+    static get is() { return "vds-sidenav-item-category"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-sidenav-item-category.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-sidenav-item-category.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Define text value. This component has the possibility of adding an element to the right of this value\nusing the slot called \"action-slot\". The display condition is when a value is defined in the value property,\nthe expanded property is equal to true, and the isStatic property is equal to false."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "expanded": {
+                "type": "boolean",
+                "attribute": "expanded",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true expands the nav item to show both text and icon. When false, only shows the icon"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "isStatic": {
+                "type": "boolean",
+                "attribute": "is-static",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles static mode in nav-item"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "mutable": false,
+                "complexType": {
+                    "original": "GroupHeaderSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "GroupHeaderSize": {
+                            "location": "import",
+                            "path": "../base-group-header/base-group-header",
+                            "id": "src/components/base-group-header/base-group-header.tsx::GroupHeaderSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the group header when expanded"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=vds-sidenav-item-category.js.map

package/dist/collection/components/sidenav-item-category/vds-sidenav-item-category.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sidenav-item-category.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-category/vds-sidenav-item-category.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAElE,OAAO,EAAmB,4BAA4B,EAAE,MAAM,wCAAwC,CAAC;AAOvG,MAAM,OAAO,sBAAsB;IALnC;QAaE,iGAAiG;QACxE,aAAQ,GAAY,KAAK,CAAC;QACnD,sCAAsC;QACb,aAAQ,GAAY,KAAK,CAAC;QACnD,6CAA6C;QACrC,SAAI,GAAoB,QAAQ,CAAC;KAoE1C;IAlES,gBAAgB;QACtB,OAAO,CACL,WAAK,KAAK,EAAC,sGAAsG;YAC/G,YAAM,KAAK,EAAC,kFAAkF,GAAQ,CAClG,CACP,CAAC;IACJ,CAAC;IAEO,aAAa;QACnB,OAAO,CACL,WAAK,KAAK,EAAC,mGAAmG;YAC5G,YAAM,KAAK,EAAC,+EAA+E,GAAQ,CAC/F,CACP,CAAC;IACJ,CAAC;IAEO,eAAe;QACrB,OAAO,4BAA4B,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7D,CAAC;IAEO,OAAO;QACb,OAAO,IAAI,CAAC,QAAQ;YAClB,CAAC,CAAC,IAAI,CAAC,eAAe,EAAE;YACxB,CAAC,CAAC,IAAI,CAAC,QAAQ;gBACf,CAAC,CAAC,IAAI,CAAC,aAAa,EAAE;gBACtB,CAAC,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC9B,CAAC;IAEO,OAAO;QACb,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClD,OAAO,CACL,WAAK,KAAK,EAAE,kFAAkF,IAAI,CAAC,IAAI,EAAE;gBACvG,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B,CACP,CAAC;QACJ,CAAC;IACH,CAAC;IAED,kBAAkB;QAChB,IAAI,CAAC;YACH,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,wCAAwC,CAAC,CAAQ,CAAC;YAC/G,YAAY,CAAC,OAAO,CAAC,CAAC,WAAW,EAAE,gBAAgB,EAAE,EAAE;gBACrD,WAAW,CAAC,YAAY,CAAC,uBAAuB,EAAE,GAAG,gBAAgB,EAAE,CAAC,CAAC;gBACzE,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;gBACrC,WAAW,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,IAAI,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAC,2BAA2B;gBACpC,4DAAK,KAAK,EAAC,mCAAmC;oBAC3C,IAAI,CAAC,OAAO,EAAE;oBACd,IAAI,CAAC,OAAO,EAAE,CACX;gBACN,4DAAK,KAAK,EAAC,oCAAoC;oBAC7C,6DAAM,IAAI,EAAC,gBAAgB,GAAQ,CAC/B,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, Prop, h, Element } from '@stencil/core';\nimport { HTMLStencilElement } from '@stencil/core/internal';\nimport { GroupHeaderSize, generateGroupHeaderContainer } from '../base-group-header/base-group-header';\n\n@Component({\n  tag: 'vds-sidenav-item-category',\n  styleUrl: 'vds-sidenav-item-category.scss',\n  shadow: true,\n})\nexport class VdsSidenavItemCategory {\n  @Element() hostEl: HTMLElement;\n  /**\n   * Define text value. This component has the possibility of adding an element to the right of this value\n   * using the slot called \"action-slot\". The display condition is when a value is defined in the value property,\n   * the expanded property is equal to true, and the isStatic property is equal to false.\n   */\n  @Prop({ mutable: true }) value: string;\n  /** When true expands the nav item to show both text and icon. When false, only shows the icon */\n  @Prop({ mutable: true }) expanded: boolean = false;\n  /** Toggles static mode in nav-item */\n  @Prop({ mutable: true }) isStatic: boolean = false;\n  /** Size of the group header when expanded */\n  @Prop() size: GroupHeaderSize = 'medium';\n\n  private getCollapsedView() {\n    return (\n      <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--collapsed\">\n        <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--collapsed\"></span>\n      </div>\n    );\n  }\n\n  private getStaticView() {\n    return (\n      <div class=\"vds-sidenav-item-category__divider-container vds-sidenav-item-category__divider-container--static\">\n        <span class=\"vds-sidenav-item-category__divider vds-sidenav-item-category__divider--static\"></span>\n      </div>\n    );\n  }\n\n  private getExpandedView() {\n    return generateGroupHeaderContainer(this.size, this.value);\n  }\n\n  private setView() {\n    return this.expanded\n      ? this.getExpandedView()\n      : this.isStatic\n      ? this.getStaticView()\n      : this.getCollapsedView();\n  }\n\n  private setSlot() {\n    if (this.value && this.expanded && !this.isStatic) {\n      return (\n        <div class={`vds-sidenav-item-category__action-slot vds-sidenav-item-category__action-slot--${this.size}`}>\n          <slot name=\"action-slot\"></slot>\n        </div>\n      );\n    }\n  }\n\n  componentDidRender() {\n    try {\n      const sidenavItems = Array.from(this.hostEl.querySelectorAll('vds-sidenav-item, vds-sidenav-item-app')) as any;\n      sidenavItems.forEach((sidenavItem, sidenavItemIndex) => {\n        sidenavItem.setAttribute('vds-sidenavItem-Index', `${sidenavItemIndex}`);\n        sidenavItem.expanded = this.expanded;\n        sidenavItem.isStatic = this.isStatic;\n      });\n    } catch (error) {\n      console.warn('Error updating sidenav items: ', error);\n    }\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host>\n        <div class=\"vds-sidenav-item-category\">\n          <div class=\"vds-sidenav-item-category__header\">\n            {this.setView()}\n            {this.setSlot()}\n          </div>\n          <div class=\"vds-sidenav-item-category__content\">\n            <slot name=\"category-items\"></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/sidenav-item-category/vds-sidenav-item-category.stories.js

@@ -0,0 +1,183 @@
+export default {
+    title: 'VDS/Components/Sidenav/Sidenav-Item-Category',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+    },
+    argTypes: {
+        size: {
+            options: ['medium', 'large'],
+            control: { type: 'select' },
+        },
+    },
+};
+const styles = `
+    .container {
+        margin: 32px;
+        width: 25%;
+        height: 50px;
+    }    
+`;
+const codeTemplate = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <vds-sidenav-item-category
+      value="${args.value || 'Sidenav Category'}"    
+      expanded="${args.expanded || false}"
+      is-static="${args.isStatic || false}"
+      size="${args.size}"
+    >
+      <div slot="category-items">
+        <vds-sidenav-item
+          value="Sidenav Item 1"    
+          icon="desktop-computer"
+          expanded="true"
+          disabled="false"
+          has-children="false"
+          is-static="false"
+          is-active="false"
+        >
+        </vds-sidenav-item>
+        <vds-sidenav-item
+          value="Sidenav Item 2"    
+          icon="desktop-computer"
+          expanded="true"
+          disabled="false"
+          has-children="false"
+          is-static="false"
+          is-active="false"
+        >
+        </vds-sidenav-item>
+        <vds-sidenav-item
+          value="Sidenav Item 3"    
+          icon="desktop-computer"
+          expanded="true"
+          disabled="false"
+          has-children="false"
+          is-static="false"
+          is-active="false"
+        >
+        </vds-sidenav-item>
+      </div>
+    </vds-sidenav-item-category>
+</div>
+    `;
+};
+export const ExpandableUsage = codeTemplate.bind({});
+ExpandableUsage.args = {
+    value: 'Sidenav Category',
+    expanded: true,
+    isStatic: false,
+    size: 'medium',
+};
+export const StaticUsage = codeTemplate.bind({});
+StaticUsage.args = {
+    value: 'Sidenav Category',
+    expanded: false,
+    isStatic: true,
+    size: 'medium',
+};
+const codeTemplateWithSlot = args => {
+    return `
+<style>${styles}</style>
+<div class="container">
+    <vds-sidenav-item-category
+      value="${args.value || 'Sidenav Category'}"    
+      expanded="${args.expanded || false}"
+      is-static="${args.isStatic || false}"
+      size="${args.size}"
+    >
+      <div slot="action-slot"><vds-link size="small" variant="primary" value="Clear all"></vds-link></div>
+      <div slot="category-items">
+        <vds-sidenav-item
+          value="Sidenav Item 1"    
+          icon="desktop-computer"
+          expanded="true"
+          disabled="false"
+          has-children="false"
+          is-static="false"
+          is-active="false"
+        >
+        </vds-sidenav-item>
+        <vds-sidenav-item
+          value="Sidenav Item 2"    
+          icon="desktop-computer"
+          expanded="true"
+          disabled="false"
+          has-children="false"
+          is-static="false"
+          is-active="false"
+        >
+        </vds-sidenav-item>
+      </div>
+    </vds-sidenav-item-category>
+</div>
+    `;
+};
+export const ExpandableWithSlotUsage = codeTemplateWithSlot.bind({});
+ExpandableWithSlotUsage.args = {
+    value: 'Sidenav Category',
+    expanded: true,
+    isStatic: false,
+    size: 'medium',
+};
+const codeCustomWidthTemplate = args => {
+    return `
+<style>
+  vds-sidenav-item-category {
+    --vds-sidenav-item-category-expanded-width: ${args.ExpandedWidth || '17.5rem'};
+    --vds-sidenav-item-category-static-width: ${args.StaticWidth || '3.75rem'};
+    --vds-sidenav-item-category-collapsed-width: ${args.CollapsedWidth || '3.5rem'};
+  }
+  vds-sidenav-item {
+    --vds-sidenav-item-expanded-width: var(--vds-sidenav-item-category-expanded-width);
+    --vds-sidenav-item-static-width: var(--vds-sidenav-item-category-static-width);
+    --vds-sidenav-item-collapsed-width: var(--vds-sidenav-item-category-collapsed-width);
+  }
+</style>
+
+  <vds-sidenav-item-category
+    value="${args.value || 'Sidenav Category'}"    
+    expanded="${args.expanded || false}"
+    is-static="${args.isStatic || false}"
+    size="${args.size}"
+  >
+    <div slot="category-items">
+      <vds-sidenav-item
+        value="Sidenav Item 1"    
+        icon="desktop-computer"
+        expanded="true"
+        disabled="false"
+        has-children="false"
+        is-static="false"
+        is-active="false"
+      >
+      </vds-sidenav-item>
+      <vds-sidenav-item
+        value="Sidenav Item 2"    
+        icon="desktop-computer"
+        expanded="true"
+        disabled="false"
+        has-children="false"
+        is-static="false"
+        is-active="true"
+      >
+      </vds-sidenav-item>
+    </div>
+  </vds-sidenav-item-category>
+
+    `;
+};
+export const CustomWidthUsage = codeCustomWidthTemplate.bind({});
+CustomWidthUsage.args = {
+    value: 'Sidenav Category',
+    expanded: true,
+    isStatic: false,
+    size: 'medium',
+    ExpandedWidth: '17.5rem',
+    StaticWidth: '3.75rem',
+    CollapsedWidth: '3.5rem',
+};
+//# sourceMappingURL=vds-sidenav-item-category.stories.js.map

package/dist/collection/components/sidenav-item-category/vds-sidenav-item-category.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vds-sidenav-item-category.stories.js","sourceRoot":"","sources":["../../../src/components/sidenav-item-category/vds-sidenav-item-category.stories.tsx"],"names":[],"mappings":"AAAA,eAAe;IACb,KAAK,EAAE,8CAA8C;IACrD,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,GAAG,EAAE,IAAI;SACV;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;YAC5B,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;KACF;CACF,CAAC;AAEF,MAAM,MAAM,GAAG;;;;;;CAMd,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE;IAC1B,OAAO;SACA,MAAM;;;eAGA,IAAI,CAAC,KAAK,IAAI,kBAAkB;kBAC7B,IAAI,CAAC,QAAQ,IAAI,KAAK;mBACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;cAC3B,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAoClB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAErD,eAAe,CAAC,IAAI,GAAG;IACrB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjD,WAAW,CAAC,IAAI,GAAG;IACjB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,IAAI;IACd,IAAI,EAAE,QAAQ;CACf,CAAC;AAEF,MAAM,oBAAoB,GAAG,IAAI,CAAC,EAAE;IAClC,OAAO;SACA,MAAM;;;eAGA,IAAI,CAAC,KAAK,IAAI,kBAAkB;kBAC7B,IAAI,CAAC,QAAQ,IAAI,KAAK;mBACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;cAC3B,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2BlB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,uBAAuB,GAAG,oBAAoB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAErE,uBAAuB,CAAC,IAAI,GAAG;IAC7B,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,QAAQ;CACf,CAAC;AAGF,MAAM,uBAAuB,GAAG,IAAI,CAAC,EAAE;IACrC,OAAO;;;kDAGyC,IAAI,CAAC,aAAa,IAAI,SAAS;gDACjC,IAAI,CAAC,WAAW,IAAI,SAAS;mDAC1B,IAAI,CAAC,cAAc,IAAI,QAAQ;;;;;;;;;;aAUrE,IAAI,CAAC,KAAK,IAAI,kBAAkB;gBAC7B,IAAI,CAAC,QAAQ,IAAI,KAAK;iBACrB,IAAI,CAAC,QAAQ,IAAI,KAAK;YAC3B,IAAI,CAAC,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;KA0BhB,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAEjE,gBAAgB,CAAC,IAAI,GAAG;IACtB,KAAK,EAAE,kBAAkB;IACzB,QAAQ,EAAE,IAAI;IACd,QAAQ,EAAE,KAAK;IACf,IAAI,EAAE,QAAQ;IACd,aAAa,EAAE,SAAS;IACxB,WAAW,EAAE,SAAS;IACtB,cAAc,EAAE,QAAQ;CACzB,CAAC","sourcesContent":["export default {\n  title: 'VDS/Components/Sidenav/Sidenav-Item-Category',\n  parameters: {\n    docs: {\n      toc: true,\n    },\n  },\n  argTypes: {\n    size: {\n      options: ['medium', 'large'],\n      control: { type: 'select' },\n    },\n  },\n};\n\nconst styles = `\n    .container {\n        margin: 32px;\n        width: 25%;\n        height: 50px;\n    }    \n`;\n\nconst codeTemplate = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-sidenav-item-category\n      value=\"${args.value || 'Sidenav Category'}\"    \n      expanded=\"${args.expanded || false}\"\n      is-static=\"${args.isStatic || false}\"\n      size=\"${args.size}\"\n    >\n      <div slot=\"category-items\">\n        <vds-sidenav-item\n          value=\"Sidenav Item 1\"    \n          icon=\"desktop-computer\"\n          expanded=\"true\"\n          disabled=\"false\"\n          has-children=\"false\"\n          is-static=\"false\"\n          is-active=\"false\"\n        >\n        </vds-sidenav-item>\n        <vds-sidenav-item\n          value=\"Sidenav Item 2\"    \n          icon=\"desktop-computer\"\n          expanded=\"true\"\n          disabled=\"false\"\n          has-children=\"false\"\n          is-static=\"false\"\n          is-active=\"false\"\n        >\n        </vds-sidenav-item>\n        <vds-sidenav-item\n          value=\"Sidenav Item 3\"    \n          icon=\"desktop-computer\"\n          expanded=\"true\"\n          disabled=\"false\"\n          has-children=\"false\"\n          is-static=\"false\"\n          is-active=\"false\"\n        >\n        </vds-sidenav-item>\n      </div>\n    </vds-sidenav-item-category>\n</div>\n    `;\n};\n\nexport const ExpandableUsage = codeTemplate.bind({});\n\nExpandableUsage.args = {\n  value: 'Sidenav Category',\n  expanded: true,\n  isStatic: false,\n  size: 'medium',\n};\n\nexport const StaticUsage = codeTemplate.bind({});\n\nStaticUsage.args = {\n  value: 'Sidenav Category',\n  expanded: false,\n  isStatic: true,\n  size: 'medium',\n};\n\nconst codeTemplateWithSlot = args => {\n  return `\n<style>${styles}</style>\n<div class=\"container\">\n    <vds-sidenav-item-category\n      value=\"${args.value || 'Sidenav Category'}\"    \n      expanded=\"${args.expanded || false}\"\n      is-static=\"${args.isStatic || false}\"\n      size=\"${args.size}\"\n    >\n      <div slot=\"action-slot\"><vds-link size=\"small\" variant=\"primary\" value=\"Clear all\"></vds-link></div>\n      <div slot=\"category-items\">\n        <vds-sidenav-item\n          value=\"Sidenav Item 1\"    \n          icon=\"desktop-computer\"\n          expanded=\"true\"\n          disabled=\"false\"\n          has-children=\"false\"\n          is-static=\"false\"\n          is-active=\"false\"\n        >\n        </vds-sidenav-item>\n        <vds-sidenav-item\n          value=\"Sidenav Item 2\"    \n          icon=\"desktop-computer\"\n          expanded=\"true\"\n          disabled=\"false\"\n          has-children=\"false\"\n          is-static=\"false\"\n          is-active=\"false\"\n        >\n        </vds-sidenav-item>\n      </div>\n    </vds-sidenav-item-category>\n</div>\n    `;\n};\n\nexport const ExpandableWithSlotUsage = codeTemplateWithSlot.bind({});\n\nExpandableWithSlotUsage.args = {\n  value: 'Sidenav Category',\n  expanded: true,\n  isStatic: false,\n  size: 'medium',\n};\n\n\nconst codeCustomWidthTemplate = args => {\n  return `\n<style>\n  vds-sidenav-item-category {\n    --vds-sidenav-item-category-expanded-width: ${args.ExpandedWidth || '17.5rem'};\n    --vds-sidenav-item-category-static-width: ${args.StaticWidth || '3.75rem'};\n    --vds-sidenav-item-category-collapsed-width: ${args.CollapsedWidth || '3.5rem'};\n  }\n  vds-sidenav-item {\n    --vds-sidenav-item-expanded-width: var(--vds-sidenav-item-category-expanded-width);\n    --vds-sidenav-item-static-width: var(--vds-sidenav-item-category-static-width);\n    --vds-sidenav-item-collapsed-width: var(--vds-sidenav-item-category-collapsed-width);\n  }\n</style>\n\n  <vds-sidenav-item-category\n    value=\"${args.value || 'Sidenav Category'}\"    \n    expanded=\"${args.expanded || false}\"\n    is-static=\"${args.isStatic || false}\"\n    size=\"${args.size}\"\n  >\n    <div slot=\"category-items\">\n      <vds-sidenav-item\n        value=\"Sidenav Item 1\"    \n        icon=\"desktop-computer\"\n        expanded=\"true\"\n        disabled=\"false\"\n        has-children=\"false\"\n        is-static=\"false\"\n        is-active=\"false\"\n      >\n      </vds-sidenav-item>\n      <vds-sidenav-item\n        value=\"Sidenav Item 2\"    \n        icon=\"desktop-computer\"\n        expanded=\"true\"\n        disabled=\"false\"\n        has-children=\"false\"\n        is-static=\"false\"\n        is-active=\"true\"\n      >\n      </vds-sidenav-item>\n    </div>\n  </vds-sidenav-item-category>\n\n    `;\n};\n\nexport const CustomWidthUsage = codeCustomWidthTemplate.bind({});\n\nCustomWidthUsage.args = {\n  value: 'Sidenav Category',\n  expanded: true,\n  isStatic: false,\n  size: 'medium',\n  ExpandedWidth: '17.5rem',\n  StaticWidth: '3.75rem',\n  CollapsedWidth: '3.5rem',\n};\n\n"]}