@navikt/ds-react 5.5.0 → 5.6.0

package/src/popover/popover.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Popover } from "../index";
 import { Button } from "../button";
@@ -25,60 +24,45 @@ export default {
   },
   argTypes: {
     open: {
-      control: {
-        type: "boolean",
-      },
+      control: { type: "boolean" },
     },
     arrow: {
-      control: {
-        type: "boolean",
-      },
+      control: { type: "boolean" },
     },
     offset: {
-      control: {
-        type: "number",
-      },
+      control: { type: "number" },
     },
     strategy: {
       defaultValue: "absolute",
-      control: {
-        type: "radio",
-        options: ["fixed", "absolute"],
-      },
+      options: ["fixed", "absolute"],
+      control: { type: "radio" },
     },
     placement: {
       defaultValue: "right",
-      control: {
-        type: "radio",
-        options: placements,
-      },
+      options: placements,
+      control: { type: "radio" },
     },
   },
 };
 
-export const Default = {
-  render: (props: any) => {
-    const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>();
-    const [open, setOpen] = useState<boolean>(false);
-    return (
-      <div>
-        <Button
-          ref={(el) => setAnchorEl(el)}
-          onClick={() => setOpen((x) => !x)}
-        >
-          Open
-        </Button>
-        <Popover
-          {...props}
-          open={props.open ?? open}
-          anchorEl={anchorEl}
-          onClose={(e) => setOpen(e)}
-        >
-          <Popover.Content>Velit in consequat</Popover.Content>
-        </Popover>
-      </div>
-    );
-  },
+export const Default = (props: any) => {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>();
+  const [open, setOpen] = useState<boolean>(false);
+  return (
+    <div>
+      <Button ref={(el) => setAnchorEl(el)} onClick={() => setOpen((x) => !x)}>
+        Open
+      </Button>
+      <Popover
+        {...props}
+        open={props.open ?? open}
+        anchorEl={anchorEl}
+        onClose={(e) => setOpen(e)}
+      >
+        <Popover.Content>Velit in consequat</Popover.Content>
+      </Popover>
+    </div>
+  );
 };
 
 const Template = (props) => {

package/src/react-css.d.ts

@@ -1,4 +1,3 @@
-// eslint-disable-next-line react/no-typos
 import "react";
 
 declare module "react" {

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

@@ -1,43 +1,42 @@
-/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta, StoryFn } from "@storybook/react";
 import React, { useState } from "react";
 import { ReadMore } from ".";
 
-export default {
+const meta: Meta<typeof ReadMore> = {
   title: "ds-react/ReadMore",
   component: ReadMore,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-  },
 };
+export default meta;
 
-export const Default = {
-  render: (props) => {
-    const [state, setState] = useState(false);
-
-    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}
-      >
-        <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: StoryFn<{
+  controlled: boolean;
+  size: "medium" | "small";
+}> = (props) => {
+  const [state, setState] = useState(false);
 
-  args: {
-    controlled: false,
-    size: "medium",
+  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}
+    >
+      <div style={{ maxWidth: 300 }}>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia,
+        tempore corporis exercitationem minus dignissimos eius aspernatur fugiat
+        iusto.
+      </div>
+    </ReadMore>
+  );
+};
+Default.args = {
+  controlled: false,
+  size: "medium",
+};
+Default.argTypes = {
+  size: {
+    options: ["medium", "small"],
+    control: { type: "radio" },
   },
 };
 
@@ -46,8 +45,8 @@ export const Small = () => (
     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're starting our
-    approach. Deactivate the security shield.
+    Command station, this is ST 321. Code Clearance Blue. We&apos;re starting
+    our approach. Deactivate the security shield.
   </ReadMore>
 );
 
@@ -56,7 +55,7 @@ export const Open = () => (
     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're starting our
-    approach. Deactivate the security shield.
+    Command station, this is ST 321. Code Clearance Blue. We&apos;re starting
+    our approach. Deactivate the security shield.
   </ReadMore>
 );

package/src/stepper/stepper.stories.tsx

@@ -1,26 +1,22 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { BodyLong } from "..";
 import Stepper from "./Stepper";
 
-export default {
+const meta: Meta<typeof Stepper> = {
   title: "ds-react/Stepper",
   component: Stepper,
   argTypes: {
     orientation: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: ["horizontal", "vertical"],
     },
     activeStep: {
-      control: {
-        type: "number",
-      },
+      control: { type: "number" },
     },
   },
-} as Meta;
+};
+export default meta;
 
 const storyTexts = [
   "Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
@@ -32,51 +28,48 @@ const storyTexts = [
   "Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
 ];
 
-export const Default = {
-  render: ({ asButton, ...props }) => {
-    const [activeStep, setActiveStep] = useState(1);
-
-    const newProps = {
-      onClick: (e) => e.preventDefault(),
-      ...(asButton ? { as: "button" } : { href: "#" }),
-    };
+export const Default = ({ asButton, ...props }) => {
+  const [activeStep, setActiveStep] = useState(1);
 
-    return (
-      <div style={{ display: "flex", gap: "10rem", flexDirection: "column" }}>
-        <Stepper
-          aria-labelledby="stepper-heading"
-          activeStep={activeStep}
-          onStepChange={setActiveStep}
-          orientation="vertical"
-          {...props}
-        >
-          <Stepper.Step {...newProps} completed={props.completed}>
-            Start søknad
-          </Stepper.Step>
-          <Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
-          <Stepper.Step {...newProps} completed={props.completed}>
-            Saksopplysninger
-          </Stepper.Step>
-          <Stepper.Step {...newProps} completed={props.completed}>
-            Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives
-            og forklares i sitt fulle i denne labelen
-          </Stepper.Step>
-          <Stepper.Step {...newProps}>Vedlegg</Stepper.Step>
-          <Stepper.Step {...newProps}>Oppsummering</Stepper.Step>
-          <Stepper.Step {...newProps}>Innsending</Stepper.Step>
-        </Stepper>
-        <BodyLong style={{ marginTop: "5rem" }}>
-          {storyTexts[activeStep]}
-        </BodyLong>
-      </div>
-    );
-  },
+  const newProps = {
+    onClick: (e) => e.preventDefault(),
+    ...(asButton ? { as: "button" } : { href: "#" }),
+  };
 
-  args: {
-    asButton: false,
-    interactive: true,
-    completed: false,
-  },
+  return (
+    <div style={{ display: "flex", gap: "10rem", flexDirection: "column" }}>
+      <Stepper
+        aria-labelledby="stepper-heading"
+        activeStep={activeStep}
+        onStepChange={setActiveStep}
+        orientation="vertical"
+        {...props}
+      >
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Start søknad
+        </Stepper.Step>
+        <Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Saksopplysninger
+        </Stepper.Step>
+        <Stepper.Step {...newProps} completed={props.completed}>
+          Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives og
+          forklares i sitt fulle i denne labelen
+        </Stepper.Step>
+        <Stepper.Step {...newProps}>Vedlegg</Stepper.Step>
+        <Stepper.Step {...newProps}>Oppsummering</Stepper.Step>
+        <Stepper.Step {...newProps}>Innsending</Stepper.Step>
+      </Stepper>
+      <BodyLong style={{ marginTop: "5rem" }}>
+        {storyTexts[activeStep]}
+      </BodyLong>
+    </div>
+  );
+};
+Default.args = {
+  asButton: false,
+  interactive: true,
+  completed: false,
 };
 
 export const Horizontal = () => {

package/src/table/stories/table-expandable.stories.tsx

@@ -147,7 +147,7 @@ const data = [
     status: "Inaktiv",
     content: (
       <>
-        Ola Conny Brakkestad sier "hei". Her er litt innhold med en{" "}
+        Ola Conny Brakkestad sier hei. Her er litt innhold med en{" "}
         <Link href="#">link.</Link>
       </>
     ),
@@ -162,7 +162,7 @@ const data = [
     status: <Link href="http://example.com">Hissig</Link>,
     content: (
       <>
-        Henriette Kristensen sier "hei". Her er litt innhold med en{" "}
+        Henriette Kristensen sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">lenke</Link>. I forhold til en betydelig
         avveining synliggjøres potensialet med sikte på satsingsområdet. Gitt en
         manglende avveining synliggjøres instrumentet på bakgrunn av forholdene.
@@ -183,7 +183,7 @@ const data = [
     status: "Deaktivert",
     content: (
       <>
-        Suki Clydesdale sier "hei". Her er litt innhold med en{" "}
+        Suki Clydesdale sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">link</Link>.
       </>
     ),
@@ -198,7 +198,7 @@ const data = [
     status: <Link href="#">Starter</Link>,
     content: (
       <>
-        Hans-Hermann Hoppe sier "hei". Her er litt innhold med en{" "}
+        Hans-Hermann Hoppe sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">link</Link>.
       </>
     ),
@@ -213,7 +213,7 @@ const data = [
     status: <Link href="#">Eksplodert</Link>,
     content: (
       <>
-        Max Kraft sier "hei". Her er litt innhold med en{" "}
+        Max Kraft sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">link</Link>.
       </>
     ),
@@ -228,7 +228,7 @@ const data = [
     status: <Link href="#">Gunstig</Link>,
     content: (
       <>
-        Pat Ole sier "hei". Her er litt innhold med en{" "}
+        Pat Ole sier hei. Her er litt innhold med en{" "}
         <Link href="http://example.com">lenke</Link>.
       </>
     ),
@@ -265,62 +265,58 @@ export const ExpandableOpen = () => {
   );
 };
 
-export const ClickableRow = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isRowOpen1, setIsRowOpen1] = useState(false);
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const [isRowOpen2, setIsRowOpen2] = useState(false);
+export const ClickableRow = () => {
+  const [isRowOpen1, setIsRowOpen1] = useState(false);
+  const [isRowOpen2, setIsRowOpen2] = useState(false);
 
-    return (
-      <>
-        <Table zebraStripes>
-          <Table.Header>
-            <Table.Row>
-              <Table.HeaderCell>Navn</Table.HeaderCell>
-              <Table.HeaderCell>Info</Table.HeaderCell>
-              <Table.HeaderCell aria-hidden />
-            </Table.Row>
-          </Table.Header>
-          <Table.Body>
-            <Table.ExpandableRow
-              content={<div>placeholder row 1</div>}
-              togglePlacement="right"
-              onOpenChange={setIsRowOpen1}
-              data-testid="row1"
-              open={isRowOpen1}
-              expandOnRowClick
-            >
-              <Table.DataCell>Ola</Table.DataCell>
-              <Table.DataCell>
-                <Button
-                  size="xsmall"
-                  onClick={(e) => {
-                    alert("Mer info");
-                  }}
-                >
-                  Mer info
-                </Button>
-              </Table.DataCell>
-            </Table.ExpandableRow>
-            <Table.ExpandableRow
-              content={<div>placeholder row 2</div>}
-              togglePlacement="right"
-              onOpenChange={setIsRowOpen2}
-              data-testid="row2"
-              open={isRowOpen2}
-              expandOnRowClick
-            >
-              <Table.DataCell>Hans</Table.DataCell>
-              <Table.DataCell>
-                <Checkbox hideLabel size="small">
-                  Sett
-                </Checkbox>
-              </Table.DataCell>
-            </Table.ExpandableRow>
-          </Table.Body>
-        </Table>
-      </>
-    );
-  },
+  return (
+    <>
+      <Table zebraStripes>
+        <Table.Header>
+          <Table.Row>
+            <Table.HeaderCell>Navn</Table.HeaderCell>
+            <Table.HeaderCell>Info</Table.HeaderCell>
+            <Table.HeaderCell aria-hidden />
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          <Table.ExpandableRow
+            content={<div>placeholder row 1</div>}
+            togglePlacement="right"
+            onOpenChange={setIsRowOpen1}
+            data-testid="row1"
+            open={isRowOpen1}
+            expandOnRowClick
+          >
+            <Table.DataCell>Ola</Table.DataCell>
+            <Table.DataCell>
+              <Button
+                size="xsmall"
+                onClick={() => {
+                  alert("Mer info");
+                }}
+              >
+                Mer info
+              </Button>
+            </Table.DataCell>
+          </Table.ExpandableRow>
+          <Table.ExpandableRow
+            content={<div>placeholder row 2</div>}
+            togglePlacement="right"
+            onOpenChange={setIsRowOpen2}
+            data-testid="row2"
+            open={isRowOpen2}
+            expandOnRowClick
+          >
+            <Table.DataCell>Hans</Table.DataCell>
+            <Table.DataCell>
+              <Checkbox hideLabel size="small">
+                Sett
+              </Checkbox>
+            </Table.DataCell>
+          </Table.ExpandableRow>
+        </Table.Body>
+      </Table>
+    </>
+  );
 };

package/src/tabs/TabList.tsx

@@ -34,13 +34,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
         debounce(() => {
           if (!listRef?.current) return;
           const { scrollWidth, clientWidth } = listRef.current;
-          let showStartScroll;
-          let showEndScroll;
-
-          const scrollLeft = listRef?.current?.scrollLeft;
+          const scrollLeft = listRef.current.scrollLeft;
           // use 1 for the potential rounding error with browser zooms.
-          showStartScroll = scrollLeft > 1;
-          showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
+          const showStartScroll = scrollLeft > 1;
+          const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
 
           setDisplayScroll((displayScroll) =>
             showStartScroll === displayScroll.start &&
@@ -89,6 +86,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
       dir: 1 | -1;
       hidden: boolean;
     }) => (
+      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
       <div
         className={cl("navds-tabs__scroll-button", {
           "navds-tabs__scroll-button--hidden": hidden,

package/src/tabs/Tabs.stories.tsx

@@ -8,19 +8,19 @@ export default {
   component: Tabs,
   argTypes: {
     size: {
+      options: ["medium", "small"],
       control: {
         type: "radio",
-        options: ["medium", "small"],
       },
     },
     iconPosition: {
+      options: ["top", "left"],
       control: {
         type: "radio",
-        options: ["top", "left"],
       },
     },
   },
-} as Meta;
+} satisfies Meta<typeof Tabs>;
 
 const Panel = () => {
   return (

package/src/tag/tag.stories.tsx

@@ -66,7 +66,7 @@ export const Default = {
 export const Small = () => {
   return (
     <div className="rowgap rowgap-wrap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Tag key={variant} variant={variant} size="small">
           {variant}
         </Tag>
@@ -75,10 +75,10 @@ export const Small = () => {
   );
 };
 
-export const xSmall = () => {
+export const XSmall = () => {
   return (
     <div className="rowgap rowgap-wrap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Tag key={variant} variant={variant} size="xsmall">
           {variant}
         </Tag>
@@ -90,7 +90,7 @@ export const xSmall = () => {
 export const Variants = () => {
   return (
     <div className="rowgap rowgap-wrap">
-      {variants.map((variant, i) => (
+      {variants.map((variant) => (
         <Tag key={variant} variant={variant}>
           {variant}
         </Tag>