docs: article about error messages (cross-agency cooperation)

apps/storefront/pages/monstre/obligatoriske-og-valgfrie-felt.mdx

@@ -1,3 +1,5 @@
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+
 import { MenuPageLayout } from '@layouts';
 import { Meta, Image } from '@components';
 
@@ -18,6 +20,20 @@ export default ({ children }) => (
 
 Det er flere måter å markere obligatoriske felt på som [oppfyller kravene til merking](https://www.uutilsynet.no/veiledning/skjema/38#ledetekster_og_instruksjoner). I dag gjør vi dette ulikt på tvers. Noen bruker asterisk (stjerne), noen bruker ord, andre informerer i forkant om hva som må fylles ut. Klarer vi å gjøre dette mer likt på tvers blir det lettere for innbygger å forstå og kjenne igjen mønsteret på tvers av løsningene våre. Det vil alltid være unntak og ulike kontekster som krever ulik merking.
 
+<Card
+  color='third'
+>
+  <Card.Content
+  style={{
+    paddingTop: '0px',
+    paddingBottom: '0px'
+  }}
+  >
+    *Retningslinjene er utarbeidet i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg og Oslo Origo. Du kan påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/issues/new) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
+
+  </Card.Content>
+</Card>
+
 En generell retningslinje er at vi bør unngå å be om informasjon vi ikke trenger, altså unngå valgfrie felt.
 
 Her tar vi for oss 3 eksempler.

apps/storefront/pages/monstre/systemvarsler.mdx

@@ -0,0 +1,46 @@
+import { Card, Heading, Paragraph } from '@digdir/designsystemet-react';
+
+import { Meta, Image } from '@components';
+import { MenuPageLayout } from '@layouts';
+
+<Meta
+  title='Systemvarsler'
+  description='..'
+/>
+
+export default ({ children }) => (
+  <MenuPageLayout
+    content={children}
+    data={{
+      title: 'Systemvarsler',
+      date: '4. juni 2024',
+    }}
+  />
+);
+
+<Card
+  color='third'
+>
+  <Card.Content
+  style={{
+    paddingTop: '0px',
+    paddingBottom: '0px'
+  }}
+  >
+    *Retningslinjene er under arbeid fra 5. juni 2024 i en tverretatlig arbeidsgruppe med deltakere fra Digdir, Nav, Skatt, Brreg, Politiet, KS DIF og Oslo kommune. Alle er velkommen til å påvirke arbeidet i [Github](https://github.com/digdir/designsystemet/discussions/2083) eller i [#Mønster-kanalen](https://designsystemet.slack.com/archives/C05RBGB92MC/p1712751837722749) på [Slack](https://join.slack.com/t/designsystemet/shared_invite/zt-2438eotl3-a4266Vd2IeqMWO8TBw5PrQ).
+
+  </Card.Content>
+</Card>
+
+Systemvarsler brukes for å varsle brukeren enten om feil i systemet eller holde dem informert om viktige ting de bør få med seg. Vi bruker dem til feil som ikke tilhører et skjemaelement, og som ikke validerer brukerens inndata. De bør derfor ha et annet utseende enn [brukerutløste feil](/monstre/feilmeldinger).
+
+Systemvarsler kan for eksempel komme i form av [`alert`](https://storybook.designsystemet.no/?path=/docs/komponenter-alert--docs), `toast`, [`modal`](https://storybook.designsystemet.no/?path=/docs/komponenter-modal--docs) eller [`popover`](https://storybook.designsystemet.no/?path=/docs/komponenter-popover--docs).
+
+Eksempler på varsler:
+
+- Tjenesten vår er dessverre nede, men vi jobber med saken. Prøv igjen om litt. Hvis du fortsatt har problemer, kan du ta kontakt med oss.
+- Det kan se ut som du ikke er koblet til internett. Sjekk tilkoblingen din og prøv igjen.
+- Tjenesten vil være nede onsdag 24. juni 2029 mellom klokken 04-06.
+- Du har nå tatt i bruk den nyeste versjonen av tjenesten. Du kan bytte tilbake til den gamle versjonen ved å klikke her.
+- Du har ikke foretatt deg noe på en stund, og påloggingen er i ferd med å utløpe. Du vil bli logget ut om 5 minutter. Arbeidet ditt er lagret.
+- Er du sikker på at du vil avbryte nå? Du kan miste arbeidet du allerede har gjort.

apps/storefront/siteConfig.tsx

@@ -139,39 +139,43 @@ export const SiteConfig = {
       url: 'monstre',
       children: [
         {
-          name: 'Brukeroppgaver',
+          name: 'Ferdig',
           url: 'monstre/brukeroppgaver',
           children: [
             {
-              name: 'Innlogging',
-              url: 'monstre/innlogging',
-            },
-            {
-              name: 'Navigering',
-              url: 'monstre/navigering',
+              name: 'Obligatoriske felt *',
+              url: 'monstre/obligatoriske-og-valgfrie-felt',
             },
             {
-              name: 'Ofte brukte handlinger',
-              url: 'monstre/handlinger',
+              name: 'Feilmeldinger *',
+              url: 'monstre/feilmeldinger',
             },
           ],
         },
         {
-          name: 'Skjema',
+          name: 'Kommende',
           url: 'monstre/skjema',
           children: [
             {
-              name: 'Obligatoriske og valgfrie skjemafelt',
-              url: 'monstre/obligatoriske-og-valgfrie-felt',
-            },
-            {
-              name: 'Feilmeldinger',
-              url: 'monstre/feilmeldinger',
+              name: 'Systemvarsler *',
+              url: 'monstre/systemvarsler',
             },
             {
               name: 'Dato',
               url: 'monstre/dato',
             },
+            {
+              name: 'Innlogging',
+              url: 'monstre/innlogging',
+            },
+            {
+              name: 'Navigering',
+              url: 'monstre/navigering',
+            },
+            {
+              name: 'Ofte brukte handlinger',
+              url: 'monstre/handlinger',
+            },
           ],
         },
       ],