@navikt/ds-react 2.1.5 → 2.1.7

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 = () => {

package/src/toggle-group/ToggleGroup.stories.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable react-hooks/rules-of-hooks */
 import { Email, EmailOpened, Send } from "@navikt/ds-icons";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { ToggleGroup } from "../index";
 export default {
@@ -47,24 +48,26 @@ const Items = (icon?: boolean, both?: boolean) => (
   </>
 );
 
-export const Default = (props) => {
-  const [activeValue, setActiveValue] = useState("ulest");
-  return (
-    <ToggleGroup
-      size={props?.size}
-      value={activeValue}
-      onChange={setActiveValue}
-      label={props.label ? "Proident minim dolor pariatur." : undefined}
-    >
-      {Items(!!props?.icon, !!props?.text && props.icon)}
-    </ToggleGroup>
-  );
-};
+export const Default = {
+  render: (props) => {
+    const [activeValue, setActiveValue] = useState("ulest");
+    return (
+      <ToggleGroup
+        size={props?.size}
+        value={activeValue}
+        onChange={setActiveValue}
+        label={props.label ? "Proident minim dolor pariatur." : undefined}
+      >
+        {Items(!!props?.icon, !!props?.text && props.icon)}
+      </ToggleGroup>
+    );
+  },
 
-Default.args = {
-  icon: true,
-  text: true,
-  label: false,
+  args: {
+    icon: true,
+    text: true,
+    label: false,
+  },
 };
 
 export const Compositions = () => {

package/src/toggle-group/index.ts

@@ -1,2 +1,2 @@
-export { default as ToggleGroup, ToggleGroupProps } from "./ToggleGroup";
-export { ToggleItemProps } from "./ToggleItem";
+export { default as ToggleGroup, type ToggleGroupProps } from "./ToggleGroup";
+export { type ToggleItemProps } from "./ToggleItem";

package/src/tooltip/index.ts

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

package/src/tooltip/tooltip.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 import React from "react";
 import { Tooltip, Alert, Button, Search } from "..";
 
@@ -42,26 +42,28 @@ export const Demo = () => (
   </div>
 );
 
-export const Default = (props) => {
-  return (
-    <Tooltip
-      content="Tooltip example"
-      open={props?.open}
-      keys={props?.keys ? ["Cmd", "K"] : undefined}
-      placement={props?.placement}
-      arrow={props?.arrow}
-      delay={props?.delay}
-      offset={props?.offset}
-    >
-      <Button aria-describedby="test123">Tooltip</Button>
-    </Tooltip>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Tooltip
+        content="Tooltip example"
+        open={props?.open}
+        keys={props?.keys ? ["Cmd", "K"] : undefined}
+        placement={props?.placement}
+        arrow={props?.arrow}
+        delay={props?.delay}
+        offset={props?.offset}
+      >
+        <Button aria-describedby="test123">Tooltip</Button>
+      </Tooltip>
+    );
+  },
 
-Default.args = {
-  keys: false,
-  arrow: true,
-  delay: 150,
+  args: {
+    keys: false,
+    arrow: true,
+    delay: 150,
+  },
 };
 
 export const Placement = () => {

package/src/typography/BodyLong.tsx

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

package/src/typography/BodyShort.tsx

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

package/src/typography/Detail.tsx

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

package/src/typography/ErrorMessage.tsx

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

package/src/typography/Heading.tsx

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

package/src/typography/Ingress.tsx

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

package/src/typography/Label.tsx

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

package/src/typography/heading.stories.tsx

@@ -25,10 +25,12 @@ export default {
 
 const lorem = "Veniam consequat cillum";
 
-export const Default = (props) => <Heading {...props}>{lorem}</Heading>;
+export const Default = {
+  render: (props) => <Heading {...props}>{lorem}</Heading>,
 
-Default.args = {
-  spacing: false,
+  args: {
+    spacing: false,
+  },
 };
 
 export const Sizes = () => (

package/src/typography/index.ts

@@ -1,7 +1,10 @@
-export { BodyLongProps, default as BodyLong } from "./BodyLong";
-export { BodyShortProps, default as BodyShort } from "./BodyShort";
-export { default as Detail, DetailProps } from "./Detail";
-export { default as ErrorMessage, ErrorMessageProps } from "./ErrorMessage";
-export { default as Heading, HeadingProps } from "./Heading";
-export { default as Ingress, IngressProps } from "./Ingress";
-export { default as Label, LabelProps } from "./Label";
+export { type BodyLongProps, default as BodyLong } from "./BodyLong";
+export { type BodyShortProps, default as BodyShort } from "./BodyShort";
+export { default as Detail, type DetailProps } from "./Detail";
+export {
+  default as ErrorMessage,
+  type ErrorMessageProps,
+} from "./ErrorMessage";
+export { default as Heading, type HeadingProps } from "./Heading";
+export { default as Ingress, type IngressProps } from "./Ingress";
+export { default as Label, type LabelProps } from "./Label";