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

package/src/form/error-summary/error-summary.stories.tsx

@@ -1,7 +1,6 @@
 import { Meta } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
-import React, { useRef } from "react";
-import { ErrorSummary } from "..";
+import React from "react";
+import { ErrorSummary } from "./ErrorSummary";
 
 export default {
   title: "ds-react/Errorsummary",
@@ -44,56 +43,3 @@ export const Small = () => (
     </ErrorSummary.Item>
   </ErrorSummary>
 );
-
-export const A11yDemo = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = useRef<HTMLHeadingElement>(null);
-    return (
-      <div>
-        <button onClick={() => ref.current?.focus()}>
-          Fokuser Errorsummary på klikk
-        </button>
-        <ErrorSummary heading="Feiloppsummering tittel" focusTargetRef={ref}>
-          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
-          </ErrorSummary.Item>
-        </ErrorSummary>
-      </div>
-    );
-  },
-};
-
-export const FocusDemo = {
-  render: () => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const ref = useRef<HTMLHeadingElement>(null);
-    return (
-      <div>
-        <button onClick={() => ref.current?.focus()}>Focus summary</button>
-        <ErrorSummary heading="Feiloppsummering tittel" focusTargetRef={ref}>
-          <ErrorSummary.Item href="#1">Checkbox må fylles ut</ErrorSummary.Item>
-          <ErrorSummary.Item href="#2">
-            Tekstfeltet må ha en godkjent e-mail
-          </ErrorSummary.Item>
-        </ErrorSummary>
-      </div>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    const button = canvas.getByText("Focus summary");
-    const heading = canvas.getByText("Feiloppsummering tittel");
-
-    await step("click button", async () => {
-      await userEvent.click(button);
-    });
-
-    expect(heading).toHaveFocus();
-  },
-  parameters: {
-    chromatic: { disableSnapshot: true },
-  },
-};

package/src/form/search/Search.tsx

@@ -23,7 +23,7 @@ export type SearchClearEvent =
 
 export interface SearchProps
   extends Omit<FormFieldProps, "readOnly">,
-    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange"> {
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
   children?: React.ReactNode;
   /**
    * Search label
@@ -66,10 +66,10 @@ export interface SearchProps
    * Exposes the HTML size attribute
    */
   htmlSize?: number | string;
-    /*
+  /*
    * Exposes role attribute
    */
-  role?: string
+  role?: string;
 }
 
 interface SearchComponent
