Added descriptionSlot and slot to Description

addons/docs/src/blocks/Description.tsx

@@ -1,8 +1,9 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, useContext } from 'react';
 import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './shared';
 import { str } from '../lib/docgen/utils';
+import { DescriptionSlot } from './types';
 
 export enum DescriptionType {
   INFO = 'info',
@@ -16,6 +17,7 @@ type Notes = string | any;
 type Info = string | any;
 
 interface DescriptionProps {
+  slot?: DescriptionSlot;
   of?: '.' | Component;
   type?: DescriptionType;
   markdown?: string;
@@ -60,14 +62,15 @@ ${extractComponentDescription(target) || ''}
   }
 };
 
-const DescriptionContainer: FunctionComponent<DescriptionProps> = props => (
-  <DocsContext.Consumer>
-    {context => {
-      const { markdown } = getDescriptionProps(props, context);
-      return markdown && <Description markdown={markdown} />;
-    }}
-  </DocsContext.Consumer>
-);
+const DescriptionContainer: FunctionComponent<DescriptionProps> = props => {
+  const context = useContext(DocsContext);
+  const { slot } = props;
+  let { markdown } = getDescriptionProps(props, context);
+  if (slot) {
+    markdown = slot(markdown, context);
+  }
+  return markdown ? <Description markdown={markdown} /> : null;
+};
 
 // since we are in the docs blocks, assume default description if for primary component story
 DescriptionContainer.defaultProps = {

addons/docs/src/blocks/DocsPage.tsx

@@ -10,6 +10,7 @@ import { Stories } from './Stories';
 export const DocsPage: FunctionComponent<DocsPageProps> = ({
   titleSlot,
   subtitleSlot,
+  descriptionSlot,
   primarySlot,
   propsSlot,
   storiesSlot,
@@ -17,7 +18,7 @@ export const DocsPage: FunctionComponent<DocsPageProps> = ({
   <>
     <Title slot={titleSlot} />
     <Subtitle slot={subtitleSlot} />
-    <Description />
+    <Description slot={descriptionSlot} />
     <Primary slot={primarySlot} />
     <PrimaryProps slot={propsSlot} />
     <Stories slot={storiesSlot} />

addons/docs/src/blocks/types.ts

@@ -21,15 +21,17 @@ export interface SlotContext {
 }
 
 export type StringSlot = (context: SlotContext) => string;
+export type DescriptionSlot = (description: string, context: SlotContext) => string;
 export type PropsSlot = (context: SlotContext) => PropsTableProps;
 export type StorySlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps;
+
 export type StoriesSlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps[];
 
 export interface DocsPageProps {
-  titleSlot: StringSlot;
-  subtitleSlot: StringSlot;
-  descriptionSlot: StringSlot;
-  primarySlot: StorySlot;
-  propsSlot: PropsSlot;
-  storiesSlot: StoriesSlot;
+  titleSlot?: StringSlot;
+  subtitleSlot?: StringSlot;
+  descriptionSlot?: StringSlot;
+  primarySlot?: StorySlot;
+  propsSlot?: PropsSlot;
+  storiesSlot?: StoriesSlot;
 }