Official-storybook: Prop table example for multiple named expor… (#9364)

Official-storybook: Prop table example for multiple named exports

examples/official-storybook/components/ButtonGroup.js

@@ -12,6 +12,25 @@ ButtonGroup.defaultProps = {
 };
 
 ButtonGroup.propTypes = {
+  /**
+   * Background color for the group
+   */
+  background: PropTypes.string,
+  children: PropTypes.arrayOf(PropTypes.element),
+};
+
+/** SubGroup component description from docgen */
+export const SubGroup = ({ background, children }) => <div style={{ background }}>{children}</div>;
+
+SubGroup.defaultProps = {
+  background: '#0f0',
+  children: null,
+};
+
+SubGroup.propTypes = {
+  /**
+   * Background color for the sub-group
+   */
   background: PropTypes.string,
   children: PropTypes.arrayOf(PropTypes.element),
 };

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

@@ -9,7 +9,7 @@ import {
 } from '@storybook/addon-docs/blocks';
 import { DocgenButton } from '../../components/DocgenButton';
 import BaseButton from '../../components/BaseButton';
-import { ButtonGroup } from '../../components/ButtonGroup';
+import { ButtonGroup, SubGroup } from '../../components/ButtonGroup';
 
 export default {
   title: 'Addons/Docs/stories docs blocks',
@@ -131,6 +131,7 @@ multipleComponents.story = {
   parameters: {
     component: ButtonGroup,
     subcomponents: {
+      SubGroup,
       'Docgen Button': DocgenButton,
       'Base Button': BaseButton,
     },