fixup! Feat(web-react): Introduce Drawer component #DS-1580

lmc-eu · Dec 30, 2024 · 0c0f43b · 0c0f43b
1 parent 1b43c11
commit 0c0f43b
Showing 1 changed file with 41 additions and 3 deletions.
diff --git a/packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx b/packages/web-react/src/components/Drawer/demo/DrawerDefault.tsx
@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Button } from '../..';
+import React, { ChangeEvent, useState } from 'react';
+import { Button, Radio } from '../..';
 import { AlignmentX } from '../../../constants';
 import { AlignmentXDictionaryType } from '../../../types';
 import Drawer from '../Drawer';
@@ -13,6 +13,10 @@ const DrawerDefault = () => {
 
   const handleDrawerBasicClose = () => setDrawerBasicOpen(false);
 
+  const handleDrawerAlignChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setDrawerAlign(event.target.value as AlignmentXDictionaryType);
+  };
+
   return (
     <>
       <Button onClick={toggleDrawerBasic} data-test-id="drawer-basic">
@@ -22,7 +26,41 @@ const DrawerDefault = () => {
       <Drawer alignment={drawerAlign} id="example-basic" isOpen={isDrawerBasicOpen} onClose={handleDrawerBasicClose}>
         <DrawerDialog>
           <DrawerCloseButton label="test" />
-          <div>Drawer content</div>
+          <div>
+            <form className="mb-600">
+              <div>Drawer alignment:</div>
+              <Radio
+                id="drawer-alignment-top"
+                marginRight="space-600"
+                label="Left"
+                value="left"
+                name="modal-alignment"
+                autoComplete="off"
+                isChecked={drawerAlign === AlignmentX.LEFT}
+                onChange={handleDrawerAlignChange}
+              />
+              <Radio
+                id="drawer-alignment-center"
+                marginRight="space-600"
+                label="Center"
+                value="center"
+                name="modal-alignment"
+                autoComplete="off"
+                isChecked={drawerAlign === AlignmentX.CENTER}
+                onChange={handleDrawerAlignChange}
+              />
+              <Radio
+                id="drawer-alignment-bottom"
+                marginRight="space-600"
+                label="Right"
+                value="right"
+                name="modal-alignment"
+                autoComplete="off"
+                isChecked={drawerAlign === AlignmentX.RIGHT}
+                onChange={handleDrawerAlignChange}
+              />
+            </form>
+          </div>
         </DrawerDialog>
       </Drawer>
     </>