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

lmc-eu · Jan 8, 2025 · 0398a39 · 0398a39
1 parent 8eb71d4
commit 0398a39
Showing 1 changed file with 40 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, { ChangeEvent, useState } from 'react';
-import { Button, Radio } from '../..';
+import { Button, Checkbox, Radio, Stack, TextArea } from '../..';
 import { AlignmentX } from '../../../constants';
 import { DrawerAlignmentXType } from '../../../types';
 import Drawer from '../Drawer';
@@ -8,6 +8,9 @@ import DrawerPanel from '../DrawerPanel';
 
 const DrawerDefault = () => {
   const [isDrawerOpen, setDrawerOpen] = useState(false);
+  const [isClosableOnBackdropClick, setIsClosableOnBackdropClick] = useState(true);
+  const [isClosableOnEscapeKey, setIsClosableOnEscapeKey] = useState(true);
+  const [content, setContent] = useState<string>('This is a Drawer content.');
   const [drawerAlign, setDrawerAlign] = useState<DrawerAlignmentXType>(AlignmentX.RIGHT);
   const handleOpenDrawer = () => setDrawerOpen(true);
 
@@ -43,13 +46,47 @@ const DrawerDefault = () => {
             onChange={handleDrawerAlignChange}
           />
         </fieldset>
+
+        <fieldset style={{ border: 0 }}>
+          <Stack hasSpacing>
+            <Checkbox
+              name="is-closable-on-backdrop-click"
+              id="drawer-is-closable-on-backdrop-click"
+              label="Closable on Backdrop Click"
+              isChecked={isClosableOnEscapeKey}
+              onChange={() => setIsClosableOnEscapeKey(!isClosableOnEscapeKey)}
+            />
+            <Checkbox
+              name="is-closable-on-escape-key"
+              id="drawer-is-closable-on-escape-key"
+              label="Closable on Escape Key Down"
+              isChecked={isClosableOnBackdropClick}
+              onChange={() => setIsClosableOnBackdropClick(!isClosableOnBackdropClick)}
+            />
+            <TextArea
+              label="Drawer content"
+              name="content"
+              id="drawer-content"
+              helperText="Can contain HTML."
+              value={content}
+              onChange={(e) => setContent(e.currentTarget.value)}
+            />
+          </Stack>
+        </fieldset>
       </form>
       <Button onClick={handleOpenDrawer}>Open Drawer</Button>
 
-      <Drawer alignment={drawerAlign} id="example-basic" isOpen={isDrawerOpen} onClose={handleDrawerBasicClose}>
+      <Drawer
+        alignment={drawerAlign}
+        id="example-basic"
+        isOpen={isDrawerOpen}
+        onClose={handleDrawerBasicClose}
+        closeOnBackdropClick={isClosableOnBackdropClick}
+        closeOnEscapeKeyDown={isClosableOnEscapeKey}
+      >
         <DrawerPanel>
           <DrawerCloseButton />
-          <div className="p-800">Drawer content</div>
+          <div className="p-800">{content}</div>
         </DrawerPanel>
       </Drawer>
     </>