@@ -210,7 +210,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              role={role ?? 'searchbox'}
+              role={role ?? "searchbox"}
               className={cl(
                 className,
                 "navds-search__input",

package/src/form/stories/confirmation-panel.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { Link } from "../..";
+import { Link } from "../../link";
 import { ConfirmationPanel } from "../index";
 
 export default {

package/src/form/stories/textarea.stories.tsx

@@ -212,7 +212,7 @@ export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
   // and set the height to 2px when used in StrictMode in a Modal that is initially open.
   return (
     <React.StrictMode>
-      <Modal open>
+      <Modal open onClose={() => null} aria-label="Modal med textarea">
         <Modal.Body>
           <Textarea label="Har du noen tilbakemeldinger?" />
         </Modal.Body>

package/src/help-text/help-text.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React, { useEffect, useRef } from "react";
-import { BodyLong, Heading, HelpText } from "..";
+import { BodyLong, Heading } from "../typography";
+import HelpText from "./HelpText";
 
 const meta: Meta<typeof HelpText> = {
   title: "ds-react/HelpText",

package/src/index.ts

@@ -1,3 +1,4 @@
+"use client";
 export * from "./accordion";
 export * from "./alert";
 export * from "./button";

package/src/internal-header/header.stories.tsx

@@ -6,7 +6,8 @@ import {
   MenuGridIcon,
 } from "@navikt/aksel-icons";
 import { BodyLong, BodyShort, Detail } from "@navikt/ds-react";
-import { Dropdown, InternalHeader } from "..";
+import { Dropdown } from "../dropdown";
+import InternalHeader from "./InternalHeader";
 
 export default {
   title: "ds-react/InternalHeader",

package/src/layout/bleed/Bleed.stories.tsx

@@ -1,7 +1,8 @@
 import type { Meta } from "@storybook/react";
 import React from "react";
-import { Box, HStack, VStack } from "../..";
 import { BodyLong } from "../../typography";
+import { Box } from "../box";
+import { HStack, VStack } from "../stack";
 import { Bleed } from "./Bleed";
 
 export default {

package/src/layout/box/Box.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta } from "@storybook/react";
 import React, { ReactNode } from "react";
 import { ChevronRightIcon } from "@navikt/aksel-icons";
-import { HGrid, HStack, VStack } from "../..";
 import { BodyLong, Detail, Heading } from "../../typography";
+import { HGrid } from "../grid";
+import { HStack, VStack } from "../stack";
 import { BackgroundToken, BorderRadiiToken } from "../utilities/types";
 import { Box } from "./Box";
 

package/src/layout/sidemal-test/navno-sidemal.stories.tsx

@@ -1,6 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import React from "react";
-import { Box, HGrid, Hide, Show, VStack } from "../..";
+import { Box } from "../box";
+import { HGrid } from "../grid";
+import { Hide, Show } from "../responsive";
+import { VStack } from "../stack";
 import { Content } from "./Content";
 import { FilterCard } from "./Filter";
 import { Header } from "./Header";

package/src/link/stories/link.stories.tsx

@@ -1,11 +1,9 @@
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
-import {
-  BodyLong,
-  Alert as DsAlert,
-  ConfirmationPanel as DsConfirmationPanel,
-  Link,
-} from "../..";
+import { Alert } from "../../alert";
+import { ConfirmationPanel } from "../../form";
+import { BodyLong } from "../../typography";
+import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";
 
 export default {
@@ -139,37 +137,37 @@ const DemoLink = () => (
 
 export const Icon = () => <DemoLink />;
 
-export const Alert = () => {
+export const InAlert = () => {
   return (
     <div className="colgap">
-      <DsAlert variant="info">
+      <Alert variant="info">
         <DemoLink />
-      </DsAlert>
-      <DsAlert variant="success">
+      </Alert>
+      <Alert variant="success">
         <DemoLink />
-      </DsAlert>
-      <DsAlert variant="warning">
+      </Alert>
+      <Alert variant="warning">
         <DemoLink />
-      </DsAlert>
-      <DsAlert variant="error">
+      </Alert>
+      <Alert variant="error">
         <DemoLink />
-      </DsAlert>
+      </Alert>
     </div>
   );
 };
 
-export const ConfirmationPanel = () => {
+export const InConfirmationPanel = () => {
   return (
     <div className="colgap">
-      <DsConfirmationPanel label="demo">
+      <ConfirmationPanel label="demo">
         <DemoLink />
-      </DsConfirmationPanel>
-      <DsConfirmationPanel checked label="demo">
+      </ConfirmationPanel>
+      <ConfirmationPanel checked label="demo">
         <DemoLink />
-      </DsConfirmationPanel>
-      <DsConfirmationPanel error="demo" label="demo">
+      </ConfirmationPanel>
+      <ConfirmationPanel error="demo" label="demo">
         <DemoLink />
-      </DsConfirmationPanel>
+      </ConfirmationPanel>
     </div>
   );
 };

package/src/link-panel/link-panel.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { LinkPanel } from "..";
+import LinkPanel from "./LinkPanel";
 
 export default {
   title: "ds-react/LinkPanel",

package/src/list/list.stories.tsx

@@ -6,7 +6,8 @@ import {
   HeadHeartIcon,
   RecycleIcon,
 } from "@navikt/aksel-icons";
-import { List, VStack } from "..";
+import { VStack } from "../layout/stack";
+import List from "./List";
 
 export default {
   title: "ds-react/List",

package/src/loader/loader.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React from "react";
-import { Loader, LoaderProps } from "..";
+import Loader, { LoaderProps } from "./Loader";
 
 export default {
   title: "ds-react/Loader",

package/src/modal/Modal.context.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { createContext } from "../util/create-context";
+
+interface ModalContextProps {
+  closeHandler?: React.MouseEventHandler<HTMLButtonElement>;
+  ref: React.RefObject<HTMLDialogElement>;
+}
+
+export const [ModalContextProvider, useModalContext] =
+  createContext<ModalContextProps>({
+    name: "ModalContext",
+    errorMessage: "<Modal.Header> must be used within a <Modal>",
+  });

package/src/modal/Modal.test.tsx

@@ -7,7 +7,7 @@ const Test = () => {
   const [open, setOpen] = useState(true);
 
   return (
-    <Modal open={open}>
+    <Modal open={open} onClose={() => null} aria-label="Test">
       <Modal.Body>
         <p>Foobar</p>
         <Button onClick={() => setOpen(false)}>Close</Button>
@@ -40,7 +40,7 @@ describe("Modal", () => {
 
   test("should toggle body class when using portal", async () => {
     render(
-      <Modal portal open>
+      <Modal portal open onClose={() => null} aria-label="Test">
         <Modal.Header />
       </Modal>,
     );

package/src/modal/Modal.tsx

@@ -8,8 +8,8 @@ import { Detail, Heading } from "../typography";
 import { composeEventHandlers } from "../util/composeEventHandlers";
 import { useId } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
+import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
-import { ModalContext } from "./ModalContext";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
 import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
@@ -98,7 +98,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const portalNode = useFloatingPortalNode({ root: rootElement });
 
     const dateContext = useContext(DateContext);
-    const modalContext = useContext(ModalContext);
+    const modalContext = useModalContext(false);
     if (modalContext && !dateContext) {
       console.error("Modals should not be nested");
     }
@@ -185,11 +185,9 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         onClick={composeEventHandlers(onClick, handleModalClick)}
         aria-labelledby={mergedAriaLabelledBy}
       >
-        <ModalContext.Provider
-          value={{
-            closeHandler: getCloseHandler(modalRef, header, onBeforeClose),
-            ref: modalRef,
-          }}
+        <ModalContextProvider
+          closeHandler={getCloseHandler(modalRef, header, onBeforeClose)}
+          ref={modalRef}
         >
           {header && (
             <ModalHeader>
@@ -208,7 +206,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
           )}
 
           {children}
-        </ModalContext.Provider>
+        </ModalContextProvider>
       </dialog>
     );
 

package/src/modal/ModalHeader.tsx

@@ -1,8 +1,8 @@
 import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
+import React, { forwardRef } from "react";
 import { XMarkIcon } from "@navikt/aksel-icons";
 import { Button } from "../button";
-import { ModalContext } from "./ModalContext";
+import { useModalContext } from "./Modal.context";
 
 export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
@@ -15,11 +15,7 @@ export interface ModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
   ({ children, className, closeButton = true, ...rest }, ref) => {
-    const context = useContext(ModalContext);
-    if (context === null) {
-      console.error("<Modal.Header> has to be used within a <Modal>");
-      return null;
-    }
+    const context = useModalContext();
 
     return (
       <div {...rest} ref={ref} className={cl("navds-modal__header", className)}>

package/src/modal/modal.stories.tsx

@@ -1,9 +1,11 @@
 import { Meta, StoryFn } from "@storybook/react";
 import React, { useRef, useState } from "react";
 import { FileIcon } from "@navikt/aksel-icons";
-import { BodyLong, Button, Heading, Tooltip } from "..";
+import { Button } from "../button";
 import { Checkbox, CheckboxGroup } from "../form/checkbox";
 import { VStack } from "../layout/stack";
+import { Tooltip } from "../tooltip";
+import { BodyLong, Heading } from "../typography";
 import Modal from "./Modal";
 
 const meta: Meta<typeof Modal> = {
@@ -24,6 +26,7 @@ export const WithUseRef: StoryFn = () => {
       <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
       <Modal
         open={ref.current ? undefined : true /* initially open */}
+        onClose={() => null}
         ref={ref}
         header={{
           label: "Optional label",
@@ -145,7 +148,7 @@ export const WithUseState: StoryFn = () => {
 WithUseState.storyName = "With useState";
 
 export const EmptyHeader: StoryFn = () => (
-  <Modal open>
+  <Modal open onClose={() => null} aria-label="Modal with empty header">
     <Modal.Header />
     <Modal.Body>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -160,21 +163,37 @@ export const EmptyHeader: StoryFn = () => (
 );
 
 export const Small: StoryFn = () => (
-  <Modal open width="small" header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    width="small"
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
 Small.storyName = "Size = Small";
 
 export const MediumWithPortal: StoryFn = () => (
-  <Modal open portal width="medium" header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    portal
+    width="medium"
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
 MediumWithPortal.storyName = "Size = Medium (with portal)";
 
 export const Large800: StoryFn = () => (
-  <Modal open width={800} header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    width={800}
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>Lorem ipsum dolor sit amet.</Modal.Body>
   </Modal>
 );
@@ -188,7 +207,9 @@ export const WithTooltip: StoryFn = () => {
       <Button onClick={() => ref.current?.showModal()}>Open Modal</Button>
       <Modal
         open={ref.current ? undefined : true /* initially open */}
+        onClose={() => null}
         ref={ref}
+        aria-label="Tooltip test"
       >
         <Modal.Body>
           <div style={{ marginBottom: "1rem" }}>
@@ -206,7 +227,12 @@ export const WithTooltip: StoryFn = () => {
 };
 
 export const WithSrOnlyElement: StoryFn = () => (
-  <Modal open width={300} header={{ heading: "Simple header" }}>
+  <Modal
+    open
+    onClose={() => null}
+    width={300}
+    header={{ heading: "Simple header" }}
+  >
     <Modal.Body>
       <VStack gap="16">
         <BodyLong>
@@ -255,6 +281,7 @@ export const ChromaticViewportTesting: StoryFn = () => (
     <style>{`#storybook-root { padding: 0 !important }`}</style>
     <Modal
       open
+      onClose={() => null}
       header={{ heading: "Chromatic Viewports Testing", label: "Test" }}
     >
       <Modal.Body>

package/src/modal/types.ts

@@ -1,5 +1,4 @@
-export interface ModalProps
-  extends React.DialogHTMLAttributes<HTMLDialogElement> {
+interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
    * Content for the header. Alteratively you can use <Modal.Header> instead for more control,
    * but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
@@ -39,7 +38,7 @@ export interface ModalProps
    * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
    * @returns Whether to close the modal
    */
-  onBeforeClose?: () => boolean | void;
+  onBeforeClose?: () => boolean;
   /**
    * *Sometimes** called when the user presses the Esc key.
    * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
@@ -66,9 +65,27 @@ export interface ModalProps
    */
   className?: string;
   /**
-   * Sets aria-labelledby on modal.
+   * ID of the element that labels the modal.
    * No need to set this manually if the `header` prop is used. A reference to `header.heading` will be created automatically.
    * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
    */
   "aria-labelledby"?: string;
+  /**
+   * String value that labels the modal.
+   * No need to set this if the `header` prop is used.
+   * @warning If not using `header`, you should set either `aria-labelledby` or `aria-label`.
+   */
+  "aria-label"?: string;
 }
+
+// Require onClose if you use open  &  Require either header, aria-labelledby or aria-label
+export type ModalProps = ModalPropsBase &
+  (
+    | { open?: never }
+    | { open: boolean | undefined; onClose: ModalPropsBase["onClose"] }
+  ) &
+  (
+    | { header: ModalPropsBase["header"] }
+    | { "aria-labelledby": string; "aria-label"?: never }
+    | { "aria-labelledby"?: never; "aria-label": string }
+  );

package/src/panel/Panel.tsx

@@ -2,6 +2,9 @@ import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
 
+/**
+ * @deprecated Use Box with padding and border instead
+ */
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Panel content
@@ -17,23 +20,13 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
 export type PanelType = OverridableComponent<PanelProps, HTMLElement>;
 
 /**
- * A component that displays a bordered panel with heading and body.
- *
- * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/panel)
- * @see 🏷️ {@link PanelProps}
- * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
- *
- * @example
- * ```jsx
- * <Panel border>
- *   <Heading spacing level="2" size="large">
- *     Søk om økonomisk sosialhjelp
- *   </Heading>
- *   <BodyLong>
- *     Du kan søke om det du trenger økonomisk støtte til.
- *   </BodyLong>
- * </Panel>
+ * @deprecated
+ * Use Box with padding and border instead
+ * ```
+ * <Box padding="4" borderRadius="small" />
+ * <Box padding="4" borderWidth="1" borderRadius="small" />
  * ```
+ * Component will be removed in a future major release
  */
 export const Panel: PanelType = forwardRef(
   (

package/src/popover/Popover.tsx

@@ -18,7 +18,7 @@ import React, {
   useRef,
 } from "react";
 import { DateContext } from "../date/context";
-import { ModalContext } from "../modal/ModalContext";
+import { useModalContext } from "../modal/Modal.context";
 import { useClientLayoutEffect, useEventListener } from "../util/hooks";
 import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
@@ -126,7 +126,7 @@ export const Popover = forwardRef<HTMLDivElement, PopoverProps>(
     ref,
   ) => {
     const arrowRef = useRef<HTMLDivElement | null>(null);
-    const isInModal = useContext(ModalContext) !== null;
+    const isInModal = useModalContext(false) !== undefined;
     const isInDatepicker = useContext(DateContext) !== null;
     const chosenStrategy = userStrategy ?? (isInModal ? "fixed" : "absolute");
     const chosenFlip = isInDatepicker ? false : _flip;

package/src/stepper/stepper.stories.tsx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
-import { BodyLong } from "..";
+import { BodyLong } from "../typography";
 import Stepper from "./Stepper";
 
 const meta: Meta<typeof Stepper> = {