@navikt/ds-react 6.0.0-alpha.1 → 6.0.0-alpha.7

package/esm/util/types/AsChildProps.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+export type AsChildProps = {
+    children: React.ReactElement | false | null;
+    /**
+     * Renders the component and its child as a single element,
+     * merging the props of the component with the props of the child.
+     *
+     * @example
+     * ```tsx
+     * <Component asChild data-prop>
+     *   <ChildComponent data-child />
+     * </Component>
+     *
+     * // Renders
+     * <MergedComponent data-prop data-child />
+     * ```
+     */
+    asChild: true;
+} | {
+    children: React.ReactNode;
+    /**
+     * Renders the component and its child as a single element,
+     * merging the props of the component with the props of the child.
+     *
+     * @example
+     * ```tsx
+     * <Component asChild data-prop>
+     *   <ChildComponent data-child />
+     * </Component>
+     *
+     * // Renders
+     * <MergedComponent data-prop data-child />
+     * ```
+     */
+    asChild?: false;
+};

package/esm/util/types/AsChildProps.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AsChildProps.js.map

package/esm/util/types/AsChildProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsChildProps.js","sourceRoot":"","sources":["../../../src/util/types/AsChildProps.ts"],"names":[],"mappings":""}

package/esm/util/types/index.d.ts

