import {ArgsTable, Meta, Story, Canvas} from '@storybook/addon-docs';

import DialogA11y from './stories/Dialog.a11y.mdx';
import Dialog from './Dialog';
import Button from '../buttons/Button';
import Flex from '../flex/Flex';
import Headline from '../text/Headline';
import Link from '../text/Link';
import DialogHeader from './DialogHeader';
import DialogBody from './DialogBody';
import DialogCloseButton from './DialogCloseButton';
import startSkyImage from './stories/stars_sky.jpg';
import Text from '../text/Text';
import PageHeader from 'blocks/PageHeader';

<Meta
  title="Components/Dialog"
  component={Dialog}
  subcomponents={{DialogBody, DialogHeader, DialogCloseButton}}
  parameters={{
    docs: {
      /**
       * inlineStories=false causes an issue with DocsPage Controls
       * https://github.com/storybookjs/storybook/issues/11908
       */
      inlineStories: false,
      iframeHeight: 500,
    },
  }}
  argTypes={{
    children: {
      control: {
        disable: true,
      },
    },
    onDismiss: {
      action: 'onDismiss',
      table: {
        category: 'Events',
      },
    },
    onEntryTransitionEnd: {
      action: 'onEntryTransitionEnd',
      table: {
        category: 'Events',
      },
    },
    onExitTransitionEnd: {
      action: 'onExitTransitionEnd',
      table: {
        category: 'Events',
      },
    },
    open: {
      control: {
        disable: true,
      },
    },
    size: {
      control: {type: 'select'},
    },
  }}
  args={{
    open: false,
  }}
/>

<PageHeader>Dialog</PageHeader>

- [Stories](#stories)
- [Accessibility](#accessibility)

## Overview

<Canvas>
  <Story
    name="Default"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const headerId = 'dialog-header';
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            open={open}
            onDismiss={handleDismiss}
            labelledBy={headerId}
            aria-modal={!anotherOpen}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={headerId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us.
              </Flex>
              <Flex marginBottom="m">
                <Link
                  as="button"
                  onClick={() => setAnotherOpen(true)}
                  onKeyDown={({key}) => key === 'Enter' && setAnotherOpen(true)}
                >
                  Open another dialog
                </Link>
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
          <Dialog
            {...args}
            size="s"
            open={anotherOpen}
            onDismiss={handleDismissAnother}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismissAnother} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismissAnother}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

<ArgsTable story="Default" />

## Stories

### Scroll Outside

<Canvas>
  <Story
    name="Scroll Outside"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const headerId = 'dialog-header';
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            open={open}
            onDismiss={handleDismiss}
            labelledBy={headerId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={headerId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
              </Flex>
              <Flex marginBottom="m">
                <Link
                  as="button"
                  onClick={() => setAnotherOpen(true)}
                  onKeyDown={({key}) => key === 'Enter' && setAnotherOpen(true)}
                >
                  Open another dialog
                </Link>
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
          <Dialog
            {...args}
            size="s"
            open={anotherOpen}
            onDismiss={handleDismissAnother}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismissAnother} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismissAnother}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Scroll Inside

<Canvas>
  <Story
    name="Scroll Inside"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const headerId = 'dialog-header';
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            open={open}
            onDismiss={handleDismiss}
            labelledBy={headerId}
            scroll="inside"
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={headerId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
              </Flex>
              <Flex marginBottom="m">
                <Link
                  as="button"
                  onClick={() => setAnotherOpen(true)}
                  onKeyDown={({key}) => key === 'Enter' && setAnotherOpen(true)}
                >
                  Open another dialog
                </Link>
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
          <Dialog
            {...args}
            size="s"
            open={anotherOpen}
            onDismiss={handleDismissAnother}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismissAnother} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismissAnother}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Without Header

<Canvas>
  <Story
    name="Without Header"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const headerId = 'dialog-header';
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            open={open}
            onDismiss={handleDismiss}
            labelledBy={headerId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
                Information you provide to us directly.
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Nested

<Canvas>
  <Story
    name="Nested"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
      await new Promise(resolve => setTimeout(resolve, 500));
      canvasElement.querySelector('[id=open_another_dialog]').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => {
        setAnotherOpen(false);
      };
      const handleCloseAll = () => {
        setAnotherOpen(false);
        setOpen(false);
      };
      const headerId = 'dialog-header';
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            open={open}
            onDismiss={handleDismiss}
            labelledBy={headerId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={headerId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us.
              </Flex>
              <Flex marginBottom="m">
                <Link
                  as="button"
                  onClick={() => setAnotherOpen(true)}
                  onKeyDown={({key}) => key === 'Enter' && setAnotherOpen(true)}
                  id="open_another_dialog"
                >
                  Open another dialog
                </Link>
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
            <Dialog
              {...args}
              size="s"
              open={anotherOpen}
              onDismiss={handleDismissAnother}
              labelledBy={anotherHeaderId}
            >
              <DialogCloseButton onClick={handleDismissAnother} />
              <DialogHeader id={anotherHeaderId}>
                <Flex marginBottom="m">
                  <Headline>
                    Are you really sure you want to stop asking this question?
                  </Headline>
                </Flex>
              </DialogHeader>
              <DialogBody>
                <Flex justifyContent="flex-end" className="sg-space-x-s">
                  <Button variant="outline" onClick={handleDismissAnother}>
                    cancel
                  </Button>
                  <Button variant="solid" onClick={handleCloseAll}>
                    proceed
                  </Button>
                </Flex>
              </DialogBody>
            </Dialog>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### With Ads

<Canvas>
  <Story
    name="With Ads"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const SlotText = ({children}) => (
        <Text weight="bold" color="text-white">
          {children}
        </Text>
      );
      const borderStyle = '2px dashed white';
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const headerId = 'dialog-header';
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            open={open}
            onDismiss={handleDismiss}
            labelledBy={headerId}
          >
            <Dialog.Overlay slot="top-right">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderLeft: borderStyle,
                  borderBottom: borderStyle,
                }}
              >
                <SlotText>top-right ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="top-middle">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderBottom: borderStyle,
                }}
              >
                <SlotText>top-middle ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="top-left">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderRight: borderStyle,
                  borderBottom: borderStyle,
                }}
              >
                <SlotText>top-left ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="middle-left">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderRight: borderStyle,
                }}
              >
                <SlotText>middle-left ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="middle-right">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderLeft: borderStyle,
                }}
              >
                <SlotText>middle-right ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="bottom-right">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderTop: borderStyle,
                  borderLeft: borderStyle,
                }}
              >
                <SlotText>bottom-right ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="bottom-middle">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderTop: borderStyle,
                }}
              >
                <SlotText>bottom-middle ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="bottom-left">
              <Flex
                justifyContent="center"
                alignItems="center"
                fullHeight
                style={{
                  borderTop: borderStyle,
                  borderRight: borderStyle,
                }}
              >
                <SlotText>bottom-left ad area</SlotText>
              </Flex>
            </Dialog.Overlay>
            <Dialog.Overlay slot="backdrop">
              <div
                style={{
                  width: '100%',
                  height: '100%',
                  display: 'block',
                  backgroundImage: `url(${startSkyImage})`,
                  backgroundSize: 'cover',
                }}
              />
            </Dialog.Overlay>
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={headerId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us. We may also collect any communications between you and
                Brainly and any other information you provide to Brainly
              </Flex>
              <Flex marginBottom="m">
                <Link
                  as="button"
                  onClick={() => setAnotherOpen(true)}
                  onKeyDown={({key}) => key === 'Enter' && setAnotherOpen(true)}
                >
                  Open another dialog
                </Link>
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
          <Dialog
            {...args}
            size="s"
            open={anotherOpen}
            onDismiss={handleDismissAnother}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismissAnother} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismissAnother}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Switching modals

<Canvas>
  <Story
    name="Switching modals"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [{opened}, setOpen] = React.useState({opened: null});
      const handleDismiss = () => setOpen({opened: null});
      const goToRegister = () => setOpen({opened: 'register'});
      const goToLogin = () => setOpen({opened: 'login'});
      const headerId = 'dialog-header';
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={goToLogin}>
            open dialog
          </Button>
          <Dialog
            {...args}
            open={opened === 'login'}
            onDismiss={handleDismiss}
            labelledBy={headerId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={headerId}>
              <Flex marginBottom="m">
                <Headline>login</Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us.
              </Flex>
              <Flex marginBottom="m">
                <Link as="button" onClick={goToRegister}>
                  Open register dialog
                </Link>
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
          <Dialog
            {...args}
            open={opened === 'register'}
            onDismiss={handleDismiss}
            labelledBy={headerId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={headerId}>
              <Flex marginBottom="m">
                <Headline>Register</Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex marginBottom="m">
                Information you provide to us directly. We may collect personal
                information, such as your name, address, telephone number, date
                of birth, payment information, and e-mail address when you when
                you register for our Service, sign up for our mailing list,
                enter a contest or sweepstakes, or otherwise communicate with
                us.
              </Flex>
              <Flex marginBottom="m">
                <Link as="button" onClick={goToLogin}>
                  Open login dialog
                </Link>
              </Flex>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Size S

<Canvas>
  <Story
    name="Size S"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            size="s"
            open={open}
            onDismiss={handleDismiss}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Size M

<Canvas>
  <Story
    name="Size M"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            size="m"
            open={open}
            onDismiss={handleDismiss}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Size L

<Canvas>
  <Story
    name="Size L"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            size="l"
            open={open}
            onDismiss={handleDismiss}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Size XL

<Canvas>
  <Story
    name="Size XL"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            size="xl"
            open={open}
            onDismiss={handleDismiss}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

### Size Fullscreen

<Canvas>
  <Story
    name="Size Fullscreen"
    play={async ({canvasElement}) => {
      canvasElement.querySelector('button').click();
    }}
  >
    {args => {
      const [open, setOpen] = React.useState(false);
      const [anotherOpen, setAnotherOpen] = React.useState(false);
      const handleDismiss = () => setOpen(false);
      const handleDismissAnother = () => setAnotherOpen(false);
      const anotherHeaderId = 'another-dialog-header';
      return (
        <div>
          <Button variant="solid-indigo" onClick={() => setOpen(true)}>
            open dialog
          </Button>
          <Dialog
            {...args}
            size="fullscreen"
            open={open}
            onDismiss={handleDismiss}
            labelledBy={anotherHeaderId}
          >
            <DialogCloseButton onClick={handleDismiss} />
            <DialogHeader id={anotherHeaderId}>
              <Flex marginBottom="m">
                <Headline>
                  Are you really sure you want to stop asking this question?
                </Headline>
              </Flex>
            </DialogHeader>
            <DialogBody>
              <Flex justifyContent="flex-end" className="sg-space-x-s">
                <Button variant="outline" onClick={handleDismiss}>
                  cancel
                </Button>
                <Button variant="solid">proceed</Button>
              </Flex>
            </DialogBody>
          </Dialog>
        </div>
      );
    }}
  </Story>
</Canvas>

## Accessibility

<DialogA11y />