Repository: styleguidist/react-styleguidist
Pull request #1689 (2020-09-07 20:23:19)

Add expand and allow custom root section options
This addresses #1674 which allows user set and `expand` setting for each root section. It also sends all custom options from the user through to be usable

josephrexme: Thanks for taking a look @sapegin . I have just added tests. The [syntax highlighting test here](https://github.com/styleguidist/react-styleguidist/pull/1689/files#diff-d56e2054ed9db0792599da8bcf6ce89b) that I modified was failing even though I hadn't touched it so I made it look like the value it was expecting. I can revert that if it's not needed. I don't know if I also had to include an updated snapshot
codecov[bot]: # [Codecov](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1689?src=pr&el=h1) Report
> Merging [#1689](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1689?src=pr&el=desc) into [master](https://codecov.io/gh/styleguidist/react-styleguidist/commit/fc29f908d1e47d317ac04c7ed97c6c19d462b9ec?el=desc) will **increase** coverage by `0.00%`.
> The diff coverage is `100.00%`.

| [Impacted Files](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1689?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/loaders/utils/getSections.ts](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1689/diff?src=pr&el=tree#diff-c3JjL2xvYWRlcnMvdXRpbHMvZ2V0U2VjdGlvbnMudHM=) | `100.00% <ø> (ø)` | |
| [...rsg-components/TableOfContents/TableOfContents.tsx](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1689/diff?src=pr&el=tree#diff-c3JjL2NsaWVudC9yc2ctY29tcG9uZW50cy9UYWJsZU9mQ29udGVudHMvVGFibGVPZkNvbnRlbnRzLnRzeA==) | `100.00% <100.00%> (ø)` | |
| [src/scripts/make-webpack-config.ts](https://codecov.io/gh/styleguidist/react-styleguidist/pull/1689/diff?src=pr&el=tree#diff-c3JjL3NjcmlwdHMvbWFrZS13ZWJwYWNrLWNvbmZpZy50cw==) | `100.00% <0.00%> (ø)` | |

sapegin: > The syntax highlighting test here that I modified was failing even though I hadn't touched it so I made it look like the value it was expecting. I can revert that if it's not needed. I don't know if I also had to include an updated snapshot

This is because Prism was updated at some point, and the snapshot is already fixed in master.
josephrexme: > > The syntax highlighting test here that I modified was failing even though I hadn't touched it so I made it look like the value it was expecting. I can revert that if it's not needed. I don't know if I also had to include an updated snapshot
> 
> This is because Prism was updated at some point, and the snapshot is already fixed in master.

To be clear, should I undo my change with the **highlightCode.spec.ts** file?
sapegin: Try to merge master into your branch.

Patch:
diff --git a/docs/Components.md b/docs/Components.md
index 7f1f449f..617c8227 100644
--- a/docs/Components.md
+++ b/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:
 
diff --git a/src/client/rsg-components/TableOfContents/TableOfContents.spec.tsx b/src/client/rsg-components/TableOfContents/TableOfContents.spec.tsx
index c2c27a6a..8174788a 100644
--- a/src/client/rsg-components/TableOfContents/TableOfContents.spec.tsx
+++ b/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();
+});
diff --git a/src/client/rsg-components/TableOfContents/TableOfContents.tsx b/src/client/rsg-components/TableOfContents/TableOfContents.tsx
index 3ee7f2a8..3d83de83 100644
--- a/src/client/rsg-components/TableOfContents/TableOfContents.tsx
+++ b/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,
 			};
 		});
diff --git a/src/loaders/utils/getSections.ts b/src/loaders/utils/getSections.ts
index 2ac80f9c..c97a7bc4 100644
--- a/src/loaders/utils/getSections.ts
+++ b/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,
 	};
 }
diff --git a/src/typings/RsgSection.ts b/src/typings/RsgSection.ts
index a80dcad2..e2dddc39 100644
--- a/src/typings/RsgSection.ts
+++ b/src/typings/RsgSection.ts
@@ -12,6 +12,7 @@ export interface BaseSection {
 	href?: string;
 	sectionDepth?: number;
 	external?: boolean;
+	expand?: boolean;
 }
 
 export interface ProcessedSection extends BaseSection {


Test patch:
diff --git a/src/loaders/utils/__tests__/__snapshots__/getSections.spec.ts.snap b/src/loaders/utils/__tests__/__snapshots__/getSections.spec.ts.snap
index 25029506..4f84edb7 100644
--- a/src/loaders/utils/__tests__/__snapshots__/getSections.spec.ts.snap
+++ b/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 [],
diff --git a/src/loaders/utils/__tests__/getSections.spec.ts b/src/loaders/utils/__tests__/getSections.spec.ts
index a95dbb9c..0f606fed 100644
--- a/src/loaders/utils/__tests__/getSections.spec.ts
+++ b/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);