@@ -1 +1,2 @@
-export type { OverridableComponent } from "./OverridableComponent";
+export type { OverridableComponent } from "./OverridableComponent.js";
+export type { AsChildProps } from "./AsChildProps.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "6.0.0-alpha.1",
+  "version": "6.0.0-alpha.7",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -30,33 +30,33 @@
   "exports": {
     ".": {
       "import": {
-        "default": "./esm/index.js",
-        "types": "./esm/index.d.ts"
+        "types": "./esm/index.d.ts",
+        "default": "./esm/index.js"
       },
       "require": {
-        "default": "./cjs/index.js",
-        "types": "./cjs/index.d.ts"
+        "types": "./cjs/index.d.ts",
+        "default": "./cjs/index.js"
       }
     },
     "./package.json": "./package.json"
   },
   "scripts": {
     "docgen": "yarn ts-node ../../../scripts/docgen.ts",
-    "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
+    "write-packagejson": "echo '{\"type\": \"module\"}' > esm/package.json",
     "clean": "rimraf cjs esm",
-    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json\"",
+    "build": "concurrently \"tsc -p tsconfig.build.json\" \"tsc -p tsconfig.esm.json && tsc-alias -p tsconfig.esm.json && yarn write-packagejson\" ",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "TZ=UTC jest"
   },
   "dependencies": {
     "@floating-ui/react": "0.25.4",
-    "@navikt/aksel-icons": "^5.15.1",
-    "@navikt/ds-tokens": "^5.15.1",
+    "@navikt/aksel-icons": "^5.18.0",
+    "@navikt/ds-tokens": "^5.18.0",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
-    "clsx": "^1.2.1",
-    "date-fns": "^2.30.0",
-    "react-day-picker": "8.3.4"
+    "clsx": "^2.1.0",
+    "date-fns": "^2.30.0 || ^3.0.0",
+    "react-day-picker": "8.10.0"
   },
   "devDependencies": {
     "@testing-library/dom": "8.13.0",
@@ -77,6 +77,7 @@
     "swr": "^1.1.2",
     "ts-jest": "^29.0.0",
     "ts-node": "^10.9.1",
+    "tsc-alias": "1.8.8",
     "typescript": "^5.1.6"
   },
   "peerDependencies": {

package/src/alert/alert.stories.tsx

@@ -1,12 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
 import React from "react";
-import { Alert, AlertProps } from ".";
-import { BodyLong, Heading as DsHeading, Link } from "..";
+import { VStack } from "../layout/stack";
+import { Link } from "../link";
+import { BodyLong, Heading as DsHeading } from "../typography";
+import Alert, { AlertProps } from "./Alert";
 
 const meta: Meta<typeof Alert> = {
   title: "ds-react/Alert",
   component: Alert,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
 
 export default meta;
@@ -20,12 +24,13 @@ const variants: AlertProps["variant"][] = [
   "success",
 ];
 
-export const Default: Story = {
+export const Controls: Story = {
   render: (props) => <Alert {...props} />,
 
   args: {
     children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
     fullWidth: false,
+    inline: false,
     variant: "info",
     size: "medium",
     closeButton: false,
@@ -42,43 +47,18 @@ export const Default: Story = {
   },
 };
 
-export const Small: Story = {
-  render: (props) => {
-    return (
-      <div className="colgap">
-        {variants.map((variant, i) => (
-          <Alert
-            key={variant}
-            variant={variant}
-            size="small"
-            closeButton={props.closeButton}
-          >
-            {new Array(i + 1).fill(
-              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-            )}
-          </Alert>
-        ))}
-      </div>
-    );
-  },
-
-  args: {
-    closeButton: false,
-  },
-};
-
-export const FullWidth = () => {
+export const Variants = () => {
   return (
     <div className="colgap">
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth>
+        <Alert key={variant} variant={variant}>
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
         </Alert>
       ))}
       {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} fullWidth size="small">
+        <Alert key={variant} variant={variant} size="small">
           {new Array(i + 1).fill(
             "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
           )}
@@ -88,24 +68,42 @@ export const FullWidth = () => {
   );
 };
 
+export const FullWidth = () => {
+  return (
+    <VStack gap="4">
+      <Alert variant="info" fullWidth>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" fullWidth size="small">
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
+  );
+};
+
 export const Inline = () => {
   return (
-    <div className="colgap">
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline>
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-      {variants.map((variant, i) => (
-        <Alert key={variant} variant={variant} inline size="small">
-          {new Array(i + 1).fill(
-            "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
-          )}
-        </Alert>
-      ))}
-    </div>
+    <VStack gap="4">
+      <h2>Inline</h2>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud.
+      </Alert>
+      <Alert variant="info" size="small" inline>
+        Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+        enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+        reprehenderit enim nisi veniam nostrud. Id elit esse enim reprehenderit
+        enim nisi veniam nostrud.
+      </Alert>
+    </VStack>
   );
 };
 
@@ -136,82 +134,173 @@ export const Heading = () => {
   );
 };
 
-export const Links = () => {
-  return (
-    <div className="colgap">
-      {variants.map((variant) => (
-        <Alert key={variant} variant={variant}>
-          <Link href="#">Id elit esse enim reprehenderit</Link>
-        </Alert>
-      ))}
-    </div>
-  );
-};
-
-const AlertWithCloseButton = ({
-  children,
-  size,
-}: {
-  size?: "medium" | "small";
-  children?: React.ReactNode;
-}) => {
-  const [show, setShow] = React.useState(true);
-
-  return show ? (
-    <Alert
-      variant="warning"
-      size={size}
-      closeButton
-      onClose={() => setShow(false)}
-    >
-      {children || "Content"}
-    </Alert>
-  ) : null;
-};
-
-export const WithCloseButton: Story = {
+export const CloseButton: Story = {
   render: () => {
     return (
-      <div className="colgap">
-        <AlertWithCloseButton />
-        <AlertWithCloseButton>
-          <BodyLong>Ullamco ullamco laborum et commodo sint culpa</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton>
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+      <VStack gap="4">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
           </DsHeading>
           <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
           </BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <BodyLong>Ullamco ullamco laborum et commodo</BodyLong>
-        </AlertWithCloseButton>
-        <AlertWithCloseButton size="small">
-          <DsHeading spacing size="small" level="3">
-            Aliquip duis est in commodo pariatur
+        </Alert>
+        <Alert variant="info" closeButton size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
           </DsHeading>
           <BodyLong>
-            Ullamco ullamco laborum et commodo sint culpa cupidatat culpa qui
-            laboris ex. Labore ex occaecat proident qui qui fugiat magna. Fugiat
-            sint commodo consequat eu aute.
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
           </BodyLong>
-        </AlertWithCloseButton>
-      </div>
+        </Alert>
+      </VStack>
     );
   },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-    const buttons = canvas.getAllByTitle("Lukk Alert");
+};
 
-    await step("click button", async () => {
-      await userEvent.click(buttons[0]);
-    });
+export const Chromatic: Story = {
+  render: () => (
+    <VStack gap="6">
+      <VStack gap="2">
+        <h2>Variant</h2>
+        {variants.map((variant, i) => (
+          <Alert key={variant} variant={variant}>
+            {new Array(i + 1).fill(
+              "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
+            )}
+          </Alert>
+        ))}
+      </VStack>
+      <VStack gap="2">
+        <h2>Small</h2>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small">
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>FullWidth</h2>
+        <Alert variant="info" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" fullWidth>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Inline</h2>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" size="small" inline>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>Heading</h2>
+        <Alert variant="info">
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small">
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>
+      <VStack gap="2">
+        <h2>CloseButton</h2>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert size="small" variant="info" closeButton>
+          Id elit esse enim reprehenderit enim nisi veniam nostrud. Id elit esse
+          enim reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud. Id elit esse enim
+          reprehenderit enim nisi veniam nostrud.
+        </Alert>
+        <Alert variant="info" closeButton>
+          <DsHeading size="small" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong>
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+        <Alert variant="info" size="small" closeButton>
+          <DsHeading size="xsmall" level="3">
+            Id elit esse enim reprehenderit
+          </DsHeading>
+          <BodyLong size="small">
+            Id elit esse enim reprehenderit enim nisi veniam nostrud.
+          </BodyLong>
+        </Alert>
+      </VStack>
 
-    const buttonsAfter = canvas.getAllByTitle("Lukk Alert");
-    expect(buttonsAfter.length).toBe(4);
+      <VStack gap="2">
+        <h2>Links</h2>
+        {variants.map((variant) => (
+          <Alert key={variant} variant={variant}>
+            <Link href="#">Id elit esse enim reprehenderit</Link>
+          </Alert>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+  parameters: {
+    chromatic: { disable: false },
   },
 };

package/src/chat/Bubble.tsx

@@ -15,11 +15,6 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
    * Timestamp for sent message
    */
   timestamp?: string;
-  /**
-   * Background color on bubble
-   * @deprecated Use `variant` on Chat instead
-   */
-  backgroundColor?: string;
   /**
    * Overrides hoizontal position of toptext
    */
@@ -27,25 +22,9 @@ export interface BubbleProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const Bubble = forwardRef<HTMLDivElement, BubbleProps>(
-  (
-    {
-      children,
-      className,
-      name,
-      timestamp,
-      backgroundColor,
-      toptextPosition,
-      ...rest
-    },
-    ref,
-  ) => {
+  ({ children, className, name, timestamp, toptextPosition, ...rest }, ref) => {
     return (
-      <div
-        ref={ref}
-        className={cl("navds-chat__bubble", className)}
-        style={{ backgroundColor }}
-        {...rest}
-      >
+      <div ref={ref} className={cl("navds-chat__bubble", className)} {...rest}>
         {(timestamp || name) && (
           <h3
             className={cl(

package/src/chat/Chat.tsx

@@ -29,16 +29,6 @@ export interface ChatProps extends HTMLAttributes<HTMLDivElement> {
    * @default "neutral"
    */
   variant?: "subtle" | "info" | "neutral";
-  /**
-   * Background color on bubbles
-   * @deprecated Use `variant` instead
-   */
-  backgroundColor?: string;
-  /**
-   * Background color for avatar
-   * @deprecated Use `variant` instead
-   */
-  avatarBgColor?: string;
   /**
    * Positions avatar and bubbles
    * @default "left"
@@ -93,8 +83,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       avatar,
       position = "left",
       variant = "neutral",
-      avatarBgColor,
-      backgroundColor,
       toptextPosition,
       size = "medium",
       ...rest
@@ -114,11 +102,7 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
       {...rest}
     >
       {avatar && (
-        <div
-          className="navds-chat__avatar"
-          aria-hidden
-          style={{ backgroundColor: avatarBgColor }}
-        >
+        <div className="navds-chat__avatar" aria-hidden>
           {avatar}
         </div>
       )}
@@ -130,7 +114,6 @@ export const Chat = forwardRef<HTMLDivElement, ChatProps>(
                 {React.cloneElement(child, {
                   name: name && i === 0 ? name : undefined,
                   timestamp: timestamp && i === 0 ? timestamp : undefined,
-                  backgroundColor,
                   ...child.props,
                 })}
               </BodyLong>

package/src/chat/chat.stories.tsx

@@ -7,16 +7,6 @@ export default {
   title: "ds-react/Chat",
   component: Chat,
   argTypes: {
-    backgroundColor: {
-      control: {
-        type: "text",
-      },
-    },
-    avatarBgColor: {
-      control: {
-        type: "text",
-      },
-    },
     position: {
       control: { type: "radio" },
       options: POSITIONS,
@@ -68,27 +58,6 @@ export const Small = () => (
   </Chat>
 );
 
-export const Colors = () => (
-  <Chat
-    avatar="NAV"
-    name="NAV"
-    timestamp="01.01.21 14:00"
-    avatarBgColor="var(--a-surface-alt-1-subtle)"
-    backgroundColor="var(--a-surface-warning-subtle)"
-  >
-    <Chat.Bubble>
-      Aute minim nisi sunt mollit duis sunt nulla minim non proident.
-    </Chat.Bubble>
-    <Chat.Bubble backgroundColor="lightYellow">
-      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 Variants = () => (
   <div className="colgap">
     <Chat avatar="NAV" name="NAV" timestamp="01.01.21 14:00" variant="info">

package/src/date/context/useSharedMonthContext.tsx

@@ -1,5 +1,4 @@
-import setYear from "date-fns/setYear";
-import startOfMonth from "date-fns/startOfMonth";
+import { setYear, startOfMonth } from "date-fns";
 import React, { createContext, useContext, useState } from "react";
 import { useDayPicker } from "react-day-picker";
 import { Matcher, getInitialYear } from "../utils";

package/src/date/datepicker/DatePicker.tsx

@@ -1,5 +1,5 @@
 import cl from "clsx";
-import isWeekend from "date-fns/isWeekend";
+import { isWeekend } from "date-fns";
 import React, { forwardRef, useRef, useState } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
@@ -11,7 +11,6 @@ import { DateWrapper } from "../parts/DateWrapper";
 import { getLocaleFromString, labels } from "../utils";
 import DatePickerStandalone from "./DatePickerStandalone";
 import Caption from "./parts/Caption";
-import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
@@ -124,7 +123,6 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
           HeadRow,
           WeekNumber,
           Row,
-          Day: DayButton,
         }}
         className={cl("navds-date", className)}
         classNames={{

package/src/date/datepicker/DatePickerStandalone.tsx

@@ -1,11 +1,10 @@
 import cl from "clsx";
-import isWeekend from "date-fns/isWeekend";
+import { isWeekend } from "date-fns";
 import React, { forwardRef } from "react";
 import { DateRange, DayPicker, isMatch } from "react-day-picker";
 import { omit } from "../../util";
 import { getLocaleFromString, labels } from "../utils";
 import Caption from "./parts/Caption";
-import DayButton from "./parts/DayButton";
 import DropdownCaption from "./parts/DropdownCaption";
 import { HeadRow } from "./parts/HeadRow";
 import Row from "./parts/Row";
@@ -94,7 +93,6 @@ export const DatePickerStandalone: DatePickerStandaloneType = forwardRef<
             HeadRow,
             WeekNumber,
             Row,
-            Day: DayButton,
           }}
           className="navds-date"
           classNames={{ vhidden: "navds-sr-only" }}