Skip to content

Commit 6586bb7

Browse files
mrosvikmimarzBarsnescoderabbitai[bot]
authored
docs(dialog): web-first (#4846)
Co-authored-by: Michael Marszalek <mimarz@gmail.com> Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
1 parent e0f4262 commit 6586bb7

6 files changed

Lines changed: 287 additions & 209 deletions

File tree

‎apps/www/app/content/components/dialog/dialog.stories.tsx‎

Lines changed: 92 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -15,28 +15,29 @@ import { type ChangeEvent, useRef, useState } from 'react';
1515

1616
export const Preview = () => {
1717
return (
18-
<Dialog.TriggerContext>
19-
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
20-
<Dialog>
18+
<>
19+
<Button command='show-modal' commandfor='my-dialog-preview'>
20+
Open Dialog
21+
</Button>
22+
<Dialog id='my-dialog-preview'>
2123
<Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
2224
Dialog header
2325
</Heading>
2426
<Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
2527
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
2628
doloremque obcaecati assumenda odio ducimus sunt et.
2729
</Paragraph>
28-
<Paragraph data-size='sm'>Dialog footer</Paragraph>
2930
</Dialog>
30-
</Dialog.TriggerContext>
31+
</>
3132
);
3233
};
3334

3435
export const WithCommand = () => (
3536
<>
36-
<Button command='show-modal' commandfor='my-dialog-commant'>
37-
Open Dialog with ref
37+
<Button command='show-modal' commandfor='my-dialog-command'>
38+
Open Dialog with command
3839
</Button>
39-
<Dialog id='my-dialog-commant'>
40+
<Dialog id='my-dialog-command'>
4041
<Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
4142
Dialog header
4243
</Heading>
@@ -48,6 +49,24 @@ export const WithCommand = () => (
4849
</>
4950
);
5051

52+
export const TriggerContext = () => {
53+
return (
54+
<Dialog.TriggerContext>
55+
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
56+
<Dialog>
57+
<Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
58+
Dialog header
59+
</Heading>
60+
<Paragraph style={{ marginBottom: 'var(--ds-size-2)' }}>
61+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Blanditiis
62+
doloremque obcaecati assumenda odio ducimus sunt et.
63+
</Paragraph>
64+
<Paragraph data-size='sm'>Dialog footer</Paragraph>
65+
</Dialog>
66+
</Dialog.TriggerContext>
67+
);
68+
};
69+
5170
export const WithRef = () => {
5271
const dialogRef = useRef<HTMLDialogElement>(null);
5372

@@ -73,8 +92,10 @@ export const WithRef = () => {
7392
};
7493

7594
export const ModalDialog = () => (
76-
<Dialog.TriggerContext>
77-
<Dialog.Trigger>Åpne modal Dialog</Dialog.Trigger>
95+
<>
96+
<Button command='show-modal' commandfor='my-dialog-modal'>
97+
Åpne modal Dialog
98+
</Button>
7899
<Dialog id='my-dialog-modal'>
79100
<Dialog.Block>
80101
<Paragraph data-size='sm'>Bekreft endring</Paragraph>
@@ -113,13 +134,15 @@ export const ModalDialog = () => (
113134
</div>
114135
</Dialog.Block>
115136
</Dialog>
116-
</Dialog.TriggerContext>
137+
</>
117138
);
118139

119140
export const ModalDialogEn = () => (
120-
<Dialog.TriggerContext>
121-
<Dialog.Trigger>Open modal dialog</Dialog.Trigger>
122-
<Dialog id='my-dialog-modal'>
141+
<>
142+
<Button command='show-modal' commandfor='my-dialog-modal-en'>
143+
Open modal dialog
144+
</Button>
145+
<Dialog id='my-dialog-modal-en'>
123146
<Dialog.Block>
124147
<Paragraph data-size='sm'>Confirm change</Paragraph>
125148
<Heading>Are you sure you want to change the application?</Heading>
@@ -144,27 +167,30 @@ export const ModalDialogEn = () => (
144167
variant='primary'
145168
data-color='danger'
146169
command='close'
147-
commandfor='my-dialog-modal'
170+
commandfor='my-dialog-modal-en'
148171
>
149172
Yes, change
150173
</Button>
151174
<Button
152175
variant='secondary'
153176
command='close'
154-
commandfor='my-dialog-modal'
177+
commandfor='my-dialog-modal-en'
155178
>
156179
Cancel
157180
</Button>
158181
</div>
159182
</Dialog.Block>
160183
</Dialog>
161-
</Dialog.TriggerContext>
184+
</>
162185
);
163186

164187
export const NonModalDialog = () => (
165-
<Dialog.TriggerContext>
166-
<Dialog.Trigger>Åpne ikke-modal Dialog</Dialog.Trigger>
188+
<>
189+
<Button command='--show-non-modal' commandfor='my-dialog-non-modal'>
190+
Åpne ikke-modal Dialog
191+
</Button>
167192
<Dialog
193+
id='my-dialog-non-modal'
168194
modal={false}
169195
style={{
170196
zIndex: '10',
@@ -186,13 +212,16 @@ export const NonModalDialog = () => (
186212
/>
187213
<Button>Send inn</Button>
188214
</Dialog>
189-
</Dialog.TriggerContext>
215+
</>
190216
);
191217

192218
export const NonModalDialogEn = () => (
193-
<Dialog.TriggerContext>
194-
<Dialog.Trigger>Open non-modal dialog</Dialog.Trigger>
219+
<>
220+
<Button command='--show-non-modal' commandfor='my-dialog-non-modal-en'>
221+
Open non-modal dialog
222+
</Button>
195223
<Dialog
224+
id='my-dialog-non-modal-en'
196225
modal={false}
197226
style={{
198227
zIndex: '10',
@@ -214,15 +243,17 @@ export const NonModalDialogEn = () => (
214243
/>
215244
<Button>Submit</Button>
216245
</Dialog>
217-
</Dialog.TriggerContext>
246+
</>
218247
);
219248

220249
export const WithForm = () => {
221250
const [input, setInput] = useState('');
222251

223252
return (
224-
<Dialog.TriggerContext>
225-
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
253+
<>
254+
<Button command='show-modal' commandfor='my-dialog-form'>
255+
Open Dialog with command
256+
</Button>
226257
<Dialog onClose={() => setInput('')} closedby='any' id='my-dialog-form'>
227258
<Heading style={{ marginBottom: 'var(--ds-size-2)' }}>
228259
Dialog med skjema
@@ -258,16 +289,18 @@ export const WithForm = () => {
258289
</Button>
259290
</div>
260291
</Dialog>
261-
</Dialog.TriggerContext>
292+
</>
262293
);
263294
};
264295

265296
export const WithFormEn = () => {
266297
const [input, setInput] = useState('');
267298

268299
return (
269-
<Dialog.TriggerContext>
270-
<Dialog.Trigger>Open dialog</Dialog.Trigger>
300+
<>
301+
<Button command='show-modal' commandfor='my-dialog-form-en'>
302+
Open dialog with command
303+
</Button>
271304
<Dialog
272305
onClose={() => setInput('')}
273306
closedby='any'
@@ -309,13 +342,15 @@ export const WithFormEn = () => {
309342
</Button>
310343
</div>
311344
</Dialog>
312-
</Dialog.TriggerContext>
345+
</>
313346
);
314347
};
315348

316349
export const WithBlocks = () => (
317-
<Dialog.TriggerContext>
318-
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
350+
<>
351+
<Button command='show-modal' commandfor='my-dialog-blocks'>
352+
Open Dialog with command
353+
</Button>
319354
<Dialog id='my-dialog-blocks'>
320355
<Dialog.Block>
321356
<Paragraph data-size='sm'>Dialog subtitle</Paragraph>
@@ -337,16 +372,18 @@ export const WithBlocks = () => (
337372
</Button>
338373
</Dialog.Block>
339374
</Dialog>
340-
</Dialog.TriggerContext>
375+
</>
341376
);
342377

343378
export const CloseWithClickOutside = () => (
344-
<Dialog.TriggerContext>
345-
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
346-
<Dialog closedby='any'>
379+
<>
380+
<Button command='show-modal' commandfor='my-dialog-close-outside'>
381+
Open Dialog with command
382+
</Button>
383+
<Dialog id='my-dialog-close-outside' closedby='any'>
347384
<Heading>Click outside to close</Heading>
348385
</Dialog>
349-
</Dialog.TriggerContext>
386+
</>
350387
);
351388

352389
export const Drawer = () => {
@@ -383,22 +420,25 @@ export const Drawer = () => {
383420
<Radio name='drawer' label='Right' value='right' />
384421
</div>
385422
</Fieldset>
386-
<Dialog.TriggerContext>
387-
<Dialog.Trigger>Open Dialog</Dialog.Trigger>
388-
<Dialog
389-
modal={modal}
390-
closedby='any'
391-
placement={placement}
392-
style={{ zIndex: '10' }}
393-
>
394-
<Dialog.Block>
395-
<Paragraph>
396-
This is a {modal ? 'modal' : 'non-modal'} Dialog with{' '}
397-
<code>placement="{placement}"</code>
398-
</Paragraph>
399-
</Dialog.Block>
400-
</Dialog>
401-
</Dialog.TriggerContext>
423+
<Button
424+
command={modal ? 'show-modal' : '--show-non-modal'}
425+
commandfor='my-dialog-drawer'
426+
>
427+
Open Dialog with command
428+
</Button>
429+
<Dialog
430+
id='my-dialog-drawer'
431+
closedby='any'
432+
placement={placement}
433+
style={{ zIndex: '10' }}
434+
>
435+
<Dialog.Block>
436+
<Paragraph>
437+
This is a {modal ? 'modal' : 'non-modal'} Dialog with{' '}
438+
<code>placement="{placement}"</code>
439+
</Paragraph>
440+
</Dialog.Block>
441+
</Dialog>
402442
</>
403443
);
404444
};

0 commit comments

Comments
 (0)