@navikt/ds-react 2.1.6 → 2.1.7

package/src/loader/loader.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Loader } from "..";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
   title: "ds-react/Loader",
   component: Loader,
@@ -28,12 +28,14 @@ export default {
   },
 } as Meta;
 
-export const Default = (props: any) => {
-  return <Loader {...props} />;
-};
+export const Default = {
+  render: (props: any) => {
+    return <Loader {...props} />;
+  },
 
-Default.args = {
-  transparent: false,
+  args: {
+    transparent: false,
+  },
 };
 
 export const Size = () => (

package/src/modal/index.ts

@@ -1,2 +1,2 @@
-export { default as Modal, ModalProps } from "./Modal";
-export { ModalContentProps } from "./ModalContent";
+export { default as Modal, type ModalProps } from "./Modal";
+export { type ModalContentProps } from "./ModalContent";

package/src/modal/modal.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useEffect, useState } from "react";
 import { BodyLong, Button, Heading } from "..";
 import Modal from "./Modal";
@@ -10,39 +11,43 @@ export default {
   },
 };
 
-export const Default = (props) => {
-  const [open, setOpen] = useState(false);
+export const Default = {
+  render: (props) => {
+    const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    Modal.setAppElement?.("#root");
-  }, []);
+    useEffect(() => {
+      Modal.setAppElement?.("#root");
+    }, []);
 
-  return (
-    <>
-      <Button onClick={() => setOpen(true)}>Open Modal</Button>
-      <Modal
-        open={open}
-        onClose={() => setOpen(false)}
-        aria-labelledby="header123"
-        {...props}
-      >
-        <Modal.Content>
-          <Heading spacing id="header123" level="1" size="large">
-            Header
-          </Heading>
-          <Heading spacing level="2" size="medium">
-            Header
-          </Heading>
-          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
-        </Modal.Content>
-      </Modal>
-    </>
-  );
-};
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>Open Modal</Button>
+        <Modal
+          open={open}
+          onClose={() => setOpen(false)}
+          aria-labelledby="header123"
+          {...props}
+        >
+          <Modal.Content>
+            <Heading spacing id="header123" level="1" size="large">
+              Header
+            </Heading>
+            <Heading spacing level="2" size="medium">
+              Header
+            </Heading>
+            <BodyLong>
+              Voluptate laboris mollit dolore qui. Magna elit.
+            </BodyLong>
+          </Modal.Content>
+        </Modal>
+      </>
+    );
+  },
 
-Default.args = {
-  shouldCloseOnOverlayClick: true,
-  closeButton: true,
+  args: {
+    shouldCloseOnOverlayClick: true,
+    closeButton: true,
+  },
 };
 
 export const ParentSelector = () => {

package/src/pagination/index.ts

@@ -1 +1 @@
-export { default as Pagination, PaginationProps } from "./Pagination";
+export { default as Pagination, type PaginationProps } from "./Pagination";

package/src/pagination/pagination.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Link, HashRouter as Router } from "react-router-dom";
 import Pagination from "./Pagination";
@@ -15,17 +16,19 @@ export default {
   },
 };
 
