@wix/design-system

## Feature Examples ### Resizeable - description: <p>Control if a handle is shown in the component header with <code>resizable</code> prop. When enabled, it allows user to expand or collapse the drawer with a swipe gesture. </p> - example: ```jsx () => { const [open, setOpen] = React.useState(false); const [resizable, setResizable] = React.useState(true); return ( <Box direction="vertical"> <Box gap="10px"> <Button onClick={() => { setResizable(true); setOpen(true); }} > Open resizable drawer </Button> <Button onClick={() => { setResizable(false); setOpen(true); }} > Open non-resizable drawer </Button> </Box> <Drawer open={open} onClose={() => setOpen(false)} resizable={resizable} backdrop margin dismissible > <Box padding="20px" gap="20px" direction="vertical"> <StorybookComponents.Placeholder height="200px"> <Text size="medium" weight="normal"> {resizable ? 'Resizable drawer' : 'Non-resizable drawer'} </Text> </StorybookComponents.Placeholder> <Button onClick={() => setOpen(false)}>Close Drawer</Button> </Box> </Drawer> </Box> ); }; ``` ### Backdrop - description: <p>Control whether the drawer displays a <code>backdrop</code> using the backdrop property. By default, clicking the backdrop will close the drawer.</p><p></p><p>When the backdrop is disabled, you can allow users to interact with the content behind the drawer by turning off the <code>renderBackdrop</code> property. When this property is off, make sure to provide alternative ways to close the drawer so users don’t get trapped in it.</p> - example: ```jsx () => { const [open, setOpen] = React.useState(false); const [backdrop, setBackdrop] = React.useState(true); return ( <Box direction="vertical"> <Box gap="10px"> <Button onClick={() => { setBackdrop(true); setOpen(true); }} > Open drawer with backdrop </Button> <Button onClick={() => { setBackdrop(false); setOpen(true); }} > Open drawer without backdrop </Button> </Box> <Drawer open={open} onClose={() => setOpen(false)} backdrop={backdrop} margin dismissible > <Box padding="20px" gap="20px" direction="vertical"> <StorybookComponents.Placeholder height="200px"> <Text size="medium" weight="normal"> {backdrop ? 'With backdrop' : 'Without backdrop'} </Text> </StorybookComponents.Placeholder> <Button onClick={() => setOpen(false)}>Close Drawer</Button> </Box> </Drawer> </Box> ); }; ``` ### Margin - description: <p>Control if the drawer has a margin around it with a <code>margin</code> prop. The size of it is fixed and varies per different themes.</p> - example: ```jsx () => { const [open, setOpen] = React.useState(false); const [margin, setMargin] = React.useState(true); return ( <Box direction="vertical"> <Box gap="10px"> <Button onClick={() => { setMargin(true); setOpen(true); }} > Open drawer with margin </Button> <Button onClick={() => { setMargin(false); setOpen(true); }} > Open drawer without margin </Button> </Box> <Drawer open={open} onClose={() => setOpen(false)} margin={margin} backdrop dismissible > <Box padding="20px" gap="20px" direction="vertical"> <StorybookComponents.Placeholder height="200px"> <Text size="medium" weight="normal"> {margin ? 'With margin' : 'Without margin'} </Text> </StorybookComponents.Placeholder> <Button onClick={() => setOpen(false)}>Close Drawer</Button> </Box> </Drawer> </Box> ); }; ``` ### Header - description: <p>Add header with action when needed. Drawer content is a <code>react.node</code>, so any content can be placed inside of it. </p><p></p><p>However, when adding a header, stick to the pattern that the close button is on the left, title is in the center and additional actions are on the right side.</p> - example: ```jsx () => { const [open, setOpen] = React.useState(false); return ( <Box> <Button onClick={() => setOpen(true)}>Open drawer</Button> <Drawer open={open} onClose={() => setOpen(false)}> <Box direction="vertical"> <Box align="center" verticalAlign="middle" padding="12px 16px" backgroundColor="white" > <Box width="40px"> <IconButton priority="tertiary" skin="dark" size="medium" onClick={() => setOpen(false)} > <Icons.X /> </IconButton> </Box> <Box flexGrow={1} align="center"> <Heading size="small">Title</Heading> </Box> <Box width="40px" align="right"> <IconButton priority="tertiary" skin="dark" size="medium" onClick={() => setOpen(false)} > <Icons.Check /> </IconButton> </Box> </Box> <Box padding="20px" direction="vertical" gap="20px"> <StorybookComponents.Placeholder height="300px"> <Text size="medium" weight="normal"> Content goes here </Text> </StorybookComponents.Placeholder> </Box> </Box> </Drawer> </Box> ); }; ```