{"version":3,"file":"Drawer.stories.jsx","sourceRoot":"","sources":["../../../src/core/Drawer/Drawer.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryFn } from '@storybook/react';\nimport { useState } from 'react';\n\nimport { Button, Card, Drawer, Flex, Text, useTheme } from '@pega/cosmos-react-core';\nimport type { DrawerProps } from '@pega/cosmos-react-core';\n\nimport { StyledDrawerContent } from './Drawer.styles';\n\nexport default {\n  title: 'Core/Drawer',\n  component: Drawer,\n  args: {\n    placement: 'right',\n    transitionSpeed: '0.25s'\n  },\n  argTypes: {\n    placement: { options: ['top', 'right', 'bottom', 'left'], control: { type: 'select' } },\n    transitionSpeed: { control: { type: 'text' } }\n  }\n} as Meta;\n\nexport const ContainedDrawer: StoryFn<DrawerProps> = (args: DrawerProps) => {\n  const [open, setOpen] = useState(false);\n  const theme = useTheme();\n\n  const drawer = (\n    <Drawer\n      open={open}\n      nullWhenClosed\n      onOuterClick={() => {\n        setOpen(false);\n      }}\n      position='absolute'\n      size='100%'\n      placement={args.placement}\n      transitionSpeed={args.transitionSpeed}\n    >\n      <Flex\n        as={StyledDrawerContent}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          gap: 2,\n          pad: 4\n        }}\n      >\n        <Text variant='h1'>This is a Drawer</Text>\n        <Text>\n          You can close this Drawer by clicking anywhere in the area outside of it, or by clicking\n          the Button below.\n        </Text>\n        <Button onClick={() => setOpen(false)}>Close Drawer</Button>\n      </Flex>\n    </Drawer>\n  );\n\n  return (\n    <Card\n      style={{\n        position: 'relative',\n        overflow: 'hidden',\n        height: '20rem',\n        width: '100%',\n        border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,\n        backgroundColor: `${theme.base.colors.blue['extra-light']}`,\n        justifyContent: 'center',\n        alignItems: 'center'\n      }}\n    >\n      <Button variant='primary' onClick={() => setOpen(true)}>\n        Open Drawer\n      </Button>\n      {drawer}\n    </Card>\n  );\n};\n\nexport const ViewportDrawer: StoryFn<DrawerProps> = (args: DrawerProps) => {\n  const [open, setOpen] = useState(false);\n  const theme = useTheme();\n\n  const drawer = (\n    <Drawer\n      open={open}\n      onOuterClick={() => {\n        setOpen(false);\n      }}\n      position='fixed'\n      size={args.size}\n      placement={args.placement}\n      transitionSpeed={args.transitionSpeed}\n      shadow={args.shadow}\n    >\n      <Flex\n        as={StyledDrawerContent}\n        container={{\n          direction: 'column',\n          justify: 'center',\n          alignItems: 'center',\n          gap: 2,\n          pad: 4\n        }}\n      >\n        <Text variant='h1'>This is a Drawer</Text>\n        <Text>\n          You can close this Drawer by clicking anywhere in the area outside of it, or by clicking\n          the Button below.\n        </Text>\n        <Button onClick={() => setOpen(false)}>Close Drawer</Button>\n      </Flex>\n    </Drawer>\n  );\n\n  return (\n    <Card\n      style={{\n        position: 'relative',\n        overflow: 'hidden',\n        height: '20rem',\n        width: '100%',\n        border: `${theme.base.spacing} solid ${theme.base.colors.gray.light}`,\n        backgroundColor: `${theme.base.colors.blue['extra-light']}`,\n        justifyContent: 'center',\n        alignItems: 'center'\n      }}\n    >\n      <Button variant='primary' onClick={() => setOpen(true)}>\n        Open Drawer\n      </Button>\n      {drawer}\n    </Card>\n  );\n};\n\nViewportDrawer.args = {\n  size: '30rem',\n  shadow: false\n};\n\nViewportDrawer.argTypes = {\n  size: { control: { type: 'text' } },\n  shadow: { control: { type: 'boolean' } }\n};\n"]}