@navikt/ds-react 6.3.2 → 6.3.4

package/src/read-more/readmore.stories.tsx

@@ -1,65 +1,91 @@
-import { Meta, StoryFn } from "@storybook/react";
-import React, { useState } from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import React from "react";
 import { ReadMore } from ".";
+import { VStack } from "../layout/stack";
 
-const meta: Meta<typeof ReadMore> = {
+export default {
   title: "ds-react/ReadMore",
   component: ReadMore,
-};
-export default meta;
+  parameters: {
+    chromatic: { disable: true },
+  },
+} satisfies Meta<typeof ReadMore>;
 
-export const Default: StoryFn<{
-  controlled: boolean;
-  size: "medium" | "small";
-  defaultOpen: boolean;
-}> = (props) => {
-  const [state, setState] = useState(false);
+type Story = StoryObj<typeof ReadMore>;
+
+const Content = (
+  <div style={{ maxWidth: 300 }}>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, tempore
+    corporis exercitationem minus dignissimos eius aspernatur fugiat iusto.
+  </div>
+);
 
-  return (
-    <ReadMore
-      open={props.controlled ? state : undefined}
-      onClick={() => setState((x) => !x)}
-      header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
-      size={props.size}
-      onOpenChange={console.log}
-      defaultOpen={props.defaultOpen}
-    >
-      <div style={{ maxWidth: 300 }}>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia,
-        tempore corporis exercitationem minus dignissimos eius aspernatur fugiat
-        iusto.
-      </div>
-    </ReadMore>
-  );
+export const Default: Story = {
+  args: {
+    size: "medium",
+    defaultOpen: false,
+    onOpenChange: fn(),
+    children: Content,
+    header: "Grunnen til at vi spør om dette og i tillegg ber om vedlegg",
+  },
+  argTypes: {
+    size: {
+      options: ["medium", "small"],
+      control: { type: "radio" },
+    },
+  },
 };
-Default.args = {
-  controlled: false,
-  size: "medium",
-  defaultOpen: false,
+
+export const Small: Story = {
+  args: {
+    ...Default.args,
+    size: "small",
+  },
 };
-Default.argTypes = {
-  size: {
-    options: ["medium", "small"],
-    control: { type: "radio" },
+
+export const DefaultOpen: Story = {
+  args: {
+    ...Default.args,
+    defaultOpen: true,
   },
 };
 
-export const Small = () => (
-  <ReadMore
-    header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
-    size="small"
-  >
-    Command station, this is ST 321. Code Clearance Blue. We&apos;re starting
-    our approach. Deactivate the security shield.
-  </ReadMore>
-);
+export const Open: Story = {
+  args: {
+    ...Default.args,
+    open: true,
+  },
+};
 
-export const Open = () => (
-  <ReadMore
-    header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
-    defaultOpen
-  >
-    Command station, this is ST 321. Code Clearance Blue. We&apos;re starting
-    our approach. Deactivate the security shield.
-  </ReadMore>
-);
+export const Chromatic: Story = {
+  render: () => {
+    return (
+      <VStack gap="4">
+        <div>
+          <h2>Default</h2>
+          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
+          <ReadMore {...Default.args} />
+        </div>
+        <div>
+          <h2>Small</h2>
+          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
+          <ReadMore {...Small.args} />
+        </div>
+        <div>
+          <h2>DefaultOpen</h2>
+          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
+          <ReadMore {...DefaultOpen.args} />
+        </div>
+        <div>
+          <h2>Controlled open</h2>
+          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
+          <ReadMore {...Open.args} />
+        </div>
+      </VStack>
+    );
+  },
+  parameters: {
+    chromatic: { disable: false },
+  },
+};