Skip to content

Commit 2d71f62

Browse files
rkaraivanovrkaraivanov
authored
chore: Enhance stories with new features and improvements (#2138)
1 parent 77281eb commit 2d71f62

7 files changed

Lines changed: 1563 additions & 266 deletions

File tree

‎stories/accordion.stories.ts‎

Lines changed: 243 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,30 @@ import { range } from 'lit/directives/range.js';
44

55
import {
66
IgcAccordionComponent,
7+
IgcButtonComponent,
8+
IgcIconComponent,
79
IgcInputComponent,
810
defineComponents,
11+
registerIconFromText,
912
} from 'igniteui-webcomponents';
13+
import { disableStoryControls } from './story.js';
1014

11-
defineComponents(IgcAccordionComponent, IgcInputComponent);
15+
defineComponents(
16+
IgcAccordionComponent,
17+
IgcButtonComponent,
18+
IgcIconComponent,
19+
IgcInputComponent
20+
);
21+
22+
registerIconFromText(
23+
'chevron-down',
24+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`
25+
);
26+
27+
registerIconFromText(
28+
'chevron-up',
29+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="18 15 12 9 6 15"></polyline></svg>`
30+
);
1231

1332
// region default
1433
const metadata: Meta<IgcAccordionComponent> = {
@@ -43,52 +62,242 @@ type Story = StoryObj<IgcAccordionArgs>;
4362

4463
// endregion
4564

46-
Object.assign(metadata.parameters!, {
47-
actions: {
48-
handles: ['igcOpening', 'igcOpened', 'igcClosing', 'igcClosed'],
49-
},
50-
});
65+
const loremShort =
66+
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi adipisci, ratione ut praesentium qui similique molestiae voluptate at excepturi.';
67+
68+
const loremLong =
69+
'Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum quia placeat natus illo voluptatum, praesentium similique excepturi corporis sequi at earum labore provident asperiores dolorem fugit explicabo ipsa distinctio doloremque?';
5170

5271
export const Default: Story = {
5372
render: (args) => html`
5473
<igc-accordion ?single-expand=${args.singleExpand}>
5574
${Array.from(range(1, 4)).map(
5675
(i) =>
57-
html` <igc-expansion-panel>
58-
<h1 slot="title">Title ${i}</h1>
59-
<h2 slot="subtitle">Subtitle ${i}</h2>
60-
<p>
61-
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi
62-
adipisci, ratione ut praesentium qui, similique molestiae
63-
voluptate at excepturi, a animi quam blanditiis. Tenetur tempore
64-
explicabo blanditiis harum ut delectus!
65-
</p>
76+
html`<igc-expansion-panel>
77+
<span slot="title">Panel ${i}</span>
78+
<span slot="subtitle">Subtitle ${i}</span>
79+
<p>${loremShort}</p>
80+
</igc-expansion-panel>`
81+
)}
82+
</igc-accordion>
83+
`,
84+
};
85+
86+
export const SingleExpand: Story = {
87+
argTypes: disableStoryControls(metadata),
88+
render: () => html`
89+
<p>
90+
Only one panel can be open at a time. Opening another panel closes the
91+
current one.
92+
</p>
93+
<igc-accordion single-expand>
94+
<igc-expansion-panel open>
95+
<span slot="title">Getting Started</span>
96+
<span slot="subtitle">Installation and setup</span>
97+
<p>${loremShort}</p>
98+
</igc-expansion-panel>
99+
<igc-expansion-panel>
100+
<span slot="title">Configuration</span>
101+
<span slot="subtitle">Customize your instance</span>
102+
<p>${loremLong}</p>
103+
</igc-expansion-panel>
104+
<igc-expansion-panel>
105+
<span slot="title">Advanced Usage</span>
106+
<span slot="subtitle">Tips and tricks</span>
107+
<p>${loremShort}</p>
108+
</igc-expansion-panel>
109+
<igc-expansion-panel>
110+
<span slot="title">FAQ</span>
111+
<span slot="subtitle">Frequently asked questions</span>
112+
<p>${loremLong}</p>
113+
</igc-expansion-panel>
114+
</igc-accordion>
115+
`,
116+
};
117+
118+
export const DisabledPanels: Story = {
119+
argTypes: disableStoryControls(metadata),
120+
render: () => html`
121+
<p>
122+
Disabled panels are skipped during keyboard navigation and cannot be
123+
toggled.
124+
</p>
125+
<igc-accordion>
126+
<igc-expansion-panel open>
127+
<span slot="title">Active Panel</span>
128+
<span slot="subtitle">This panel is interactive</span>
129+
<p>${loremShort}</p>
130+
</igc-expansion-panel>
131+
<igc-expansion-panel disabled>
132+
<span slot="title">Disabled Panel</span>
133+
<span slot="subtitle">This panel cannot be toggled</span>
134+
<p>${loremShort}</p>
135+
</igc-expansion-panel>
136+
<igc-expansion-panel>
137+
<span slot="title">Another Active Panel</span>
138+
<span slot="subtitle">This panel is interactive</span>
139+
<p>${loremShort}</p>
140+
</igc-expansion-panel>
141+
<igc-expansion-panel disabled open>
142+
<span slot="title">Disabled &amp; Open Panel</span>
143+
<span slot="subtitle">Visible but cannot be closed by the user</span>
144+
<p>${loremShort}</p>
145+
</igc-expansion-panel>
146+
</igc-accordion>
147+
`,
148+
};
149+
150+
export const IndicatorPosition: Story = {
151+
argTypes: disableStoryControls(metadata),
152+
render: () => html`
153+
<h4 style="margin-bottom: .5rem">Indicator at start (default)</h4>
154+
<igc-accordion>
155+
<igc-expansion-panel indicator-position="start">
156+
<span slot="title">Start Position</span>
157+
<span slot="subtitle"
158+
>The expand indicator is placed before the title</span
159+
>
160+
<p>${loremShort}</p>
161+
</igc-expansion-panel>
162+
</igc-accordion>
163+
164+
<h4 style="margin: 1rem 0 .5rem">Indicator at end</h4>
165+
<igc-accordion>
166+
<igc-expansion-panel indicator-position="end">
167+
<span slot="title">End Position</span>
168+
<span slot="subtitle"
169+
>The expand indicator is placed after the title</span
170+
>
171+
<p>${loremShort}</p>
172+
</igc-expansion-panel>
173+
</igc-accordion>
174+
175+
<h4 style="margin: 1rem 0 .5rem">Indicator hidden (none)</h4>
176+
<igc-accordion>
177+
<igc-expansion-panel indicator-position="none">
178+
<span slot="title">No Indicator</span>
179+
<span slot="subtitle">The expand/collapse indicator is hidden</span>
180+
<p>${loremShort}</p>
181+
</igc-expansion-panel>
182+
</igc-accordion>
183+
`,
184+
};
185+
186+
export const CustomIndicator: Story = {
187+
argTypes: disableStoryControls(metadata),
188+
render: () => html`
189+
<p>
190+
Use the <code>indicator</code> and <code>indicator-expanded</code> slots
191+
for custom icons.
192+
</p>
193+
<igc-accordion>
194+
<igc-expansion-panel>
195+
<span slot="title">Custom chevron icons</span>
196+
<span slot="subtitle"
197+
>Using the indicator and indicator-expanded slots</span
198+
>
199+
<igc-icon
200+
slot="indicator"
201+
name="chevron-down"
202+
collection="default"
203+
></igc-icon>
204+
<igc-icon
205+
slot="indicator-expanded"
206+
name="chevron-up"
207+
collection="default"
208+
></igc-icon>
209+
<p>${loremShort}</p>
210+
</igc-expansion-panel>
211+
<igc-expansion-panel>
212+
<span slot="title">Custom emoji indicators</span>
213+
<span slot="subtitle">Any content can be used as an indicator</span>
214+
<span slot="indicator" style="font-size: 1.2rem">➕</span>
215+
<span slot="indicator-expanded" style="font-size: 1.2rem">➖</span>
216+
<p>${loremLong}</p>
217+
</igc-expansion-panel>
218+
<igc-expansion-panel indicator-position="end">
219+
<span slot="title">Indicator at end with custom icon</span>
220+
<span slot="subtitle"
221+
>Combining indicator-position="end" with a custom slot</span
222+
>
223+
<igc-icon
224+
slot="indicator"
225+
name="chevron-down"
226+
collection="default"
227+
></igc-icon>
228+
<igc-icon
229+
slot="indicator-expanded"
230+
name="chevron-up"
231+
collection="default"
232+
></igc-icon>
233+
<p>${loremShort}</p>
234+
</igc-expansion-panel>
235+
</igc-accordion>
236+
`,
237+
};
238+
239+
export const ProgrammaticControl: Story = {
240+
argTypes: disableStoryControls(metadata),
241+
render: () => {
242+
const showAll = () => {
243+
document
244+
.querySelector<IgcAccordionComponent>('#ctrl-accordion')
245+
?.showAll();
246+
};
247+
248+
const hideAll = () => {
249+
document
250+
.querySelector<IgcAccordionComponent>('#ctrl-accordion')
251+
?.hideAll();
252+
};
253+
254+
return html`
255+
<div style="display: flex; gap: .5rem; margin-bottom: 1rem">
256+
<igc-button @click=${showAll}>Expand All</igc-button>
257+
<igc-button @click=${hideAll}>Collapse All</igc-button>
258+
</div>
259+
<igc-accordion id="ctrl-accordion">
260+
${Array.from(range(1, 5)).map(
261+
(i) =>
262+
html`<igc-expansion-panel>
263+
<span slot="title">Section ${i}</span>
264+
<span slot="subtitle">Programmatically controlled</span>
265+
<p>${loremShort}</p>
266+
</igc-expansion-panel>`
267+
)}
268+
</igc-accordion>
269+
`;
270+
},
271+
};
272+
273+
export const NestedAccordions: Story = {
274+
render: (args) => html`
275+
<igc-accordion ?single-expand=${args.singleExpand}>
276+
${Array.from(range(1, 3)).map(
277+
(i) =>
278+
html`<igc-expansion-panel>
279+
<span slot="title">Top-level Panel ${i}</span>
280+
<span slot="subtitle">Click to expand</span>
281+
<p>${loremShort}</p>
66282
</igc-expansion-panel>`
67283
)}
68284
<igc-expansion-panel>
69-
<h1 slot="title">Title 4</h1>
70-
<h2 slot="subtitle">Subtitle 4</h2>
285+
<span slot="title">Panel with nested accordion</span>
286+
<span slot="subtitle">Contains its own independent accordion</span>
71287
<igc-accordion>
72288
<igc-expansion-panel>
73-
<h1 slot="title">Title 4.1 title</h1>
74-
<h2 slot="subtitle">Subtitle 4.1 subtitle</h2>
75-
<p>
76-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum quia
77-
placeat natus illo voluptatum, praesentium similique excepturi
78-
corporis sequi at earum labore provident asperiores dolorem fugit
79-
explicabo ipsa distinctio doloremque?
80-
</p>
289+
<span slot="title">Nested Panel 1</span>
290+
<span slot="subtitle">Inner accordion item</span>
291+
<p>${loremShort}</p>
81292
</igc-expansion-panel>
82293
<igc-expansion-panel>
83-
<h1 slot="title">Title 4.2</h1>
84-
<h2 slot="subtitle">Subtitle 4.2</h2>
85-
<igc-input placeholder="Your feedback"></igc-input>
86-
<p>
87-
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
88-
Similique modi, cumque consequuntur omnis quis odio id facere
89-
placeat amet velit quos natus ipsam quasi, consequatur qui impedit
90-
ullam officiis earum.
91-
</p>
294+
<span slot="title">Nested Panel 2</span>
295+
<span slot="subtitle">Inner accordion item with input</span>
296+
<igc-input
297+
placeholder="Your feedback"
298+
style="margin-bottom: .5rem"
299+
></igc-input>
300+
<p>${loremLong}</p>
92301
</igc-expansion-panel>
93302
</igc-accordion>
94303
</igc-expansion-panel>

0 commit comments

Comments
 (0)