feat: Add expand option for sections and allow custom root section options (#1689)

Author: josephrexme

docs/Components.md

@@ -106,6 +106,7 @@ Each section consists of (all fields are optional):
 - `ignore` — string/array of globs that should not be included in the section.
 - `href` - an URL to navigate to instead of navigating to the section content
 - `external` - if set, the link will open in a new window
+- `expand` - Determines if the section should be expanded by default even when `tocMode` is set to `collapse` in general settings
 
 Configuring a style guide with textual documentation section and a list of components would look like:
 

src/client/rsg-components/TableOfContents/TableOfContents.spec.tsx

@@ -302,3 +302,31 @@ it('should detect sections containing current selection when tocMode is collapse
 
 	expect(getByText('1.1')).not.toBeEmpty();
 });
+
+it('should show sections with expand: true when tocMode is collapse', () => {
+	const { getByText } = render(
+		<TableOfContents
+			tocMode="collapse"
+			sections={[
+				{
+					sections: [
+						{
+							visibleName: '1',
+							expand: true,
+							href: '#/components',
+							sections: [{ visibleName: '1.1', href: '#/button' }],
+						},
+						{
+							visibleName: '2',
+							href: '#/chap',
+							content: 'chapter.md',
+							sections: [{ visibleName: '2.1', href: '#/chapter-1' }],
+						},
+						{ visibleName: '3', href: 'http://react-styleguidist.com' },
+					],
+				},
+			]}
+		/>
+	);
+	expect(getByText('1.1')).toBeVisible();
+});

src/client/rsg-components/TableOfContents/TableOfContents.tsx

@@ -66,7 +66,7 @@ export default class TableOfContents extends Component<TableOfContentsProps> {
 				content,
 				selected,
 				shouldOpenInNewTab: !!section.external && !!section.externalLink,
-				initialOpen: this.props.tocMode !== 'collapse' || containsSelected,
+				initialOpen: this.props.tocMode !== 'collapse' || containsSelected || section.expand,
 				forcedOpen: !!this.state.searchTerm.length,
 			};
 		});

src/loaders/utils/__tests__/__snapshots__/getSections.spec.ts.snap

@@ -7,9 +7,7 @@ Array [
     "content": Object {
       "require": "!!~/src/loaders/examples-loader.js!~/test/components/Button/Readme.md",
     },
-    "description": undefined,
     "exampleMode": "collapse",
-    "external": undefined,
     "href": undefined,
     "name": "Readme",
     "sectionDepth": 0,
@@ -88,9 +86,7 @@ Array [
       },
     ],
     "content": undefined,
-    "description": undefined,
     "exampleMode": "collapse",
-    "external": undefined,
     "href": undefined,
     "name": "Components",
     "sectionDepth": 0,
@@ -169,10 +165,9 @@ Array [
       },
     ],
     "content": undefined,
-    "description": undefined,
     "exampleMode": "collapse",
-    "external": undefined,
     "href": undefined,
+    "ignore": "**/components/Annotation/*",
     "name": "Ignore",
     "sectionDepth": 0,
     "sections": Array [],
@@ -185,9 +180,7 @@ Array [
       "content": "Hello World",
       "type": "markdown",
     },
-    "description": undefined,
     "exampleMode": "collapse",
-    "external": undefined,
     "href": undefined,
     "name": "Ignore",
     "sectionDepth": 0,
@@ -270,9 +263,7 @@ Object {
     },
   ],
   "content": undefined,
-  "description": undefined,
   "exampleMode": "collapse",
-  "external": undefined,
   "href": undefined,
   "name": "Components",
   "sectionDepth": 0,
@@ -288,9 +279,7 @@ Object {
   "content": Object {
     "require": "!!~/src/loaders/examples-loader.js!~/test/components/Button/Readme.md",
   },
-  "description": undefined,
   "exampleMode": "collapse",
-  "external": undefined,
   "href": undefined,
   "name": "Readme",
   "sectionDepth": 0,
@@ -307,9 +296,7 @@ Object {
     "content": "Hello World",
     "type": "markdown",
   },
-  "description": undefined,
   "exampleMode": "collapse",
-  "external": undefined,
   "href": undefined,
   "name": "Ignore",
   "sectionDepth": 0,
@@ -391,10 +378,9 @@ Object {
     },
   ],
   "content": undefined,
-  "description": undefined,
   "exampleMode": "collapse",
-  "external": undefined,
   "href": undefined,
+  "ignore": "**/components/Annotation/*",
   "name": "Ignore",
   "sectionDepth": 0,
   "sections": Array [],

src/loaders/utils/__tests__/getSections.spec.ts

@@ -47,6 +47,7 @@ const sectionsWithDepth = [
 	},
 	{
 		name: 'Components',
+		expand: true,
 		sections: [
 			{
 				name: 'Buttons',
@@ -148,6 +149,12 @@ it('getSections() should return an array of sectionsWithDepth with sectionDepth
 	]);
 });
 
+it('getSections() should make custom options by user available', () => {
+	const result = getSections(sectionsWithDepth, config);
+	const expandSection = result.find(section => section.name === 'Components');
+	expect(expandSection).toHaveProperty('expand');
+});
+
 it('getSections() should return an array of sectionsWithBadDepth taking the sectionDepth of the first depth of the sections', () => {
 	const result = getSections(sectionsWithBadDepth, config);
 

src/loaders/utils/getSections.ts

@@ -88,16 +88,14 @@ export function processSection(
 	}
 
 	return {
-		name: section.name,
+		...section,
 		exampleMode: section.exampleMode || config.exampleMode,
 		usageMode: section.usageMode || config.usageMode,
 		sectionDepth,
-		description: section.description,
 		slug: `section-${slugger.slug(section.name || 'untitled')}`,
 		sections: getSections(section.sections || [], config, sectionDepth),
 		href: section.href,
 		components: getSectionComponents(section, config),
 		content,
-		external: section.external,
 	};
 }

src/typings/RsgSection.ts

@@ -12,6 +12,7 @@ export interface BaseSection {
 	href?: string;
 	sectionDepth?: number;
 	external?: boolean;
+	expand?: boolean;
 }
 
 export interface ProcessedSection extends BaseSection {