Skip to content

Commit c3b23ee

Browse files
dev-ignisdev-ignis
committed
docs: - stories;
1 parent 6c967d6 commit c3b23ee

6 files changed

Lines changed: 92 additions & 90 deletions

File tree

‎src/components/molecules/dropdown/dropdown.stories.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -334,7 +334,7 @@ export const InteractiveDemo: Story = {
334334
const target = e.target as any;
335335
const info = target.nextElementSibling;
336336
if (info) {
337-
info.textContent = \`Selected: \${e.detail.item.label}\`;
337+
info.textContent = `Selected: ${e.detail.item.label}`;
338338
}
339339
}}"
340340
></forge-dropdown>
@@ -356,7 +356,7 @@ export const InteractiveDemo: Story = {
356356
const target = e.target as any;
357357
const info = target.nextElementSibling;
358358
if (info) {
359-
info.textContent = \`Selected: \${e.detail.selected.length} items\`;
359+
info.textContent = `Selected: ${e.detail.selected.length} items`;
360360
}
361361
}}"
362362
></forge-dropdown>
@@ -376,7 +376,7 @@ export const InteractiveDemo: Story = {
376376
const target = e.target as any;
377377
const info = target.nextElementSibling;
378378
if (info) {
379-
info.textContent = \`Selected: \${e.detail.item.label}\`;
379+
info.textContent = `Selected: ${e.detail.item.label}`;
380380
}
381381
}}"
382382
></forge-dropdown>

‎src/components/molecules/form-field/form-field.stories.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -518,12 +518,12 @@ export const InteractiveDemo: Story = {
518518
field.helpText = '';
519519
} else if (remaining <= 10) {
520520
field.validationState = 'warning';
521-
field.warningMessage = \`\${remaining} characters remaining\`;
521+
field.warningMessage = `${remaining} characters remaining`;
522522
field.errorMessage = '';
523523
field.helpText = '';
524524
} else {
525525
field.validationState = 'default';
526-
field.helpText = \`\${remaining} characters remaining\`;
526+
field.helpText = `${remaining} characters remaining`;
527527
field.warningMessage = '';
528528
field.errorMessage = '';
529529
}

‎src/components/molecules/modal/modal.stories.ts‎

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -104,24 +104,24 @@ export const Default: Story = {
104104
export const Sizes: Story = {
105105
render: () => html`
106106
<div style="display: flex; gap: 16px; flex-wrap: wrap;">
107-
<forge-button @click="${() => document.getElementById('small-modal')?.show()}">
107+
<forge-button @click="${() => ((document.getElementById('small-modal') as any)?.show())}">
108108
Small Modal
109109
</forge-button>
110-
<forge-button @click="${() => document.getElementById('medium-modal')?.show()}">
110+
<forge-button @click="${() => ((document.getElementById('medium-modal') as any)?.show())}">
111111
Medium Modal
112112
</forge-button>
113-
<forge-button @click="${() => document.getElementById('large-modal')?.show()}">
113+
<forge-button @click="${() => ((document.getElementById('large-modal') as any)?.show())}">
114114
Large Modal
115115
</forge-button>
116-
<forge-button @click="${() => document.getElementById('full-modal')?.show()}">
116+
<forge-button @click="${() => ((document.getElementById('full-modal') as any)?.show())}">
117117
Full Screen Modal
118118
</forge-button>
119119
</div>
120120
121121
<forge-modal id="small-modal" size="small" title="Small Modal">
122122
<p>This is a small modal, perfect for simple confirmations or brief messages.</p>
123123
<div slot="footer">
124-
<forge-button @click="${() => document.getElementById('small-modal')?.close()}">
124+
<forge-button @click="${() => ((document.getElementById('small-modal') as any)?.close())}">
125125
Close
126126
</forge-button>
127127
</div>
@@ -131,7 +131,7 @@ export const Sizes: Story = {
131131
<p>This is a medium modal, good for forms and moderate amounts of content.</p>
132132
<p>It provides a balanced size that works well for most use cases.</p>
133133
<div slot="footer">
134-
<forge-button @click="${() => document.getElementById('medium-modal')?.close()}">
134+
<forge-button @click="${() => ((document.getElementById('medium-modal') as any)?.close())}">
135135
Close
136136
</forge-button>
137137
</div>
@@ -147,7 +147,7 @@ export const Sizes: Story = {
147147
<p>Content for the second section goes here.</p>
148148
</div>
149149
<div slot="footer">
150-
<forge-button @click="${() => document.getElementById('large-modal')?.close()}">
150+
<forge-button @click="${() => ((document.getElementById('large-modal') as any)?.close())}">
151151
Close
152152
</forge-button>
153153
</div>
@@ -167,7 +167,7 @@ export const Sizes: Story = {
167167
</ul>
168168
</div>
169169
<div slot="footer">
170-
<forge-button @click="${() => document.getElementById('full-modal')?.close()}">
170+
<forge-button @click="${() => ((document.getElementById('full-modal') as any)?.close())}">
171171
Close
172172
</forge-button>
173173
</div>
@@ -177,7 +177,7 @@ export const Sizes: Story = {
177177

178178
export const CustomHeader: Story = {
179179
render: () => html`
180-
<forge-button @click="${() => document.getElementById('custom-header-modal')?.show()}">
180+
<forge-button @click="${() => ((document.getElementById('custom-header-modal') as any)?.show())}">
181181
Open Custom Header Modal
182182
</forge-button>
183183
@@ -196,7 +196,7 @@ export const CustomHeader: Story = {
196196
<p>The header slot gives you complete control over the header content and layout.</p>
197197
198198
<div slot="footer">
199-
<forge-button @click="${() => document.getElementById('custom-header-modal')?.close()}">
199+
<forge-button @click="${() => ((document.getElementById('custom-header-modal') as any)?.close())}">
200200
Close
201201
</forge-button>
202202
</div>
@@ -207,10 +207,10 @@ export const CustomHeader: Story = {
207207
export const ScrollingContent: Story = {
208208
render: () => html`
209209
<div style="display: flex; gap: 16px;">
210-
<forge-button @click="${() => document.getElementById('scroll-body-modal')?.show()}">
210+
<forge-button @click="${() => ((document.getElementById('scroll-body-modal') as any)?.show())}">
211211
Body Scroll
212212
</forge-button>
213-
<forge-button @click="${() => document.getElementById('scroll-entire-modal')?.show()}">
213+
<forge-button @click="${() => ((document.getElementById('scroll-entire-modal') as any)?.show())}">
214214
Entire Scroll
215215
</forge-button>
216216
</div>
@@ -229,7 +229,7 @@ export const ScrollingContent: Story = {
229229
</div>
230230
231231
<div slot="footer">
232-
<forge-button @click="${() => document.getElementById('scroll-body-modal')?.close()}">
232+
<forge-button @click="${() => ((document.getElementById('scroll-body-modal') as any)?.close())}">
233233
Close
234234
</forge-button>
235235
</div>
@@ -249,7 +249,7 @@ export const ScrollingContent: Story = {
249249
</div>
250250
251251
<div slot="footer">
252-
<forge-button @click="${() => document.getElementById('scroll-entire-modal')?.close()}">
252+
<forge-button @click="${() => ((document.getElementById('scroll-entire-modal') as any)?.close())}">
253253
Close
254254
</forge-button>
255255
</div>
@@ -259,7 +259,7 @@ export const ScrollingContent: Story = {
259259

260260
export const FormModal: Story = {
261261
render: () => html`
262-
<forge-button @click="${() => document.getElementById('form-modal')?.show()}">
262+
<forge-button @click="${() => ((document.getElementById('form-modal') as any)?.show())}">
263263
Open Form Modal
264264
</forge-button>
265265
@@ -268,7 +268,7 @@ export const FormModal: Story = {
268268
e.preventDefault();
269269
const formData = new FormData(e.target as HTMLFormElement);
270270
console.log('Form data:', Object.fromEntries(formData.entries()));
271-
document.getElementById('form-modal')?.close();
271+
((document.getElementById('form-modal') as any)?.close());
272272
}}">
273273
<div style="display: flex; flex-direction: column; gap: 16px;">
274274
<forge-form-field
@@ -307,7 +307,7 @@ export const FormModal: Story = {
307307
<forge-button
308308
type="button"
309309
variant="secondary"
310-
@click="${() => document.getElementById('form-modal')?.close()}"
310+
@click="${() => ((document.getElementById('form-modal') as any)?.close())}"
311311
>
312312
Cancel
313313
</forge-button>
@@ -324,7 +324,7 @@ export const ConfirmationModal: Story = {
324324
render: () => html`
325325
<forge-button
326326
variant="danger"
327-
@click="${() => document.getElementById('confirm-modal')?.show()}"
327+
@click="${() => ((document.getElementById('confirm-modal') as any)?.show())}"
328328
>
329329
Delete Item
330330
</forge-button>
@@ -343,15 +343,15 @@ export const ConfirmationModal: Story = {
343343
<div slot="footer" style="display: flex; gap: 12px; justify-content: center;">
344344
<forge-button
345345
variant="secondary"
346-
@click="${() => document.getElementById('confirm-modal')?.close()}"
346+
@click="${() => ((document.getElementById('confirm-modal') as any)?.close())}"
347347
>
348348
Cancel
349349
</forge-button>
350350
<forge-button
351351
variant="danger"
352352
@click="${() => {
353353
console.log('Item deleted');
354-
document.getElementById('confirm-modal')?.close();
354+
((document.getElementById('confirm-modal') as any)?.close());
355355
}}"
356356
>
357357
Delete
@@ -364,21 +364,21 @@ export const ConfirmationModal: Story = {
364364
export const AnimationVariants: Story = {
365365
render: () => html`
366366
<div style="display: flex; gap: 16px; flex-wrap: wrap;">
367-
<forge-button @click="${() => document.getElementById('fade-modal')?.show()}">
367+
<forge-button @click="${() => ((document.getElementById('fade-modal') as any)?.show())}">
368368
Fade Animation
369369
</forge-button>
370-
<forge-button @click="${() => document.getElementById('slide-modal')?.show()}">
370+
<forge-button @click="${() => ((document.getElementById('slide-modal') as any)?.show())}">
371371
Slide Animation
372372
</forge-button>
373-
<forge-button @click="${() => document.getElementById('no-animation-modal')?.show()}">
373+
<forge-button @click="${() => ((document.getElementById('no-animation-modal') as any)?.show())}">
374374
No Animation
375375
</forge-button>
376376
</div>
377377
378378
<forge-modal id="fade-modal" size="medium" title="Fade Animation" animation="fade">
379379
<p>This modal uses the fade animation for a smooth appearance.</p>
380380
<div slot="footer">
381-
<forge-button @click="${() => document.getElementById('fade-modal')?.close()}">
381+
<forge-button @click="${() => ((document.getElementById('fade-modal') as any)?.close())}">
382382
Close
383383
</forge-button>
384384
</div>
@@ -387,7 +387,7 @@ export const AnimationVariants: Story = {
387387
<forge-modal id="slide-modal" size="medium" title="Slide Animation" animation="slide">
388388
<p>This modal uses the slide animation, appearing from below.</p>
389389
<div slot="footer">
390-
<forge-button @click="${() => document.getElementById('slide-modal')?.close()}">
390+
<forge-button @click="${() => ((document.getElementById('slide-modal') as any)?.close())}">
391391
Close
392392
</forge-button>
393393
</div>
@@ -396,7 +396,7 @@ export const AnimationVariants: Story = {
396396
<forge-modal id="no-animation-modal" size="medium" title="No Animation" animation="none">
397397
<p>This modal appears instantly without any animation.</p>
398398
<div slot="footer">
399-
<forge-button @click="${() => document.getElementById('no-animation-modal')?.close()}">
399+
<forge-button @click="${() => ((document.getElementById('no-animation-modal') as any)?.close())}">
400400
Close
401401
</forge-button>
402402
</div>
@@ -407,13 +407,13 @@ export const AnimationVariants: Story = {
407407
export const ModalSettings: Story = {
408408
render: () => html`
409409
<div style="display: flex; gap: 16px; flex-wrap: wrap;">
410-
<forge-button @click="${() => document.getElementById('no-backdrop-close-modal')?.show()}">
410+
<forge-button @click="${() => ((document.getElementById('no-backdrop-close-modal') as any)?.show())}">
411411
No Backdrop Close
412412
</forge-button>
413-
<forge-button @click="${() => document.getElementById('no-escape-close-modal')?.show()}">
413+
<forge-button @click="${() => ((document.getElementById('no-escape-close-modal') as any)?.show())}">
414414
No Escape Close
415415
</forge-button>
416-
<forge-button @click="${() => document.getElementById('no-close-button-modal')?.show()}">
416+
<forge-button @click="${() => ((document.getElementById('no-close-button-modal') as any)?.show())}">
417417
No Close Button
418418
</forge-button>
419419
</div>
@@ -426,7 +426,7 @@ export const ModalSettings: Story = {
426426
>
427427
<p>This modal won't close when you click the backdrop. You must use the close button or Escape key.</p>
428428
<div slot="footer">
429-
<forge-button @click="${() => document.getElementById('no-backdrop-close-modal')?.close()}">
429+
<forge-button @click="${() => ((document.getElementById('no-backdrop-close-modal') as any)?.close())}">
430430
Close
431431
</forge-button>
432432
</div>
@@ -440,7 +440,7 @@ export const ModalSettings: Story = {
440440
>
441441
<p>This modal won't close when you press the Escape key. You must use the close button or click the backdrop.</p>
442442
<div slot="footer">
443-
<forge-button @click="${() => document.getElementById('no-escape-close-modal')?.close()}">
443+
<forge-button @click="${() => ((document.getElementById('no-escape-close-modal') as any)?.close())}">
444444
Close
445445
</forge-button>
446446
</div>
@@ -454,7 +454,7 @@ export const ModalSettings: Story = {
454454
>
455455
<p>This modal doesn't have a close button in the header. You can still close it by clicking the backdrop or pressing Escape.</p>
456456
<div slot="footer">
457-
<forge-button @click="${() => document.getElementById('no-close-button-modal')?.close()}">
457+
<forge-button @click="${() => ((document.getElementById('no-close-button-modal') as any)?.close())}">
458458
Close
459459
</forge-button>
460460
</div>
@@ -469,16 +469,16 @@ export const InteractiveDemo: Story = {
469469
<p>Explore different modal features and behaviors:</p>
470470
471471
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0;">
472-
<forge-button @click="${() => document.getElementById('info-modal')?.show()}">
472+
<forge-button @click="${() => ((document.getElementById('info-modal') as any)?.show())}">
473473
📋 Info Modal
474474
</forge-button>
475-
<forge-button @click="${() => document.getElementById('warning-modal')?.show()}">
475+
<forge-button @click="${() => ((document.getElementById('warning-modal') as any)?.show())}">
476476
⚠️ Warning Modal
477477
</forge-button>
478-
<forge-button @click="${() => document.getElementById('success-modal')?.show()}">
478+
<forge-button @click="${() => ((document.getElementById('success-modal') as any)?.show())}">
479479
✅ Success Modal
480480
</forge-button>
481-
<forge-button @click="${() => document.getElementById('error-modal')?.show()}">
481+
<forge-button @click="${() => ((document.getElementById('error-modal') as any)?.show())}">
482482
❌ Error Modal
483483
</forge-button>
484484
</div>
@@ -509,7 +509,7 @@ export const InteractiveDemo: Story = {
509509
</div>
510510
</div>
511511
<div slot="footer">
512-
<forge-button @click="${() => document.getElementById('info-modal')?.close()}">
512+
<forge-button @click="${() => ((document.getElementById('info-modal') as any)?.close())}">
513513
Got it
514514
</forge-button>
515515
</div>
@@ -528,10 +528,10 @@ export const InteractiveDemo: Story = {
528528
</div>
529529
</div>
530530
<div slot="footer">
531-
<forge-button variant="secondary" @click="${() => document.getElementById('warning-modal')?.close()}">
531+
<forge-button variant="secondary" @click="${() => ((document.getElementById('warning-modal') as any)?.close())}">
532532
Cancel
533533
</forge-button>
534-
<forge-button variant="warning" @click="${() => document.getElementById('warning-modal')?.close()}">
534+
<forge-button variant="warning" @click="${() => ((document.getElementById('warning-modal') as any)?.close())}">
535535
Proceed
536536
</forge-button>
537537
</div>
@@ -550,7 +550,7 @@ export const InteractiveDemo: Story = {
550550
</div>
551551
</div>
552552
<div slot="footer">
553-
<forge-button variant="primary" @click="${() => document.getElementById('success-modal')?.close()}">
553+
<forge-button variant="primary" @click="${() => ((document.getElementById('success-modal') as any)?.close())}">
554554
Continue
555555
</forge-button>
556556
</div>
@@ -569,10 +569,10 @@ export const InteractiveDemo: Story = {
569569
</div>
570570
</div>
571571
<div slot="footer">
572-
<forge-button variant="secondary" @click="${() => document.getElementById('error-modal')?.close()}">
572+
<forge-button variant="secondary" @click="${() => ((document.getElementById('error-modal') as any)?.close())}">
573573
Dismiss
574574
</forge-button>
575-
<forge-button variant="primary" @click="${() => document.getElementById('error-modal')?.close()}">
575+
<forge-button variant="primary" @click="${() => ((document.getElementById('error-modal') as any)?.close())}">
576576
Retry
577577
</forge-button>
578578
</div>
@@ -582,7 +582,7 @@ export const InteractiveDemo: Story = {
582582

583583
export const AIIntegration: Story = {
584584
render: () => html`
585-
<forge-button @click="${() => document.getElementById('ai-modal')?.show()}">
585+
<forge-button @click="${() => ((document.getElementById('ai-modal') as any)?.show())}">
586586
Open AI-Ready Modal
587587
</forge-button>
588588
@@ -615,7 +615,7 @@ export const AIIntegration: Story = {
615615
<p>AI agents can understand this as a focused user interaction context.</p>
616616
617617
<div slot="footer">
618-
<forge-button @click="${() => document.getElementById('ai-modal')?.close()}">
618+
<forge-button @click="${() => ((document.getElementById('ai-modal') as any)?.close())}">
619619
Close
620620
</forge-button>
621621
</div>

‎src/components/organisms/data-table/data-table.stories.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -199,7 +199,7 @@ export const CustomColumnTemplate: Story = {
199199
{
200200
key: 'actions',
201201
title: 'Actions',
202-
template: (_, row) => html`
202+
template: (_: any, row: any) => html`
203203
<forge-button size="small" variant="outline" @click="${() => console.log('Edit:', row)}">
204204
Edit
205205
</forge-button>

0 commit comments

Comments
 (0)