Dialog

const Preview = () => {
  return (
    <>
      <Button command='show-modal' commandfor='my-dialog-preview'>
        Open Dialog
      </Button>
      <Dialog id='my-dialog-preview'>
        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
          Dialog header
        </Heading>
        <Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
          doloremque obcaecati assumenda odio ducimus sunt et.
        </Paragraph>
      </Dialog>
    </>
  );
};

render(<Preview />)

const WithForm = () => {
  const [input, setInput] = useState('');

  return (
    <>
      <Button command='show-modal' commandfor='my-dialog-form'>
        Open Dialog with command
      </Button>
      <Dialog onClose={() => setInput('')} closedby='any' id='my-dialog-form'>
        <Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
          Dialog med skjema
        </Heading>
        <Textfield
          label='Navn'
          value={input}
          onChange={(e) => setInput(e.target.value)}
          // @ts-expect-error We want the native "autofocus" and Reacts onMount smartness (see https://react.dev/reference/react-dom/components/input#input)
          autofocus='true'
        />
        <div
          style={{
            display: 'flex',
            gap: 'var(--ds-size-4)',
            marginTop: 'var(--ds-size-4)',
          }}
        >
          <Button
            command='close'
            commandfor='my-dialog-form'
            onClick={() => alert(`Du har sendt inn skjema med navn: ${input}`)}
          >
            Send inn skjema
          </Button>
          <Button
            variant='secondary'
            data-color='danger'
            command='close'
            commandfor='my-dialog-form'
          >
            Avbryt
          </Button>
        </div>
      </Dialog>
    </>
  );
};

render(<WithForm />)

const WithBlocks = () => (
  <>
    <Button command='show-modal' commandfor='my-dialog-blocks'>
      Open Dialog with command
    </Button>
    <Dialog id='my-dialog-blocks'>
      <Dialog.Block>
        <Paragraph data-size='sm'>Dialog subtitle</Paragraph>
        <Heading>Dialog with dividers</Heading>
      </Dialog.Block>
      <Dialog.Block>
        <Paragraph>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
          sodales eros justo.
        </Paragraph>
      </Dialog.Block>
      <Dialog.Block>
        <Button
          variant='secondary'
          command='close'
          commandfor='my-dialog-blocks'
        >
          Lukk
        </Button>
      </Dialog.Block>
    </Dialog>
  </>
);

render(<WithBlocks />)

const CloseWithClickOutside = () => (
  <>
    <Button command='show-modal' commandfor='my-dialog-close-outside'>
      Open Dialog with command
    </Button>
    <Dialog id='my-dialog-close-outside' closedby='any'>
      <Heading>Click outside to close</Heading>
    </Dialog>
  </>
);

render(<CloseWithClickOutside />)