From 3cf52fd1bffd20be28db36fa6ae6a8f8eb68847e Mon Sep 17 00:00:00 2001 From: Vanessa Tran Date: Tue, 1 Apr 2025 09:24:09 -0600 Subject: [PATCH] feat(#2278): add modal drawer doc --- package-lock.json | 30 +- package.json | 6 +- .../component-card/ComponentCard.tsx | 8 +- .../OldComponentBanner.tsx | 21 ++ src/components/sandbox/Sandbox.tsx | 3 +- .../drawer/DrawerAddRecordExample.tsx | 267 ++++++++++++++++++ src/examples/drawer/DrawerExamples.tsx | 17 ++ src/examples/drawer/DrawerFiltersExample.tsx | 231 +++++++++++++++ .../FilterChipTypedChipExample.tsx | 3 +- .../TableWithGlobalFiltersExample.tsx | 2 +- src/routes/components/AllComponents.tsx | 12 +- src/routes/components/Components.tsx | 28 +- src/routes/components/Drawer.tsx | 228 +++++++++++++++ src/routes/components/Radio.tsx | 1 + .../get-started/designers/UxDesigner.tsx | 3 +- src/versioned-router.tsx | 2 + 16 files changed, 834 insertions(+), 28 deletions(-) create mode 100644 src/components/old-component-banner/OldComponentBanner.tsx create mode 100644 src/examples/drawer/DrawerAddRecordExample.tsx create mode 100644 src/examples/drawer/DrawerExamples.tsx create mode 100644 src/examples/drawer/DrawerFiltersExample.tsx create mode 100644 src/routes/components/Drawer.tsx diff --git a/package-lock.json b/package-lock.json index 416e60b4d..489473a63 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "code-sandbox", "version": "0.0.0", "dependencies": { - "@abgov/react-components": "6.3.0-alpha.1", - "@abgov/ui-components-common": "1.3.0-alpha.1", - "@abgov/web-components": "1.33.0-alpha.10", + "@abgov/react-components": "6.3.0-alpha.5", + "@abgov/ui-components-common": "1.3.0-alpha.2", + "@abgov/web-components": "1.33.0-alpha.15", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", @@ -67,24 +67,24 @@ } }, "node_modules/@abgov/react-components": { - "version": "6.3.0-alpha.1", - "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.3.0-alpha.1.tgz", - "integrity": "sha512-QrHLIHYyIQiTNRPAocVFJKImt1nz+AsQ6br3xj8tPJLar6Fpk7fTtZ4px0HeKCdOixDEwgE3MPJzaxH7NLEHOA==", + "version": "6.3.0-alpha.5", + "resolved": "https://registry.npmjs.org/@abgov/react-components/-/react-components-6.3.0-alpha.5.tgz", + "integrity": "sha512-5pI2o3g4FHI5ejcuFS2Ot7mtjWjoit9j1KMbxt2gbLiQWRET4g8SgkMwavmaK5nGRPDC3GRgE21S25XyaNVyjw==", "peerDependencies": { - "@types/react": "^17.0.0 || ^18.0.0", - "react": "^17.0.0 || ^18.0.0", - "react-dom": "^17.0.0 || ^18.0.0" + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" } }, "node_modules/@abgov/ui-components-common": { - "version": "1.3.0-alpha.1", - "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.3.0-alpha.1.tgz", - "integrity": "sha512-E5QFaXo3al+6VqT7OfZv0N6gflDxWYXe36LFkSPnnMLy8rmcqe1SupHqODxO448FFckxmO6wnvAb+LufM9yDgQ==" + "version": "1.3.0-alpha.2", + "resolved": "https://registry.npmjs.org/@abgov/ui-components-common/-/ui-components-common-1.3.0-alpha.2.tgz", + "integrity": "sha512-UtoqKgjRq+JkGO8dC5/WE6roaaOsf0NRvGE2Njlyf+I2Mx8LlrwFuYOGJ1ehLBwUkzn1bMT70x7YFDVrCIWJog==" }, "node_modules/@abgov/web-components": { - "version": "1.33.0-alpha.10", - "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.33.0-alpha.10.tgz", - "integrity": "sha512-U15wLLQiyt6nXfGP+GxnKiFwtNDI9U4h3+bAskDinWFrDPDWz6bYckNpFJMNLt8Y+vEDKzBMhG28cWp8KI9iig==", + "version": "1.33.0-alpha.15", + "resolved": "https://registry.npmjs.org/@abgov/web-components/-/web-components-1.33.0-alpha.15.tgz", + "integrity": "sha512-p02+brvCylVDFUxUMwJY1ryLtKuvNED5Npu532c1tlFpBn0NRVYMWxG1bR7S2Tpy/f+X2Bq+tZnbMHPd8uHD8g==", "peerDependencies": { "@sveltejs/vite-plugin-svelte": "3.x", "glob": "10.x", diff --git a/package.json b/package.json index c0a3122d2..aac2f796e 100644 --- a/package.json +++ b/package.json @@ -12,9 +12,9 @@ "prettier": "npx prettier . --write" }, "dependencies": { - "@abgov/react-components": "6.3.0-alpha.1", - "@abgov/ui-components-common": "1.3.0-alpha.1", - "@abgov/web-components": "1.33.0-alpha.10", + "@abgov/react-components": "6.3.0-alpha.5", + "@abgov/ui-components-common": "1.3.0-alpha.2", + "@abgov/web-components": "1.33.0-alpha.15", "@faker-js/faker": "^8.3.1", "highlight.js": "^11.8.0", "js-cookie": "^3.0.5", diff --git a/src/components/component-card/ComponentCard.tsx b/src/components/component-card/ComponentCard.tsx index 527f1f69c..9e1d9daa9 100644 --- a/src/components/component-card/ComponentCard.tsx +++ b/src/components/component-card/ComponentCard.tsx @@ -13,6 +13,9 @@ type Group = | "Inputs and actions" | "Structure and navigation" | "Utilities"; +import { useContext } from "react"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { ANGULAR_VERSIONS, REACT_VERSIONS } from "@components/version-language-switcher/version-language-constants.ts"; export interface Props { name: string; @@ -22,6 +25,7 @@ export interface Props { status: ComponentStatus; githubLink?: string; openIssues?: number; + isNew?: boolean; // if true, show a badge on the component card to let users know the component is available in the latest version } function dasherize(value: string): string { @@ -52,6 +56,7 @@ export function ComponentCard(props: Props) { const badgeType = getBadgeType(props.status); + const {language} = useContext(LanguageVersionContext); return (
{props.status === "Published" ? ( @@ -101,7 +106,8 @@ export function ComponentCard(props: Props) { )} + {props.isNew && }
); -} \ No newline at end of file +} diff --git a/src/components/old-component-banner/OldComponentBanner.tsx b/src/components/old-component-banner/OldComponentBanner.tsx new file mode 100644 index 000000000..fa2ef0747 --- /dev/null +++ b/src/components/old-component-banner/OldComponentBanner.tsx @@ -0,0 +1,21 @@ +import { GoabCallout } from "@abgov/react-components"; +import { ANGULAR_VERSIONS, REACT_VERSIONS } from "@components/version-language-switcher/version-language-constants.ts"; +import { Link } from "react-router-dom"; + +interface OldComponentBannerProps { + componentName: string; + language: string; +} + +export const OldComponentBanner = ({ componentName, language }: OldComponentBannerProps) => { + return ( + + This component is only available in {language == "angular" ? ANGULAR_VERSIONS.NEW.label.substring(0,2).toUpperCase() + : REACT_VERSIONS.NEW.label.substring(0,2).toUpperCase()} of the design system components. +
+ View upgrade guide{" "} + + ) +} diff --git a/src/components/sandbox/Sandbox.tsx b/src/components/sandbox/Sandbox.tsx index 16bb71b4b..59e7902b6 100644 --- a/src/components/sandbox/Sandbox.tsx +++ b/src/components/sandbox/Sandbox.tsx @@ -29,6 +29,7 @@ interface SandboxProps { flags?: Flag[]; skipRender?: boolean; // prevent rendering the snippet, to allow custom code to be shown skipRenderOnly?: string; // prevent rendering the snippet for a specific language. Ex: react/angular + skipRenderDom?: boolean; // rendering code snippets, but display none for the DOM because it isn't working as expected if inside sandbox allow?: string[]; // Be default the Sandbox is selective to what it renders out. This adds // additional elements to what is allowed to be rendered out variableNames?: string[]; // If we want to assign a variable such as step={step} render in code snippet, provides variableNames=["step"] @@ -114,7 +115,7 @@ export const Sandbox = (props: SandboxProps) => { return ( <> - + {props.skipRenderDom ? null : } {/* Only render the GoAAccordion if props.properties is provided */} {props.properties && props.properties.length > 0 && ( diff --git a/src/examples/drawer/DrawerAddRecordExample.tsx b/src/examples/drawer/DrawerAddRecordExample.tsx new file mode 100644 index 000000000..a58dc3656 --- /dev/null +++ b/src/examples/drawer/DrawerAddRecordExample.tsx @@ -0,0 +1,267 @@ +import { + GoabBlock, + GoabButton, GoabCheckbox, GoabContainer, GoabDatePicker, + GoabDrawer, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, GoabInput, GoabRadioGroup, GoabRadioItem +} from "@abgov/react-components"; +import { useState } from "react"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; + +export const DrawerAddRecordExample = () => { + const [open, setOpen] = useState(false); + const noop = () => {/* do something */} + return ( + <> + {/*Don't use a Sandbox because the animation slowing displaying the drawer isn't working if it is inside sandbox*/} + +
+ setOpen(true)}> + Add Record + +
+ + setOpen(false)} + actions={ + setOpen(false)}> + Add + + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/*React*/} + { + setOpen(true); + } + const drawerOnClose = () => { + setOpen(false); + } + const dropdownOnChange = (event: GoabDropdownOnChangeDetail) => { + console.log(event.value); + } + const radioGroupOnChange = (event: GoabRadioGroupOnChangeDetail) => { + console.log(event.value); + } + const inputOnChange = (event: GoabInputOnChangeDetail) => { + console.log(event.value); + } + const datePickerOnChange = (event: GoabDatePickerOnChangeDetail) => { + console.log(event.value); + } + `} + /> + + + Add Record + + setOpen(false)}> + Add + + }> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + `} + /> + + {/*Angular */} + + + Add Record + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Save + + + `} + /> + + ); +}; diff --git a/src/examples/drawer/DrawerExamples.tsx b/src/examples/drawer/DrawerExamples.tsx new file mode 100644 index 000000000..cd20609f5 --- /dev/null +++ b/src/examples/drawer/DrawerExamples.tsx @@ -0,0 +1,17 @@ +import { DrawerFiltersExample } from "@examples/drawer/DrawerFiltersExample.tsx"; +import { DrawerAddRecordExample } from "@examples/drawer/DrawerAddRecordExample.tsx"; + +export const DrawerExamples = () => { + return ( + <> + +

Filters

+ + +

Add record

+ + + ); +}; diff --git a/src/examples/drawer/DrawerFiltersExample.tsx b/src/examples/drawer/DrawerFiltersExample.tsx new file mode 100644 index 000000000..194229457 --- /dev/null +++ b/src/examples/drawer/DrawerFiltersExample.tsx @@ -0,0 +1,231 @@ +import { + GoabButton, + GoabCheckbox, + GoabContainer, + GoabDrawer, + GoabDropdown, + GoabDropdownItem, + GoabFormItem, + GoabRadioGroup, + GoabRadioItem, +} from "@abgov/react-components"; +import { useState } from "react"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; + +export const DrawerFiltersExample = () => { + const [open, setOpen] = useState(false); + // const noop = () => {/* do something */}; + return ( + <> + {/*Don't use a Sandbox because the animation slowing displaying the drawer isn't working if it is inside sandbox*/} + +
+ setOpen(true)}>Filters +
+ setOpen(false)} + position="right" + actions={ setOpen(false)}>Apply}> + + + + + + + + + + + + + { + /* do something */ + }}> + + + + + + + + + + + + + { + /* do something */ + }}> + + + + + + { + /** do something **/ + }}> + + + + + + + + {/*React*/} + { + setOpen(true); + } + const drawerOnClose = () => { + setOpen(false); + } + const radioGroupOnChange = (event: GoabRadioGroupOnChangeDetail) => { + console.log(event.value); + } + `} + /> + + Filters + + setOpen(false)}>Apply}> + + + + + + + + + + + + + {/* do something */}}> + + + + + + + + + + + + + {/* do something */}}> + + + + + + + + + + + + `} + /> + + {/*Angular*/} + + Filters + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Apply + + + `} + /> + + ); +}; diff --git a/src/examples/filter-chip/FilterChipTypedChipExample.tsx b/src/examples/filter-chip/FilterChipTypedChipExample.tsx index 921ec650d..9c892bcf3 100644 --- a/src/examples/filter-chip/FilterChipTypedChipExample.tsx +++ b/src/examples/filter-chip/FilterChipTypedChipExample.tsx @@ -1,7 +1,8 @@ -import { GoabContainer, GoabFilterChip, GoabFormItem, GoabInput, GoabInputOnChangeDetail, GoabInputOnKeyPressDetail } from "@abgov/react-components"; +import { GoabContainer, GoabFilterChip, GoabFormItem, GoabInput } from "@abgov/react-components"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; import { useContext, useState } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { GoabInputOnChangeDetail, GoabInputOnKeyPressDetail } from "@abgov/ui-components-common"; export const FilterChipTypedChipExample = () => { const {version} = useContext(LanguageVersionContext); diff --git a/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx b/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx index ffcb253ad..918f38c31 100644 --- a/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx +++ b/src/examples/filter-chip/TableWithGlobalFiltersExample.tsx @@ -14,7 +14,7 @@ import type { GoabBadgeType, GoabInputOnChangeDetail, GoabInputOnKeyPressDetail, -} from "@abgov/react-components"; +} from "@abgov/ui-components-common"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; diff --git a/src/routes/components/AllComponents.tsx b/src/routes/components/AllComponents.tsx index 6e11dd69e..13a3a47c0 100644 --- a/src/routes/components/AllComponents.tsx +++ b/src/routes/components/AllComponents.tsx @@ -190,6 +190,15 @@ const AllComponents = () => { "Lets users select a date through a calendar without the need to manually type it in a field.", status: "Published", }, + { + name: "drawer", + groups: ["Structure and navigation"], + tags: ["sections", "structure and navigation", "tabbed interface"], + description: + "A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.", + status: "Published", + isNew: true, + }, { name: "dropdown", groups: ["Inputs and actions"], @@ -625,6 +634,7 @@ const AllComponents = () => { status={card.status} githubLink={`https://github.com/GovAlta/ui-components/issues?q=is%3Aissue+is%3Aopen+label%3A${encodeURIComponent(getLabelQuery(card.name))}`} openIssues={issueCounts[card.name]} + isNew={card.isNew} /> ))} @@ -635,4 +645,4 @@ const AllComponents = () => { ); }; -export default AllComponents; \ No newline at end of file +export default AllComponents; diff --git a/src/routes/components/Components.tsx b/src/routes/components/Components.tsx index e64985352..7056c2fc6 100644 --- a/src/routes/components/Components.tsx +++ b/src/routes/components/Components.tsx @@ -1,9 +1,16 @@ -import { GoabNotification, GoabSideMenu, GoabSideMenuGroup, GoabSpacer } from "@abgov/react-components"; +import { + GoabBadge, + GoabBlock, + GoabNotification, + GoabSideMenu, + GoabSideMenuGroup, + GoabSpacer +} from "@abgov/react-components"; import { Link, Outlet } from "react-router-dom"; import { SupportInfo } from "@components/support-info/SupportInfo.tsx"; import { useContext } from "react"; import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; -import { getVersionedUrlPath } from "@components/version-language-switcher/version-language-constants.ts"; +import { getVersionedUrlPath, ANGULAR_VERSIONS, REACT_VERSIONS } from "@components/version-language-switcher/version-language-constants.ts"; import { MAX_CONTENT_WIDTH } from "../../global-constants.ts"; export function Components() { @@ -16,6 +23,20 @@ export function Components() { }; + const newComponentLabel = (componentName: string) => { + const getBadgeLabel = () => { + if (version === "new") return "New"; + return language === "angular" + ? ANGULAR_VERSIONS.NEW.label.substring(0, 2).toUpperCase() + : REACT_VERSIONS.NEW.label.substring(0, 2).toUpperCase(); + }; + return ( + + {componentName} + + ); + }; + return ( <> {version === "old" && ( @@ -68,6 +89,7 @@ export function Components() { Text area + {newComponentLabel("Drawer")} Footer Form stepper Header @@ -97,5 +119,3 @@ export function Components() { } export default Components; - - diff --git a/src/routes/components/Drawer.tsx b/src/routes/components/Drawer.tsx new file mode 100644 index 000000000..bdbadfadb --- /dev/null +++ b/src/routes/components/Drawer.tsx @@ -0,0 +1,228 @@ +import { + GoabBadge, + GoabButton, + GoabContainer, + GoabDrawer, + GoabDrawerProps, + GoabTab, + GoabTabs, +} from "@abgov/react-components"; +import { Sandbox, ComponentBinding } from "@components/sandbox"; +import { Category, ComponentHeader } from "@components/component-header/ComponentHeader"; +import { + ComponentProperties, + ComponentProperty, +} from "@components/component-properties/ComponentProperties"; +import { ComponentContent } from "@components/component-content/ComponentContent"; +import { LanguageVersionContext } from "@contexts/LanguageVersionContext.tsx"; +import { useContext, useState } from "react"; +import { TestIdProperty } from "@components/component-properties/common-properties.ts"; +import { CodeSnippet } from "@components/code-snippet/CodeSnippet.tsx"; +import { DrawerExamples } from "@examples/drawer/DrawerExamples.tsx"; +import { OldComponentBanner } from "@components/old-component-banner/OldComponentBanner.tsx"; +import { DesignEmpty } from "@components/empty-states/design-empty/DesignEmpty.tsx"; +import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty/AccessibilityEmpty.tsx"; + +// == Page props == + +const FIGMA_LINK = "https://www.figma.com/design/XwdpAM2ejssrXlzSuPiycT/Component---Drawer?node-id=2332-98665&m=dev"; +const ACCESSIBILITY_FIGMA_LINK = "https://www.figma.com/design/XwdpAM2ejssrXlzSuPiycT/Component---Drawer?node-id=2488-93239&m=dev"; +const componentName = "Drawer"; +const description = + "A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view."; +const category = Category.STRUCTURE_AND_NAVIGATION; +const relatedComponents = [ + { link: "/components/modal", name: "Modal" } +]; + +type ComponentPropsType = Omit; + +export const DrawerPage = () => { + const {version, language} = useContext(LanguageVersionContext); + const [open, setOpen] = useState(false); + + const [drawerProps, setDrawerProps] = useState({ + heading: "Drawer heading", + position: "right", + onClose: () => {}, + children: null + }); + + const [drawerBindings, setDrawerBindings] = useState([ + { + label: "Position", + type: "dropdown", + name: "position", + options: ["left", "right", "bottom"], + value: "right" + }, + { + label: "Heading", + type: "string", + name: "heading", + value: "Drawer heading", + }, + { + label: "Max Size", + helpText: "Sets max height on bottom position, sets width on left and right position", + type: "string", + name: "maxSize", + value: "", + }, + ]); + + const componentProperties: ComponentProperty[] = [ + { + name: "open", + type: "boolean", + description: "Whether the drawer is open.", + required: true, + }, + { + name: "position", + type: "GoabDrawerPosition (right|left|bottom)", + description: "The position of the drawer.", + required: true, + }, + { + name: "heading", + type: "string | ReactNode", + description: "Heading of the drawer.", + lang: "react", + }, + { + name: "heading", + type: "string | TemplateRef", + description: "Heading of the drawer.", + lang: "angular", + }, + { + name: "maxSize", + type: "GoabDrawerSize (px|rem|ch|vh|vw) (ex: 300px)", + description: "Sets max height on bottom position, sets width on left and right position", + }, + { + name: "actions", + type: "ReactNode", + description: "Actions to display in the drawer.", + lang: "react", + }, + { + name: "actions", + type: "TemplateRef", + description: "Actions to display in the drawer.", + lang: "angular", + }, + { + name: "onClose", + type: "() => void", + description: "Callback function to handle the close event.", + }, + TestIdProperty + ]; + + function SandboxOnChange(bindings: ComponentBinding[], props: Record) { + setDrawerBindings(bindings); + setDrawerProps({ + ...drawerProps, + ...props + } as ComponentPropsType); + } + + return ( + <> + + + {version === "old" && } + + {version === "new" && ( + + + +

+ Component +

+ {/*Don't use a Sandbox because the animation slowing displaying the drawer isn't working if it is inside sandbox*/} + +
+ setOpen(true)}>Open Drawer +
+ setOpen(false)}> +

+ This is a drawer. It is a panel that slides in from the edge of the screen to + provide users access to secondary content and actions without leaving the + current page. +

+ + + + + + + + setOpen(true)}>Open Drawer + setOpen(false)}> +

+ This is a drawer. It is a panel that slides in from the edge of the screen to + provide users access to secondary content and actions without leaving the + current page. +

+ + + + + + + + Examples + }> + + + + + + + + + + + + + )} + + ); +} diff --git a/src/routes/components/Radio.tsx b/src/routes/components/Radio.tsx index fc39028b7..d33ea022e 100644 --- a/src/routes/components/Radio.tsx +++ b/src/routes/components/Radio.tsx @@ -50,6 +50,7 @@ export default function RadioPage() { const [radioProps, setRadioProps] = useState({ name: "item", value: "", + onChange: () => {}, }); const [radioBindings, setRadioBindings] = useState([ { diff --git a/src/routes/get-started/designers/UxDesigner.tsx b/src/routes/get-started/designers/UxDesigner.tsx index 6a0ac91d9..40171d507 100644 --- a/src/routes/get-started/designers/UxDesigner.tsx +++ b/src/routes/get-started/designers/UxDesigner.tsx @@ -1,5 +1,6 @@ import { Link } from "react-router-dom"; import { ComponentContent } from "@components/component-content/ComponentContent"; +import { GoabCallout } from "@abgov/react-components"; export default function UxDesignerPage() { return ( @@ -35,7 +36,7 @@ export default function UxDesignerPage() { The design system tokens, styles, components and page templates are all available to pull into your file in Figma.

- When selecting components, prioritize those with a “goa-” prefix in the name such as “goa-input.” These components are available in both design and development, which means that developers can avoid unnecessary custom development. + When selecting components, prioritize those with a “goa-” prefix in the name such as “goa-input.” These components are available in both design and development, which means that developers can avoid unnecessary custom development.

; @@ -95,6 +96,7 @@ export const ComponentsRouter = () => { "date-picker": , "details": , "divider": , + "drawer": , "dropdown": , "file-uploader": , "filter-chip": ,