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';
import {fireEvent, within} from '@testing-library/react';

<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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
      const openNestedButton = await canvas.findByText('Open another dialog');
      fireEvent.click(openNestedButton);
    }}
  >
    {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)}
                >
                  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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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}) => {
      const canvas = within(canvasElement);
      fireEvent.click(canvas.getByText('open dialog'));
    }}
  >
    {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 />
