From 3ab6f8d8371cbda148382b38b0e1c215fe63be3a Mon Sep 17 00:00:00 2001 From: Joseph Rex Date: Wed, 9 Sep 2020 07:04:58 -0500 Subject: [PATCH] feat: Add `expand` option for sections and allow custom root section options (#1689) --- docs/Components.md | 1 + .../TableOfContents/TableOfContents.spec.tsx | 28 +++++++++++++++++++ .../TableOfContents/TableOfContents.tsx | 2 +- .../__snapshots__/getSections.spec.ts.snap | 18 ++---------- .../utils/__tests__/getSections.spec.ts | 7 +++++ src/loaders/utils/getSections.ts | 4 +-- src/typings/RsgSection.ts | 1 + 7 files changed, 41 insertions(+), 20 deletions(-) diff --git a/docs/Components.md b/docs/Components.md index 7f1f449f5..617c82270 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 c2c27a6a8..8174788ae 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( + + ); + expect(getByText('1.1')).toBeVisible(); +}); diff --git a/src/client/rsg-components/TableOfContents/TableOfContents.tsx b/src/client/rsg-components/TableOfContents/TableOfContents.tsx index 3ee7f2a85..3d83de83f 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 { 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/__tests__/__snapshots__/getSections.spec.ts.snap b/src/loaders/utils/__tests__/__snapshots__/getSections.spec.ts.snap index 250295068..4f84edb76 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 a95dbb9cb..0f606fed7 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); diff --git a/src/loaders/utils/getSections.ts b/src/loaders/utils/getSections.ts index 2ac80f9c7..c97a7bc4f 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 a80dcad28..e2dddc399 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 {