Skip to content

Commit b38166b

Browse files
mimarzmrosvik
mimarz
and
mrosvik
authored
docs(alert): team review (#4953)
Co-authored-by: Marianne Røsvik <marianne.rosvik@digdir.no> Co-authored-by: Marianne Røsvik <post@mrosvik.no>
1 parent c0e9383 commit b38166b

6 files changed

Lines changed: 31 additions & 60 deletions

File tree

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

Lines changed: 2 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export const VariantWarningEn = () => (
124124
);
125125

126126
export const VariantDanger = () => (
127-
<Alert data-color='danger'>
127+
<Alert data-color='danger' role='alert'>
128128
<Heading
129129
level={2}
130130
data-size='xs'
@@ -143,7 +143,7 @@ export const VariantDanger = () => (
143143
);
144144

145145
export const VariantDangerEn = () => (
146-
<Alert data-color='danger'>
146+
<Alert data-color='danger' role='alert'>
147147
<Heading
148148
level={2}
149149
data-size='xs'
@@ -314,21 +314,3 @@ export const CorrectLiveRegionReactEn = () => {
314314
</>
315315
);
316316
};
317-
318-
export const Variants = () => (
319-
<>
320-
<Alert data-color='info'>Dette er en info alert</Alert>
321-
<Alert data-color='success'>Dette er en success alert</Alert>
322-
<Alert data-color='warning'>Dette er en warning alert</Alert>
323-
<Alert data-color='danger'>Dette er en danger alert</Alert>
324-
</>
325-
);
326-
327-
export const VariantsEn = () => (
328-
<>
329-
<Alert data-color='info'>This is an info alert</Alert>
330-
<Alert data-color='success'>This is a success alert</Alert>
331-
<Alert data-color='warning'>This is a warning alert</Alert>
332-
<Alert data-color='danger'>This is a danger alert</Alert>
333-
</>
334-
);

‎apps/www/app/content/components/alert/en/code.mdx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22

33
## Usage
44

5-
Use the attribute `data-color` to change the type of alert.
6-
Read below for when to use `role` and `aria-live`.
5+
Use the attribute `data-color="info | success | warning | danger"` to change the type of alert.
76

8-
[Read about `role` and `aria-live` on the accessibility page for the alert component.](/en/components/docs/alert/accessibility#alert-i-live-region)
7+
Use `role="alert"` for critical messages that require immediate attention.
8+
Use `role="status"` for less critical messages.
99

1010
## CSS variables and data attributes
1111

‎apps/www/app/content/components/alert/en/overview.mdx‎

Lines changed: 11 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@ search_terms: notification, feedback, warning, message, confirmation, error, war
55
<Story story="PreviewEn" language="html" />
66

77
**Use Alert when**
8-
- you need to show short and informative time-limited messages
9-
- the information concerns an error that affects only one part of the system or a minor function
10-
- there are connection issues or API errors that are likely to be resolved by reloading the page
8+
- you have short and informative messaging that is important to highlight
9+
- the information has a semantic meaning (error, success, info, warning)
10+
- you need to inform about minor or technical errors
1111

1212
**Avoid Alert when**
13-
- the error prevents further use of the service, use an [error page](/en/patterns/systemnotifications#when-do-we-use-error-pages) instead
14-
- you need to notify the user about an error in a single form field, use the component’s own error message [validation message](/en/components/docs/validation-message/overview)
15-
- the message is a static info box, use [card](/en/components/docs/card/overview) instead
16-
- multiple error messages need to be summarised, use [error summary](/en/components/docs/error-summary/overview) instead
13+
- you need to notify the user about an error in a single form field, use the component’s own error message [validation message](/en/components/docs/validation-message/overview) instead, and [error summary](/en/components/docs/error-summary/overview) to summarise multiple errors
14+
- you want to highlight content visually
1715

1816
For more comprehensive guidelines on how to use alerts in services, see the pattern for [System notifications](/en/patterns/systemnotifications). There you will find examples and recommendations on when to use alert, and when other solutions may be more appropriate.
1917

@@ -58,34 +56,26 @@ If the title and description repeat the same thing, it is better to use a simple
5856

5957
### With link
6058

61-
You can have a link in the alert if it helps the user solve the task. But be aware that a link takes the user out of the service, so use links only when absolutely necessary, for example if you want the user to open a form or perform an important task.
59+
You can include a link in the alert if it is necessary for the user to complete their task. Remember that links take the user out of the service, so they should be used with caution, for example when opening forms or performing other important actions.
6260

6361
<Story story="MedLenkeEn" />
6462

6563
## Guidelines
66-
Alert is used to display important messages that require attention, but not necessarily action. It can be used to inform the user about the status, changes, or problems in a solution. The message is displayed clearly and visually distinguished from the rest of the content.
6764

68-
Use the component with caution. Users can confuse alerts with advertising, and thus ignore them. If we use alerts too often, we can exacerbate this problem.
65+
Alert is used to display important messages that require attention. It can be used to inform the user about the status, changes, or problems in a solution.
6966

70-
Make sure that alert has the same look and feel across all services and products. This component should be recognizable everywhere, so we should not adjust it.
71-
72-
**Suitable for**
73-
- provide short and informative time-limited notifications
74-
- inform about errors that only affect one part of the system or a minor function
75-
- inform about connection problems or API errors that are likely to be resolved by reloading the page
67+
Use alert with caution. Users can confuse alerts with advertising, and thus ignore them. If we use alerts too often, we can exacerbate this problem.
7668

77-
**Not suitable for**
78-
- validate individual form elements, instead use the component's own error message (See [validation message](/en/components/docs/validation-message/overview))
79-
- summarize multiple error messages in a form, instead use [error summary](/en/components/docs/error-summary/overview)
80-
- display errors that prevent all further use of the service, instead use an error page
81-
- display static information that should be displayed all the time, instead use [card](/en/components/docs/card/overview)
69+
Make sure that alert has the same look and feel across all services and products. This component should be recognizable everywhere, so we should not adjust it.
8270

8371
## Text
8472

8573
It is not always easy to understand the difference between the notifications, even though they have different icons and colours. Therefore, it is important that the text we write in the notification is clear and easy to understand.
8674

8775
If there is something users need to or can do to get through their task, the text should convey that. When the message is longer than a sentence, it may be a good idea to include a heading that highlights the most important points.
8876

77+
Avoid multiple alerts on the same page, as it can confuse the user and make it difficult to understand what is important.
78+
8979
Here is a list of the types of information that a notification should contain:
9080

9181
- Tell them what happened

‎apps/www/app/content/components/alert/metadata.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{
22
"no": {
33
"title": "Alert",
4-
"subtitle": "`Alert` gir brukeren informasjon som det er ekstra viktig at de ser og forstår. Komponenten er designet for å fange brukernes oppmerksomhet. Teksten i varselet skal være kort og tydelig."
4+
"subtitle": "Alert gir brukeren informasjon som det er ekstra viktig at de ser og forstår. Komponenten er designet for å fange brukernes oppmerksomhet. Teksten i varselet skal være kort og tydelig."
55
},
66
"en": {
77
"title": "Alert",
8-
"subtitle": "`Alert` provides users with information that is especially important for them to see and understand. The component is designed to capture users' attention. The text in the alert should be short and clear."
8+
"subtitle": "Alert provides users with information that is especially important for them to see and understand. The component is designed to capture users' attention. The text in the alert should be short and clear."
99
},
1010
"image": "Alert.svg",
1111
"cssFile": "alert.css"

‎apps/www/app/content/components/alert/no/code.mdx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@
22

33
## Bruk
44

5-
Bruk attributtet `data-color` for å endre type varsel.
6-
Les under for når du skal bruke `role` og `aria-live`.
7-
8-
[Les om `role` og `aria-live` på tilgjengelighetssiden for alert-komponenten.](/no/components/docs/alert/accessibility#alert-i-live-region)
5+
Bruk attributtet `data-color="info | success | warning | danger"` for å endre type varsel.
96

7+
Bruk `role="alert"` for kritiske meldinger som krever umiddelbar oppmerksomhet.
8+
Bruk `role="status"` for mindre kritiske meldinger.
109

1110
## CSS variabler og data-attributter
1211
<CssVariables />

‎apps/www/app/content/components/alert/no/overview.mdx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,13 @@ search_terms: statusmelding, varsel, advarsel, notifikasjon, systemvarsel, syste
55
<Story story="Preview" language="html" />
66

77
**Bruk Alert når**
8-
- det er korte og informative tidsbegrensede varsler
9-
- det er informasjon om feil som kun påvirker én del av systemet eller en mindre funksjon
10-
- det oppstår tilkoblingsproblemer eller API-feil som vil løse seg med en ny innlasting av siden
8+
- du skal vise et kort og informativt varsel som er viktig å fremheve
9+
- du skal formidle informasjon med en semantisk betydning (som feil, suksess, informasjon eller advarsel)
10+
- du skal informere om mindre eller tekniske feil
1111

1212
**Unngå Alert når**
13-
- feilen hindrer all videre bruk av tjenesten, bruk [feilside](/no/patterns/systemnotifications#når-bruker-vi-feilsider) i stedet
14-
- du skal gjøre brukeren oppmerksom på feil i enkeltfelt, bruk heller komponentens egen feilmelding [validation message](/no/components/docs/validation-message/overview)
15-
- varslene er statiske infobokser, bruk heller [card](/no/components/docs/card/overview)
16-
- flere feilmeldinger skal oppsummeres, bruk heller [error summary](/no/components/docs/error-summary/overview)
13+
- du skal gjøre brukeren oppmerksom på feil i enkeltfelt, bruk heller komponentens egen feilmelding [validation message](/no/components/docs/validation-message/overview) og [error summary](/no/components/docs/error-summary/overview) for å oppsummere flere feil
14+
- du ønsker å fremheve innhold visuelt
1715

1816
For mer helhetlige retningslinjer for bruk av varsler i tjenester, se mønsteret for [Systemvarsler](/no/patterns/systemnotifications). Der finner du eksempler og anbefalinger for når du skal bruke alert, og når andre løsninger passer bedre.
1917

@@ -61,15 +59,15 @@ Dersom tittel og beskrivelse gjentar det samme er det bedre å bruke en enkel se
6159
### Med lenke
6260

6361
Du kan ha en lenke i alert hvis det hjelper brukeren med å løse oppgaven.
64-
Men vær obs på at en lenke tar brukeren ut av tjenesten, så bruk lenke kun når det er absolutt nødvendig, for eksempel hvis du vil at brukeren skal åpne et skjema eller utføre en viktig oppgave.
62+
Husk at lenker tar brukeren ut av tjenesten, så bruk dem kun når det er nødvendig, for eksempel hvis du vil at brukeren skal åpne et skjema eller utføre en viktig oppgave.
6563

6664
<Story story="MedLenke" />
6765

6866
## Retningslinjer
6967

70-
Alert brukes for å vise viktige meldinger som krever oppmerksomhet, men ikke nødvendigvis handling. Den kan brukes til å informere brukeren om status, endringer eller problemer i en løsning. Meldingen vises tydelig og skiller seg visuelt fra resten av innholdet.
68+
Alert brukes til å vise viktige meldinger som krever oppmerksomhet. Den kan brukes til å informere brukeren om status, endringer eller problemer i en løsning.
7169

72-
Bruk komponenten varsomt. Brukere kan forveksle varsler med reklame, og dermed overse dem.
70+
Bruk alert varsomt. Brukere kan forveksle varsler med reklame, og dermed overse dem.
7371
Hvis vi bruker varsler for ofte, kan vi forverre dette problemet.
7472

7573
Pass på at alert har samme utseende og formspråk i alle tjenester og produkter.
@@ -81,6 +79,8 @@ Det er ikke alltid lett å forstå forskjellen på varslene, selv om de har ulik
8179

8280
Hvis det er noe brukerne må eller kan gjøre for å komme videre med oppgaven sin, skal teksten formidle dette. Når meldingen er lengre enn en setning, kan det være lurt å ha med en overskrift som fremhever det viktigste.
8381

82+
Unngå flere alerts på samme side, da det kan forvirre brukeren og gjøre det vanskelig å forstå hva som er viktig.
83+
8484
Her er en liste med hvilken type informasjon varsel bør inneholde:
8585
- Fortell hva som har skjedd
8686
- **Eksempel:** "Kunne ikke koble til konto."

0 commit comments

Comments
 (0)