@navikt/ds-react 2.1.6 → 2.1.7

package/esm/table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAyB,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmC,MAAM,SAAS,CAAC"}

package/esm/tabs/index.d.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/esm/tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAa,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,IAAI,EAAkB,MAAM,QAAQ,CAAC"}

package/esm/tag/index.d.ts

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

package/esm/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAY,MAAM,OAAO,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,GAAG,EAAiB,MAAM,OAAO,CAAC"}

package/esm/toggle-group/index.d.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/esm/toggle-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAoB,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/toggle-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAyB,MAAM,eAAe,CAAC"}

package/esm/tooltip/index.d.ts

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

package/esm/tooltip/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAgB,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tooltip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,OAAO,EAAqB,MAAM,WAAW,CAAC"}

package/esm/typography/BodyLong.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 export interface BodyLongProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
      * medium: 18px, small: 16px

package/esm/typography/BodyShort.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 export interface BodyShortProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
      * medium: 18px, small: 16px

package/esm/typography/Detail.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 export interface DetailProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
      * @deprecated Medium === small

package/esm/typography/ErrorMessage.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 export interface ErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
      * medium: 18px, small: 16px

package/esm/typography/Heading.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
     /**
      * Heading level

package/esm/typography/Ingress.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 export interface IngressProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
      * Ingress text

package/esm/typography/Label.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
     /**
      * medium: 18px, small: 16px

package/esm/typography/index.d.ts

@@ -1,7 +1,7 @@
-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/esm/typography/index.js

@@ -1,7 +1,7 @@
 export { default as BodyLong } from "./BodyLong";
 export { default as BodyShort } from "./BodyShort";
 export { default as Detail } from "./Detail";
-export { default as ErrorMessage } from "./ErrorMessage";
+export { default as ErrorMessage, } from "./ErrorMessage";
 export { default as Heading } from "./Heading";
 export { default as Ingress } from "./Ingress";
 export { default as Label } from "./Label";

package/esm/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAkB,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAe,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAqB,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAgB,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAgB,MAAM,WAAW,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAc,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/typography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrE,OAAO,EAAuB,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAoB,MAAM,UAAU,CAAC;AAC/D,OAAO,EACL,OAAO,IAAI,YAAY,GAExB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,OAAO,IAAI,OAAO,EAAqB,MAAM,WAAW,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAqB,MAAM,WAAW,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,KAAK,EAAmB,MAAM,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.1.6",
+  "version": "2.1.7",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -11,7 +11,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/navikt/Designsystemet.git"
+    "url": "git+https://github.com/navikt/aksel.git"
   },
   "sideEffects": false,
   "main": "./cjs/index.js",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/ds-icons": "^2.1.6",
+    "@navikt/ds-icons": "^2.1.7",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/accordion/AccordionContent.tsx

@@ -1,7 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import AnimateHeight from "../util/AnimateHeight";
-import { BodyLong } from "../typography";
+import { BodyLong } from "../typography/BodyLong";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionContentProps

package/src/accordion/AccordionHeader.tsx

@@ -1,7 +1,7 @@
 import { Expand, ExpandFilled } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
-import { Heading } from "..";
+import { Heading } from "../typography/Heading";
 import { AccordionItemContext } from "./AccordionItem";
 
 export interface AccordionHeaderProps

package/src/accordion/accordion.stories.tsx

@@ -50,21 +50,23 @@ const Item = (props) => {
   );
 };
 
-export const Default = (props) => {
-  return (
-    <div style={{ width: 500 }}>
-      <Accordion>
-        {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
-          <Item key={y} {...props} />
-        ))}
-      </Accordion>
-    </div>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <div style={{ width: 500 }}>
+        <Accordion>
+          {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+            <Item key={y} {...props} />
+          ))}
+        </Accordion>
+      </div>
+    );
+  },
 
-Default.args = {
-  controlled: false,
-  nItems: 2,
+  args: {
+    controlled: false,
+    nItems: 2,
+  },
 };
 
 export const Controlled = () => {

package/src/accordion/index.ts

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

package/src/alert/Alert.tsx

@@ -6,7 +6,7 @@ import {
 } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography/BodyLong";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**

package/src/alert/alert.stories.tsx

@@ -1,50 +1,58 @@
+import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 import { Alert } from ".";
 import { BodyLong, Heading as DsHeading } from "..";
 
-export default {
+const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
   component: Alert,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Alert>;
+
+const variants: Array<"error" | "warning" | "info" | "success"> = [
+  "error",
+  "warning",
+  "info",
+  "success",
+];
+
+export const Default: Story = {
+  render: (props) => (
+    <Alert
+      variant={props.variant}
+      size={props.size}
+      fullWidth={props.fullWidth}
+      inline={props.inline}
+    >
+      {props.children}
+    </Alert>
+  ),
+
+  args: {
+    children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+    fullWidth: false,
+    variant: "info",
+    size: "medium",
+  },
   argTypes: {
     variant: {
-      defaultValue: "info",
       control: {
         type: "radio",
-        options: ["error", "warning", "info", "success"],
       },
+      options: ["info", "error", "warning", "success"],
     },
     size: {
       control: {
         type: "radio",
-        options: ["medium", "small"],
       },
+      options: ["medium", "small"],
     },
   },
 };
 
-const variants: Array<"error" | "warning" | "info" | "success"> = [
-  "error",
-  "warning",
-  "info",
-  "success",
-];
-
-export const Default = (props) => (
-  <Alert
-    variant={props.variant}
-    size={props.size}
-    fullWidth={props.fullWidth}
-    inline={props.inline}
-  >
-    {props.children}
-  </Alert>
-);
-
-Default.args = {
-  children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-  fullWidth: false,
-};
-
 export const Small = () => {
   return (
     <div className="colgap">

package/src/alert/index.ts

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

package/src/button/button.stories.tsx

@@ -8,6 +8,45 @@ export default {
   parameters: {
     chromatic: { delay: 600 },
   },
+};
+
+const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
+  "primary",
+  "secondary",
+  "tertiary",
+  "danger",
+];
+
+const varSwitch = {
+  primary: "Primary",
+  secondary: "Secondary",
+  tertiary: "Tertiary",
+  danger: "Danger",
+};
+
+export const Default = {
+  render: (props) => {
+    return (
+      <Button
+        variant={props.variant}
+        size={props.size}
+        loading={props.loading}
+        icon={props.icon ? <Star /> : undefined}
+        iconPosition={props.iconPosition}
+      >
+        {props.children}
+      </Button>
+    );
+  },
+
+  args: {
+    icon: false,
+    loading: false,
+    iconPosition: "left",
+    children: "Knapp",
+    variant: "primary",
+    size: "medium",
+  },
   argTypes: {
     variant: {
       control: {
@@ -30,41 +69,6 @@ export default {
   },
 };
 
-const variants: Array<"primary" | "secondary" | "tertiary" | "danger"> = [
-  "primary",
-  "secondary",
-  "tertiary",
-  "danger",
-];
-
-const varSwitch = {
-  primary: "Primary",
-  secondary: "Secondary",
-  tertiary: "Tertiary",
-  danger: "Danger",
-};
-
-export const Default = (props) => {
-  return (
-    <Button
-      variant={props.variant}
-      size={props.size}
-      loading={props.loading}
-      icon={props.icon ? <Star /> : undefined}
-      iconPosition={props.iconPosition}
-    >
-      {props.children}
-    </Button>
-  );
-};
-
-Default.args = {
-  icon: false,
-  loading: false,
-  iconPosition: "left",
-  children: "Knapp",
-};
-
 export const Small = () => (
   <div className="rowgap">
     {variants.map((variant) => (
@@ -95,31 +99,35 @@ export const Link = () => (
   </div>
 );
 
-export const Loading = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading>
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="small">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="xsmall">
-          {varSwitch[variant]}
-        </Button>
-      ))}
+export const Loading = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading>
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="small">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="xsmall">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  ),
+
+  args: { chromatic: { delay: 300 } },
+};
 
 export const Icon = () => (
   <div className="colgap">
@@ -217,28 +225,32 @@ export const Disabled = () => (
   </div>
 );
 
-export const LoadingWithAs = () => (
-  <div className="colgap">
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button key={variant} variant={variant} loading size="small">
-          {varSwitch[variant]}
-        </Button>
-      ))}
-    </div>
-    <div className="rowgap">
-      {variants.map((variant) => (
-        <Button
-          key={variant}
-          variant={variant}
-          loading
-          size="small"
-          as="a"
-          href="#"
-        >
-          {varSwitch[variant]}
-        </Button>
-      ))}
+export const LoadingWithAs = {
+  render: () => (
+    <div className="colgap">
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button key={variant} variant={variant} loading size="small">
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
+      <div className="rowgap">
+        {variants.map((variant) => (
+          <Button
+            key={variant}
+            variant={variant}
+            loading
+            size="small"
+            as="a"
+            href="#"
+          >
+            {varSwitch[variant]}
+          </Button>
+        ))}
+      </div>
     </div>
-  </div>
-);
+  ),
+
+  args: { chromatic: { delay: 300 } },
+};

package/src/button/index.ts

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

package/src/chat/Chat.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
 import Bubble, { BubbleType } from "./Bubble";
-import { BodyLong, BodyShort } from "..";
+import { BodyLong, BodyShort } from "../typography";
 
 export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
   /**

package/src/chat/chat.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Chat } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
+import { Meta } from "@storybook/react";
 
 export default {
   title: "ds-react/Chat",
@@ -19,31 +19,33 @@ export default {
   },
 } as Meta;
 
-export const Default = (props) => {
-  return (
-    <Chat
-      avatar={props?.avatar ?? "ON"}
-      name={props?.name ?? "Ola Normann"}
-      timestamp={props?.timestamp ?? "01.01.21 14:00"}
-      avatarBgColor={props?.avatarBgColor}
-      backgroundColor={props?.backgroundColor}
-    >
-      <Chat.Bubble>
-        Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-      </Chat.Bubble>
-      <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
-      <Chat.Bubble>
-        Adipisicing laborum est eu laborum est sit in commodo enim sint laboris
-        labore nisi ut.
-      </Chat.Bubble>
-    </Chat>
-  );
-};
+export const Default = {
+  render: (props) => {
+    return (
+      <Chat
+        avatar={props?.avatar ?? "ON"}
+        name={props?.name ?? "Ola Normann"}
+        timestamp={props?.timestamp ?? "01.01.21 14:00"}
+        avatarBgColor={props?.avatarBgColor}
+        backgroundColor={props?.backgroundColor}
+      >
+        <Chat.Bubble>
+          Aute minim nisi sunt mollit duis sunt nulla minim non proident.
+        </Chat.Bubble>
+        <Chat.Bubble>Tempor fugiat amet eu sint in in ullamco.</Chat.Bubble>
+        <Chat.Bubble>
+          Adipisicing laborum est eu laborum est sit in commodo enim sint
+          laboris labore nisi ut.
+        </Chat.Bubble>
+      </Chat>
+    );
+  },
 
-Default.args = {
-  name: "Ola Normann",
-  timestamp: "01.01.21 14:00",
-  avatar: "ON",
+  args: {
+    name: "Ola Normann",
+    timestamp: "01.01.21 14:00",
+    avatar: "ON",
+  },
 };
 
 export const Farger = () => {

package/src/chat/index.ts

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

package/src/chips/Removable.tsx

@@ -1,7 +1,7 @@
 import { Close } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {

package/src/chips/Toggle.tsx

@@ -1,7 +1,7 @@
 import { SuccessStroke } from "@navikt/ds-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "..";
+import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface ToggleChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {