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 {