@navikt/ds-react 2.1.6 → 2.1.7

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

package/src/typography/typography.stories.tsx

@@ -19,52 +19,8 @@ export default {
     DsIngress,
     DsLabel,
   },
-  argTypes: {
-    size: {
-      defaultValue: "large",
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    component: {
-      defaultValue: "BodyLong",
-      control: {
-        type: "radio",
-        options: [
-          "BodyLong",
-          "BodyShort",
-          "Detail",
-          "Ingress",
-          "Label",
-          "ErrorMessage",
-        ],
-      },
-    },
-  },
 } as Meta;
 
-const lorem =
-  "Velit quis in laborum occaecat laborum magna id nisi veniam aliqua velit amet non. In quis sit proident dolore reprehenderit laborum aliquip";
-
-const compMap = {
-  BodyLong: DsBodyLong,
-  BodyShort: DsBodyShort,
-  Detail: DsDetail,
-  Ingress: DsIngress,
-  Label: DsLabel,
-  ErrorMessage: DsErrorMessage,
-};
-
-export const Default = (props) => {
-  const Comp = compMap[props.component];
-  return <Comp {...props}>{lorem}</Comp>;
-};
-
-Default.args = {
-  spacing: false,
-};
-
 export const Ingress = () => (
   <>
     <DsIngress spacing>