Adjust examples and JSDOC for Alert (#3035)

@navikt/core/react/src/alert/Alert.tsx

@@ -16,7 +16,7 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
   /**
-   * Changes colors and icon usage when changed.
+   * Level of severity. Changes colors and icon.
    */
   variant: "error" | "warning" | "info" | "success";
   /**
@@ -35,15 +35,15 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   contentMaxWidth?: boolean;
   /**
-   * Removes background from Alert.
+   * Removes background, border and padding.
    * @default false
    */
   inline?: boolean;
   /**
-   * Removes close-button(X) when false.
+   * Adds a close-button (X).
    *
    * **Requires onClose to be set**.
-   * @default true
+   * @default false
    */
   closeButton?: boolean;
   /**

aksel.nav.no/website/pages/eksempler/alert/fullwidth.tsx

@@ -1,24 +1,20 @@
-import { Alert, VStack } from "@navikt/ds-react";
+import { Alert, Box, HGrid, Page } from "@navikt/ds-react";
 import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <VStack gap="4">
-      <Alert fullWidth variant="info">
-        Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha hatt
-        en pensjonsgivende inntekt som tilsvarer x G, året før du fikk nedsatt
-        arbeidsevnen.
-      </Alert>
-      <Alert fullWidth variant="success">
-        Søknad er sendt inn!
-      </Alert>
-      <Alert fullWidth variant="warning">
-        Du må være registrert hos NAV for å bruke aktivitetsplanen.
-      </Alert>
-      <Alert fullWidth variant="error">
-        Noe gikk galt! Prøv igjen om noen minutter.
-      </Alert>
-    </VStack>
+    <Page contentBlockPadding="none">
+      <Box borderWidth="1" height="60px"></Box>
+      <HGrid columns="200px 1fr" align="start">
+        <Box borderWidth="0 1 1 1" minHeight="calc(100vh - 60px)" />
+
+        <Alert fullWidth variant="info">
+          Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha
+          hatt en pensjonsgivende inntekt som tilsvarer x G, året før du fikk
+          nedsatt arbeidsevnen.
+        </Alert>
+      </HGrid>
+    </Page>
   );
 };
 
@@ -31,5 +27,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 8,
+  index: 4,
+  desc: "'fullWidth' fjerner 'border-radius' slik at alerten blir bedre egnet for å vises i full bredde på toppen av en ramme, som et banner.",
 };

aksel.nav.no/website/pages/eksempler/alert/inline.tsx

@@ -31,6 +31,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 9,
+  index: 5,
   desc: "Bruk inline om varselet er en del av annet innhold eller når panelet og bakgrunnsfarge blir støy for brukeren.",
 };

aksel.nav.no/website/pages/eksempler/alert/med-aria-role.tsx

@@ -33,5 +33,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 10,
+  index: 6,
+  desc: "Bruk 'role' dersom alerten vises dynamisk.",
 };

aksel.nav.no/website/pages/eksempler/alert/med-heading.tsx

@@ -23,6 +23,6 @@ export const Demo = {
 };
 
 export const args = {
-  index: 7,
+  index: 3,
   desc: "Husk riktig h-tag ved bruk av heading i Alert.",
 };

aksel.nav.no/website/pages/eksempler/alert/med-lukkeknapp.tsx

@@ -48,5 +48,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 6,
+  index: 2,
 };

aksel.nav.no/website/pages/eksempler/alert/small.tsx → aksel.nav.no/website/pages/eksempler/alert/sizes.tsx

@@ -3,12 +3,12 @@ import { withDsExample } from "@/web/examples/withDsExample";
 
 const Example = () => {
   return (
-    <VStack gap="4" align="center">
-      <Alert size="small" variant="success">
-        Søknad er sendt inn!
+    <VStack gap="6" align="center">
+      <Alert size="medium" variant="success">
+        Medium success alert
       </Alert>
-      <Alert size="small" variant="success" inline>
-        Søknad er sendt inn!
+      <Alert size="small" variant="success">
+        Small success alert
       </Alert>
     </VStack>
   );
@@ -23,5 +23,5 @@ export const Demo = {
 };
 
 export const args = {
-  index: 5,
+  index: 1,
 };

aksel.nav.no/website/pages/eksempler/alert/demo.tsx → aksel.nav.no/website/pages/eksempler/alert/variants.tsx

@@ -4,16 +4,17 @@ import { withDsExample } from "@/web/examples/withDsExample";
 const Example = () => {
   return (
     <VStack gap="4">
-      <Alert variant="info">
-        Hvis du er mellom 62 og 67 år når du søker, må du som hovedregel ha hatt
-        en pensjonsgivende inntekt som tilsvarer x G, året før du fikk nedsatt
-        arbeidsevnen.
+      <Alert variant="info">Info - Formidler viktig informasjon.</Alert>
+      <Alert variant="success">
+        Success - Bekrefter at en oppgave er fullført som forventet.
       </Alert>
-      <Alert variant="success">Søknad er sendt inn!</Alert>
       <Alert variant="warning">
-        Du må være registrert hos NAV for å bruke aktivitetsplanen.
+        Warning - Bruk denne når du vil at brukeren skal foreta en bestemt
+        handling eller for å advare dem om noe viktig.
+      </Alert>
+      <Alert variant="error">
+        Error - Brukes til å informere brukeren om at noe kritisk har skjedd.
       </Alert>
-      <Alert variant="error">Noe gikk galt! Prøv igjen om noen minutter.</Alert>
     </VStack>
   );
 };