feat: Drawer features

pages/drawer/drawer-position-absolute.page.tsx

@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 import { capitalize, range } from 'lodash';
 
 import { Checkbox, SpaceBetween } from '~components';
-import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
+import Drawer, { DrawerProps } from '~components/drawer';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import { SimplePage } from '../app/templates';

pages/drawer/drawer-position-fixed.page.tsx

@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { capitalize, range } from 'lodash';
 
-import { Box, Checkbox, Select, SpaceBetween } from '~components';
-import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
+import { Box, Button, Checkbox, Select, SpaceBetween } from '~components';
+import Drawer, { DrawerProps } from '~components/drawer';
 import { colorBackgroundCellShaded as contentBackgroundColor } from '~design-tokens';
 
 import AppContext, { AppContextType } from '../app/app-context';
@@ -26,6 +26,7 @@ export default function () {
     urlParams: { offsets = false, backdrop = false, placement = 'bottom' },
     setUrlParams,
   } = useContext(AppContext as PageContext);
+  const [open, setOpen] = useState(true);
   const offset = offsets ? { start: 50, end: 50, top: 50, bottom: 50 } : {};
   return (
     <SimplePage
@@ -34,13 +35,22 @@ export default function () {
       i18n={{}}
       screenshotArea={{}}
     >
+      <Button onClick={() => setOpen(true)}>Open drawer</Button>
+
       <div>
         {range(0, 50).map(i => (
           <div key={i}>Line {i + 1}</div>
         ))}
       </div>
 
-      <FixedDrawer placement={placement} disableContentPaddings={true} offset={offset} backdrop={backdrop}>
+      <FixedDrawer
+        open={open}
+        onClose={() => setOpen(false)}
+        placement={placement}
+        disableContentPaddings={true}
+        offset={offset}
+        backdrop={backdrop}
+      >
         <Checkbox checked={offsets} onChange={({ detail }) => setUrlParams({ offsets: detail.checked })}>
           Use offsets
         </Checkbox>
@@ -58,17 +68,10 @@ export default function () {
   );
 }
 
-function FixedDrawer({ placement, offset, zIndex, backdrop, children }: DrawerProps) {
+function FixedDrawer({ placement, offset, children, ...rest }: DrawerProps) {
   const formatOffset = (offset?: DrawerProps.Offset) => JSON.stringify(offset, null, 2).replace(/"/g, '');
   return (
-    <Drawer
-      position="fixed"
-      placement={placement}
-      disableContentPaddings={true}
-      offset={offset}
-      zIndex={zIndex}
-      backdrop={backdrop}
-    >
+    <Drawer position="fixed" placement={placement} offset={offset} disableContentPaddings={true} {...rest}>
       <div
         style={{ boxSizing: 'border-box', padding: 16, width: 300, height: 300, background: contentBackgroundColor }}
       >

pages/drawer/drawer-position-static.page.tsx

@@ -4,7 +4,7 @@
 import React, { useContext } from 'react';
 
 import { Box, Button, ColumnLayout, SpaceBetween, Tabs } from '~components';
-import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
+import Drawer, { DrawerProps } from '~components/drawer';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import { SimplePage } from '../app/templates';

pages/drawer/drawer-position-sticky.page.tsx

@@ -5,7 +5,7 @@ import React, { useContext } from 'react';
 import { range } from 'lodash';
 
 import { Box, Checkbox, SpaceBetween } from '~components';
-import Drawer from '~components/drawer/next';
+import Drawer from '~components/drawer';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import { SimplePage } from '../app/templates';

pages/drawer/drawer-visibility-controlled.page.tsx

@@ -4,7 +4,7 @@
 import React, { useContext, useRef, useState } from 'react';
 
 import { Button, Checkbox, Header, SpaceBetween } from '~components';
-import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
+import Drawer, { DrawerProps } from '~components/drawer';
 
 import AppContext, { AppContextType } from '../app/app-context';
 import { SimplePage } from '../app/templates';

pages/drawer/permutations.page.tsx

@@ -4,7 +4,7 @@
 import React from 'react';
 
 import { Button } from '~components';
-import Drawer, { NextDrawerProps as DrawerProps } from '~components/drawer/next';
+import Drawer, { DrawerProps } from '~components/drawer';
 
 import { SimplePage } from '../app/templates';
 import createPermutations from '../utils/permutations';