@navikt/ds-react 2.1.6 → 2.2.0

package/src/form/stories/textarea.stories.tsx

@@ -1,8 +1,8 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Textarea } from "../index";
 export default {
-  title: "ds-react/form/Textarea",
+  title: "ds-react/Textarea",
   component: Textarea,
   argTypes: {
     size: {
@@ -32,19 +32,21 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return (
-    <Textarea
-      {...props}
-      maxLength={props?.maxLength ?? 100}
-      label="Ipsum enim quis culpa"
-    />
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Textarea
+        {...props}
+        maxLength={props?.maxLength ?? 100}
+        label="Ipsum enim quis culpa"
+      />
+    );
+  },
 
-Default.args = {
-  maxLength: 100,
-  resize: false,
+  args: {
+    maxLength: 100,
+    resize: false,
+  },
 };
 
 export const Small = () => {

package/src/grid/index.ts

@@ -1,6 +1,6 @@
-export { default as Cell, CellProps } from "./Cell";
-export { default as Grid, GridProps } from "./Grid";
+export { default as Cell, type CellProps } from "./Cell";
+export { default as Grid, type GridProps } from "./Grid";
 export {
   default as ContentContainer,
-  ContentContainerProps,
+  type ContentContainerProps,
 } from "./ContentContainer";

package/src/guide-panel/guidepanel.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { BodyLong, GuidePanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
   title: "ds-react/GuidePanel",
   component: GuidePanel,
@@ -11,26 +11,28 @@ adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
 cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
 enim id.`;
 
-export const Default = (props) => {
-  const newProps = props?.colorOverride
-    ? {
-        style: {
-          ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
-          ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
-        },
-      }
-    : {};
+export const Default = {
+  render: (props) => {
+    const newProps = props?.colorOverride
+      ? {
+          style: {
+            ["--ac-guide-panel-illustration-bg" as any]: "var(--a-purple-200)",
+            ["--ac-guide-panel-border" as any]: "var(--a-purple-400)",
+          },
+        }
+      : {};
 
-  return (
-    <GuidePanel {...newProps} poster={props?.poster}>
-      {panelText}
-    </GuidePanel>
-  );
-};
+    return (
+      <GuidePanel {...newProps} poster={props?.poster}>
+        {panelText}
+      </GuidePanel>
+    );
+  },
 
-Default.args = {
-  poster: false,
-  colorOverride: false,
+  args: {
+    poster: false,
+    colorOverride: false,
+  },
 };
 
 export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;

package/src/guide-panel/index.ts

@@ -1,3 +1,3 @@
-export { default as GuidePanel, GuidePanelProps } from "./GuidePanel";
-export { GuideProps } from "./Guide";
+export { default as GuidePanel, type GuidePanelProps } from "./GuidePanel";
+export { type GuideProps } from "./Guide";
 export { DefaultIllustration as GuideDefaultIllustration } from "./Illustration";

package/src/help-text/help-text.stories.tsx

@@ -36,16 +36,18 @@ export default {
   },
 };
 
-export const Default = (props: any) => {
-  return (
-    <HelpText title="show tooltip" strategy="fixed" {...props}>
-      Id ullamco excepteur elit fugiat labore.
-    </HelpText>
-  );
-};
+export const Default = {
+  render: (props: any) => {
+    return (
+      <HelpText title="show tooltip" strategy="fixed" {...props}>
+        Id ullamco excepteur elit fugiat labore.
+      </HelpText>
+    );
+  },
 
-Default.args = {
-  title: "show tooltip",
+  args: {
+    title: "show tooltip",
+  },
 };
 
 export const Open = () => {

package/src/help-text/index.ts

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

package/src/link/Link.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {

package/src/link/index.ts

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

package/src/link/link.stories.tsx

@@ -11,30 +11,32 @@ export default {
   component: Link,
 };
 
-export const Default = (props) => {
-  const LinkD = () => (
-    <Link href="#">
-      {props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
-    </Link>
-  );
-
-  if (props.inline) {
-    return (
-      <BodyLong>
-        Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
-        officia adipisicing non veniam dolor nulla non ex consectetur fugiat
-        eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
-        fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris aute
-        commodo sint laborum fugiat aliqua.
-      </BodyLong>
+export const Default = {
+  render: (props) => {
+    const LinkD = () => (
+      <Link href="#">
+        {props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
+      </Link>
     );
-  }
-  return <LinkD />;
-};
 
-Default.args = {
-  icon: false,
-  inline: false,
+    if (props.inline) {
+      return (
+        <BodyLong>
+          Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
+          officia adipisicing non veniam dolor nulla non ex consectetur fugiat
+          eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
+          fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris aute
+          commodo sint laborum fugiat aliqua.
+        </BodyLong>
+      );
+    }
+    return <LinkD />;
+  },
+
+  args: {
+    icon: false,
+    inline: false,
+  },
 };
 
 const DemoLink = () => (

package/src/link-panel/LinkPanelTitle.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 interface LinkPanelTitleProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;

package/src/link-panel/index.ts

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

package/src/link-panel/link-panel.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { LinkPanel } from "..";
 
@@ -14,23 +14,25 @@ export default {
   },
 } as Meta;
 
-export const Default = (props: any) => {
-  return (
-    <LinkPanel href="#" border={props?.border}>
-      <LinkPanel.Title>
-        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
-      </LinkPanel.Title>
-      {props.description && (
-        <LinkPanel.Description>
-          Aliqua id aliquip Lorem esse
-        </LinkPanel.Description>
-      )}
-    </LinkPanel>
-  );
-};
+export const Default = {
+  render: (props: any) => {
+    return (
+      <LinkPanel href="#" border={props?.border}>
+        <LinkPanel.Title>
+          Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+        </LinkPanel.Title>
+        {props.description && (
+          <LinkPanel.Description>
+            Aliqua id aliquip Lorem esse
+          </LinkPanel.Description>
+        )}
+      </LinkPanel>
+    );
+  },
 
-Default.args = {
-  description: false,
+  args: {
+    description: false,
+  },
 };
 
 export const Description = () => {

package/src/loader/index.ts

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

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";