diff --git a/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx b/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx index 43236111a..378950655 100644 --- a/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx +++ b/ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx @@ -8,7 +8,7 @@ import { StoryInputProps, StoryContextProps, } from '../../context'; -import { CURRENT_STORY, getStoryTitle } from '../../utils'; +import { CURRENT_STORY, getStoryBlockTitle } from '../../utils'; export type StoryBlockContainerProps = { children: ( @@ -32,8 +32,11 @@ export const StoryBlockContainer: FC<StoryBlockContainerProps> = ({ name, }); const { component, kind, story } = context; - const title = - userTitle == CURRENT_STORY ? getStoryTitle(kind, component) : userTitle; + const title = getStoryBlockTitle({ + kind, + component, + title: userTitle, + }); const block = children(context, rest); return ( <BlockContainer diff --git a/ui/blocks/src/Playground/Playground.stories.tsx b/ui/blocks/src/Playground/Playground.stories.tsx index d8e67ed3d..8caacd031 100644 --- a/ui/blocks/src/Playground/Playground.stories.tsx +++ b/ui/blocks/src/Playground/Playground.stories.tsx @@ -63,7 +63,7 @@ export const customTitle = () => ( ); export const notCollapsible = () => ( <MockContext storyId="blocks-core-story-plain--controls"> - <Playground title="." collapsible={false}> + <Playground title="." collapsible={false} id="."> <Story id="." /> </Playground> </MockContext> @@ -83,3 +83,21 @@ export const extraPanel = () => ( </Playground> </MockContext> ); + +export const child = () => ( + <MockContext storyId="blocks-core-story-plain--controls"> + <Playground title="My donut example "> + <Donut value={1 / 2} /> + </Playground> + </MockContext> +); + +export const multiChild = () => ( + <MockContext storyId="blocks-core-story-plain--controls"> + <Playground title="Multiple donuts"> + <Donut value={1 / 2} /> + <Donut value={1 / 2} /> + <Donut value={1 / 2} /> + </Playground> + </MockContext> +); diff --git a/ui/blocks/src/Playground/Playground.tsx b/ui/blocks/src/Playground/Playground.tsx index 52311577a..3b676bf01 100644 --- a/ui/blocks/src/Playground/Playground.tsx +++ b/ui/blocks/src/Playground/Playground.tsx @@ -7,17 +7,19 @@ import { Tabs, TabList, TabPanel, -} from '@component-controls/components'; - -import { Button } from 'theme-ui'; -import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'; -import { getSortedPanels, ActionItems, ActionItem, ActionContainer, ActionContainerProps, } from '@component-controls/components'; + +import { Button } from 'theme-ui'; +import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'; +import { + StoryBlockContainer, + StoryBlockContainerProps, +} from '../BlockContainer'; import { StorySource } from '../StorySource'; export interface TransformOptions { @@ -72,9 +74,14 @@ export interface PlaygroundOwnProps { openTab?: React.ReactNode; } export type PlaygroundProps = PlaygroundOwnProps & + Omit<StoryBlockContainerProps, 'children'> & Omit<ActionContainerProps, 'paddingTop'>; export const Playground: FC<PlaygroundProps> = ({ + title, + id, + name, + collapsible, transform, actions: userActions = [], children, @@ -165,12 +172,21 @@ export const Playground: FC<PlaygroundProps> = ({ </Collapsible> ); return !zoomEnabled ? ( - <ActionContainer actions={panelActions}> - {children} - {panelsElement} - </ActionContainer> + <StoryBlockContainer + name={name} + title={title} + id={id} + collapsible={collapsible} + > + {() => ( + <ActionContainer actions={panelActions}> + {children} + {panelsElement} + </ActionContainer> + )} + </StoryBlockContainer> ) : ( - <ActionContainer> + <div> <Global styles={css` .react-transform-component, @@ -221,14 +237,23 @@ export const Playground: FC<PlaygroundProps> = ({ ? [...zoomActions, ...actions] : actions; return ( - <ActionContainer plain={true} actions={actionsItems}> - <TransformComponent>{childStories}</TransformComponent> - </ActionContainer> + <StoryBlockContainer + name={name} + title={title} + id={id} + collapsible={collapsible} + > + {() => ( + <ActionContainer plain={true} actions={actionsItems}> + <TransformComponent>{childStories}</TransformComponent> + </ActionContainer> + )} + </StoryBlockContainer> ); }} </TransformWrapper> {panelsElement} - </ActionContainer> + </div> ); }; diff --git a/ui/blocks/src/Stories/Stories.tsx b/ui/blocks/src/Stories/Stories.tsx index 74bb0e13a..1db2b4a0a 100644 --- a/ui/blocks/src/Stories/Stories.tsx +++ b/ui/blocks/src/Stories/Stories.tsx @@ -33,14 +33,12 @@ export const Stories: FC<StoriesProps> = props => ( disabled: true, }, }} + title={storyTitle} + collapsible={false} key={`playground-${story.id}`} {...rest} > - <StoryComponent - id={story.id} - title={storyTitle} - collapsible={false} - /> + <StoryComponent id={story.id} /> </Playground> ); })} diff --git a/ui/blocks/src/utils/constants.ts b/ui/blocks/src/utils/constants.ts index 2eb0ae4be..bcbe75faf 100644 --- a/ui/blocks/src/utils/constants.ts +++ b/ui/blocks/src/utils/constants.ts @@ -22,3 +22,14 @@ export const getStoryTitle = ( } return undefined; }; + +export const getStoryBlockTitle = ({ + kind, + component, + title, +}: { + kind?: StoriesKind; + component?: StoryComponent; + title?: string; +}): string | undefined => + title == CURRENT_STORY ? getStoryTitle(kind, component) : title; diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx index 5f4ab13c9..f8dec368a 100644 --- a/ui/components/src/BlockContainer/BlockContainer.tsx +++ b/ui/components/src/BlockContainer/BlockContainer.tsx @@ -41,6 +41,11 @@ export const BlockContainer: FC<BlockContainerProps> = ({ const [isOpen, setIsOpen] = React.useState(true); const blockId = id || (title ? title.toLowerCase().replace(/\s/g, '-') : undefined); + const BlockTitle: FC = () => ( + <Subtitle color="text" css={{ fontWeight: 400, paddingRight: 10 }}> + {title} + </Subtitle> + ); //workaround for storybook iframe url const url = (window.location != window.parent.location @@ -85,7 +90,7 @@ export const BlockContainer: FC<BlockContainerProps> = ({ <Octicon icon={LinkIcon} /> </Link> )} - {title && collapsible ? ( + {title && collapsible && ( <Link aria-label={isOpen ? 'Collapse this block' : 'Expand this block'} css={{ @@ -94,13 +99,12 @@ export const BlockContainer: FC<BlockContainerProps> = ({ onClick={() => setIsOpen(!isOpen)} > <Flex sx={{ flexDirection: 'row', alignItems: 'center' }}> - <Subtitle css={{ paddingRight: 10 }}>{title}</Subtitle> + <BlockTitle /> <Octicon icon={isOpen ? ChevronDown : ChevronRight} /> </Flex> </Link> - ) : ( - <Subtitle css={{ paddingRight: 10 }}>{title}</Subtitle> )} + {title && !collapsible && <BlockTitle />} </Flex> )} {collapsible && children ? (