@navikt/ds-react 5.5.0-beta.0 → 5.6.0-beta.0

package/src/timeline/period/index.tsx

@@ -50,8 +50,8 @@ export interface PeriodProps {
   status: string;
   cropped: string;
   direction: string;
-  width: Number;
-  left: Number;
+  width: number;
+  left: number;
   icon?: React.ReactNode;
   children?: React.ReactNode;
   statusLabel?: string;
@@ -102,11 +102,12 @@ export const Period = forwardRef<HTMLDivElement, TimelinePeriodProps>(
         width={width}
         left={horizontalPosition}
         icon={icon}
-        children={children}
         isActive={isActive}
         statusLabel={statusLabel}
         restProps={restProps}
-      />
+      >
+        {children}
+      </ClickablePeriod>
     ) : (
       <NonClickablePeriod
         periodRef={ref}

package/src/timeline/timeline.stories.tsx

@@ -110,7 +110,7 @@ export const Default = () => {
           label="Row 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -126,7 +126,7 @@ export const Default = () => {
           label="Row 2"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -154,7 +154,7 @@ export const WithPins = () => {
           label="Row 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -170,7 +170,7 @@ export const WithPins = () => {
           label="Row 2"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -195,7 +195,7 @@ export const WithZoom = () => {
           label="Row 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -211,7 +211,7 @@ export const WithZoom = () => {
           label="Row 2"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -246,7 +246,7 @@ export const ActivePeriod = () => {
           label="Rad 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -268,7 +268,7 @@ export const ActivePeriod = () => {
           })}
         </Timeline.Row>
         <Timeline.Row label="Rad 2">
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -368,13 +368,14 @@ export const ContentDemo = () => {
         <Timeline.Pin date={new Date("Apr 15 2022")}>Pin 1</Timeline.Pin>
         <Timeline.Pin date={new Date("Jun 12 2022")}>
           Pin 2 <button>test</button>
+          <a href="/123">test123123</a>
         </Timeline.Pin>
         <Timeline.Pin date={new Date("Jul 28 2022")}>Pin 3</Timeline.Pin>
         <Timeline.Row
           label="Rad 1"
           icon={<CheckmarkCircleFillIcon aria-hidden />}
         >
-          {row1.map((p: any, i) => {
+          {row1.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}
@@ -400,7 +401,7 @@ export const ContentDemo = () => {
           })}
         </Timeline.Row>
         <Timeline.Row label="Rad 2">
-          {row2.map((p: any, i) => {
+          {row2.map((p: any) => {
             return (
               <Timeline.Period
                 key={p.id}

package/src/timeline/utils/timeline.ts

@@ -12,9 +12,9 @@ type ParsedChild = {
 };
 
 export const parseRows = (rowChildren: ReactNode[]) => {
-  let parsedChildren: ParsedChild[] = [];
+  const parsedChildren: ParsedChild[] = [];
   rowChildren?.forEach((r: React.ReactNode) => {
-    let periods: ParsedChild["periods"] = [];
+    const periods: ParsedChild["periods"] = [];
     if (React.isValidElement(r) && r?.props?.children) {
       if (Array.isArray(r.props.children)) {
         for (let i = 0; i < r.props.children.length; i++) {
@@ -72,7 +72,7 @@ export const parseRows = (rowChildren: ReactNode[]) => {
         label: r.props.label,
         icon: r.props.icon,
         headingTag: r.props.headingTag,
-        periods: periods,
+        periods,
         restProps: omit(r.props, ["label", "icon", "headingTag"]),
         ref: (r as any)?.ref,
       });

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

@@ -1,5 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-
 import {
   EnvelopeClosedIcon,
   EnvelopeOpenIcon,
@@ -8,24 +6,24 @@ import {
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
 import { ToggleGroup } from "../index";
-export default {
+
+const meta: Meta<typeof ToggleGroup> = {
   title: "ds-react/ToggleGroup",
   component: ToggleGroup,
   argTypes: {
     size: {
+      options: ["medium", "small"],
       control: {
         type: "radio",
-        options: ["medium", "small"],
       },
     },
     variant: {
-      control: {
-        type: "radio",
-        options: ["action", "neutral"],
-      },
+      options: ["action", "neutral"],
+      control: { type: "radio" },
     },
   },
-} as Meta;
+};
+export default meta;
 
 const Items = (icon?: boolean, both?: boolean) => (
   <>
@@ -59,26 +57,24 @@ const Items = (icon?: boolean, both?: boolean) => (
   </>
 );
 
-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>
-    );
-  },
-
-  args: {
-    icon: true,
-    text: true,
-    label: false,
-  },
+export const Default = (props) => {
+  const [activeValue, setActiveValue] = useState("ulest");
+  return (
+    <ToggleGroup
+      size={props.size}
+      variant={props.variant}
+      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,
 };
 
 export const Compositions = () => {

package/src/toggle-group/ToggleGroup.tsx

@@ -88,7 +88,6 @@ export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
       label,
       value,
       defaultValue,
-      id,
       "aria-describedby": desc,
       variant = "action",
       ...rest

package/src/tooltip/Tooltip.test.tsx

@@ -1,13 +1,16 @@
-import { act, cleanup, fireEvent } from "@testing-library/react";
+import { act, fireEvent, screen } from "@testing-library/react";
 import React from "react";
-import { focusVisible, simulatePointerDown } from "../../tests/utils";
+import {
+  focusVisible,
+  simulatePointerDown,
+  renderWithStyles as render,
+} from "../../tests/utils";
 import userEvent from "@testing-library/user-event";
 import Tooltip from "./Tooltip";
-import { renderWithStyles as render } from "../../tests/utils";
 
 describe("Tooltip", () => {
   test("controlled open", () => {
-    const { getByRole } = render(
+    render(
       <Tooltip content="Hello World" open>
         <button id="testChild" type="submit">
           Hello World
@@ -15,12 +18,11 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    expect(getByRole("tooltip")).toBeVisible();
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   test("default open", () => {
-    const { getByRole } = render(
+    render(
       <Tooltip content="Hello World" defaultOpen>
         <button id="testChild" type="submit">
           Hello World
@@ -28,12 +30,11 @@ describe("Tooltip", () => {
       </Tooltip>
     );
 
-    expect(getByRole("tooltip")).toBeVisible();
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   test("Focus", async () => {
-    const { getByRole } = render(
+    render(
       <Tooltip content="Hello World">
         <button id="testChild" type="submit">
           Hello World
@@ -42,14 +43,12 @@ describe("Tooltip", () => {
     );
     simulatePointerDown();
 
-    focusVisible(getByRole("button"));
-    expect(getByRole("tooltip")).toBeVisible();
-
-    cleanup();
+    focusVisible(screen.getByRole("button"));
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   test("Escape", async () => {
-    const { queryByRole, getByRole } = render(
+    render(
       <Tooltip content="Hello World">
         <button id="testChild" type="submit">
           Hello World
@@ -58,21 +57,17 @@ describe("Tooltip", () => {
     );
     simulatePointerDown();
 
-    focusVisible(getByRole("button"));
-    expect(getByRole("tooltip")).toBeVisible();
-
-    act(() => {
-      fireEvent.keyDown(document, { key: "Escape" });
-    });
-    expect(queryByRole("tooltip")).toBeNull();
+    focusVisible(screen.getByRole("button"));
+    expect(screen.getByRole("tooltip")).toBeVisible();
 
-    cleanup();
+    fireEvent.keyDown(document, { key: "Escape" });
+    expect(screen.queryByRole("tooltip")).toBeNull();
   });
 
   it("delay", async () => {
     const user = userEvent.setup();
 
-    const { queryByRole, getByRole } = render(
+    render(
       <Tooltip content="Hello World" delay={300}>
         <button id="testChild" type="submit">
           Hello World
@@ -81,18 +76,17 @@ describe("Tooltip", () => {
     );
 
     await act(async () => {
-      await user.hover(getByRole("button"));
+      await user.hover(screen.getByRole("button"));
       await new Promise((r) => setTimeout(r, 250));
-      expect(queryByRole("tooltip")).toBeNull();
+      expect(screen.queryByRole("tooltip")).toBeNull();
       await new Promise((r) => setTimeout(r, 600));
     });
 
-    expect(getByRole("tooltip")).toBeVisible();
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   it("outsideClick", async () => {
-    const { queryByRole, getByRole } = render(
+    render(
       <div>
         <Tooltip content="Hello World">
           <button id="testChild" type="submit">
@@ -103,21 +97,19 @@ describe("Tooltip", () => {
       </div>
     );
 
-    simulatePointerDown(getByRole("button"));
-    focusVisible(getByRole("button"));
+    simulatePointerDown(screen.getByRole("button"));
+    focusVisible(screen.getByRole("button"));
 
     await act(async () => {
-      expect(getByRole("tooltip")).toBeVisible();
-      getByRole("link").focus();
+      expect(screen.getByRole("tooltip")).toBeVisible();
+      screen.getByRole("link").focus();
     });
 
-    expect(queryByRole("tooltip")).toBeNull();
-
-    cleanup();
+    expect(screen.queryByRole("tooltip")).toBeNull();
   });
 
   it("keep open on tooltip-click", async () => {
-    const { getByRole } = render(
+    render(
       <div>
         <Tooltip content="Hello World">
           <button id="testChild" type="submit">
@@ -127,21 +119,17 @@ describe("Tooltip", () => {
       </div>
     );
 
-    simulatePointerDown(getByRole("button"));
-    focusVisible(getByRole("button"));
+    simulatePointerDown(screen.getByRole("button"));
+    focusVisible(screen.getByRole("button"));
 
-    await act(async () => {
-      expect(getByRole("tooltip")).toBeVisible();
-      fireEvent.click(getByRole("tooltip"));
-    });
+    expect(screen.getByRole("tooltip")).toBeVisible();
+    fireEvent.click(screen.getByRole("tooltip"));
 
-    expect(getByRole("tooltip")).toBeVisible();
-
-    cleanup();
+    expect(screen.getByRole("tooltip")).toBeVisible();
   });
 
   it("close on focus-loss", async () => {
-    const { getByRole, queryByRole } = render(
+    render(
       <div>
         <Tooltip content="Hello World">
           <button id="testChild" type="submit">
@@ -152,16 +140,14 @@ describe("Tooltip", () => {
       </div>
     );
 
-    simulatePointerDown(getByRole("button"));
-    focusVisible(getByRole("button"));
+    simulatePointerDown(screen.getByRole("button"));
+    focusVisible(screen.getByRole("button"));
 
     await act(async () => {
-      expect(getByRole("tooltip")).toBeVisible();
-      getByRole("link").focus();
+      expect(screen.getByRole("tooltip")).toBeVisible();
+      screen.getByRole("link").focus();
     });
 
-    expect(queryByRole("tooltip")).toBeNull();
-
-    cleanup();
+    expect(screen.queryByRole("tooltip")).toBeNull();
   });
 });

package/src/tooltip/Tooltip.tsx

@@ -125,7 +125,7 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
     } = useFloating({
       placement: _placement,
       open: userOpen ?? open,
-      onOpenChange: setOpen,
+      onOpenChange: (_open) => setOpen(_open),
       middleware: [
         offset(_offset ? _offset : _arrow ? 10 : 2),
         shift(),

package/src/typography/Heading.tsx

@@ -52,7 +52,7 @@ export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
       },
       ref
     ) => {
-      let HeadingTag = as ?? (`h${level}` as React.ElementType);
+      const HeadingTag = as ?? (`h${level}` as React.ElementType);
 
       return (
         <HeadingTag

package/src/util/RandomIcon.tsx

@@ -1,6 +1,7 @@
 import * as AllIcons from "@navikt/aksel-icons";
 import React from "react";
 
+// eslint-disable-next-line import/namespace
 const icons = Object.keys(AllIcons).map((key) => AllIcons[key]);
 
 export const RandomIcon = () => {

package/src/util/Slot.tsx

@@ -0,0 +1,69 @@
+// https://github.com/radix-ui/primitives/blob/main/packages/react/slot/src/Slot.tsx
+import * as React from "react";
+import mergeRefs from "./mergeRefs";
+
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+}
+
+export const Slot = React.forwardRef<HTMLElement, SlotProps>(
+  (props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+
+    if (React.isValidElement(children)) {
+      return React.cloneElement<any>(children, {
+        ...mergeProps(slotProps, children.props),
+        ref: forwardedRef
+          ? mergeRefs([forwardedRef, (children as any).ref])
+          : (children as any).ref,
+      });
+    }
+
+    if (React.Children.count(children) > 1) {
+      console.error(
+        "Aksel: Components using 'asChild' expects to recieve a single React element child."
+      );
+      return React.Children.only(null);
+    }
+
+    return null;
+  }
+);
+
+function mergeProps(
+  slotProps: Record<string, any>,
+  childProps: Record<string, any>
+) {
+  // all child props should override
+  const overrideProps = { ...childProps };
+
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      // if the handler exists on both, we compose them
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args: unknown[]) => {
+          childPropValue(...args);
+          slotPropValue(...args);
+        };
+      }
+      // but if it exists only on the slot, we use only this one
+      else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    }
+    // if it's `style`, we merge them
+    else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue]
+        .filter(Boolean)
+        .join(" ");
+    }
+  }
+
+  return { ...slotProps, ...overrideProps };
+}

package/src/util/__tests__/Slot.test.tsx

@@ -0,0 +1,98 @@
+import { render, screen, fireEvent } from "@testing-library/react";
+import React from "react";
+import { Button } from "../../button";
+import { Slot } from "../Slot";
+
+describe("Slot", () => {
+  describe("should handle forwarning events", () => {
+    test("Should call onClick when event is on Slot", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={handleClick}>
+          <Button>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Child", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot>
+          <Button onClick={handleClick}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Child and Slot", async () => {
+      const handleClickSlot = jest.fn();
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={handleClickSlot}>
+          <Button onClick={handleClick}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClickSlot).toHaveBeenCalledTimes(1);
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Child and undefined on Slot", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={undefined}>
+          <Button onClick={handleClick}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+
+    test("Should call onClick when event is on Slot and undefined on Child", async () => {
+      const handleClick = jest.fn();
+      render(
+        <Slot onClick={handleClick}>
+          <Button onClick={undefined}>Button</Button>
+        </Slot>
+      );
+      fireEvent.click(screen.getByRole("button"));
+      expect(handleClick).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("should handle className", () => {
+    test("Should merge className correctly when Child and Slot has className", async () => {
+      render(
+        <Slot className="class1">
+          <button className="class2 class2--inline">Button</button>
+        </Slot>
+      );
+      expect(screen.getByRole("button").className).toEqual(
+        "class1 class2 class2--inline"
+      );
+    });
+
+    test("Should merge className correctly when Child has className and Slot has undefined className", async () => {
+      render(
+        <Slot className={undefined}>
+          <button className="class2 class2--inline">Button</button>
+        </Slot>
+      );
+      expect(screen.getByRole("button").className).toEqual(
+        "class2 class2--inline"
+      );
+    });
+
+    test("Should merge className correctly when Slot has className and Child has undefined className", async () => {
+      render(
+        <Slot className="class1">
+          <button className={undefined}>Button</button>
+        </Slot>
+      );
+      expect(screen.getByRole("button").className).toEqual("class1");
+    });
+  });
+});

package/src/util/mergeRefs.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // https://github.com/gregberge/react-merge-refs
-export default function mergeRefs<T = any>(
+export default function mergeRefs<T>(
   refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>
 ): React.RefCallback<T> {
   return (value) => {

package/src/util/useId.ts

@@ -18,10 +18,8 @@ function useGlobalId(idOverride?: string): string | undefined {
   return id;
 }
 
-// eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
 const maybeReactUseId: undefined | (() => string) = (React as any)[
-  // eslint-disable-next-line no-useless-concat
-  "useId" + ""
+  "useId" + "" // Workaround for https://github.com/webpack/webpack/issues/14814
 ];
 /**
  *