-export const Default = (props: any) => {
-  const [page, setPage] = useState(props.page);
-  return <Pagination {...props} page={page} onPageChange={setPage} />;
-};
+export const Default = {
+  render: (props: any) => {
+    const [page, setPage] = useState(props.page);
+    return <Pagination {...props} page={page} onPageChange={setPage} />;
+  },
 
-Default.args = {
-  page: 2,
-  count: 8,
-  siblingCount: 1,
-  boundaryCount: 1,
-  prevNextTexts: false,
+  args: {
+    page: 2,
+    count: 8,
+    siblingCount: 1,
+    boundaryCount: 1,
+    prevNextTexts: false,
+  },
 };
 
 export const PrevNextText = () => {
@@ -83,30 +86,32 @@ export const XSmall = () => {
   );
 };
 
-export const AsLink = () => {
-  const [page, setPage] = useState(1);
-  const props = {
-    page: 1,
-    count: 8,
-    siblingCount: 1,
-    boundaryCount: 1,
-  };
-  return (
-    <Pagination
-      {...props}
-      page={page}
-      onPageChange={setPage}
-      renderItem={(item) => (
-        <Pagination.Item {...item} as={Link} to={`?page=${item.page}`} />
-      )}
-    />
-  );
-};
+export const AsLink = {
+  render: () => {
+    const [page, setPage] = useState(1);
+    const props = {
+      page: 1,
+      count: 8,
+      siblingCount: 1,
+      boundaryCount: 1,
+    };
+    return (
+      <Pagination
+        {...props}
+        page={page}
+        onPageChange={setPage}
+        renderItem={(item) => (
+          <Pagination.Item {...item} as={Link} to={`?page=${item.page}`} />
+        )}
+      />
+    );
+  },
 
-AsLink.decorators = [
-  (Story) => (
-    <Router>
-      <Story />
-    </Router>
-  ),
-];
+  decorators: [
+    (Story) => (
+      <Router>
+        <Story />
+      </Router>
+    ),
+  ],
+};

package/src/panel/Panel.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
   /**

package/src/panel/index.ts

@@ -1,2 +1,2 @@
 export { default as Panel } from "./Panel";
-export { PanelProps } from "./Panel";
+export { type PanelProps } from "./Panel";

package/src/panel/panel.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Panel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
   title: "ds-react/Panel",
   component: Panel,
@@ -14,20 +14,22 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return (
-    <Panel {...props}>
-      Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
-      cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
-      commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
-      adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
-      officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
-      minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
-      aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
-      adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
-      consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
-    </Panel>
-  );
+export const Default = {
+  render: (props) => {
+    return (
+      <Panel {...props}>
+        Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+        cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+        commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+        adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+        officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+        minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+        aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+        adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+        consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+      </Panel>
+    );
+  },
 };
 
 export const Border = () => {

package/src/popover/index.ts

@@ -1,2 +1,2 @@
-export { default as Popover, PopoverProps } from "./Popover";
-export { PopoverContentProps } from "./PopoverContent";
+export { default as Popover, type PopoverProps } from "./Popover";
+export { type PopoverContentProps } from "./PopoverContent";

package/src/popover/popover.stories.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { Popover } from "../index";
 import { Button } from "../button";
@@ -55,28 +56,33 @@ export default {
   },
 };
 
-export const Default = (props: any) => {
-  const [anchorEl, setAnchorEl] = useState(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 = {
+  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>
+    );
+  },
 };
 
 const Template = (props) => {
-  const [anchorEl, setAnchorEl] = useState(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
   return (
     <>

package/src/read-more/index.ts

@@ -1,2 +1,2 @@
 export { default as ReadMore } from "./ReadMore";
-export { ReadMoreProps } from "./ReadMore";
+export { type ReadMoreProps } from "./ReadMore";

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import React, { useState } from "react";
 import { ReadMore } from ".";
 
@@ -14,25 +15,27 @@ export default {
   },
 };
 
-export const Default = (props) => {
-  const [state, setState] = useState(false);
+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}
-    >
-      Command station, this is ST 321. Code Clearance Blue. We're starting our
-      approach. Deactivate the security shield.
-    </ReadMore>
-  );
-};
+    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}
+      >
+        Command station, this is ST 321. Code Clearance Blue. We're starting our
+        approach. Deactivate the security shield.
+      </ReadMore>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  size: "medium",
+  args: {
+    controlled: false,
+    size: "medium",
+  },
 };
 
 export const Small = () => (

package/src/stepper/index.ts

@@ -1 +1 @@
-export { default as Stepper, StepperProps } from "./Stepper";
+export { default as Stepper, type StepperProps } from "./Stepper";

package/src/stepper/stepper.stories.tsx

@@ -1,4 +1,5 @@
-import { Meta } from "@storybook/react/types-6-0";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { BodyLong } from "..";
 import Stepper from "./Stepper";
@@ -31,49 +32,51 @@ 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 = ({ asButton, ...props }) => {
-  const [activeStep, setActiveStep] = useState(1);
+export const Default = {
+  render: ({ asButton, ...props }) => {
+    const [activeStep, setActiveStep] = useState(1);
 
-  const newProps = {
-    onClick: (e) => e.preventDefault(),
-    ...(asButton ? { as: "button" } : { href: "#" }),
-  };
+    const newProps = {
+      onClick: (e) => e.preventDefault(),
+      ...(asButton ? { as: "button" } : { href: "#" }),
+    };
 
-  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>
-  );
-};
+    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,
+  args: {
+    asButton: false,
+    interactive: true,
+    completed: false,
+  },
 };
 
 export const Horizontal = () => {

package/src/table/index.ts

@@ -1,8 +1,8 @@
-export { BodyProps } from "./Body";
-export { ColumnHeaderProps } from "./ColumnHeader";
-export { DataCellProps } from "./DataCell";
-export { ExpandableRowProps } from "./ExpandableRow";
-export { HeaderProps } from "./Header";
-export { HeaderCellProps } from "./HeaderCell";
-export { RowProps } from "./Row";
-export { default as Table, TableProps, SortState } from "./Table";
+export { default as Table, type TableProps, type SortState } from "./Table";
+export { type BodyProps } from "./Body";
+export { type ColumnHeaderProps } from "./ColumnHeader";
+export { type DataCellProps } from "./DataCell";
+export { type ExpandableRowProps } from "./ExpandableRow";
+export { type HeaderProps } from "./Header";
+export { type HeaderCellProps } from "./HeaderCell";
+export { type RowProps } from "./Row";

package/src/tabs/Tabs.stories.tsx

@@ -1,5 +1,5 @@
 import { Cup, Dishwasher, Freezer } from "@navikt/ds-icons";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { Tabs } from ".";
 
@@ -54,28 +54,30 @@ const Panel = () => {
   );
 };
 
-export const Default = (props) => {
-  return (
-    <Tabs
-      defaultValue="test2"
-      size={props?.size}
-      selectionFollowsFocus={props?.selectionFollowsFocus}
-      loop={props?.loop}
-      iconPosition={props?.iconPosition}
-    >
-      <Tabs.List>
-        <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
-        <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
-        <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
-      </Tabs.List>
-      <Panel />
-    </Tabs>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Tabs
+        defaultValue="test2"
+        size={props?.size}
+        selectionFollowsFocus={props?.selectionFollowsFocus}
+        loop={props?.loop}
+        iconPosition={props?.iconPosition}
+      >
+        <Tabs.List>
+          <Tabs.Tab value="test1" icon={<Cup />} label="Skap" />
+          <Tabs.Tab value="test2" label="Oppvaskmaskin" icon={<Dishwasher />} />
+          <Tabs.Tab value="test3" icon={<Freezer />} label="Fryser" />
+        </Tabs.List>
+        <Panel />
+      </Tabs>
+    );
+  },
 
-Default.args = {
-  selectionFollowsFocus: false,
-  loop: false,
+  args: {
+    selectionFollowsFocus: false,
+    loop: false,
+  },
 };
 
 export const Small = () => {

package/src/tabs/index.ts

@@ -1,4 +1,4 @@
-export { TabProps } from "./Tab";
-export { TabListProps } from "./TabList";
-export { TabPanelProps } from "./TabPanel";
-export { default as Tabs, TabsProps } from "./Tabs";
+export { default as Tabs, type TabsProps } from "./Tabs";
+export { type TabProps } from "./Tab";
+export { type TabListProps } from "./TabList";
+export { type TabPanelProps } from "./TabPanel";

package/src/tag/index.ts

@@ -1 +1 @@
-export { default as Tag, TagProps } from "./Tag";
+export { default as Tag, type TagProps } from "./Tag";

package/src/tag/tag.stories.tsx

@@ -75,14 +75,16 @@ const variants: Array<
   "alt3-filled",
 ];
 
-export const Default = (props) => (
-  <Tag variant={props.variant} size={props.size}>
-    {props.children}
-  </Tag>
-);
+export const Default = {
+  render: (props) => (
+    <Tag variant={props.variant} size={props.size}>
+      {props.children}
+    </Tag>
+  ),
 
-Default.args = {
-  children: "Id elit esse",
+  args: {
+    children: "Id elit esse",
+  },
 };
 
 export const Small = () => {