refa: <Dialog>

.changeset/old-apricots-burn.md

@@ -0,0 +1,9 @@
+---
+"@marigold/docs": major
+"@marigold/components": major
+"@marigold/theme-b2b": major
+"@marigold/theme-core": major
+"@marigold/theme-unicorn": major
+---
+
+refa: <Dialog>

docs/content/components/dialog.mdx

@@ -1,5 +1,6 @@
 ---
 title: Dialog
+figma: https://www.figma.com/file/DFKyTGHAoDxOsUBPszLLxP/%F0%9F%8F%B5%EF%B8%8FMarigold?node-id=845%3A1095
 ---
 
 import { FigmaLink } from '../../src/components/FigmaLink';
@@ -21,41 +22,49 @@ import { Dialog } from '@marigold/components';
 
 ## Props
 
-| Property                     | Type                                       | Default     |
-| :--------------------------- | :----------------------------------------- | :---------- |
-| `isOpen `                    | `boolean`                                  | `false`     |
-| `close`                      | `ComponentProps<typeof Button>['onClick']` |             |
-| `title (optional)`           | `string`                                   |             |
-| `variant (optional)`         | `string`                                   | `__default` |
-| `backdropVariant (optional)` | `string`                                   | `backdrop`  |
+| Property             | Type                                       | Default |
+| :------------------- | :----------------------------------------- | :------ |
+| `isOpen `            | `boolean`                                  | `false` |
+| `close`              | `ComponentProps<typeof Button>['onClick']` |         |
+| `title (optional)`   | `string`                                   |         |
+| `variant (optional)` | `string`                                   |         |
+| `size (optional)`    | `string`                                   |         |
 
 ## Examples
 
+### Simple Dialog
+
+```tsx
+<Dialog.Trigger>
+  <Button variant="primary">Open me</Button>
+  <Dialog closeButton>
+    <Headline level="3">Information!</Headline>
+    <Text>This is a simple info Dialog.</Text>
+  </Dialog>
+</Dialog.Trigger>
+```
+
+### Form Dialog
+
 ```tsx
-() => {
-  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
-  return (
-    <>
-      <Button
-        variant="secondary"
-        size="small"
-        {...openButtonProps}
-        ref={openButtonRef}
-      >
-        Open Dialog
-      </Button>
-      {state.isOpen && (
-        <Dialog
-          title="Dialog Livecode example"
-          isOpen={state.isOpen}
-          close={state.close}
-        >
-          <Text>
-            This is your dialog text. You can read some interesting information.
-          </Text>
-        </Dialog>
-      )}
-    </>
-  );
-};
+<Dialog.Trigger>
+  <Button variant="primary">Login</Button>
+  <Dialog>
+    {({ close }) => (
+      <>
+        <Headline level="2">Please log into account</Headline>
+        <Stack space="small">
+          <TextField label="Username" />
+          <TextField label="Password" type="password" />
+          <Inline space="medium">
+            <Button variant="ghost" onPress={close}>
+              Cancel
+            </Button>
+            <Button variant="primary">Login</Button>
+          </Inline>
+        </Stack>
+      </>
+    )}
+  </Dialog>
+</Dialog.Trigger>
 ```

packages/components/src/Dialog/Context.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+
+export interface DialogContextProps {
+  open?: boolean;
+  close?: () => void;
+}
+
+export const DialogContext = createContext<DialogContextProps>({});
+export const useDialogContext = () => useContext(DialogContext);

packages/components/src/Dialog/Dialog.stories.tsx

@@ -1,88 +1,81 @@
 import React from 'react';
 import type { Meta, ComponentStory } from '@storybook/react';
-import { Dialog, useDialogButtonProps } from './Dialog';
+
 import { Button } from '../Button';
+import { Headline } from '../Headline';
+import { Inline } from '../Inline';
 import { Text } from '../Text';
+import { Dialog } from './Dialog';
+import { TextField } from '../TextField';
+import { Stack } from '../Stack';
 
 export default {
   title: 'Components/Dialog',
-  parameters: {
-    actions: {
-      handles: ['click'],
-    },
-  },
   argTypes: {
-    isOpen: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'handled by state from useDialogButtonProps',
-      options: [true, false],
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'set dialog title',
-    },
-    close: {
-      control: {
-        type: 'text',
-      },
-      description: 'handled by state from useDialogButtonProps',
+    dismissable: {
+      control: { type: 'boolean' },
+      description: 'Set dismissable',
+      defaultValue: true,
     },
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Dialog variant',
-      table: {
-        defaultValue: {
-          summary: '__default',
-        },
-      },
-    },
-    backdropVariant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Dialog backdrop variant',
-      table: {
-        defaultValue: {
-          summary: 'backdrop',
-        },
-      },
+    keyboardDismissable: {
+      control: { type: 'boolean' },
+      description: 'Set keyboardDismissable',
+      defaultValue: true,
     },
   },
 } as Meta;
 
-export const Basic: ComponentStory<typeof Dialog> = args => {
-  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
+export const Basic: ComponentStory<typeof Dialog.Trigger> = args => {
+  return (
+    <>
+      <Dialog.Trigger {...args}>
+        <Button variant="primary">Open</Button>
+        <Dialog closeButton>
+          <Headline>This is a headline!</Headline>
+          <Text>This is some not so very long text.</Text>
+        </Dialog>
+      </Dialog.Trigger>
+    </>
+  );
+};
+
+export const Form: ComponentStory<typeof Dialog.Trigger> = args => {
+  return (
+    <>
+      <Dialog.Trigger {...args}>
+        <Button variant="primary">Open</Button>
+        <Dialog>
+          {({ close, titleProps }) => (
+            <>
+              <Headline {...titleProps}>Please log into account</Headline>
+              <Stack space="small">
+                <TextField label="Username" />
+                <TextField label="Password" type="password" />
+                <Inline space="medium">
+                  <Button variant="ghost" onPress={close}>
+                    Cancel
+                  </Button>
+                  <Button variant="primary">Login</Button>
+                </Inline>
+              </Stack>
+            </>
+          )}
+        </Dialog>
+      </Dialog.Trigger>
+    </>
+  );
+};
+
+export const CustomTitleProps: ComponentStory<typeof Dialog.Trigger> = args => {
   return (
     <>
-      <Button
-        variant="secondary"
-        size="small"
-        {...openButtonProps}
-        ref={openButtonRef}
-      >
-        Open Dialog
-      </Button>
-      {state.isOpen && (
-        <Dialog
-          title="Dialog Title"
-          {...args}
-          isOpen={state.isOpen}
-          close={state.close}
-        >
-          <Text>Dialog content</Text>
+      <Dialog.Trigger {...args}>
+        <Button variant="primary">Open</Button>
+        <Dialog closeButton aria-labelledby="my-cool-headline">
+          <Headline id="my-cool-headline">This is a headline!</Headline>
+          <Text>This is some not so very long text.</Text>
         </Dialog>
-      )}
+      </Dialog.Trigger>
     </>
   );
 };