@navikt/ds-react 5.5.0 → 5.6.0

package/src/expansion-card/expansion-card.stories.tsx

@@ -1,14 +1,12 @@
 import { PlantIcon } from "@navikt/aksel-icons";
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
-import { ExpansionCard } from ".";
+import { ExpansionCard, ExpansionCardProps } from ".";
 import { BodyLong } from "../typography";
-import ExpansionCardContent from "./ExpansionCardContent";
-import ExpansionCardHeader from "./ExpansionCardHeader";
 
-export default {
+const meta: Meta<typeof ExpansionCard> = {
   title: "ds-react/ExpansionCard",
   component: ExpansionCard,
-  subcomponents: [ExpansionCardHeader, ExpansionCardContent],
   decorators: [
     (Story) => (
       <div
@@ -26,6 +24,7 @@ export default {
     ),
   ],
 };
+export default meta;
 
 const Content = () => (
   <ExpansionCard.Content>
@@ -59,42 +58,54 @@ const Content = () => (
   </ExpansionCard.Content>
 );
 
-export const Default = {
-  render: (props) => {
-    return (
-      <ExpansionCard
-        {...props}
-        open={props?.open || undefined}
-        size={props.size}
-        aria-label="default-demo"
-      >
-        <ExpansionCard.Header>
-          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-          {props.description && (
-            <ExpansionCard.Description>
-              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-              til tid, sted og arbeidsoppgaver
-            </ExpansionCard.Description>
-          )}
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
-    );
-  },
-  args: {
-    open: false,
-    size: "medium",
-    description: false,
-    variant: "neutral",
-  },
-  argTypes: {
-    size: { control: "select", options: ["medium", "small"] },
-  },
+type DefaultStoryProps = ExpansionCardProps & { description: boolean };
+type DefaultStory = StoryFn<DefaultStoryProps>;
+export const Default: DefaultStory = (props: DefaultStoryProps) => {
+  return (
+    <ExpansionCard
+      {...props}
+      open={props.open || undefined}
+      aria-label="default-demo"
+    >
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        {props.description && (
+          <ExpansionCard.Description>
+            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+            til tid, sted og arbeidsoppgaver
+          </ExpansionCard.Description>
+        )}
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  );
+};
+Default.args = {
+  open: false,
+  size: "medium",
+  description: false,
 };
+Default.argTypes = {
+  size: { control: "radio", options: ["medium", "small"] },
+};
+
+export const Description = () => (
+  <ExpansionCard aria-label="bare description">
+    <ExpansionCard.Header>
+      <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+      <ExpansionCard.Description>
+        For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+        tid, sted og arbeidsoppgaver
+      </ExpansionCard.Description>
+    </ExpansionCard.Header>
+    <Content />
+  </ExpansionCard>
+);
 
-export const Description = {
-  render: () => (
-    <ExpansionCard aria-label="bare description">
+export const Sizes = () => (
+  <>
+    <h2>Medium</h2>
+    <ExpansionCard aria-label="Demo med description">
       <ExpansionCard.Header>
         <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
         <ExpansionCard.Description>
@@ -104,16 +115,41 @@ export const Description = {
       </ExpansionCard.Header>
       <Content />
     </ExpansionCard>
-  ),
-};
+    <ExpansionCard aria-label="Demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+    <h2>Small</h2>
+    <ExpansionCard size="small" aria-label="small-demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+    <ExpansionCard
+      size="small"
+      aria-label="small-demo med avatar uten description"
+    >
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
+  </>
+);
 
-export const Sizes = {
-  render: () => (
-    <>
-      <h2>Medium</h2>
-      <ExpansionCard aria-label="Demo med description">
+export const HeadingSizing = () => (
+  <>
+    {(["large", "medium", "small"] as const).map((size) => (
+      <ExpansionCard key={size} aria-label={`demo-${size}`}>
         <ExpansionCard.Header>
-          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+          <ExpansionCard.Title size={size}>{size}</ExpansionCard.Title>
           <ExpansionCard.Description>
             For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
             til tid, sted og arbeidsoppgaver
@@ -121,58 +157,31 @@ export const Sizes = {
         </ExpansionCard.Header>
         <Content />
       </ExpansionCard>
-      <ExpansionCard aria-label="Demo">
-        <ExpansionCard.Header>
-          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
-      <h2>Small</h2>
-      <ExpansionCard size="small" aria-label="small-demo">
-        <ExpansionCard.Header>
-          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-          <ExpansionCard.Description>
-            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-            til tid, sted og arbeidsoppgaver
-          </ExpansionCard.Description>
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
-      <ExpansionCard
-        size="small"
-        aria-label="small-demo med avatar uten description"
-      >
-        <ExpansionCard.Header>
-          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
-    </>
-  ),
-};
+    ))}
+  </>
+);
 
-export const HeadingSizing = {
-  render: () => (
-    <>
-      {(["large", "medium", "small"] as const).map((x) => (
-        <ExpansionCard aria-label={`demo-${x}`}>
-          <ExpansionCard.Header key={x}>
-            <ExpansionCard.Title size={x}>{x}</ExpansionCard.Title>
-            <ExpansionCard.Description>
-              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-              til tid, sted og arbeidsoppgaver
-            </ExpansionCard.Description>
-          </ExpansionCard.Header>
-          <Content />
-        </ExpansionCard>
-      ))}
-    </>
-  ),
-};
+export const DefaultOpen = () => (
+  <ExpansionCard defaultOpen aria-label="defaultOpen demo">
+    <ExpansionCard.Header>
+      <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+      <ExpansionCard.Description>
+        For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+        tid, sted og arbeidsoppgaver
+      </ExpansionCard.Description>
+    </ExpansionCard.Header>
+    <Content />
+  </ExpansionCard>
+);
 
-export const DefaultOpen = {
-  render: () => (
-    <ExpansionCard defaultOpen aria-label="defaultOpen demo">
+export const ControlledState = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <ExpansionCard
+      open={open}
+      onToggle={setOpen}
+      aria-label="Controlled-state demo"
+    >
       <ExpansionCard.Header>
         <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
         <ExpansionCard.Description>
@@ -182,77 +191,51 @@ export const DefaultOpen = {
       </ExpansionCard.Header>
       <Content />
     </ExpansionCard>
-  ),
-};
-
-export const ControlledState = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [open, setOpen] = useState(false);
-    return (
-      <ExpansionCard
-        open={open}
-        onToggle={setOpen}
-        aria-label="Controlled-state demo"
-      >
-        <ExpansionCard.Header>
-          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-          <ExpansionCard.Description>
-            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-            til tid, sted og arbeidsoppgaver
-          </ExpansionCard.Description>
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
-    );
-  },
+  );
 };
 
-export const Customization = {
-  render: () => (
-    <div className="subtle-card">
-      <ExpansionCard aria-label="custom-styling demo">
-        <ExpansionCard.Header>
-          <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-          <ExpansionCard.Description>
-            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-            til tid, sted og arbeidsoppgaver
-          </ExpansionCard.Description>
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
+export const Customization = () => (
+  <div className="subtle-card">
+    <ExpansionCard aria-label="custom-styling demo">
+      <ExpansionCard.Header>
+        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+        <ExpansionCard.Description>
+          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
+          tid, sted og arbeidsoppgaver
+        </ExpansionCard.Description>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
 
-      <style>{`
+    <style>{`
         .subtle-card {
           --ac-expansioncard-bg: var(--a-surface-subtle);
           --ac-expansioncard-border-open-color: var(--a-border-alt-3);
         }`}</style>
-    </div>
-  ),
-};
+  </div>
+);
 
-export const Icon = {
-  render: () => (
-    <div>
-      <ExpansionCard aria-label="custom-styling demo">
-        <ExpansionCard.Header>
-          <div className="with-icon">
-            <div className="icon">
-              <PlantIcon aria-hidden />
-            </div>
-            <div>
-              <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-              <ExpansionCard.Description>
-                For at yrkesskadedekningen skal gjelde, er det som hovedregel
-                krav til tid, sted og arbeidsoppgaver
-              </ExpansionCard.Description>
-            </div>
+export const Icon = () => (
+  <div>
+    <ExpansionCard aria-label="custom-styling demo">
+      <ExpansionCard.Header>
+        <div className="with-icon">
+          <div className="icon">
+            <PlantIcon aria-hidden />
           </div>
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
+          <div>
+            <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
+            <ExpansionCard.Description>
+              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
+              til tid, sted og arbeidsoppgaver
+            </ExpansionCard.Description>
+          </div>
+        </div>
+      </ExpansionCard.Header>
+      <Content />
+    </ExpansionCard>
 
-      <style>{`
+    <style>{`
         .with-icon {
           display: flex;
           align-items: center;
@@ -264,6 +247,5 @@ export const Icon = {
           display: grid;
           place-content: center;
         }`}</style>
-    </div>
-  ),
-};
+  </div>
+);

package/src/form/ConfirmationPanel.test.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import faker from "faker";
 import { ConfirmationPanel } from ".";
 
 test("omits error id from input", async () => {
   const label = faker.datatype.string();
 
-  const { getByLabelText } = render(
-    <ConfirmationPanel label={label} errorId="wat"></ConfirmationPanel>
-  );
+  render(<ConfirmationPanel label={label} errorId="wat"></ConfirmationPanel>);
 
-  expect(getByLabelText(label).getAttribute("errorid")).toBeNull();
+  const elm = screen.getByLabelText(label);
+  expect(elm).toBeInTheDocument();
+  expect(elm.getAttribute("errorid")).toBeNull();
 });

package/src/form/Select.tsx

@@ -138,7 +138,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
               "navds-body-short",
               `navds-body--${size ?? "medium"}`
             )}
-            size={props.htmlSize}
+            size={htmlSize}
           >
             {children}
           </select>

package/src/form/checkbox/Checkbox.test.tsx

@@ -1,21 +1,17 @@
 import React from "react";
-import { act, fireEvent, render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import faker from "faker";
 import { Checkbox, CheckboxGroup } from ".";
 
 const firstArgumentOfFirstCall = (fn: jest.Mock) => fn.mock.calls[0][0];
 
-test("checkbox with error id does not give type error", () => {
-  <Checkbox errorId="wat">child</Checkbox>;
-});
-
 test("checkbox group chains onChange calls", async () => {
   const onGroupChange = jest.fn();
   const onChange = jest.fn();
   const value = faker.datatype.string();
   const label = faker.datatype.string();
 
-  const { getByLabelText } = render(
+  render(
     <CheckboxGroup legend="legend" onChange={onGroupChange}>
       <Checkbox onChange={onChange} value={value}>
         {label}
@@ -23,13 +19,11 @@ test("checkbox group chains onChange calls", async () => {
     </CheckboxGroup>
   );
 
-  await act(async () => {
-    fireEvent.click(getByLabelText(label));
-  });
+  fireEvent.click(screen.getByLabelText(label));
 
-  expect(onGroupChange).toBeCalledTimes(1);
-  expect(onGroupChange).toBeCalledWith([value]);
-  expect(onChange).toBeCalledTimes(1);
+  expect(onGroupChange).toHaveBeenCalledTimes(1);
+  expect(onGroupChange).toHaveBeenCalledWith([value]);
+  expect(onChange).toHaveBeenCalledTimes(1);
   expect(firstArgumentOfFirstCall(onChange).target.checked).toBe(true);
 });
 
@@ -42,14 +36,10 @@ describe("Checkbox handles controlled-state correctly", () => {
   );
 
   test("Checkbox is still checked after click when controlled", async () => {
-    const { getByLabelText } = render(
-      <CheckboxComponent value={["value1", "value2"]} />
-    );
+    render(<CheckboxComponent value={["value1", "value2"]} />);
 
-    await act(async () => {
-      fireEvent.click(getByLabelText("label1"));
-      fireEvent.click(getByLabelText("label2"));
-    });
+    fireEvent.click(screen.getByLabelText("label1"));
+    fireEvent.click(screen.getByLabelText("label2"));
 
     expect((screen.getByLabelText("label1") as HTMLInputElement).checked).toBe(
       true
@@ -63,20 +53,18 @@ describe("Checkbox handles controlled-state correctly", () => {
   test("onChange called with expected values", async () => {
     const onGroupChange = jest.fn();
 
-    const { getByLabelText } = render(
+    render(
       <CheckboxComponent
         onChange={onGroupChange}
         value={["value1", "value2"]}
       />
     );
 
-    await act(async () => {
-      fireEvent.click(getByLabelText("label1"));
-      expect(onGroupChange).lastCalledWith(["value2"]);
+    fireEvent.click(screen.getByLabelText("label1"));
+    expect(onGroupChange).toHaveBeenLastCalledWith(["value2"]);
 
-      fireEvent.click(getByLabelText("label2"));
-      expect(onGroupChange).lastCalledWith(["value1"]);
-    });
+    fireEvent.click(screen.getByLabelText("label2"));
+    expect(onGroupChange).toHaveBeenLastCalledWith(["value1"]);
   });
 
   test("Checkboxes updates after value-prop change", () => {

package/src/form/checkbox/checkbox.stories.tsx

@@ -1,86 +1,81 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Checkbox, CheckboxGroup } from "../../index";
 
-export default {
+const meta: Meta<typeof Checkbox> = {
   title: "ds-react/Checkbox",
   component: Checkbox,
-  subcomponents: {
-    CheckboxGroup,
-  },
   argTypes: {
-    size: { control: { type: "select", options: ["medium", "small"] } },
+    size: {
+      options: ["medium", "small"],
+      control: { type: "radio" },
+    },
   },
-} as Meta;
+};
+export default meta;
 
-export const Default = {
-  render: (props) => {
-    const [state, setState] = useState(["checkbox1"]);
+export const Default = (props) => {
+  const [state, setState] = useState(["checkbox1"]);
 
-    return (
-      <div>
-        <CheckboxGroup
-          legend={props.legend}
-          description={props.description}
-          value={props.controlled ? state : undefined}
-          onChange={props.controlled ? setState : undefined}
-          hideLegend={props.hideLegend}
-          error={
-            props.errorGroup ? "Errormelding for checkboxgruppe" : undefined
+  return (
+    <div>
+      <CheckboxGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.errorGroup ? "Errormelding for checkboxgruppe" : undefined}
+        size={props?.size}
+      >
+        <Checkbox
+          value="checkbox1"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Apple"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox2"
+          error={props.errorSingle}
+          description={
+            props.checkboxDescription
+              ? "Quis laborum culpa enim amet cillum veniam."
+              : undefined
           }
-          size={props?.size}
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
         >
-          <Checkbox
-            value="checkbox1"
-            indeterminate={props.indeterminate}
-            hideLabel={props.hideLabel}
-          >
-            {props.children || "Apple"}
-          </Checkbox>
-          <Checkbox
-            value="checkbox2"
-            error={props.errorSingle}
-            description={
-              props.checkboxDescription
-                ? "Quis laborum culpa enim amet cillum veniam."
-                : undefined
-            }
-            indeterminate={props.indeterminate}
-            hideLabel={props.hideLabel}
-          >
-            {props.children || "Orange"}
-          </Checkbox>
-          <Checkbox
-            value="checkbox3"
-            indeterminate={props.indeterminate}
-            hideLabel={props.hideLabel}
-          >
-            {props.children || "Banana"}
-          </Checkbox>
-          <Checkbox
-            value="checkbox4"
-            indeterminate={props.indeterminate}
-            hideLabel={props.hideLabel}
-          >
-            {props.children || "Melon"}
-          </Checkbox>
-        </CheckboxGroup>
-      </div>
-    );
-  },
-
-  args: {
-    controlled: false,
-    legend: "Legend-tekst",
-    checkboxDescription: false,
-    hideLabel: false,
-    hideLegend: false,
-    errorSingle: false,
-    errorGroup: false,
-    children: "",
-    description: "",
-  },
+          {props.children || "Orange"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox3"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Banana"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox4"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Melon"}
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
+  );
+};
+Default.args = {
+  controlled: false,
+  legend: "Legend-tekst",
+  checkboxDescription: false,
+  hideLabel: false,
+  hideLegend: false,
+  errorSingle: false,
+  errorGroup: false,
+  children: "",
+  description: "",
 };
 
 export const Group = () => (

package/src/form/checkbox/useCheckbox.ts

@@ -1,17 +1,16 @@
 import { useContext } from "react";
-import { CheckboxProps } from "../..";
+import { CheckboxProps, omit } from "../..";
 import { useFormField } from "../useFormField";
 import { CheckboxGroupContext } from "./CheckboxGroup";
-import { omit } from "../..";
 
 /**
  * Handles props for Checkboxes in context with Fieldset and CheckboxGroup
  */
-const useCheckbox = ({ children, ...props }: CheckboxProps) => {
+const useCheckbox = (props: CheckboxProps) => {
   const checkboxGroup = useContext(CheckboxGroupContext);
 
   const { inputProps, readOnly, ...rest } = useFormField(
-    omit(props, ["description"]),
+    omit(props, ["description", "children"]),
     "checkbox"
   );