From 3fe71ad6fc6089de9b3b4c88bcb32b745aa50dcc Mon Sep 17 00:00:00 2001
From: Michael Shilman <michael@lab80.co>
Date: Tue, 19 Nov 2019 12:23:41 +0800
Subject: [PATCH] DocsPage: components => subcomponents

---
 addons/docs/src/blocks/Props.tsx              | 38 +++++++++++--------
 .../addon-docs/addon-docs-blocks.stories.js   | 12 ++++--
 2 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
index 70cc48602e3..0ee6524c625 100644
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@@ -2,6 +2,7 @@ import React, { FunctionComponent, useContext } from 'react';
 import { PropsTable, PropsTableError, PropsTableProps, TabsState } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, PropsSlot, CURRENT_SELECTION } from './shared';
+import { getComponentName } from './utils';
 
 import { PropsExtractor } from '../lib/docgen/types';
 import { extractProps as reactExtractProps } from '../frameworks/react/extractProps';
@@ -69,34 +70,39 @@ const PropsContainer: FunctionComponent<PropsProps> = props => {
   const context = useContext(DocsContext);
   const { slot, components } = props;
   const {
-    parameters: { components: parametersComponents },
+    parameters: { subcomponents },
   } = context;
-  const subComponents = components || parametersComponents;
-  if (!subComponents || typeof subComponents !== 'object') {
+
+  let allComponents = components;
+  if (!allComponents) {
     const main = getComponent(props, context);
+    const mainLabel = getComponentName(main);
     const mainProps = slot ? slot(context, main) : getComponentProps(main, props, context);
-    return mainProps && <PropsTable {...mainProps} />;
+
+    if (!subcomponents || typeof subcomponents !== 'object') {
+      return mainProps && <PropsTable {...mainProps} />;
+    }
+
+    allComponents = { [mainLabel]: main, ...subcomponents };
   }
 
-  const subProps: { label: string; table: PropsTableProps }[] = Object.keys(subComponents).map(
-    label => {
-      const component = subComponents[label];
-      return {
-        label,
-        table: slot ? slot(context, component) : getComponentProps(component, props, context),
-      };
-    }
-  );
+  const tabs: { label: string; table: PropsTableProps }[] = [];
+  Object.entries(allComponents).forEach(([label, component]) => {
+    tabs.push({
+      label,
+      table: slot ? slot(context, component) : getComponentProps(component, props, context),
+    });
+  });
 
   return (
     <TabsState>
-      {subProps.map(item => {
-        const { label, table } = item;
+      {tabs.map(({ label, table }) => {
         if (!table) {
           return null;
         }
+        const id = `prop_table_div_${label}`;
         return (
-          <div key={`prop_table_div_${label}`} id={label} title={label}>
+          <div key={id} id={id} title={label}>
             {({ active }: { active: boolean }) =>
               active ? <PropsTable key={`prop_table_${label}`} {...table} /> : null
             }
diff --git a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
index 0f1a8d89791..8efd6554618 100644
--- a/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
+++ b/examples/official-storybook/stories/addon-docs/addon-docs-blocks.stories.js
@@ -131,8 +131,7 @@ multipleComponents.story = {
   name: 'Many Components',
   parameters: {
     component: ButtonGroup,
-    components: {
-      'Button Group': ButtonGroup,
+    subcomponents: {
       'Docgen Button': DocgenButton,
       'Base Button': BaseButton,
     },
@@ -152,14 +151,21 @@ multipleComponents.story = {
 
 export const componentsProps = () => <div>Display multiple prop tables in tabs</div>;
 componentsProps.story = {
+  subcomponents: {
+    'Docgen Button': DocgenButton,
+    'Base Button': BaseButton,
+  },
   parameters: {
     docs: {
       page: () => (
         <>
           <Title>Multiple prop tables</Title>
+          <Description>
+            Here's what happens when your component has some related components
+          </Description>
           <Props
             components={{
-              'Button Group': ButtonGroup,
+              'ButtonGroup Custom': ButtonGroup,
               'Docgen Button': DocgenButton,
               'Base Button': BaseButton,
             }}