#Drawer

<Drawer title="Drawer title" triggerAttributes={{ text: 'Open drawer' }}>
  <P top>Some informational content</P>
  <P top>
    Elementum eu suspendisse sit platea elit porttitor magna laoreet ad
    ultrices tempus urna curae parturient conubia quisque viverra eget
    vestibulum neque pulvinar semper vulputate id dis varius pellentesque
    nunc egestas risus amet mus aptent luctus imperdiet netus natoque
    cubilia mattis nostra proin ornare scelerisque sodales faucibus
    placerat sem bibendum pretium rutrum vitae sociis ligula inceptos morbi
    quam mi sed pharetra fermentum tortor ullamcorper ipsum tellus eros
    euismod volutpat nisl dui lectus fames suscipit phasellus praesent
    justo mollis montes velit taciti gravida
  </P>
</Drawer>

<Drawer title="Drawer title" containerPlacement="left">
  <P top>Some informational content</P>
  <P top>
    Elementum eu suspendisse sit platea elit porttitor magna laoreet ad
    ultrices tempus urna curae parturient conubia quisque viverra eget
    vestibulum neque pulvinar semper vulputate id dis varius pellentesque
    nunc egestas risus amet
  </P>
</Drawer>

<Drawer
  fullscreen
  title="Drawer title"
  triggerAttributes={{ text: 'Open drawer' }}
>
  <P top>Some informational content</P>
  <P top>
    Elementum eu suspendisse sit platea elit porttitor magna laoreet ad
    ultrices tempus urna curae parturient conubia quisque viverra eget
    vestibulum neque pulvinar semper vulputate id dis varius pellentesque
    nunc egestas risus amet
  </P>
</Drawer>

<Drawer title="Custom title">
  <Drawer.Navigation>
    <Breadcrumb onClick={handleBack} />
  </Drawer.Navigation>
  <Drawer.Header>
    <P bottom>This is a lorem ipsum dolor</P>
    <Button bottom size="large">
      Lorem ipsum
    </Button>
    <Button bottom size="large" variant="secondary">
      Dolor sit
    </Button>
    <FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
    <Tabs
      id="unique-linked-id"
      data={[
        {
          title: 'One',
          key: 'one',
        },
        {
          title: 'Two',
          key: 'two',
        },
      ]}
    />
  </Drawer.Header>
  <Drawer.Body>
    <Tabs.Content id="unique-linked-id">
      {({ title }) => {
        return (
          <>
            <H2>{title}</H2>
            <P top>This is a left aligned Drawer content.</P>
            <P top>
              Elementum eu suspendisse sit platea elit porttitor magna
              laoreet ad ultrices tempus urna curae parturient conubia
              quisque viverra eget vestibulum neque pulvinar semper
              vulputate id dis varius pellentesque nunc egestas risus amet
              mus aptent luctus imperdiet netus natoque cubilia mattis
              nostra proin ornare scelerisque sodales faucibus placerat sem
              bibendum pretium rutrum vitae sociis ligula inceptos morbi
              quam mi sed pharetra fermentum tortor ullamcorper ipsum
              tellus eros euismod volutpat nisl dui lectus fames suscipit
              phasellus praesent justo mollis montes velit taciti gravida
              lacus commodo senectus feugiat lorem etiam consequat
              penatibus cum hendrerit accumsan orci potenti purus nulla
            </P>
          </>
        )
      }}
    </Tabs.Content>
  </Drawer.Body>
</Drawer>

<Drawer
  title="Drawer with custom trigger"
  triggerAttributes={{
    text: 'Custom trigger',
    variant: 'primary',
    size: 'large',
    icon: 'loupe',
    icon_position: 'left',
  }}
>
  <Drawer.Body spacing>
    <P>Opened a Drawer with a custom trigger button!</P>
  </Drawer.Body>
</Drawer>

<Drawer
  title="Drawer title"
  triggerAttributes={{ text: 'Open drawer' }}
  hideCloseButton
>
  {({ close }) => (
    <>
      <Button text="Close by callback" on_click={close} />
    </>
  )}
</Drawer>

<Drawer
  title="No spacing or animation"
  noAnimation
  spacing={false}
  hideCloseButton
>
  <Drawer.Body>
    <P top bottom>
      This is a lorem ipsum dolor
    </P>
    <Button bottom size="large">
      Lorem ipsum
    </Button>
    <Button bottom size="large" variant="secondary">
      Dolor sit
    </Button>
    <FormStatus state="info">This is a lorem ipsum dolor</FormStatus>
  </Drawer.Body>
</Drawer>