Skip to content
Permalink
Browse files

feat: Add `expand` option for sections and allow custom root section …

…options (#1689)
  • Loading branch information
josephrexme committed Sep 9, 2020
1 parent 43e19df commit 3ab6f8d8371cbda148382b38b0e1c215fe63be3a
@@ -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:

@@ -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();
});
@@ -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,
};
});
@@ -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 [],
@@ -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);

@@ -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,
};
}
@@ -12,6 +12,7 @@ export interface BaseSection {
href?: string;
sectionDepth?: number;
external?: boolean;
expand?: boolean;
}

export interface ProcessedSection extends BaseSection {

0 comments on commit 3ab6f8d

Please sign in to comment.
You can’t perform that action at this time.