Skip to content

Commit e92d5fe

Browse files
mimarzmimarz
authored
docs(radio, checkbox, switch): change example data for outline story (#4881)
1 parent dbd56c0 commit e92d5fe

3 files changed

Lines changed: 72 additions & 72 deletions

File tree

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

Lines changed: 32 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -351,39 +351,39 @@ export const InTableEn = () => {
351351
};
352352

353353
export const Outline = () => {
354-
const [value, setValue] = useState<string[]>(['epost']);
354+
const [value, setValue] = useState<string[]>(['drift']);
355355

356356
return (
357357
<Fieldset>
358-
<Fieldset.Legend>Hvordan ønsker å bli kontaktet?</Fieldset.Legend>
358+
<Fieldset.Legend>Hvilke varsler vil du motta?</Fieldset.Legend>
359359
<Fieldset.Description>
360-
Velg hvordan du vi motta viktig informasjon om saken din.
360+
Velg hvilke typer varsler som er relevante for deg.
361361
</Fieldset.Description>
362362
<Checkbox
363-
label='E-post'
364-
value='epost'
365-
description='Vi bruker e-postadressen du har oppgitt tidligere (********)'
363+
label='Driftsmeldinger'
364+
value='drift'
365+
description='Varsler ved planlagt vedlikehold og driftsavvik.'
366366
variant='outline'
367-
checked={value.includes('epost')}
367+
checked={value.includes('drift')}
368368
onChange={(e) => {
369369
if (e.target.checked) {
370-
setValue([...value, 'epost']);
370+
setValue([...value, 'drift']);
371371
} else {
372-
setValue(value.filter((v) => v !== 'epost'));
372+
setValue(value.filter((v) => v !== 'drift'));
373373
}
374374
}}
375375
/>
376376
<Checkbox
377-
label='SMS'
378-
value='sms'
379-
description='Vi bruker telefonnummeret du har oppgitt tidligere (*******)'
377+
label='Påminnelser'
378+
value='paminnelse'
379+
description='Varsler om frister og oppgaver som krever handling.'
380380
variant='outline'
381-
checked={value.includes('sms')}
381+
checked={value.includes('paminnelse')}
382382
onChange={(e) => {
383383
if (e.target.checked) {
384-
setValue([...value, 'sms']);
384+
setValue([...value, 'påminnelse']);
385385
} else {
386-
setValue(value.filter((v) => v !== 'sms'));
386+
setValue(value.filter((v) => v !== 'påminnelse'));
387387
}
388388
}}
389389
/>
@@ -392,39 +392,41 @@ export const Outline = () => {
392392
};
393393

394394
export const OutlineEn = () => {
395-
const [value, setValue] = useState<string[]>(['email']);
395+
const [value, setValue] = useState<string[]>(['operations']);
396396

397397
return (
398398
<Fieldset>
399-
<Fieldset.Legend>How would you like to be contacted?</Fieldset.Legend>
399+
<Fieldset.Legend>
400+
Which notifications do you want to receive?
401+
</Fieldset.Legend>
400402
<Fieldset.Description>
401-
Choose how you want to receive important information about your case.
403+
Choose the notification types that are relevant to you.
402404
</Fieldset.Description>
403405
<Checkbox
404-
label='E-mail'
405-
value='email'
406-
description='We use the e-mail address you have provided earlier (********)'
406+
label='Service updates'
407+
value='operations'
408+
description='Alerts about planned maintenance and service disruptions.'
407409
variant='outline'
408-
checked={value.includes('email')}
410+
checked={value.includes('operations')}
409411
onChange={(e) => {
410412
if (e.target.checked) {
411-
setValue([...value, 'email']);
413+
setValue([...value, 'operations']);
412414
} else {
413-
setValue(value.filter((v) => v !== 'email'));
415+
setValue(value.filter((v) => v !== 'operations'));
414416
}
415417
}}
416418
/>
417419
<Checkbox
418-
label='SMS'
419-
value='sms'
420-
description='We use the phone number you have provided earlier (*******)'
420+
label='Reminders'
421+
value='reminders'
422+
description='Alerts about deadlines and tasks that need your attention.'
421423
variant='outline'
422-
checked={value.includes('sms')}
424+
checked={value.includes('reminders')}
423425
onChange={(e) => {
424426
if (e.target.checked) {
425-
setValue([...value, 'sms']);
427+
setValue([...value, 'reminders']);
426428
} else {
427-
setValue(value.filter((v) => v !== 'sms'));
429+
setValue(value.filter((v) => v !== 'reminders'));
428430
}
429431
}}
430432
/>

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

Lines changed: 28 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -161,31 +161,30 @@ export const InlineEn = () => {
161161
export const Outline = () => {
162162
return (
163163
<Fieldset>
164-
<Fieldset.Legend>Hvordan ønsker du at vi kontakter deg?</Fieldset.Legend>
164+
<Fieldset.Legend>Hvilket kursnivå passer deg best?</Fieldset.Legend>
165165
<Fieldset.Description>
166-
Velg metoden som passer best for deg. Vi bruker dette kun til å sende
167-
viktig informasjon om saken din.
166+
Velg nivået som beskriver din erfaring med temaet.
168167
</Fieldset.Description>
169168
<Radio
170-
label='E-post'
171169
variant='outline'
172-
description='Vi bruker e-postadressen du har oppgitt tidligere (navn@epost.no)'
173-
value='epost'
174-
name='kontakt'
170+
label='Nybegynner'
171+
description='Passer for deg som er helt ny og ønsker en rolig introduksjon.'
172+
value='beginner'
173+
name='course-level'
175174
/>
176175
<Radio
177-
label='SMS'
178176
variant='outline'
179-
description='Vi bruker telefonnummeret du har oppgitt tidligere (99 99 99 99)'
180-
value='sms'
181-
name='kontakt'
177+
label='Viderekommen'
178+
description='Passer for deg som kjenner grunnleggende begreper og vil gå dypere.'
179+
value='intermediate'
180+
name='course-level'
182181
/>
183182
<Radio
184-
label='Brev'
183+
label='Ekspert'
185184
variant='outline'
186-
description='Levering kan ta 3-5 virkedager, avhengig av posttjenesten.'
187-
value='brev'
188-
name='kontakt'
185+
description='Passer for deg som ønsker avanserte temaer og praktiske case.'
186+
value='expert'
187+
name='course-level'
189188
/>
190189
</Fieldset>
191190
);
@@ -194,31 +193,30 @@ export const Outline = () => {
194193
export const OutlineEn = () => {
195194
return (
196195
<Fieldset>
197-
<Fieldset.Legend>How would you like us to contact you?</Fieldset.Legend>
196+
<Fieldset.Legend>Which course level fits you best?</Fieldset.Legend>
198197
<Fieldset.Description>
199-
Choose the method that works best for you. We use this only to send
200-
important updates about your case.
198+
Choose the level that best describes your experience with the topic.
201199
</Fieldset.Description>
202200
<Radio
203-
label='Email'
204-
description='We will use the email address you provided earlier (name@example.com)'
205-
value='email'
206-
name='contact'
207201
variant='outline'
202+
label='Beginner'
203+
description='Best for you if you are completely new and want a gentle introduction.'
204+
value='beginner'
205+
name='course-level'
208206
/>
209207
<Radio
210-
label='SMS'
211-
description='We will use the phone number you provided earlier (99 99 99 99)'
212-
value='sms'
213-
name='contact'
214208
variant='outline'
209+
label='Intermediate'
210+
description='Best for you if you know the basics and want to go deeper.'
211+
value='intermediate'
212+
name='course-level'
215213
/>
216214
<Radio
217-
label='Letter'
218-
description='Delivery may take 3-5 working days, depending on the postal service.'
219-
value='letter'
220-
name='contact'
221215
variant='outline'
216+
label='Expert'
217+
description='Best for you if you want advanced topics and hands-on cases.'
218+
value='expert'
219+
name='course-level'
222220
/>
223221
</Fieldset>
224222
);

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -130,13 +130,13 @@ export const RightAligned2En = () => (
130130
export const Outline = () => {
131131
return (
132132
<Fieldset>
133-
<Fieldset.Legend>Skru av/på lys</Fieldset.Legend>
134-
<Switch variant='outline' label='Stue' checked />
135-
<Switch variant='outline' label='Kjøkken' />
136-
<Switch variant='outline' label='Bad' />
133+
<Fieldset.Legend>Aktiver varslinger</Fieldset.Legend>
134+
<Switch variant='outline' label='Driftsmeldinger' checked />
135+
<Switch variant='outline' label='Påminnelser' />
136+
<Switch variant='outline' label='Nyhetsoppdateringer' />
137137
<Switch
138-
label='Soverom'
139-
description='Får ikke kontakt med lyspærene'
138+
label='SMS-varsler'
139+
description='Mangler gyldig telefonnummer i profilen'
140140
variant='outline'
141141
readOnly
142142
/>
@@ -147,13 +147,13 @@ export const Outline = () => {
147147
export const OutlineEn = () => {
148148
return (
149149
<Fieldset>
150-
<Fieldset.Legend>Turn lights on/off</Fieldset.Legend>
151-
<Switch variant='outline' label='Living room' checked />
152-
<Switch variant='outline' label='Kitchen' />
153-
<Switch variant='outline' label='Bathroom' />
150+
<Fieldset.Legend>Enable notifications</Fieldset.Legend>
151+
<Switch variant='outline' label='Service messages' checked />
152+
<Switch variant='outline' label='Reminders' />
153+
<Switch variant='outline' label='News updates' />
154154
<Switch
155-
label='Bedroom'
156-
description='Unable to connect to the light bulbs'
155+
label='SMS alerts'
156+
description='Missing a valid phone number in your profile'
157157
variant='outline'
158158
readOnly
159159
/>

0 commit comments

Comments
 (0)