fix: fix Playground box area

ccontrols · Apr 1, 2020 · 69408aa · 69408aa
1 parent 69443e4
commit 69408aa
Show file tree

Hide file tree

Showing 6 changed files with 86 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 ? (