diff --git a/src/pattern-library/components/patterns/prototype/TabbedDialogPage.tsx b/src/pattern-library/components/patterns/prototype/TabbedDialogPage.tsx index 8ba9e57a..714d0ce0 100644 --- a/src/pattern-library/components/patterns/prototype/TabbedDialogPage.tsx +++ b/src/pattern-library/components/patterns/prototype/TabbedDialogPage.tsx @@ -1,23 +1,26 @@ //import type { ComponentChildren } from 'preact'; import classnames from 'classnames'; -import type { JSX } from 'preact'; +import type { ComponentChildren, JSX } from 'preact'; import { useState } from 'preact/hooks'; import { Button, - CopyIcon, + Card, + CardActions, + CardTitle, IconButton, Input, InputGroup, + OptionButton, TabList, Tab, +} from '../../../../'; +import { CancelIcon, - Card, - CardActions, - CardTitle, + CopyIcon, + EmailIcon, SocialTwitterIcon, SocialFacebookIcon, - EmailIcon, } from '../../../../'; import type { PresentationalProps } from '../../../../types'; import Library from '../../Library'; @@ -37,177 +40,279 @@ function Divider({ variant }: DividerProps) { ); } -export default function TabbedDialogPage() { +type TabListHeaderProps = PresentationalProps & { + onClose?: () => void; +}; + +function TabListHeader({ children, onClose }: TabListHeaderProps) { + return ( +
+ {onClose && ( + // This might be extractable as, say, a CloseButton component + + )} + {children} +
+ ); +} + +type TabPanelProps = PresentationalProps & { + active?: boolean; + title?: ComponentChildren; +} & JSX.HTMLAttributes; + +function TabPanel({ + children, + active, + title, + ...htmlAttributes +}: TabPanelProps) { + return ( +
+ {title && {title}} +
{children}
+
+ ); +} + +function TabbedDialog() { + const [panelOpen, setPanelOpen] = useState(false); + const [selectedTab, setSelectedTab] = useState('one'); + return ( +
+
+ setPanelOpen(!panelOpen)} + selected={panelOpen} + > + Toggle dialog + +
+ +
+ {panelOpen && ( + setPanelOpen(false)} + restoreFocus + > + setPanelOpen(false)}> + setSelectedTab('one')} + > + One + + setSelectedTab('two')} + > + Two + + setSelectedTab('three')} + disabled + > + Three + + + + +

+ This tab panel has no focusable elements, so + the tabpanel itself can take focus. +

+ + +

+ This tab panel has focusable elements, so the tabpanel itself + does not take focus. +

+ + + + + + +

Nothing to see here.

+ + + + )} +
+
+ ); +} + +function TabbedSharePanel() { const [panelOpen, setPanelOpen] = useState(false); const [selectedTab, setSelectedTab] = useState('share'); + return ( +
+
+ setPanelOpen(!panelOpen)} + selected={panelOpen} + > + Toggle dialog + +
+ +
+ {panelOpen && ( + setPanelOpen(false)} + restoreFocus + > + setPanelOpen(false)}> + setSelectedTab('share')} + > + Share + + setSelectedTab('export')} + > + Export + + + + +

+ + Use this link to share these annotations with anyone: + +

+ + + + + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + +

+ Export 2 annotations in a file named: +

+ + + + + + + + )} +
+
+ ); +} + +export default function TabbedDialogPage() { return ( -

TODO

- - - - NB: This section is a work in progress. - - - - NB: The disabled Import tab is rendered in the prototyped - dialog here to demonstrate what a disabled tab might look like, but - would not appear to users in this manner. - + +

+ This design pattern extends the panel-like dialog layout with tabs + and an integrated close button. Tabs may be disabled. +

-
- - -
- {panelOpen && ( - setPanelOpen(false)} - restoreFocus - > -
- - setSelectedTab('share')} - > - Share - - setSelectedTab('export')} - > - Export - - setSelectedTab('import')} - > - Import - - - setPanelOpen(false)} - variant="custom" - size="sm" - /> -
- -
- Share annotations from GroupName -
-

- - Use this link to share these annotations with - anyone: - -

- - - - - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
-
-
- Export from GroupName -
-

- 2 annotations will be exported with - the following file name: -

- - - - -
-
-
- Import into GroupName -
-

- TODO: We will mock this up when we work on the - import part of this project. -

-
-
- - - )} -
-
+ + + + + + +

+ Client-specific font sizes and sidebar background color are + applied to this tabbed dialog to show how it would appear in situ. +

+ + + +