Skip to content

Commit 0b463b4

Browse files
rkaraivanovrkaraivanov
authored
chore: Enhance stories with new features and improvements (#2147)
1 parent 9bceaef commit 0b463b4

16 files changed

Lines changed: 1804 additions & 415 deletions

‎stories/icon.stories.ts‎

Lines changed: 302 additions & 101 deletions
Large diffs are not rendered by default.

‎stories/input.stories.ts‎

Lines changed: 91 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
IgcIconComponent,
88
IgcInputComponent,
99
defineComponents,
10-
registerIcon,
1110
registerIconFromText,
1211
} from 'igniteui-webcomponents';
1312
import {
@@ -18,9 +17,9 @@ import {
1817

1918
defineComponents(IgcInputComponent, IgcIconComponent);
2019
registerIconFromText(github.name, github.value);
21-
registerIcon(
20+
registerIconFromText(
2221
'search',
23-
'https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_search_24px.svg'
22+
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>`
2423
);
2524

2625
// region default
@@ -216,6 +215,14 @@ export const Basic: Story = {
216215
args: {
217216
label: 'Default input',
218217
},
218+
parameters: {
219+
docs: {
220+
description: {
221+
story:
222+
'A fully interactive input with all available controls wired up. Use the **Controls** panel to explore different types, validation constraints, and visual states.',
223+
},
224+
},
225+
},
219226
render: (args) => html`
220227
<igc-input
221228
autocomplete=${ifDefined(args.autocomplete)}
@@ -240,10 +247,74 @@ export const Basic: Story = {
240247
`,
241248
};
242249

250+
export const Types: Story = {
251+
argTypes: disableStoryControls(metadata),
252+
parameters: {
253+
docs: {
254+
description: {
255+
story:
256+
'Demonstrates all supported `type` values: `text`, `email`, `number`, `password`, `search`, `tel`, and `url`.',
257+
},
258+
},
259+
},
260+
render: () => html`
261+
<style>
262+
.types-grid {
263+
display: grid;
264+
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
265+
gap: 1.5rem;
266+
align-items: start;
267+
}
268+
</style>
269+
<div class="types-grid">
270+
<igc-input type="text" label="Text" placeholder="Enter text"></igc-input>
271+
<igc-input
272+
type="email"
273+
label="Email"
274+
placeholder="name@example.com"
275+
></igc-input>
276+
<igc-input
277+
type="number"
278+
label="Number"
279+
placeholder="0"
280+
min="0"
281+
max="100"
282+
step="1"
283+
></igc-input>
284+
<igc-input
285+
type="password"
286+
label="Password"
287+
placeholder="••••••••"
288+
></igc-input>
289+
<igc-input type="search" label="Search" placeholder="Search…">
290+
<igc-icon name="search" slot="prefix"></igc-icon>
291+
</igc-input>
292+
<igc-input
293+
type="tel"
294+
label="Tel"
295+
placeholder="+1 (555) 000-0000"
296+
></igc-input>
297+
<igc-input
298+
type="url"
299+
label="URL"
300+
placeholder="https://example.com"
301+
></igc-input>
302+
</div>
303+
`,
304+
};
305+
243306
export const Slots: Story = {
244307
args: {
245308
label: 'Input with slots',
246309
},
310+
parameters: {
311+
docs: {
312+
description: {
313+
story:
314+
'Demonstrates the available content slots: `prefix` and `suffix` for inline decorations, and `helper-text` for guidance below the input.',
315+
},
316+
},
317+
},
247318
render: (args) => html`
248319
<igc-input
249320
autocomplete=${ifDefined(args.autocomplete)}
@@ -274,6 +345,14 @@ export const Slots: Story = {
274345

275346
export const Validation: Story = {
276347
argTypes: disableStoryControls(metadata),
348+
parameters: {
349+
docs: {
350+
description: {
351+
story:
352+
'Showcases built-in constraint validation with custom slot-based error messages. Submit the form to trigger validation feedback for `required`, `type`, `pattern`, `minlength`, and `too-short` constraints.',
353+
},
354+
},
355+
},
277356
render: () => html`
278357
<style>
279358
fieldset {
@@ -344,6 +423,14 @@ export const Validation: Story = {
344423

345424
export const Form: Story = {
346425
argTypes: disableStoryControls(metadata),
426+
parameters: {
427+
docs: {
428+
description: {
429+
story:
430+
'Comprehensive form integration demo covering readonly, disabled, required, min/max length, numeric min/max, `validate-only`, pattern, email, and URL validators.',
431+
},
432+
},
433+
},
347434
render: () => {
348435
return html`
349436
<style>
@@ -353,7 +440,7 @@ export const Form: Story = {
353440
</style>
354441
<form action="" @submit=${formSubmitHandler}>
355442
<fieldset>
356-
<igc-input name="input" label="Default" label="Username">
443+
<igc-input name="input" label="Username">
357444
<p slot="helper-text">
358445
Default state with no initial value and no validation.
359446
</p>

‎stories/navbar.stories.ts‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,23 +36,11 @@ const metadata: Meta<IgcNavbarComponent> = {
3636
},
3737
},
3838
},
39-
argTypes: {
40-
content: {
41-
type: 'string',
42-
description: 'Text content rendered in the default (title) slot.',
43-
control: 'text',
44-
},
45-
},
46-
args: { content: 'Application Title' },
4739
};
4840

4941
export default metadata;
5042

51-
interface IgcNavbarArgs {
52-
/** Text content rendered in the default (title) slot. */
53-
content: string;
54-
}
55-
type Story = StoryObj<IgcNavbarArgs>;
43+
type Story = StoryObj;
5644

5745
// endregion
5846

‎stories/radio-group.stories.ts‎

Lines changed: 92 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,17 @@ import { html } from 'lit';
33
import { ifDefined } from 'lit/directives/if-defined.js';
44

55
import {
6+
IgcRadioComponent,
67
IgcRadioGroupComponent,
78
defineComponents,
89
} from 'igniteui-webcomponents';
9-
import { formControls, formSubmitHandler } from './story.js';
10+
import {
11+
disableStoryControls,
12+
formControls,
13+
formSubmitHandler,
14+
} from './story.js';
1015

11-
defineComponents(IgcRadioGroupComponent);
16+
defineComponents(IgcRadioGroupComponent, IgcRadioComponent);
1217

1318
// region default
1419
const metadata: Meta<IgcRadioGroupComponent> = {
@@ -59,12 +64,6 @@ type Story = StoryObj<IgcRadioGroupArgs>;
5964

6065
// endregion
6166

62-
Object.assign(metadata.parameters!, {
63-
actions: {
64-
handles: ['igcChange'],
65-
},
66-
});
67-
6867
const radios = ['apple', 'orange', 'mango', 'banana'];
6968
const titleCase = (s: string) => s.replace(/^\w/, (c) => c.toUpperCase());
7069

@@ -73,15 +72,20 @@ export const Default: Story = {
7372
name: 'default-state',
7473
value: 'mango',
7574
},
75+
parameters: {
76+
docs: {
77+
description: {
78+
story:
79+
'A basic radio group with a pre-selected value set via the `value` attribute. Use the **Controls** panel to change the selected value or switch alignment.',
80+
},
81+
},
82+
},
7683
render: (args) => html`
7784
<igc-radio-group
7885
alignment=${ifDefined(args.alignment)}
7986
name=${ifDefined(args.name)}
8087
value=${ifDefined(args.value)}
81-
aria-labelledby="radio-group-label"
82-
role="radiogroup"
8388
>
84-
<label id="radio-group-label">Radio Group Label</label>
8589
<igc-radio value="apple">Apple</igc-radio>
8690
<igc-radio value="orange">Orange</igc-radio>
8791
<igc-radio value="mango">Mango</igc-radio>
@@ -90,58 +94,118 @@ export const Default: Story = {
9094
`,
9195
};
9296

97+
export const Alignment: Story = {
98+
argTypes: disableStoryControls(metadata),
99+
parameters: {
100+
docs: {
101+
description: {
102+
story:
103+
'Demonstrates the two `alignment` values — `vertical` (default) and `horizontal` — side by side.',
104+
},
105+
},
106+
},
107+
render: () => html`
108+
<style>
109+
.alignment-demo {
110+
display: flex;
111+
gap: 3rem;
112+
flex-wrap: wrap;
113+
align-items: flex-start;
114+
}
115+
116+
.alignment-demo > div {
117+
display: flex;
118+
flex-direction: column;
119+
gap: 0.5rem;
120+
}
121+
122+
.alignment-demo label {
123+
font-size: 0.875rem;
124+
font-weight: 600;
125+
color: var(--ig-gray-700);
126+
}
127+
</style>
128+
<div class="alignment-demo">
129+
<div>
130+
<label>Vertical (default)</label>
131+
<igc-radio-group name="align-v" value="orange">
132+
<igc-radio value="apple">Apple</igc-radio>
133+
<igc-radio value="orange">Orange</igc-radio>
134+
<igc-radio value="mango">Mango</igc-radio>
135+
<igc-radio value="banana">Banana</igc-radio>
136+
</igc-radio-group>
137+
</div>
138+
<div>
139+
<label>Horizontal</label>
140+
<igc-radio-group alignment="horizontal" name="align-h" value="mango">
141+
<igc-radio value="apple">Apple</igc-radio>
142+
<igc-radio value="orange">Orange</igc-radio>
143+
<igc-radio value="mango">Mango</igc-radio>
144+
<igc-radio value="banana">Banana</igc-radio>
145+
</igc-radio-group>
146+
</div>
147+
</div>
148+
`,
149+
};
150+
93151
export const Form: Story = {
94-
render: (args) => {
152+
argTypes: disableStoryControls(metadata),
153+
parameters: {
154+
docs: {
155+
description: {
156+
story:
157+
'Form integration demo covering default state, pre-selected value, disabled fieldset, and required validation with a custom `value-missing` slot message.',
158+
},
159+
},
160+
},
161+
render: () => {
95162
return html`
96163
<form action="" @submit=${formSubmitHandler}>
97164
<fieldset>
98165
<legend>Default</legend>
99-
<igc-radio-group alignment=${ifDefined(args.alignment)}>
166+
<igc-radio-group>
100167
${radios.map(
101168
(e) =>
102-
html`<igc-radio name="default-fruit" value=${e}
103-
>${titleCase(e)}</igc-radio
104-
>`
169+
html`<igc-radio name="default-fruit" value=${e}>
170+
${titleCase(e)}
171+
</igc-radio>`
105172
)}
106173
</igc-radio-group>
107174
</fieldset>
108175
109176
<fieldset>
110177
<legend>Initial value</legend>
111-
<igc-radio-group alignment=${ifDefined(args.alignment)}>
178+
<igc-radio-group name="initial-fruit" value="mango">
112179
${radios.map(
113-
(e) =>
114-
html`<igc-radio name="initial-fruit" checked value=${e}
115-
>${titleCase(e)}</igc-radio
116-
>`
180+
(e) => html`<igc-radio value=${e}>${titleCase(e)}</igc-radio>`
117181
)}
118182
</igc-radio-group>
119183
</fieldset>
120184
121185
<fieldset disabled>
122186
<legend>Disabled</legend>
123-
<igc-radio-group alignment=${ifDefined(args.alignment)}>
187+
<igc-radio-group>
124188
${radios.map(
125189
(e) =>
126-
html`<igc-radio name="default-fruit" value=${e}
127-
>${titleCase(e)}</igc-radio
128-
>`
190+
html`<igc-radio name="disabled-fruit" value=${e}>
191+
${titleCase(e)}
192+
</igc-radio>`
129193
)}
130194
</igc-radio-group>
131195
</fieldset>
132196
133197
<fieldset>
134198
<legend>Required</legend>
135-
<igc-radio-group alignment=${ifDefined(args.alignment)}>
199+
<igc-radio-group>
136200
${radios.map(
137201
(e) => html`
138202
<igc-radio name="required-fruit" required value=${e}>
139203
${titleCase(e)}
140204
</igc-radio>
141205
`
142206
)}
143-
<igc-radio name="required-fruit" value="tomato"
144-
>Tomato
207+
<igc-radio name="required-fruit" value="tomato">
208+
Tomato
145209
<div slot="value-missing">Please select a value!</div>
146210
</igc-radio>
147211
</igc-radio-group>

0 commit comments

Comments
 (0)