@navikt/ds-react 2.1.6 → 2.1.7

package/src/form/radio/radio.stories.tsx

@@ -1,9 +1,10 @@
-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 { Radio, RadioGroup } from "../../index";
 
 export default {
-  title: "ds-react/Form/Radio",
+  title: "ds-react/Radio",
   component: Radio,
   subcomponents: {
     RadioGroup,
@@ -13,41 +14,45 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState("radio1");
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("radio1");
 
-  return (
-    <RadioGroup
-      legend={props.legend}
-      description={props.description}
-      value={props.controlled ? state : undefined}
-      onChange={props.controlled ? setState : undefined}
-      hideLegend={props.hideLegend}
-      error={props.error ? "Errormelding" : undefined}
-      size={props?.size}
-    >
-      <Radio value="radio1">{props.children || "Apple"}</Radio>
-      <Radio
-        value="radio2"
-        description={props.radioDescription ? "Orange description" : undefined}
+    return (
+      <RadioGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.error ? "Errormelding" : undefined}
+        size={props?.size}
       >
-        {props.children || "Orange"}
-      </Radio>
-      <Radio value="radio3">{props.children || "Banana"}</Radio>
-      <Radio value="radio4">{props.children || "Melon"}</Radio>
-    </RadioGroup>
-  );
-};
+        <Radio value="radio1">{props.children || "Apple"}</Radio>
+        <Radio
+          value="radio2"
+          description={
+            props.radioDescription ? "Orange description" : undefined
+          }
+        >
+          {props.children || "Orange"}
+        </Radio>
+        <Radio value="radio3">{props.children || "Banana"}</Radio>
+        <Radio value="radio4">{props.children || "Melon"}</Radio>
+      </RadioGroup>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  error: false,
-  size: "medium",
-  legend: "Legend-tekst",
-  radioDescription: false,
-  hideLegend: false,
-  children: "",
-  description: "",
+  args: {
+    controlled: false,
+    error: false,
+    size: "medium",
+    legend: "Legend-tekst",
+    radioDescription: false,
+    hideLegend: false,
+    children: "",
+    description: "",
+  },
 };
 
 export const Group = () => (

package/src/form/search/index.ts

@@ -1 +1,5 @@
-export { default as Search, SearchProps, SearchClearEvent } from "./Search";
+export {
+  default as Search,
+  type SearchProps,
+  type SearchClearEvent,
+} from "./Search";

package/src/form/search/search.stories.tsx

@@ -1,9 +1,10 @@
-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 { Search } from "../index";
 export default {
-  title: "ds-react/Form/Search",
+  title: "ds-react/Search",
   component: Search,
   argTypes: {
     clearButton: {
@@ -31,28 +32,30 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  const [state, setState] = useState("");
-  return (
-    <div data-theme={props.darkmode ? "dark" : "light"}>
-      <Search
-        value={props.controlled ? state : undefined}
-        onChange={props.controlled ? setState : null}
-        label="Søk"
-        size={props.size}
-        clearButton={props.clearButton}
-        variant={props.variant}
-        hideLabel={props.hideLabel}
-        error={props.error}
-      />
-    </div>
-  );
-};
+export const Default = {
+  render: (props) => {
+    const [state, setState] = useState("");
+    return (
+      <div data-theme={props.darkmode ? "dark" : "light"}>
+        <Search
+          value={props.controlled ? state : undefined}
+          onChange={props.controlled ? setState : undefined}
+          label="Søk"
+          size={props.size}
+          clearButton={props.clearButton}
+          variant={props.variant}
+          hideLabel={props.hideLabel}
+          error={props.error}
+        />
+      </div>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  darkmode: false,
-  hideLabel: true,
+  args: {
+    controlled: false,
+    darkmode: false,
+    hideLabel: true,
+  },
 };
 
 export const Small = () => (

package/src/form/stories/confirmation-panel.stories.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { ConfirmationPanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { Link } from "../..";
 export default {
-  title: "ds-react/form/ConfirmationPanel",
+  title: "ds-react/ConfirmationPanel",
   component: ConfirmationPanel,
   argTypes: {
     size: {
@@ -25,22 +25,24 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <ConfirmationPanel
-      error={props?.error}
-      size={props?.size}
-      checked={props?.checked ?? undefined}
-      label={props?.label ?? "Checkbox label text"}
-    >
-      {content}
-    </ConfirmationPanel>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <ConfirmationPanel
+        error={props?.error}
+        size={props?.size}
+        checked={props?.checked ?? undefined}
+        label={props?.label ?? "Checkbox label text"}
+      >
+        {content}
+      </ConfirmationPanel>
+    );
+  },
 
-Default.args = {
-  label: "Checkbox label text",
-  checked: false,
+  args: {
+    label: "Checkbox label text",
+    checked: false,
+  },
 };
 
 export const Small = () => {

package/src/form/stories/fieldset.stories.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import { Fieldset } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import { TextField } from "../../index";
 export default {
-  title: "ds-react/form/Fieldset",
+  title: "ds-react/Fieldset",
   component: Fieldset,
   argTypes: {
     size: {
@@ -34,16 +34,18 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <Fieldset legend="Mollit eiusmod" {...props}>
-      {content}
-    </Fieldset>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Fieldset legend="Mollit eiusmod" {...props}>
+        {content}
+      </Fieldset>
+    );
+  },
 
-Default.args = {
-  errorPropagation: true,
+  args: {
+    errorPropagation: true,
+  },
 };
 
 export const Small = () => (

package/src/form/stories/select.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { Select } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
-  title: "ds-react/form/Select",
+  title: "ds-react/Select",
   component: Select,
   argTypes: {
     size: {
@@ -34,15 +34,17 @@ const content = (
   </>
 );
 
-export const Default = (props) => {
-  return (
-    <Select {...props} label="Ipsum enim quis culpa">
-      {content}
-    </Select>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Select {...props} label="Ipsum enim quis culpa">
+        {content}
+      </Select>
+    );
+  },
 
-Default.args = {};
+  args: {},
+};
 
 export const Small = () => {
   return (

package/src/form/stories/switch.stories.tsx

@@ -1,9 +1,9 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Switch } from "../index";
 
 export default {
-  title: "ds-react/form/Switch",
+  title: "ds-react/Switch",
   component: Switch,
   argTypes: {
     size: {
@@ -33,12 +33,14 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return <Switch {...props}>Label text</Switch>;
-};
+export const Default = {
+  render: (props) => {
+    return <Switch {...props}>Label text</Switch>;
+  },
 
-Default.args = {
-  position: "right",
+  args: {
+    position: "right",
+  },
 };
 
 export const Small = () => {

package/src/form/stories/text-field.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import { TextField } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 export default {
-  title: "ds-react/form/TextField",
+  title: "ds-react/TextField",
   component: TextField,
   argTypes: {
     size: {
@@ -26,11 +26,13 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return <TextField {...props} label="Ipsum enim quis culpa" />;
-};
+export const Default = {
+  render: (props) => {
+    return <TextField {...props} label="Ipsum enim quis culpa" />;
+  },
 
-Default.args = {};
+  args: {},
+};
 
 export const Small = () => {
   return <TextField size="small" label="Ipsum enim quis culpa" />;

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