DocsPage: Add subcomponents parameter

addons/docs/src/blocks/DocsPage.tsx

@@ -1,4 +1,4 @@
-import React, { FunctionComponent } from 'react';
+import React, { Fragment, FunctionComponent } from 'react';
 
 import { parseKind } from '@storybook/router';
 import { DocsPage as PureDocsPage, PropsTable, PropsTableProps } from '@storybook/components';
@@ -9,17 +9,22 @@ import { Story } from './Story';
 import { Preview } from './Preview';
 import { Anchor } from './Anchor';
 import { getPropsTableProps } from './Props';
+import { Component } from './shared';
 
 export interface SlotContext {
   id?: string;
   selectedKind?: string;
   selectedStory?: string;
+  subcomponents?: Record<string, Component>;
   parameters?: any;
   storyStore?: any;
 }
 
 export type StringSlot = (context: SlotContext) => string | void;
 export type PropsSlot = (context: SlotContext) => PropsTableProps | void;
+export type SubcomponentsPropsSlot = (
+  context: SlotContext
+) => Record<string, PropsTableProps> | void;
 export type StorySlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps | void;
 export type StoriesSlot = (stories: StoryData[], context: SlotContext) => DocsStoryProps[] | void;
 
@@ -29,6 +34,7 @@ export interface DocsPageProps {
   descriptionSlot: StringSlot;
   primarySlot: StorySlot;
   propsSlot: PropsSlot;
+  subcomponentsPropsSlot: SubcomponentsPropsSlot;
   storiesSlot: StoriesSlot;
 }
 
@@ -77,6 +83,35 @@ const defaultSubtitleSlot: StringSlot = ({ parameters }) =>
 
 const defaultPropsSlot: PropsSlot = context => getPropsTableProps({ of: '.' }, context);
 
+const defaultSubcomponentsPropsSlot: SubcomponentsPropsSlot = context => {
+  const { subcomponents = {} } = context.parameters || {};
+
+  const subcomponentNames = Object.keys(subcomponents);
+  if (!subcomponentNames.length) {
+    return undefined;
+  }
+
+  return subcomponentNames.reduce(
+    (subcomponentsPropsTableProps: Record<string, PropsTableProps>, subcomponentName: string) => {
+      const subcomponent = subcomponents[subcomponentName];
+
+      const subcomponentContext = {
+        ...context,
+        parameters: {
+          ...context.parameters,
+          component: subcomponent,
+        },
+      };
+
+      return {
+        ...subcomponentsPropsTableProps,
+        [subcomponentName]: getPropsTableProps({ of: '.' }, subcomponentContext),
+      };
+    },
+    {}
+  );
+};
+
 const defaultDescriptionSlot: StringSlot = ({ parameters }) => {
   const { component, docs } = parameters;
   if (!component) {
@@ -97,6 +132,7 @@ const defaultStoriesSlot: StoriesSlot = stories => {
 
 const StoriesHeading = H2;
 const StoryHeading = H3;
+const SubcomponentPropsHeading = H3;
 
 const DocsStory: FunctionComponent<DocsStoryProps> = ({
   id,
@@ -122,6 +158,7 @@ export const DocsPage: FunctionComponent<DocsPageProps> = ({
   descriptionSlot = defaultDescriptionSlot,
   primarySlot = defaultPrimarySlot,
   propsSlot = defaultPropsSlot,
+  subcomponentsPropsSlot = defaultSubcomponentsPropsSlot,
   storiesSlot = defaultStoriesSlot,
 }) => (
   <DocsContext.Consumer>
@@ -130,6 +167,7 @@ export const DocsPage: FunctionComponent<DocsPageProps> = ({
       const subtitle = subtitleSlot(context) || '';
       const description = descriptionSlot(context) || '';
       const propsTableProps = propsSlot(context);
+      const subcomponentsTableProps = subcomponentsPropsSlot(context);
 
       const { selectedKind, storyStore } = context;
       const componentStories = storyStore
@@ -143,6 +181,17 @@ export const DocsPage: FunctionComponent<DocsPageProps> = ({
           <Description markdown={description} />
           {primary && <DocsStory key={primary.id} {...primary} expanded={false} withToolbar />}
           {propsTableProps && <PropsTable {...propsTableProps} />}
+          {subcomponentsTableProps &&
+            Object.keys(subcomponentsTableProps).map(subcomponentName => {
+              const subcomponentPropsTableProps = subcomponentsTableProps[subcomponentName];
+
+              return (
+                <Fragment key={subcomponentName}>
+                  <SubcomponentPropsHeading>{subcomponentName}</SubcomponentPropsHeading>
+                  <PropsTable {...subcomponentPropsTableProps} />
+                </Fragment>
+              );
+            })}
           {stories && stories.length > 0 && <StoriesHeading>Stories</StoriesHeading>}
           {stories &&
             stories.map(story => story && <DocsStory key={story.id} {...story} expanded />)}

examples/official-storybook/components/ButtonGroup.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export const ButtonGroup = ({ background, children }) => (
+  <div style={{ background }}>{children}</div>
+);
+
+ButtonGroup.defaultProps = {
+  background: '#ff0',
+  children: null,
+};
+
+ButtonGroup.propTypes = {
+  background: PropTypes.string,
+  children: PropTypes.element,
+};

examples/official-storybook/stories/addon-docs/subcomponents.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { ButtonGroup } from '../../components/ButtonGroup';
+import { DocgenButton } from '../../components/DocgenButton';
+
+export default {
+  title: 'Addons/Docs/ButtonGroup',
+  component: ButtonGroup,
+  parameters: {
+    subcomponents: { Button: DocgenButton },
+  },
+};
+
+export const basic = () => (
+  <ButtonGroup>
+    <DocgenButton label="one" />
+    <DocgenButton label="two" />
+    <DocgenButton label="three" />
+  </ButtonGroup>
+);