docs(Alert): add documentation for new Alert component

content/app/development/ux/components/alertComponent/_index.en.md

@@ -0,0 +1,122 @@
+---
+title: Alert
+description: This component displays an important message to the user. The component can be used to display a message with different levels of severity.
+hidden: false
+---
+
+## Usage
+
+Alerts are commonly used to display important information to users that should be highlighted.
+
+* [Page layout JSON schema](https://altinncdn.no/schemas/json/layout/layout.schema.v1.json)
+
+## Component properties
+
+| **Property** | **Title**    | **Type**                                       | **Description**                                                                                |
+|--------------|--------------|------------------------------------------------|------------------------------------------------------------------------------------------------|
+| `severity`   | Severity     | `"success" \| "info" \| "danger" \| "warning"` | String value indicating the severity level of the alert. This affect the styling of the alert. |
+
+### Properties Description
+
+The component has these properties:
+
+#### severity
+
+The severity of the alert. This affects the styling of the alert.
+
+
+#### textResourceBindings
+
+`title` and `description` can be configured with `textResourceBindings` to display text from the resource file.
+
+## Accessibility
+
+The component does not get `role="alert"` by default. This means that screen readers will not treat this as an alert.
+An `Alert` should only have `role="alert"` if it appears in the ui as a result of an action the user has taken.
+We automatically add `role="alert"` if the `Alert` has a `hidden` property set to `false`. This means that the `Alert` 
+became visible to the user based on an action the user has taken.
+
+## Examples
+
+### Info
+
+En alert med `severity` `"info"`
+
+![Info card](info.png)
+
+`FormLayout.json` example:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "info"
+}
+
+```
+
+### Success
+
+En alert med `severity` `"success"`
+
+![Info card](success.png)
+
+`FormLayout.json` example:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "success"
+}
+
+```
+### Warning
+
+En alert med `severity` `"warning"`
+
+![Info card](warning.png)
+
+`FormLayout.json` example:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "warning"
+}
+
+```
+### Danger
+
+En alert med `severity` `"danger"`
+
+![Info card](danger.png)
+
+`FormLayout.json` example:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "danger"
+}
+
+```
+

content/app/development/ux/components/alertComponent/_index.nb.md

@@ -0,0 +1,127 @@
+---
+title: Alert
+description: Denne komponenten viser en viktig melding til brukeren. Komponenten kan brukes til å vise en melding med ulike alvorlighetsgrader.
+skjult: false
+---
+
+## Bruk
+
+Alert brukes ofte til å vise viktig informasjon som skal fremheves for brukerne.
+
+* [Sideoppsett JSON-skjema](https://altinncdn.no/schemas/json/layout/layout.schema.v1.json)
+
+## Komponentegenskaper
+
+| **Egenskap** | **Tittel**       | **Type**                                       | **Beskrivelse**                                                                               |
+|--------------|------------------|------------------------------------------------|-----------------------------------------------------------------------------------------------|
+| `severity`   | Alvorlighetsgrad | `"success" \| "info" \| "danger" \| "warning"` | Strengverdi som angir alvorlighetsgraden til varselet. Dette påvirker utseendet til varselet. |
+| `useAsAlert` | Bruk som varsel  | `bool`                                         | Angir om varselet skal ha attributtet `role="alert"`. Som standard er dette satt til `false`. |
+
+### Beskrivelse av egenskaper
+
+Komponenten har følgende egenskaper:
+
+#### severity
+
+Alvorlighetsgraden til varselet. Dette påvirker utseendet til varselet.
+
+#### useAsAlert
+
+Når denne innstillingen er satt til `true`, vil varselet få attributtet `role="alert"`. Dette er nyttig for
+skjermlesere,
+da de vil lese opp innholdet i varselet når det vises i DOM-en. Dette bør bare brukes for varsler som vises etter en
+brukerhandling, for eksempel innsending av et skjema eller lasting av en side.
+
+#### textResourceBindings
+
+`title` og `description` kan konfigureres med `textResourceBindings` for å vise tekst fra ressursfilen.
+
+## Tilgjengelighet
+
+Komponenten får ikke automatisk `role="alert"`. Dette betyr at skjermlesere ikke vil behandle den som en varsel.
+En Alert bør bare ha `role="alert"` hvis den vises i brukergrensesnittet som et resultat av en handling brukeren har tatt.
+Vi legger automatisk til `role="alert"` hvis `Alert` har en `hidden`-egenskap satt til false. Dette betyr at `Alert`-en
+ble synlig for brukeren basert på en handling brukeren tok.
+
+## Eksempel
+
+### Info
+
+En alert med `severity` `"info"`
+
+![Info card](info.png)
+
+`FormLayout.json` eksempel:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "info"
+}
+
+```
+
+### Success
+
+En alert med `severity` `"success"`
+
+![Info card](success.png)
+
+`FormLayout.json` eksempel:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "success"
+}
+```
+
+### Warning
+
+En alert med `severity` `"warning"`
+
+![Info card](warning.png)
+
+`FormLayout.json` eksempel:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "warning"
+}
+```
+
+### Danger
+
+En alert med `severity` `"danger"`
+
+![Info card](danger.png)
+
+`FormLayout.json` eksempel:
+
+```json
+{
+  "id": "alert-id",
+  "type": "Alert",
+  "textResourceBindings": {
+    "title": "Vedrørende navneendring",
+    "description": "Ved å bekrefte navneendring bekrefter du at du ønsker å endre navnet ditt."
+  },
+  "severity": "danger"
+}
+```