@navikt/ds-react 2.1.6 → 2.2.0

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,17 @@ 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",
+    variant: "info",
+  },
 };
 
 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 {
@@ -12,6 +13,12 @@ export default {
         options: ["medium", "small"],
       },
     },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["action", "neutral"],
+      },
+    },
   },
 } as Meta;
 
@@ -47,24 +54,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 = () => {
@@ -85,6 +94,29 @@ export const Compositions = () => {
   );
 };
 
+export const Variants = () => {
+  const [activeValue, setActiveValue] = useState("ulest");
+
+  return (
+    <div className="colgap">
+      <ToggleGroup
+        variant="action"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+      <ToggleGroup
+        variant="neutral"
+        value={activeValue}
+        onChange={setActiveValue}
+      >
+        {Items(true, true)}
+      </ToggleGroup>
+    </div>
+  );
+};
+
 export const Small = () => {
   const [activeValue, setActiveValue] = useState("ulest");
 

package/src/toggle-group/ToggleGroup.tsx

@@ -36,6 +36,11 @@ export interface ToggleGroupProps
    * Label describing ToggleGroup
    */
   label?: React.ReactNode;
+  /**
+   * Changes design and interaction-visuals
+   * @default "action"
+   */
+  variant?: "action" | "neutral";
 }
 
 interface ToggleGroupComponent
@@ -65,6 +70,7 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       defaultValue,
       id,
       "aria-describedby": desc,
+      variant = "action",
       ...rest
     },
     ref
@@ -114,7 +120,11 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
             value={value ?? groupValue}
             defaultValue={defaultValue}
             ref={ref}
-            className={cl("navds-toggle-group", `navds-toggle-group--${size}`)}
+            className={cl(
+              "navds-toggle-group",
+              `navds-toggle-group--${size}`,
+              `navds-toggle-group--${variant}`
+            )}
             {...(describeBy && { "aria-describedby": describeBy })}
             role="radiogroup"
             type="single"

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>