fix: playground context

ui/blocks/src/BlockContainer/story/StoryBlockContainer.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useContext } from 'react';
 import {
   BlockContainer,
   BlockContainerProps,
@@ -10,6 +10,7 @@ import {
   StoryContextProps,
 } from '../../context';
 import { CURRENT_STORY, getStoryBlockTitle } from '../../utils';
+import { PlaygroundContext } from '../../Playground/PlaygroundContext';
 
 export type StoryBlockContainerProps = StoryInputProps & BlockContainerProps;
 
@@ -37,14 +38,16 @@ export const StoryBlockContainer: FC<StoryBlockContainerAllProps> = ({
     id,
     name,
   });
+  const playground = useContext(PlaygroundContext);
   const { story } = context;
   const title = getStoryBlockTitle({
     story,
     title: userTitle,
   });
   const block = children && children(context, rest);
   const description =
-    userDescription || (useStoryDescription ? story?.description : undefined);
+    (playground === undefined && userDescription) ||
+    (useStoryDescription ? story?.description : undefined);
   return block ? (
     <BlockContainer
       data-testid={dataTestid}

ui/blocks/src/Playground/Playground.tsx

@@ -11,6 +11,7 @@ import {
   ActionItems,
 } from '@component-controls/components';
 import { BlockDataContext, useCustomProps } from '../context';
+import { PlaygroundContext } from './PlaygroundContext';
 
 import {
   StoryBlockContainer,
@@ -170,7 +171,11 @@ export const Playground: FC<PlaygroundProps> = ({ children, ...props }) => {
           background={background}
           direction={direction}
         >
-          <Zoom scale={scale || 1}>{children}</Zoom>
+          <Zoom scale={scale || 1}>
+            <PlaygroundContext.Provider value={{ useDescription: true }}>
+              {children}
+            </PlaygroundContext.Provider>
+          </Zoom>
         </PanelContainer>
       )}
     </StoryBlockContainer>

ui/blocks/src/Playground/PlaygroundContext.tsx

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+export interface PlaygroundContextProps {
+  useDescription: boolean;
+}
+export const PlaygroundContext = createContext<PlaygroundContextProps>({
+  useDescription: false,
+});

ui/blocks/src/Playground/index.ts

@@ -1 +1,2 @@
 export * from './Playground';
+export * from './PlaygroundContext';