Skip to content

Commit 89420ca

Browse files
author
Barthélémy Ledoux
authored
Fix: Open all sections when searching (styleguidist#1537)
When searching with the option tocmode: 'collapse' the sections do not open automatically (because they keep their state). The found section or page is therefore not visible nor clickable.
1 parent a63e7ec commit 89420ca

File tree

6 files changed

+67
-3
lines changed

6 files changed

+67
-3
lines changed

‎src/client/rsg-components/ComponentsList/ComponentsList.spec.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -229,3 +229,40 @@ it('should show content of initialOpen items even if they are not active', () =>
229229
Array.from(getAllByTestId('content')).map(node => (node as HTMLDivElement).innerHTML)
230230
).toEqual(['Content for Button', 'Content for Input']);
231231
});
232+
233+
it('should show content of forcedOpen items even if they are initially collapsed', () => {
234+
const components = [
235+
{
236+
visibleName: 'Button',
237+
name: 'Button',
238+
slug: 'button',
239+
content: <div data-testid="content">Content for Button</div>,
240+
initialOpen: true,
241+
},
242+
{
243+
visibleName: 'Input',
244+
name: 'Input',
245+
slug: 'input',
246+
content: <div data-testid="content">Content for Input</div>,
247+
initialOpen: true,
248+
forcedOpen: true,
249+
},
250+
];
251+
252+
const { getAllByTestId, getByText } = render(
253+
<Provider>
254+
<ComponentsList
255+
items={components}
256+
useRouterLinks
257+
hashPath={['Components']}
258+
useHashId={false}
259+
/>
260+
</Provider>
261+
);
262+
263+
getByText('Input').click();
264+
265+
expect(
266+
Array.from(getAllByTestId('content')).map(node => (node as HTMLDivElement).innerHTML)
267+
).toEqual(['Content for Button', 'Content for Input']);
268+
});

‎src/client/rsg-components/ComponentsList/ComponentsListRenderer.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ const ComponentsListSectionRenderer: React.FunctionComponent<Rsg.TOCItem & JssIn
6363
shouldOpenInNewTab,
6464
selected,
6565
initialOpen,
66+
forcedOpen,
6667
}) => {
6768
const {
6869
config: { tocMode },
@@ -85,7 +86,7 @@ const ComponentsListSectionRenderer: React.FunctionComponent<Rsg.TOCItem & JssIn
8586
>
8687
{visibleName}
8788
</Link>
88-
{open ? content : null}
89+
{open || forcedOpen ? content : null}
8990
</li>
9091
);
9192
};

