-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* saves * mostly working Co-authored-by: sarahgm <sarahgm@users.noreply.github.com> * working! * add possibility to pass down close and open to children * remove todo list * add close button * add style parts * styles * style * fix scrolling * docu * blur! * remove log * some testes * Add titleProps to a header if possible Co-authored-by: sarahgm <sarahgm@users.noreply.github.com> * add story * some tests * delete old dialog * fix a test * tests * trying test * add titleprops to function story * adjust some tests * add test for child functions * fix linting * Create old-apricots-burn.md Co-authored-by: sarahgm <sarah.gosmann@reservix.de> Co-authored-by: sarahgm <sarahgm@users.noreply.github.com>
- Loading branch information
3 people
authored
May 6, 2022
1 parent
3c86c3b
commit 759abe9
Showing
22 changed files
with
2,406 additions
and
1,313 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| --- | ||
| "@marigold/docs": major | ||
| "@marigold/components": major | ||
| "@marigold/theme-b2b": major | ||
| "@marigold/theme-core": major | ||
| "@marigold/theme-unicorn": major | ||
| --- | ||
|
|
||
| refa: <Dialog> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> | ||
| </> | ||
| ); | ||
| }; |
Oops, something went wrong.