Add expand and allow custom root section options

docs/Configuration.md

@@ -136,6 +136,12 @@ Defines the initial state of the example code tab:
 - `hide`: hide the tab and it can´t be toggled in the UI.
 - `expand`: expand the tab by default.
 
+## `expand`
+
+Type: `Boolean`, default: `false`
+
+Used within sections to determine if a section should be expanded or collapsed even when `tocMode` for all sections is set to `collapse`.
+
 ## `getComponentPathLine`
 
 Type: `Function`, default: component filename

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

@@ -173,6 +173,7 @@ Array [
     "exampleMode": "collapse",
     "external": undefined,
     "href": undefined,
+    "ignore": "**/components/Annotation/*",
     "name": "Ignore",
     "sectionDepth": 0,
     "sections": Array [],
@@ -395,6 +396,7 @@ Object {
   "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/__tests__/highlightCode.spec.ts

@@ -17,7 +17,7 @@ it('should warn when language not found', () => {
 	const actual = highlightCode(code, 'pizza');
 	expect(actual).toBe(code);
 	expect(warn).toBeCalledWith(
-		'Syntax highlighting for “pizza” isn’t supported. Supported languages are: markup, xml, html, mathml, svg, css, clike, javascript, js, markdown, md, scss, less, flow, typescript, ts, jsx, tsx, graphql, json, bash, shell, diff.'
+		'Syntax highlighting for “pizza” isn’t supported. Supported languages are: markup, html, mathml, svg, xml, ssml, atom, rss, css, clike, javascript, js, markdown, md, scss, less, flow, typescript, ts, jsx, tsx, graphql, json, webmanifest, bash, shell, diff.'
 	);
 });
 

src/loaders/utils/getSections.ts

@@ -88,6 +88,7 @@ export function processSection(
 	}
 
 	return {
+		...section,
 		name: section.name,
 		exampleMode: section.exampleMode || config.exampleMode,
 		usageMode: section.usageMode || config.usageMode,

src/typings/RsgSection.ts

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