Skip to content

Commit 377e574

Browse files
mattobeeCopilot
mattobee
and
Copilot
committed
Add Storybook controls for FilteredListLayout
Mirrors PageLayout.stories with a Debug + per-region controls panel: toggle each region, tweak ViewHeader title/actions, padding/divider on Header/Pane/Content/Footer, etc. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 4cdc95f commit 377e574

1 file changed

Lines changed: 142 additions & 23 deletions

File tree

‎packages/react/src/FilteredListLayout/FilteredListLayout.stories.tsx‎

Lines changed: 142 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -4,38 +4,157 @@ import {KebabHorizontalIcon} from '@primer/octicons-react'
44
import {Placeholder} from '../Placeholder'
55
import {FilteredListLayout} from '../FilteredListLayout'
66

7-
export default {
7+
const meta: Meta = {
88
title: 'Components/FilteredListLayout',
99
parameters: {
1010
layout: 'fullscreen',
1111
controls: {expanded: true},
1212
},
13-
} as Meta<typeof FilteredListLayout>
13+
args: {
14+
'Render header?': false,
15+
'Render pane?': true,
16+
'Render view header?': true,
17+
'Render filter bar?': true,
18+
'Render footer?': false,
19+
'Header placeholder height': 64,
20+
'Pane placeholder height': 400,
21+
'Filter bar placeholder height': 48,
22+
'Results placeholder height': 552,
23+
'Footer placeholder height': 64,
24+
'ViewHeader.title': 'Assigned to you',
25+
'ViewHeader.actions': true,
26+
'Pane.position': 'start',
27+
'Pane.divider': 'line',
28+
'Pane.padding': 'normal',
29+
'Pane.sticky': true,
30+
'Header.padding': 'normal',
31+
'Header.divider': 'line',
32+
'Content.width': 'xlarge',
33+
'Content.padding': 'normal',
34+
'Footer.padding': 'normal',
35+
'Footer.divider': 'line',
36+
},
37+
argTypes: {
38+
'Render header?': {type: 'boolean', table: {category: 'Debug'}},
39+
'Render pane?': {type: 'boolean', table: {category: 'Debug'}},
40+
'Render view header?': {type: 'boolean', table: {category: 'Debug'}},
41+
'Render filter bar?': {type: 'boolean', table: {category: 'Debug'}},
42+
'Render footer?': {type: 'boolean', table: {category: 'Debug'}},
43+
'Header placeholder height': {type: 'number', table: {category: 'Debug'}},
44+
'Pane placeholder height': {type: 'number', table: {category: 'Debug'}},
45+
'Filter bar placeholder height': {type: 'number', table: {category: 'Debug'}},
46+
'Results placeholder height': {type: 'number', table: {category: 'Debug'}},
47+
'Footer placeholder height': {type: 'number', table: {category: 'Debug'}},
48+
49+
'ViewHeader.title': {
50+
type: 'string',
51+
control: {type: 'text'},
52+
table: {category: 'ViewHeader props'},
53+
},
54+
'ViewHeader.actions': {
55+
type: 'boolean',
56+
table: {category: 'ViewHeader props'},
57+
},
58+
59+
'Header.padding': {
60+
type: {name: 'enum', value: ['none', 'condensed', 'normal']},
61+
control: {type: 'radio'},
62+
table: {category: 'Header props'},
63+
},
64+
'Header.divider': {
65+
type: {name: 'enum', value: ['none', 'line']},
66+
control: {type: 'radio'},
67+
table: {category: 'Header props'},
68+
},
69+
70+
'Pane.position': {
71+
type: {name: 'enum', value: ['start', 'end']},
72+
control: {type: 'radio'},
73+
table: {category: 'Pane props'},
74+
},
75+
'Pane.divider': {
76+
type: {name: 'enum', value: ['none', 'line']},
77+
control: {type: 'radio'},
78+
table: {category: 'Pane props'},
79+
},
80+
'Pane.padding': {
81+
type: {name: 'enum', value: ['none', 'condensed', 'normal']},
82+
control: {type: 'radio'},
83+
table: {category: 'Pane props'},
84+
},
85+
'Pane.sticky': {type: 'boolean', table: {category: 'Pane props'}},
1486

15-
export const Default: StoryFn = () => (
87+
'Content.width': {
88+
type: {name: 'enum', value: ['full', 'medium', 'large', 'xlarge']},
89+
control: {type: 'radio'},
90+
table: {category: 'Content props'},
91+
},
92+
'Content.padding': {
93+
type: {name: 'enum', value: ['none', 'condensed', 'normal']},
94+
control: {type: 'radio'},
95+
table: {category: 'Content props'},
96+
},
97+
98+
'Footer.padding': {
99+
type: {name: 'enum', value: ['none', 'condensed', 'normal']},
100+
control: {type: 'radio'},
101+
table: {category: 'Footer props'},
102+
},
103+
'Footer.divider': {
104+
type: {name: 'enum', value: ['none', 'line']},
105+
control: {type: 'radio'},
106+
table: {category: 'Footer props'},
107+
},
108+
},
109+
}
110+
111+
export const Default: StoryFn = args => (
16112
<FilteredListLayout>
17-
<FilteredListLayout.Header>
18-
<Placeholder label="Header" height={64} />
19-
</FilteredListLayout.Header>
20-
<FilteredListLayout.Pane position="start" aria-label="Sidebar">
21-
<Placeholder label="Pane" height={400} />
22-
</FilteredListLayout.Pane>
23-
<FilteredListLayout.Content>
24-
<FilteredListLayout.ViewHeader
25-
title="Assigned to you"
26-
actions={
27-
<>
28-
<Button variant="primary">New issue</Button>
29-
<IconButton icon={KebabHorizontalIcon} aria-label="More options" />
30-
</>
31-
}
32-
/>
33-
<FilteredListLayout.FilterBar aria-label="Filters">
34-
<Placeholder label="Filter bar" height={48} />
35-
</FilteredListLayout.FilterBar>
113+
{args['Render header?'] ? (
114+
<FilteredListLayout.Header padding={args['Header.padding']} divider={args['Header.divider']}>
115+
<Placeholder label="Header" height={args['Header placeholder height']} />
116+
</FilteredListLayout.Header>
117+
) : null}
118+
{args['Render pane?'] ? (
119+
<FilteredListLayout.Pane
120+
position={args['Pane.position']}
121+
divider={args['Pane.divider']}
122+
padding={args['Pane.padding']}
123+
sticky={args['Pane.sticky']}
124+
aria-label="Sidebar"
125+
>
126+
<Placeholder label="Pane" height={args['Pane placeholder height']} />
127+
</FilteredListLayout.Pane>
128+
) : null}
129+
<FilteredListLayout.Content width={args['Content.width']} padding={args['Content.padding']}>
130+
{args['Render view header?'] ? (
131+
<FilteredListLayout.ViewHeader
132+
title={args['ViewHeader.title']}
133+
actions={
134+
args['ViewHeader.actions'] ? (
135+
<>
136+
<Button variant="primary">New issue</Button>
137+
<IconButton icon={KebabHorizontalIcon} aria-label="More options" />
138+
</>
139+
) : undefined
140+
}
141+
/>
142+
) : null}
143+
{args['Render filter bar?'] ? (
144+
<FilteredListLayout.FilterBar aria-label="Filters">
145+
<Placeholder label="Filter bar" height={args['Filter bar placeholder height']} />
146+
</FilteredListLayout.FilterBar>
147+
) : null}
36148
<FilteredListLayout.Results aria-label="Results">
37-
<Placeholder label="Content" height={552} />
149+
<Placeholder label="Content" height={args['Results placeholder height']} />
38150
</FilteredListLayout.Results>
39151
</FilteredListLayout.Content>
152+
{args['Render footer?'] ? (
153+
<FilteredListLayout.Footer padding={args['Footer.padding']} divider={args['Footer.divider']}>
154+
<Placeholder label="Footer" height={args['Footer placeholder height']} />
155+
</FilteredListLayout.Footer>
156+
) : null}
40157
</FilteredListLayout>
41158
)
159+
160+
export default meta

0 commit comments

Comments
 (0)