From 2d5ed00c35f2e7410a4440c052c5738cc9e8b074 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Arma=C4=9Fan?= Date: Tue, 14 Mar 2023 08:27:14 +1000 Subject: [PATCH] Dialog: move files, add a story (#3019) * Dialog: move files, add a story * storybook test * Update generated/components.json * add missing prop export --------- Co-authored-by: broccolinisoup --- docs/content/Dialog.mdx | 2 +- generated/components.json | 113 +++++++++--------- src/{ => Dialog}/Dialog.docs.json | 0 src/Dialog/Dialog.stories.tsx | 46 +++++++ src/{ => Dialog}/Dialog.tsx | 16 +-- src/{ => Dialog}/__tests__/Dialog.test.tsx | 6 +- .../__tests__/Dialog.types.test.tsx | 2 +- .../__snapshots__/Dialog.test.tsx.snap | 0 src/Dialog/index.ts | 1 + src/__tests__/storybook.test.tsx | 1 + 10 files changed, 120 insertions(+), 67 deletions(-) rename src/{ => Dialog}/Dialog.docs.json (100%) create mode 100644 src/Dialog/Dialog.stories.tsx rename src/{ => Dialog}/Dialog.tsx (90%) rename src/{ => Dialog}/__tests__/Dialog.test.tsx (96%) rename src/{ => Dialog}/__tests__/Dialog.types.test.tsx (89%) rename src/{ => Dialog}/__tests__/__snapshots__/Dialog.test.tsx.snap (100%) create mode 100644 src/Dialog/index.ts diff --git a/docs/content/Dialog.mdx b/docs/content/Dialog.mdx index 1b3c828e3f5..d724ff7f835 100644 --- a/docs/content/Dialog.mdx +++ b/docs/content/Dialog.mdx @@ -3,7 +3,7 @@ title: Dialog status: Alpha --- -import data from '../../src/Dialog.docs.json' +import data from '../../src/Dialog/Dialog.docs.json' The dialog component is used for all modals. It renders on top of the rest of the app with an overlay. diff --git a/generated/components.json b/generated/components.json index 33b144b663a..a55c7faae43 100644 --- a/generated/components.json +++ b/generated/components.json @@ -122,60 +122,6 @@ ], "subcomponents": [] }, - "dialog": { - "id": "dialog", - "name": "Dialog", - "status": "alpha", - "a11yReviewed": false, - "stories": [], - "props": [ - { - "name": "isOpen", - "type": "boolean", - "description": "Whether or not the dialog is open" - }, - { - "name": "onDismiss", - "type": "() => void", - "description": "Function that will be called when the dialog is closed" - }, - { - "name": "returnFocusRef", - "type": " React.RefObject", - "description": "The element to restore focus back to after the `Dialog` is closed" - }, - { - "name": "initialFocusRef", - "type": " React.RefObject", - "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused." - }, - { - "name": "aria-labelledby", - "type": "string", - "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both." - }, - { - "name": "aria-label", - "type": "string", - "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both." - }, - { - "name": "sx", - "type": "SystemStyleObject" - } - ], - "subcomponents": [ - { - "name": "Dialog.Header", - "props": [ - { - "name": "sx", - "type": "SystemStyleObject" - } - ] - } - ] - }, "filter_list": { "id": "filter_list", "name": "FilterList", @@ -2025,6 +1971,65 @@ ], "subcomponents": [] }, + "dialog": { + "id": "dialog", + "name": "Dialog", + "status": "alpha", + "a11yReviewed": false, + "stories": [ + { + "id": "components-dialog--default", + "code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const returnFocusRef = React.useRef(null)\n return (\n <>\n \n setIsOpen(false)}\n aria-labelledby=\"header-id\"\n >\n Title\n some content\n \n \n )\n}" + } + ], + "props": [ + { + "name": "isOpen", + "type": "boolean", + "description": "Whether or not the dialog is open" + }, + { + "name": "onDismiss", + "type": "() => void", + "description": "Function that will be called when the dialog is closed" + }, + { + "name": "returnFocusRef", + "type": " React.RefObject", + "description": "The element to restore focus back to after the `Dialog` is closed" + }, + { + "name": "initialFocusRef", + "type": " React.RefObject", + "description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused." + }, + { + "name": "aria-labelledby", + "type": "string", + "description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both." + }, + { + "name": "aria-label", + "type": "string", + "description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both." + }, + { + "name": "sx", + "type": "SystemStyleObject" + } + ], + "subcomponents": [ + { + "name": "Dialog.Header", + "props": [ + { + "name": "sx", + "type": "SystemStyleObject" + } + ] + } + ] + }, "drafts_dialog": { "id": "drafts_dialog", "name": "Dialog", diff --git a/src/Dialog.docs.json b/src/Dialog/Dialog.docs.json similarity index 100% rename from src/Dialog.docs.json rename to src/Dialog/Dialog.docs.json diff --git a/src/Dialog/Dialog.stories.tsx b/src/Dialog/Dialog.stories.tsx new file mode 100644 index 00000000000..434f203cf95 --- /dev/null +++ b/src/Dialog/Dialog.stories.tsx @@ -0,0 +1,46 @@ +import React, {useState} from 'react' +import {Meta} from '@storybook/react' + +import {BaseStyles, ThemeProvider} from '..' +import {Button} from '../Button' +import Dialog from './Dialog' + +export default { + title: 'Components/Dialog', + component: Dialog, + decorators: [ + Story => { + // Since portal roots are registered globally, we need this line so that each storybook + // story works in isolation. + return ( + + + + + + ) + }, + ], +} as Meta + +export const Default = () => { + const [isOpen, setIsOpen] = useState(false) + const returnFocusRef = React.useRef(null) + + return ( + <> + + setIsOpen(false)} + aria-labelledby="header-id" + > + Title + some content + + + ) +} diff --git a/src/Dialog.tsx b/src/Dialog/Dialog.tsx similarity index 90% rename from src/Dialog.tsx rename to src/Dialog/Dialog.tsx index 2df90952959..6fc57e2c20f 100644 --- a/src/Dialog.tsx +++ b/src/Dialog/Dialog.tsx @@ -1,13 +1,13 @@ import React, {forwardRef, useRef} from 'react' import styled from 'styled-components' -import ButtonClose from './deprecated/Button/ButtonClose' -import {get} from './constants' -import Box from './Box' -import useDialog from './hooks/useDialog' -import sx, {SxProp} from './sx' -import Text from './Text' -import {ComponentProps} from './utils/types' -import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef' +import ButtonClose from '../deprecated/Button/ButtonClose' +import {get} from '../constants' +import Box from '../Box' +import useDialog from '../hooks/useDialog' +import sx, {SxProp} from '../sx' +import Text from '../Text' +import {ComponentProps} from '../utils/types' +import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef' const noop = () => null diff --git a/src/__tests__/Dialog.test.tsx b/src/Dialog/__tests__/Dialog.test.tsx similarity index 96% rename from src/__tests__/Dialog.test.tsx rename to src/Dialog/__tests__/Dialog.test.tsx index df5f8dc02a8..8f4abcf194b 100644 --- a/src/__tests__/Dialog.test.tsx +++ b/src/Dialog/__tests__/Dialog.test.tsx @@ -1,9 +1,9 @@ import React, {useState, useRef} from 'react' -import {Dialog, Box, Text} from '..' -import {Button} from '../deprecated' +import {Dialog, Box, Text} from '../..' +import {Button} from '../../deprecated' import {render as HTMLRender, act, fireEvent} from '@testing-library/react' import {axe, toHaveNoViolations} from 'jest-axe' -import {behavesAsComponent, checkExports} from '../utils/testing' +import {behavesAsComponent, checkExports} from '../../utils/testing' expect.extend(toHaveNoViolations) const comp = ( diff --git a/src/__tests__/Dialog.types.test.tsx b/src/Dialog/__tests__/Dialog.types.test.tsx similarity index 89% rename from src/__tests__/Dialog.types.test.tsx rename to src/Dialog/__tests__/Dialog.types.test.tsx index de6b44c65ea..d60ce984c57 100644 --- a/src/__tests__/Dialog.types.test.tsx +++ b/src/Dialog/__tests__/Dialog.types.test.tsx @@ -1,5 +1,5 @@ import React from 'react' -import Dialog from '../Dialog' +import Dialog from '..' export function shouldAcceptCallWithNoProps() { return diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap similarity index 100% rename from src/__tests__/__snapshots__/Dialog.test.tsx.snap rename to src/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap diff --git a/src/Dialog/index.ts b/src/Dialog/index.ts new file mode 100644 index 00000000000..c9e2bb007dd --- /dev/null +++ b/src/Dialog/index.ts @@ -0,0 +1 @@ +export {default, DialogProps, DialogHeaderProps} from './Dialog' diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx index 0fdb3c1e45e..698b2ffbf07 100644 --- a/src/__tests__/storybook.test.tsx +++ b/src/__tests__/storybook.test.tsx @@ -20,6 +20,7 @@ const allowlist = [ 'CounterLabel', 'DataTable', 'Details', + 'Dialog', 'Dialog2', 'Flash', 'Heading',