@navikt/ds-react 6.0.0-alpha.2 → 6.0.0

package/src/alert/alert.stories.tsx

@@ -1,12 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
 import React from "react";
-import { Alert, AlertProps } from ".";
-import { BodyLong, Heading as DsHeading, Link } from "..";
+import { VStack } from "../layout/stack";
+import { Link } from "../link";
+import { BodyLong, Heading as DsHeading } from "../typography";
+import Alert, { AlertProps } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
   component: Alert,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export default meta;
@@ -20,12 +24,13 @@ const variants: AlertProps["variant"][] = [
   "success",
 ];
 
-export const Default: Story = {
+export const Controls: Story = {
   render: (props) => <Alert {...props} />,
 
   args: {
     children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
     fullWidth: false,
+    inline: false,
     variant: "info",
     size: "medium",
     closeButton: false,
@@ -42,43 +47,18 @@ export const Default: Story = {
   },
 };
 
-export const Small: Story = {
-  render: (props) => {
-    return (
-      <div className="colgap">
-        {variants.map((variant, i) => (
-          <Alert
-            key={variant}
-            variant={variant}
-            size="small"
-            closeButton={props.closeButton}
-          >
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-            )}
-          </Alert>
-        ))}
-      </div>
-    );
-  },
-
-  args: {
-    closeButton: false,
-  },
-};
-
-export const FullWidth = () => {
+export const Variants = () => {
   return (
     <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth>
+        <Alert key={variant} variant={variant}>
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth size="small">
+        <Alert key={variant} variant={variant} size="small">
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
@@ -88,24 +68,42 @@ export const FullWidth = () => {
   );
 };
 
+export const FullWidth = () => {
+  return (
+    <VStack gap="4">
+      <Alert variant="info" fullWidth>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" fullWidth size="small">
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
+  );
+};
+
 export const Inline = () => {
   return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline>
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-    </div>
+    <VStack gap="4">
+      <h2>Inline</h2>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
   );
 };
 
@@ -136,82 +134,173 @@ export const Heading = () => {
   );
 };
 
-export const Links = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant) => (
-        <Alert key={variant} variant={variant}>
-          <Link href="#">Id elit esse enim reprehenderit</Link>
-        </Alert>
-      ))}
-    </div>
-  );
-};
-
-const AlertWithCloseButton = ({
-  children,
-  size,
-}: {
-  size?: "medium" | "small";
-  children?: React.ReactNode;
-}) => {
-  const [show, setShow] = React.useState(true);
-
-  return show ? (
-    <Alert
-      variant="warning"
-      size={size}
-      closeButton
-      onClose={() => setShow(false)}
-    >
-      {children || "Content"}
-    </Alert>
-  ) : null;
-};
-
-export const WithCloseButton: Story = {
+export const CloseButton: Story = {
   render: () => {
     return (
-      <div className="colgap">
-        <AlertWithCloseButton />
-        <AlertWithCloseButton>
-          <BodyLong>Ullamco ullamco laborum et commodo sint culpa</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton>
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+      <VStack gap="4">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
           </DsHeading>
           <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
           </BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <BodyLong>Ullamco ullamco laborum et commodo</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+        </Alert>
+        <Alert variant="info" closeButton size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
           </DsHeading>
           <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
           </BodyLong>
-        </AlertWithCloseButton>
-      </div>
+        </Alert>
+      </VStack>
     );
   },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const buttons = canvas.getAllByTitle("Lukk Alert");
+};
 
-    await step("click button", async () => {
-      await userEvent.click(buttons[0]);
-    });
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="6">
+      <VStack gap="2">
+        <h2>Variant</h2>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant}>
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            )}
+          </Alert>
+        ))}
+      </VStack>
+      <VStack gap="2">
+        <h2>Small</h2>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>FullWidth</h2>
+        <Alert variant="info" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Inline</h2>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Heading</h2>
+        <Alert variant="info">
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small" closeButton>
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>
 
-    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
-    expect(buttonsAfter.length).toBe(4);
+      <VStack gap="2">
+        <h2>Links</h2>
+        {variants.map((variant) => (
+          <Alert key={variant} variant={variant}>
+            <Link href="#">Id elit esse enim reprehenderit</Link>
+          </Alert>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
   },
 };