Merge pull request #14729 from storybookjs/feat/addon-docs/show_code

Addon-docs: Add parameter to show code by default
storybookjs · Apr 29, 2021 · f6f4c8f · f6f4c8f
2 parents 63ae907 + ecac906
commit f6f4c8f
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 10 deletions.
diff --git a/addons/docs/docs/docspage.md b/addons/docs/docs/docspage.md
@@ -13,6 +13,7 @@ When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config d
   - [Remixing DocsPage using doc blocks](#remixing-docspage-using-doc-blocks)
 - [Story file names](#story-file-names)
 - [Inline stories vs. Iframe stories](#inline-stories-vs-iframe-stories)
+- [Show/Hide code](#showhide-code)
 - [More resources](#more-resources)
 
 ## Motivation
@@ -183,6 +184,24 @@ addParameters({
 
 With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
 
+## Show/Hide code
+
+By default, the code block under the Preview is collapsed and you have to click on "Show code" to reveal it.
+
+You can override this default behavior in `.storybook/preview.js` (or in any of your components/stories):
+
+```js
+export const parameters = {
+  docs: {
+    source: {
+      state: 'open',
+    },
+  },
+};
+```
+
+With that flag, now the docs addon will show all code blocks open by default.
+
 ## More resources
 
 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)

diff --git a/addons/docs/src/blocks/Canvas.tsx b/addons/docs/src/blocks/Canvas.tsx
@@ -22,16 +22,13 @@ type CanvasProps = PurePreviewProps & {
 };
 
 const getPreviewProps = (
-  {
-    withSource = SourceState.CLOSED,
-    mdxSource,
-    children,
-    ...props
-  }: CanvasProps & { children?: ReactNode },
+  { withSource, mdxSource, children, ...props }: CanvasProps & { children?: ReactNode },
   docsContext: DocsContextProps,
   sourceContext: SourceContextProps
 ): PurePreviewProps => {
-  if (withSource === SourceState.NONE) {
+  const { mdxComponentMeta, mdxStoryNameToKey, parameters } = docsContext;
+  const sourceState = withSource || parameters?.docs?.source?.state || SourceState.CLOSED;
+  if (sourceState === SourceState.NONE) {
     return props;
   }
   if (mdxSource) {
@@ -44,7 +41,6 @@ const getPreviewProps = (
   const stories = childArray.filter(
     (c: ReactElement) => c.props && (c.props.id || c.props.name)
   ) as ReactElement[];
-  const { mdxComponentMeta, mdxStoryNameToKey } = docsContext;
   const targetIds = stories.map(
     (s) =>
       s.props.id ||
@@ -57,7 +53,7 @@ const getPreviewProps = (
   return {
     ...props, // pass through columns etc.
     withSource: sourceProps,
-    isExpanded: withSource === SourceState.OPEN,
+    isExpanded: sourceState === SourceState.OPEN,
   };
 };
 

diff --git a/examples/official-storybook/stories/addon-controls.stories.tsx b/examples/official-storybook/stories/addon-controls.stories.tsx
@@ -29,7 +29,14 @@ export default {
       },
     },
   },
-  parameters: { chromatic: { disable: true } },
+  parameters: {
+    chromatic: { disable: true },
+    docs: {
+      source: {
+        state: 'open',
+      },
+    },
+  },
 };
 
 const DEFAULT_NESTED_OBJECT = { a: 4, b: { c: 'hello', d: [1, 2, 3] } };