Addon-docs: Add docs.description parameter

MIGRATION.md

@@ -13,6 +13,7 @@
     - [DocsPage slots removed](#docspage-slots-removed)
     - [React prop tables with Typescript](#react-prop-tables-with-typescript)
     - [ConfigureJSX true by default in React](#configurejsx-true-by-default-in-react)
+    - [Docs description parameter](#docs-description-parameter)
   - [New addon presets](#new-addon-presets)
   - [Removed babel-preset-vue from Vue preset](#removed-babel-preset-vue-from-vue-preset)
   - [Removed Deprecated APIs](#removed-deprecated-apis)
@@ -284,6 +285,26 @@ module.exports = {
 };
 ```
 
+#### Docs description parameter
+
+In 6.0, you can customize a component description using the `docs.description.component` parameter, and a story description using `docs.description.story` parameter.
+
+Example:
+
+```js
+import { Button } from './Button';
+
+export default {
+  title: 'Button'
+  parameters: { docs: { description: { component: 'some component **markdown**' }}}
+}
+
+export const Basic = () => <Button />
+Basic.parameters = { docs: { description: { story: 'some story **markdown**' }}}
+```
+
+In 5.3 you customized a story description with the `docs.storyDescription` parameter. This has been deprecated, and support will be removed in 7.0.
+
 ### New addon presets
 
 In Storybook 5.3 we introduced a declarative [main.js configuration](#to-mainjs-configuration), which is now the recommended way to configure Storybook. Part of the change is a simplified syntax for registering addons, which in 6.0 automatically registers many addons _using a preset_, which is a slightly different behavior than in earlier versions.

addons/docs/src/blocks/Description.tsx

@@ -37,8 +37,15 @@ export const getDescriptionProps = (
     return { markdown: children || markdown };
   }
   const { component, notes, info, docs } = parameters;
-  const { extractComponentDescription = noDescription } = docs || {};
+  const { extractComponentDescription = noDescription, description } = docs || {};
   const target = of === CURRENT_SELECTION ? component : of;
+
+  // override component description
+  const componentDescriptionParameter = description?.component;
+  if (componentDescriptionParameter) {
+    return { markdown: componentDescriptionParameter };
+  }
+
   switch (type) {
     case DescriptionType.INFO:
       return { markdown: getInfo(info) };

addons/docs/src/blocks/DocsContainer.tsx

@@ -24,18 +24,21 @@ const defaultComponents = {
   ...HeadersMdx,
 };
 
+const warnOptionsTheme = deprecate(
+  () => {},
+  dedent`
+    Deprecated parameter: options.theme => docs.theme
+
+    https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming
+`
+);
+
 export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
   const { id: storyId = null, parameters = {} } = context || {};
   const { options = {}, docs = {} } = parameters;
   let themeVars = docs.theme;
   if (!themeVars && options.theme) {
-    deprecate(
-      () => {},
-      dedent`
-        options.theme => Deprecated: use  story.parameters.docs.theme instead.
-        See https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming for details.
-    `
-    )();
+    warnOptionsTheme();
     themeVars = options.theme;
   }
   const theme = ensureTheme(themeVars);

addons/docs/src/blocks/DocsStory.tsx

@@ -1,25 +1,43 @@
 import React, { FunctionComponent } from 'react';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
 import { Subheading } from './Subheading';
 import { DocsStoryProps } from './types';
 import { Anchor } from './Anchor';
 import { Description } from './Description';
 import { Story } from './Story';
 import { Canvas } from './Canvas';
 
+const warnStoryDescription = deprecate(
+  () => {},
+  dedent`
+    Deprecated parameter: docs.storyDescription => docs.description.story
+
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-description-parameter
+  `
+);
+
 export const DocsStory: FunctionComponent<DocsStoryProps> = ({
   id,
   name,
   expanded = true,
   withToolbar = false,
   parameters,
-}) => (
-  <Anchor storyId={id}>
-    {expanded && <Subheading>{name}</Subheading>}
-    {expanded && parameters && parameters.docs && parameters.docs.storyDescription && (
-      <Description markdown={parameters.docs.storyDescription} />
-    )}
-    <Canvas withToolbar={withToolbar}>
-      <Story id={id} />
-    </Canvas>
-  </Anchor>
-);
+}) => {
+  let description = expanded && parameters?.docs?.description?.story;
+  if (!description) {
+    description = parameters?.docs?.storyDescription;
+    if (description) warnStoryDescription();
+  }
+  const subheading = expanded && name;
+
+  return (
+    <Anchor storyId={id}>
+      {subheading && <Subheading>{subheading}</Subheading>}
+      {description && <Description markdown={description} />}
+      <Canvas withToolbar={withToolbar}>
+        <Story id={id} />
+      </Canvas>
+    </Anchor>
+  );
+};

examples/official-storybook/stories/demo/button.stories.js

@@ -9,6 +9,9 @@ export default {
   parameters: {
     docs: {
       inlineStories: false,
+      description: {
+        component: 'Component description **markdown** override',
+      },
     },
   },
 };
@@ -35,6 +38,8 @@ WithCounter.storyName = 'with counter';
 
 WithCounter.parameters = {
   docs: {
-    storyDescription: 'This demonstrates react hooks working inside stories. Go team! 🚀',
+    description: {
+      story: 'This demonstrates react hooks working inside stories. **Go team!** 🚀',
+    },
   },
 };