wabtec-internal-volt-basic-components 1.0.0

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

@@ -0,0 +1,374 @@
+import { Host, h } from "@stencil/core";
+import { combineClasses } from "../../utils/combine-classes";
+export class VdsDrawer {
+    constructor() {
+        /** Places the drawer in the screen */
+        this.position = 'left';
+        /** Mode of the drawer; one of 'over' or 'side'. */
+        this.mode = 'over';
+        /** Allow the vds-drawer to fit inside another html element */
+        this.isAdaptable = false;
+        /** Allow show or hide the shadow of the drawer */
+        this.showShadow = true;
+        // Allow display the border of the sidenav
+        this.showBorder = false;
+        this.dropdownIsOpened = false;
+    }
+    emitValue() {
+        if (this.opened)
+            this.drawerOpened.emit();
+        else
+            this.drawerClosed.emit();
+    }
+    setPositionRelativeForDropdowns(evt) {
+        const target = (evt.target);
+        if (target.nodeName === "VDS-BASIC-DROPDOWN" ||
+            target.nodeName === "VDS-DROPDOWN" ||
+            target.nodeName === "VDS-BASIC-DROPDOWN-MULTISELECT" ||
+            target.nodeName === "VDS-DROPDOWN-MULTISELECT" ||
+            target.nodeName === "VDS-BASIC-AUTOCOMPLETE" ||
+            target.nodeName === "VDS-AUTOCOMPLETE") {
+            this.dropdownIsOpened = evt.type === "opened";
+        }
+    }
+    open() {
+        return new Promise(resolve => {
+            this.opened = true;
+            resolve();
+        });
+    }
+    close() {
+        return new Promise(resolve => {
+            if (!this.disableClose) {
+                this.opened = false;
+            }
+            resolve();
+        });
+    }
+    renderBackdrop() {
+        return this.isAdaptable ? h("div", { class: `volt__drawer--backdrop-adaptable` }) : h("div", { class: `volt__drawer--backdrop` });
+    }
+    renderCloseIcon() {
+        return (h("vds-icon-button", { onClick: () => {
+                this.close();
+            }, variant: 'secondary', icon: "close", disabled: this.disableClose, size: "large" }));
+    }
+    render() {
+        return (h(Host, { key: 'baf8f2318888b313b47494136874f43efd858f13', class: combineClasses(`vds-drawer__${this.mode}`, `vds-drawer__${this.position}`, this.isAdaptable ? 'vds-drawer--adaptable' : '') }, h("div", { key: '63adf4e51f55d4b8aa6316625937a86e2b6f08b6', class: combineClasses('volt__drawer', `padding__${this.padding}`, this.opened ? 'volt__drawer--opened' : '', `volt__drawer__element--position-${this.position}`, this.showShadow ? `vds-drawer__shadow--${this.position}` : '', this.showBorder ? `vds-drawer__border--${this.position}` : '', this.dropdownIsOpened ? "vds-drawer__dropdown-is-opened" : "") }, h("div", { key: 'c8c23dbc0e8232251b67c95443483e03e069eff7', class: `volt__drawer--content` }, h("div", { key: '21bee6d81a221e2ab3cdf52853b2002b9ed069cf', class: `volt__drawer--header ${this.showCloseButton ? "volt__drawer--header-close-icon" : ""}` }, h("div", { key: '957f5f65a26e0c0cdeb32c86f61233e732de4718', class: "volt__drawer--header-content" }, h("slot", { key: 'bfaae560a91eea57122662bcbbd5435c4d4ccf9c', name: "header" })), this.showCloseButton && this.renderCloseIcon()), h("div", { key: '88a0e15bd3e65f482c7653fa2ce0a355d908fcbc', class: `volt-drawer__body` }, h("slot", { key: '6effb9ba49419e3401bd93b277d858a9fed9aea8', name: "drawer" })), h("slot", { key: 'd9322d3e18b63ef96d42e261077d96e325233cdd', name: "footer" }))), h("div", { key: '9d8304e945b37fd25c871c3e4a897118c23fc331', class: 'volt__drawer__container' }, this.backdrop && this.opened ? this.renderBackdrop() : '', h("slot", { key: '093a01ed757443981d825dffd16ff25e963ba85c', name: "container" }))));
+    }
+    static get is() { return "vds-drawer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["vds-drawer.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["vds-drawer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "opened": {
+                "type": "boolean",
+                "attribute": "opened",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opens/closes the drawer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "showCloseButton": {
+                "type": "boolean",
+                "attribute": "show-close-button",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles close button in the drawer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disableClose": {
+                "type": "boolean",
+                "attribute": "disable-close",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the close button in the drawer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "position": {
+                "type": "string",
+                "attribute": "position",
+                "mutable": true,
+                "complexType": {
+                    "original": "'left' | 'right'",
+                    "resolved": "\"left\" | \"right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Places the drawer in the screen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "backdrop": {
+                "type": "boolean",
+                "attribute": "backdrop",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toggles backdrop behind the drawer in the screen"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": true,
+                "complexType": {
+                    "original": "Spacing",
+                    "resolved": "\"spacing-00\" | \"spacing-01\" | \"spacing-02\" | \"spacing-03\" | \"spacing-04\" | \"spacing-05\" | \"spacing-06\" | \"spacing-07\" | \"spacing-08\" | \"spacing-09\" | \"spacing-10\" | \"spacing-11\" | \"spacing-12\" | \"spacing-13\" | \"spacing-14\" | \"spacing-15\" | \"spacing-16\" | \"spacing-17\" | \"spacing-18\" | \"spacing-19\" | \"spacing-20\"",
+                    "references": {
+                        "Spacing": {
+                            "location": "import",
+                            "path": "../../definitions/spacing",
+                            "id": "src/definitions/spacing.ts::Spacing"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Adds the padding to the drawer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "mode": {
+                "type": "string",
+                "attribute": "mode",
+                "mutable": true,
+                "complexType": {
+                    "original": "'over' | 'side'",
+                    "resolved": "\"over\" | \"side\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode of the drawer; one of 'over' or 'side'."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'over'"
+            },
+            "isAdaptable": {
+                "type": "boolean",
+                "attribute": "is-adaptable",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow the vds-drawer to fit inside another html element"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "showShadow": {
+                "type": "boolean",
+                "attribute": "show-shadow",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allow show or hide the shadow of the drawer"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "showBorder": {
+                "type": "boolean",
+                "attribute": "show-border",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "dropdownIsOpened": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "drawerClosed",
+                "name": "drawerClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when drawer is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "drawerOpened",
+                "name": "drawerOpened",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits event when drawer is opened"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "open": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "opened",
+                "methodName": "emitValue"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "opened",
+                "method": "setPositionRelativeForDropdowns",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "closed",
+                "method": "setPositionRelativeForDropdowns",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=vds-drawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"vds-drawer.js","sourceRoot":"","sources":["../../../src/components/drawer/vds-drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h } from '@stencil/core';\nimport { HTMLStencilElement, Prop, Method, EventEmitter, Event, Watch, Listen, State } from '@stencil/core/internal';\nimport { Spacing } from '../../definitions/spacing';\nimport { combineClasses } from '../../utils/combine-classes';\n\n@Component({\n  tag: 'vds-drawer',\n  styleUrl: 'vds-drawer.scss',\n  shadow: true,\n})\nexport class VdsDrawer {\n  /** Opens/closes the drawer */\n  @Prop({ mutable: true }) opened: boolean;\n  /** Toggles close button in the drawer */\n  @Prop({ mutable: true }) showCloseButton: boolean;\n  /** Disables the close button in the drawer */\n  @Prop({ mutable: true }) disableClose: boolean;\n  /** Places the drawer in the screen */\n  @Prop({ mutable: true }) position: 'left' | 'right' = 'left';\n  /** Toggles backdrop behind the drawer in the screen */\n  @Prop({ mutable: true }) backdrop: boolean;\n  /** Adds the padding to the drawer */\n  @Prop({ mutable: true }) padding: Spacing;\n  /** Mode of the drawer; one of 'over' or 'side'. */\n  @Prop({ mutable: true }) mode: 'over' | 'side' = 'over';\n  /** Allow the vds-drawer to fit inside another html element */\n  @Prop() isAdaptable = false;\n  /** Allow show or hide the shadow of the drawer */\n  @Prop() showShadow: boolean = true;\n  // Allow display the border of the sidenav\n  @Prop() showBorder: boolean = false;\n\n  /** Emits event when drawer is closed */\n  @Event() drawerClosed: EventEmitter<void>;\n  /** Emits event when drawer is opened */\n  @Event() drawerOpened: EventEmitter<void>;\n\n  @State() dropdownIsOpened: boolean = false;\n\n  @Watch('opened')\n  emitValue(): void {\n    if (this.opened) this.drawerOpened.emit();\n    else this.drawerClosed.emit();\n  }\n\n  @Listen('opened', { target: 'window' })\n  @Listen('closed', { target: 'window' })\n  setPositionRelativeForDropdowns(evt: CustomEvent<boolean>): void {\n    const target = (evt.target) as HTMLElement;\n    if(\n        target.nodeName === \"VDS-BASIC-DROPDOWN\" || \n        target.nodeName === \"VDS-DROPDOWN\" || \n        target.nodeName === \"VDS-BASIC-DROPDOWN-MULTISELECT\" ||\n        target.nodeName === \"VDS-DROPDOWN-MULTISELECT\" ||\n        target.nodeName === \"VDS-BASIC-AUTOCOMPLETE\" || \n        target.nodeName === \"VDS-AUTOCOMPLETE\"\n      ) {\n      this.dropdownIsOpened = evt.type === \"opened\";\n    }\n  }\n\n  @Method()\n  open(): Promise<void> {\n    return new Promise(resolve => {\n      this.opened = true;\n      resolve();\n    });\n  }\n\n  @Method()\n  close(): Promise<void> {\n    return new Promise(resolve => {\n      if (!this.disableClose) {\n        this.opened = false;\n      }\n      resolve();\n    });\n  }\n\n  private renderBackdrop(): HTMLStencilElement {\n    return this.isAdaptable ? <div class={`volt__drawer--backdrop-adaptable`}></div> : <div class={`volt__drawer--backdrop`}></div>;\n  }\n\n  private renderCloseIcon(): HTMLStencilElement {\n    return (\n      <vds-icon-button\n        onClick={() => {\n          this.close();\n        }}\n        variant={'secondary'}\n        icon=\"close\"\n        disabled={this.disableClose}\n        size=\"large\"\n      ></vds-icon-button>\n    );\n  }\n\n  render(): HTMLStencilElement {\n    return (\n      <Host class={combineClasses(`vds-drawer__${this.mode}`, `vds-drawer__${this.position}`, this.isAdaptable ? 'vds-drawer--adaptable' : '')}>\n        <div\n          class={combineClasses(\n            'volt__drawer',\n            `padding__${this.padding}`,\n            this.opened ? 'volt__drawer--opened' : '',\n            `volt__drawer__element--position-${this.position}`,\n            this.showShadow ? `vds-drawer__shadow--${this.position}` : '',\n            this.showBorder ? `vds-drawer__border--${this.position}` : '',\n            this.dropdownIsOpened ? \"vds-drawer__dropdown-is-opened\" : \"\"\n          )}\n        >\n          \n          <div class={`volt__drawer--content`}>\n            <div\n              class={`volt__drawer--header ${this.showCloseButton ? \"volt__drawer--header-close-icon\" : \"\"}`}\n            >\n              <div class={\"volt__drawer--header-content\"}>\n                <slot name=\"header\" />\n              </div>\n              {this.showCloseButton && this.renderCloseIcon()}\n            </div>\n            <div class={`volt-drawer__body`}>\n              <slot name=\"drawer\" />\n            </div>\n            <slot name=\"footer\" />\n          </div>\n        </div>\n        <div class={'volt__drawer__container'}>\n          {this.backdrop && this.opened ? this.renderBackdrop() : ''}\n          <slot name=\"container\" />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,285 @@
+export default {
+    title: 'VDS/Components/Drawer',
+    parameters: {
+        docs: {
+            toc: true,
+        },
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/pWWQH7I7zAkgkBKIuRG53Y/Volt-2?m=auto&node-id=30055-122941"
+        }
+    },
+    argTypes: {
+        padding: {
+            options: ["spacing-00", "spacing-01", "spacing-02", "spacing-03",
+                "spacing-04", "spacing-05", "spacing-06", "spacing-07",
+                "spacing-08", "spacing-09", "spacing-10", "spacing-11",
+                "spacing-12", "spacing-13", "spacing-14", "spacing-15",
+                "spacing-16", "spacing-17", "spacing-18", "spacing-19",
+                "spacing-20"],
+            control: { type: "select" }
+        },
+        position: {
+            options: ["left", "right"],
+            control: { type: "select" }
+        },
+        mode: {
+            options: ["side", "over"],
+            control: { type: "select" }
+        }
+    },
+};
+const styles = `
+    .body {
+        height: 100vh;
+    }
+    .parent-container {
+        position: relative;
+        width: 20vw;
+        height: 200px;
+    }
+    .header-footer-container {
+        height: 100px;
+        width: 100%;
+        text-align: center;
+        color: var(--color-text-high);
+        font-size:  1.25rem;
+        line-height: 1.5rem;
+        font-weight: bold;
+        padding: 1rem;
+        box-sizing: border-box;
+    }
+    .child-container {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+    span {
+        color: var(--color-text-high);
+        font-size:  1.25rem;
+        line-height: 1.5rem;
+        font-weight: bold;
+    }
+    p {
+        color: var(--color-text-high);
+        padding: var(--spacing-05);
+    }
+    vds-button {
+        padding-left: var(--spacing-05);
+    }
+`;
+const codeTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-drawer
+    opened="${args.opened}"
+    show-close-button="${args.showCloseButton}"
+    disable-close="${args.disableClose}"
+    position="${args.position}"
+    backdrop="${args.backdrop}"
+    is-adaptable="${args.isAdaptable}"
+    padding="${args.padding}"
+    mode="${args.mode}"
+    show-shadow="${args.showShadow}"
+    show-border="${args.showBorder}"
+>
+    <div slot="drawer" class="parent-container">
+        <div class="child-container">
+            <span>Content</span>
+        </div>
+    </div>
+    <div slot="container">
+        <p>Container for page elements</p>
+        <vds-button onclick="toggleDrawer()">Open/Close Drawer</vds-button>
+        <vds-button onclick="closeDrawer()">close()</vds-button>
+    </div>
+</vds-drawer>
+<script>
+function toggleDrawer() {
+    const drawer = document.querySelector('vds-drawer');
+    drawer.opened = !drawer.opened;
+}
+function closeDrawer() {
+    const drawer = document.querySelector('vds-drawer');
+    drawer.close();
+}
+</script>
+    `;
+};
+export const BasicUsage = codeTemplate.bind({});
+BasicUsage.args = {
+    opened: false,
+    showCloseButton: true,
+    disableClose: false,
+    position: "left",
+    backdrop: false,
+    isAdaptable: false,
+    padding: "spacing-06",
+    mode: "side",
+    showShadow: true,
+    showBorder: false
+};
+const codeHeaderFooterTemplate = (args) => {
+    return `
+<style>${styles}</style>
+<vds-drawer
+    opened="${args.opened}"
+    show-close-button="${args.showCloseButton}"
+    disable-close="${args.disableClose}"
+    position="${args.position}"
+    backdrop="${args.backdrop}"
+    is-adaptable="${args.isAdaptable}"
+    padding="${args.padding}"
+    mode="${args.mode}"
+    show-shadow="${args.showShadow}"
+    show-border="${args.showBorder}"
+>
+    <div slot="header">
+        <vds-sidenav-item-app
+            value="Header"
+            menu-icon="false"
+            expanded="true"
+            is-active="false"
+        >
+            <vds-icon
+                slot="img"
+                size="2.5rem"
+                svg-icon="wabtec-icon"
+                class="volt-icon color-brand-main"
+            ><vds-icon>
+        </vds-sidenav-item-app>
+    </div>
+    <div slot="drawer" class="parent-container header-footer-container">
+        <vds-sidenav-item-input
+            expanded="true"
+            value=""
+            placeholder="Search"
+            disabled="false"
+            is-readonly="false"
+            error="false"
+            action-icon="zoom"
+            class="hydrated"
+        >
+        </vds-sidenav-item-input>
+        <br/>
+        <vds-sidenav-item
+            value="Sidenav Item"
+            icon="desktop-computer"
+            expanded="true"
+            disabled="false"
+            has-children="false"
+            is-static="false"
+            is-active="false"
+            link_href=""
+            link_target="_blank"
+            class="hydrated"
+        >
+        </vds-sidenav-item>
+        <vds-sidenav-item
+            value="Sidenav Item"
+            icon="desktop-computer"
+            expanded="true"
+            disabled="false"
+            has-children="false"
+            is-static="false"
+            is-active="false"
+            link_href=""
+            link_target="_blank"
+            class="hydrated"
+        >
+        </vds-sidenav-item>
+    </div>
+    <div slot="footer" class="header-footer-container">
+        <vds-sidenav-item-app
+            value="Footer"
+            menu-icon="true"
+            expanded="true"
+            is-active="false"
+        >
+            <vds-icon
+                slot="img"
+                size="2.5rem"
+                svg-icon="vessel"
+                color="color-icon-danger"
+            ><vds-icon>
+        </vds-sidenav-item-app>
+    </div>
+    <div slot="container">
+        <p>Container for page elements</p>
+        <vds-button onclick="toggleDrawer()">Open/Close Drawer</vds-button>
+    </div>
+</vds-drawer>
+<script>
+function toggleDrawer() {
+    const drawer = document.querySelector('vds-drawer');
+    drawer.opened = !drawer.opened;
+}
+</script>
+    `;
+};
+export const HeaderFooterUsage = codeHeaderFooterTemplate.bind({});
+HeaderFooterUsage.args = {
+    opened: false,
+    showCloseButton: true,
+    disableClose: false,
+    position: "left",
+    backdrop: false,
+    isAdaptable: false,
+    padding: "spacing-06",
+    mode: "side",
+    showShadow: true,
+    showBorder: false
+};
+const stylesCustomColor = `
+    vds-drawer {
+        --vds-drawer-background-color: var(--color-background-information-default);
+        --vds-drawer-border-color: var(--color-border-danger);
+        --vds-drawer-backdrop-background-color: var(--color-background-healthy-lowest-hover);
+    }
+`;
+const codeCustomColorTemplate = (args) => {
+    return `
+<style>${styles}${stylesCustomColor}</style>
+<vds-drawer
+    opened="${args.opened}"
+    show-close-button="${args.showCloseButton}"
+    disable-close="${args.disableClose}"
+    position="${args.position}"
+    backdrop="true"
+    is-adaptable="${args.isAdaptable}"
+    padding="${args.padding}"
+    mode="${args.mode}"
+    show-shadow="${args.showShadow}"
+    show-border="true"
+>
+    <div slot="drawer" class="parent-container">
+        <div class="child-container">
+            <span>Content</span>
+        </div>
+    </div>
+    <div slot="container">
+        <p>Container for page elements</p>
+        <vds-button onclick="toggleDrawer()">Open/Close Drawer</vds-button>
+    </div>
+</vds-drawer>
+<script>
+function toggleDrawer() {
+    const drawer = document.querySelector('vds-drawer');
+    drawer.opened = !drawer.opened;
+}
+</script>
+    `;
+};
+export const CustomColorUsage = codeCustomColorTemplate.bind({});
+CustomColorUsage.args = {
+    opened: false,
+    showCloseButton: true,
+    disableClose: false,
+    position: "left",
+    isAdaptable: false,
+    padding: "spacing-06",
+    mode: "side",
+    showShadow: true,
+};
+//# sourceMappingURL=vds-drawer.stories.js.map