-
Notifications
You must be signed in to change notification settings - Fork 536
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* reorganize files into respective folders * revise stories to be default and features * Opted the components into storybook tests * checkpoint: updated tests * chore: clean up lint errors * chore: hopeful test and lint fix * fix duplicate story label * chore: formatting * maybe fix duplicate dialog issue again
- Loading branch information
1 parent
953b609
commit 115e09c
Showing
16 changed files
with
362 additions
and
88 deletions.
There are no files selected for viewing
49 changes: 6 additions & 43 deletions
49
src/stories/ConfirmationDialog.stories.tsx → ...g/ConfirmationDialog.features.stories.tsx
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,46 @@ | ||
| import React, {useCallback, useRef, useState} from 'react' | ||
| import {Meta} from '@storybook/react' | ||
| import {BaseStyles, Button, ThemeProvider} from '..' | ||
| import {ConfirmationDialog} from './ConfirmationDialog' | ||
|
|
||
| export default { | ||
| title: 'Components/ConfirmationDialog', | ||
| component: ConfirmationDialog, | ||
| decorators: [ | ||
| Story => { | ||
| // Since portal roots are registered globally, we need this line so that each storybook | ||
| // story works in isolation. | ||
| return ( | ||
| <ThemeProvider> | ||
| <BaseStyles> | ||
| <Story /> | ||
| </BaseStyles> | ||
| </ThemeProvider> | ||
| ) | ||
| }, | ||
| ], | ||
| } as Meta | ||
|
|
||
| export const Default = () => { | ||
| const [isOpen, setIsOpen] = useState(false) | ||
| const buttonRef = useRef<HTMLButtonElement>(null) | ||
| const onDialogClose = useCallback(() => setIsOpen(false), []) | ||
| return ( | ||
| <> | ||
| <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}> | ||
| Show dialog | ||
| </Button> | ||
| {isOpen && ( | ||
| <ConfirmationDialog | ||
| title="Delete universe?" | ||
| onClose={onDialogClose} | ||
| confirmButtonContent="Delete it!" | ||
| confirmButtonType="danger" | ||
| > | ||
| Deleting the universe could have disastrous effects, including but not limited to destroying all life on | ||
| Earth. | ||
| </ConfirmationDialog> | ||
| )} | ||
| </> | ||
| ) | ||
| } |
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
File renamed without changes.
File renamed without changes.
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,145 @@ | ||
| import React, {useState, useRef, useCallback} from 'react' | ||
| import {Meta} from '@storybook/react' | ||
|
|
||
| import {BaseStyles, ThemeProvider} from '.' | ||
| import {Button} from './Button' | ||
| import {Dialog, DialogWidth, DialogHeight} from './Dialog/Dialog' | ||
|
|
||
| /* Dialog Version 1? */ | ||
|
|
||
| export default { | ||
| title: 'Components/DialogV1', | ||
| component: Dialog, | ||
| decorators: [ | ||
| Story => { | ||
| // Since portal roots are registered globally, we need this line so that each storybook | ||
| // story works in isolation. | ||
| return ( | ||
| <ThemeProvider> | ||
| <BaseStyles> | ||
| <Story /> | ||
| </BaseStyles> | ||
| </ThemeProvider> | ||
| ) | ||
| }, | ||
| ], | ||
| args: { | ||
| width: 'xlarge', | ||
| height: 'auto', | ||
| subtitle: true, | ||
| }, | ||
| argTypes: { | ||
| width: { | ||
| control: { | ||
| type: 'radio', | ||
| }, | ||
| options: ['small', 'medium', 'large', 'xlarge'], | ||
| }, | ||
| height: { | ||
| control: { | ||
| type: 'radio', | ||
| }, | ||
| options: ['small', 'large', 'auto'], | ||
| }, | ||
| subtitle: { | ||
| name: 'show subtitle', | ||
| control: { | ||
| type: 'boolean', | ||
| }, | ||
| }, | ||
| title: {table: {disable: true}}, | ||
|
|
||
| renderHeader: {table: {disable: true}}, | ||
| renderBody: {table: {disable: true}}, | ||
| renderFooter: {table: {disable: true}}, | ||
| onClose: {table: {disable: true}}, | ||
| role: {table: {disable: true}}, | ||
| ref: {table: {disable: true}}, | ||
| key: {table: {disable: true}}, | ||
| footerButtons: {table: {disable: true}}, | ||
| }, | ||
| } as Meta | ||
|
|
||
| const lipsum = ( | ||
| <div style={{fontSize: '14px'}}> | ||
| <p style={{marginBlockStart: 0}}> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sollicitudin mauris maximus elit sagittis, nec | ||
| lobortis ligula elementum. Nam iaculis, urna nec lobortis posuere, eros urna venenatis eros, vel accumsan turpis | ||
| nunc vitae enim. Maecenas et lorem lectus. Vivamus iaculis tortor eget ante placerat, nec posuere nisl tincidunt. | ||
| Cras condimentum ante in accumsan ultricies. Morbi quis porta est, sit amet congue augue. Lorem ipsum dolor sit | ||
| amet, consectetur adipiscing elit. Ut consequat nunc id quam tempus, id tincidunt neque venenatis. Mauris | ||
| fringilla tempor est, vitae fermentum enim elementum vitae. Nullam eleifend odio ut porta efficitur. Phasellus | ||
| luctus tempus posuere. | ||
| </p> | ||
|
|
||
| <p> | ||
| Curabitur scelerisque bibendum faucibus. Duis rhoncus nunc est, at pharetra eros tristique a. Nam sodales turpis | ||
| lectus, quis faucibus felis fermentum in. Curabitur vel velit vel eros laoreet pharetra. Aenean in facilisis | ||
| sapien, eu porttitor ex. Donec ultrices ac arcu ut lobortis. Pellentesque vitae rutrum orci. Etiam pretium et enim | ||
| sit amet scelerisque. Nulla sed odio nec lorem dapibus condimentum at sagittis quam. Sed in ornare ex, sed luctus | ||
| sem. Mauris a est tellus. | ||
| </p> | ||
|
|
||
| <p> | ||
| Sed fringilla est ac urna aliquet, eget condimentum felis vulputate. Sed sagittis eros non mauris sodales | ||
| molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam ante leo, | ||
| condimentum sed lectus non, rutrum octopodes urna. Mauris neque ante, interdum molestie tellus pharetra, eleifend | ||
| dapibus justo. Sed at diam ligula. Donec dapibus ipsum quis elit euismod, sed suscipit eros euismod. Aliquam | ||
| pretium felis quis risus luctus fringilla. Ut purus lacus, mattis a turpis eget, sollicitudin pellentesque neque. | ||
| </p> | ||
|
|
||
| <p> | ||
| Nunc sodales quis ante quis porttitor. Vestibulum ornare lacinia ante. Donec a nisi nec arcu aliquam pretium in | ||
| nec nunc. Donec fringilla erat vitae viverra feugiat. Sed non odio vel ipsum porttitor maximus. Donec id eleifend | ||
| lectus. Proin varius felis sit amet neque eleifend, vitae porttitor ligula commodo. | ||
| </p> | ||
|
|
||
| <p> | ||
| Vivamus felis quam, porttitor a justo sit amet, placerat ultricies nisl. Suspendisse potenti. Maecenas non | ||
| consequat lorem, eu porta ante. Pellentesque elementum diam sapien, nec ultrices risus convallis eget. Nam | ||
| pharetra dolor at dictum tempor. Quisque ut est a ligula hendrerit sodales. Curabitur ornare a nulla in laoreet. | ||
| Maecenas semper mi egestas, dignissim nisi et, elementum neque. | ||
| </p> | ||
| </div> | ||
| ) | ||
| interface DialogStoryProps { | ||
| width: DialogWidth | ||
| height: DialogHeight | ||
| subtitle: boolean | ||
| } | ||
| export const Default = ({width, height, subtitle}: DialogStoryProps) => { | ||
| const [isOpen, setIsOpen] = useState(false) | ||
| const [secondOpen, setSecondOpen] = useState(false) | ||
| const buttonRef = useRef<HTMLButtonElement>(null) | ||
| const onDialogClose = useCallback(() => setIsOpen(false), []) | ||
| const onSecondDialogClose = useCallback(() => setSecondOpen(false), []) | ||
| const openSecondDialog = useCallback(() => setSecondOpen(true), []) | ||
| return ( | ||
| <> | ||
| <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}> | ||
| Show dialog | ||
| </Button> | ||
| {isOpen && ( | ||
| <Dialog | ||
| title="My Dialog" | ||
| subtitle={subtitle ? 'This is a subtitle!' : undefined} | ||
| onClose={onDialogClose} | ||
| width={width} | ||
| height={height} | ||
| footerButtons={[ | ||
| {buttonType: 'normal', content: 'Open Second Dialog', onClick: openSecondDialog}, | ||
| {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose}, | ||
| {buttonType: 'primary', content: 'Proceed', onClick: openSecondDialog, autoFocus: true}, | ||
| ]} | ||
| > | ||
| {lipsum} | ||
| {secondOpen && ( | ||
| <Dialog title="Inner dialog!" onClose={onSecondDialogClose} width="small"> | ||
| Hello world | ||
| </Dialog> | ||
| )} | ||
| </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
Oops, something went wrong.