‎src/client/rsg-components/TableOfContents/TableOfContents.spec.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,7 @@ it('should render content of subsections of a section that has no components', (
153153
Object {
154154
"components": Array [],
155155
"content": undefined,
156+
"forcedOpen": false,
156157
"heading": false,
157158
"initialOpen": true,
158159
"sections": Array [],
@@ -162,6 +163,7 @@ it('should render content of subsections of a section that has no components', (
162163
Object {
163164
"components": Array [],
164165
"content": undefined,
166+
"forcedOpen": false,
165167
"heading": false,
166168
"initialOpen": true,
167169
"sections": Array [],
@@ -180,6 +182,7 @@ it('should render components of a single top section as root', () => {
180182
Object {
181183
"components": Array [],
182184
"content": undefined,
185+
"forcedOpen": false,
183186
"heading": false,
184187
"initialOpen": true,
185188
"name": "Button",
@@ -191,6 +194,7 @@ it('should render components of a single top section as root', () => {
191194
Object {
192195
"components": Array [],
193196
"content": undefined,
197+
"forcedOpen": false,
194198
"heading": false,
195199
"initialOpen": true,
196200
"name": "Input",
@@ -202,6 +206,7 @@ it('should render components of a single top section as root', () => {
202206
Object {
203207
"components": Array [],
204208
"content": undefined,
209+
"forcedOpen": false,
205210
"heading": false,
206211
"initialOpen": true,
207212
"name": "Textarea",

‎src/client/rsg-components/TableOfContents/TableOfContents.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,8 @@ export default class TableOfContents extends Component<TableOfContentsProps> {
7676
content,
7777
selected,
7878
shouldOpenInNewTab: !!section.href,
79-
initialOpen:
80-
!!this.state.searchTerm.length || this.props.tocMode !== 'collapse' || containsSelected,
79+
initialOpen: this.props.tocMode !== 'collapse' || containsSelected,
80+
forcedOpen: !!this.state.searchTerm.length,
8181
};
8282
});
8383
return {

‎src/client/rsg-components/TableOfContents/__snapshots__/TableOfContents.spec.tsx.snap

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ exports[`should filter list when search field contains a query 1`] = `
3232
Object {
3333
"components": Array [],
3434
"content": undefined,
35+
"forcedOpen": false,
3536
"heading": false,
3637
"initialOpen": true,
3738
"name": "Button",
@@ -43,6 +44,7 @@ exports[`should filter list when search field contains a query 1`] = `
4344
Object {
4445
"components": Array [],
4546
"content": undefined,
47+
"forcedOpen": false,
4648
"heading": false,
4749
"initialOpen": true,
4850
"name": "Input",
@@ -54,6 +56,7 @@ exports[`should filter list when search field contains a query 1`] = `
5456
Object {
5557
"components": Array [],
5658
"content": undefined,
59+
"forcedOpen": false,
5760
"heading": false,
5861
"initialOpen": true,
5962
"name": "Textarea",
@@ -82,6 +85,7 @@ exports[`should filter list when search field contains a query 2`] = `
8285
Object {
8386
"components": Array [],
8487
"content": undefined,
88+
"forcedOpen": true,
8589
"heading": false,
8690
"initialOpen": true,
8791
"name": "Button",
@@ -110,6 +114,7 @@ exports[`should filter section names 1`] = `
110114
Object {
111115
"components": Array [],
112116
"content": undefined,
117+
"forcedOpen": false,
113118
"heading": false,
114119
"initialOpen": true,
115120
"name": "Introduction",
@@ -135,6 +140,7 @@ exports[`should filter section names 1`] = `
135140
Array [
136141
Object {
137142
"content": undefined,
143+
"forcedOpen": false,
138144
"heading": false,
139145
"initialOpen": true,
140146
"name": "Button",
@@ -147,6 +153,7 @@ exports[`should filter section names 1`] = `
147153
useHashId={true}
148154
useRouterLinks={false}
149155
/>,
156+
"forcedOpen": false,
150157
"heading": true,
151158
"initialOpen": true,
152159
"name": "Buttons",
@@ -176,6 +183,7 @@ exports[`should filter section names 1`] = `
176183
Array [
177184
Object {
178185
"content": undefined,
186+
"forcedOpen": false,
179187
"heading": false,
180188
"initialOpen": true,
181189
"name": "Input",
@@ -185,6 +193,7 @@ exports[`should filter section names 1`] = `
185193
},
186194
Object {
187195
"content": undefined,
196+
"forcedOpen": false,
188197
"heading": false,
189198
"initialOpen": true,
190199
"name": "Textarea",
@@ -197,6 +206,7 @@ exports[`should filter section names 1`] = `
197206
useHashId={true}
198207
useRouterLinks={false}
199208
/>,
209+
"forcedOpen": false,
200210
"heading": true,
201211
"initialOpen": true,
202212
"name": "Forms",
@@ -225,6 +235,7 @@ exports[`should filter section names 2`] = `
225235
Object {
226236
"components": Array [],
227237
"content": undefined,
238+
"forcedOpen": true,
228239
"heading": false,
229240
"initialOpen": true,
230241
"name": "Forms",
@@ -253,6 +264,7 @@ exports[`should render a renderer 1`] = `
253264
Object {
254265
"components": Array [],
255266
"content": undefined,
267+
"forcedOpen": false,
256268
"heading": false,
257269
"initialOpen": true,
258270
"name": "Button",
@@ -264,6 +276,7 @@ exports[`should render a renderer 1`] = `
264276
Object {
265277
"components": Array [],
266278
"content": undefined,
279+
"forcedOpen": false,
267280
"heading": false,
268281
"initialOpen": true,
269282
"name": "Input",
@@ -275,6 +288,7 @@ exports[`should render a renderer 1`] = `
275288
Object {
276289
"components": Array [],
277290
"content": undefined,
291+
"forcedOpen": false,
278292
"heading": false,
279293
"initialOpen": true,
280294
"name": "Textarea",
@@ -303,6 +317,7 @@ exports[`should render renderer with sections with nested components 1`] = `
303317
Object {
304318
"components": Array [],
305319
"content": undefined,
320+
"forcedOpen": false,
306321
"heading": false,
307322
"initialOpen": true,
308323
"name": "Introduction",
@@ -328,6 +343,7 @@ exports[`should render renderer with sections with nested components 1`] = `
328343
Array [
329344
Object {
330345
"content": undefined,
346+
"forcedOpen": false,
331347
"heading": false,
332348
"initialOpen": true,
333349
"name": "Button",
@@ -340,6 +356,7 @@ exports[`should render renderer with sections with nested components 1`] = `
340356
useHashId={true}
341357
useRouterLinks={false}
342358
/>,
359+
"forcedOpen": false,
343360
"heading": true,
344361
"initialOpen": true,
345362
"name": "Buttons",
@@ -369,6 +386,7 @@ exports[`should render renderer with sections with nested components 1`] = `
369386
Array [
370387
Object {
371388
"content": undefined,
389+
"forcedOpen": false,
372390
"heading": false,
373391
"initialOpen": true,
374392
"name": "Input",
@@ -378,6 +396,7 @@ exports[`should render renderer with sections with nested components 1`] = `
378396
},
379397
Object {
380398
"content": undefined,
399+
"forcedOpen": false,
381400
"heading": false,
382401
"initialOpen": true,
383402
"name": "Textarea",
@@ -390,6 +409,7 @@ exports[`should render renderer with sections with nested components 1`] = `
390409
useHashId={true}
391410
useRouterLinks={false}
392411
/>,
412+
"forcedOpen": false,
393413
"heading": true,
394414
"initialOpen": true,
395415
"name": "Forms",

‎src/typings/RsgSection.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ declare namespace Rsg {
3737
shouldOpenInNewTab?: boolean;
3838
selected?: boolean;
3939
initialOpen?: boolean;
40+
forcedOpen?: boolean;
4041
content?: React.ReactNode;
4142
components?: TOCItem[];
4243
sections?: TOCItem[];

0 commit comments

Comments
 (0)