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

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,6 +66,10 @@ export interface SearchProps
    * Exposes the HTML size attribute
    */
   htmlSize?: number | string;
+  /*
+   * Exposes role attribute
+   */
+  role?: string;
 }
 
 interface SearchComponent
@@ -114,6 +118,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
       onChange,
       onSearchClick,
       htmlSize,
+      role,
       ...rest
     } = props;
 
@@ -205,7 +210,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
               value={value ?? internalValue}
               onChange={(e) => handleChange(e.target.value)}
               type="search"
-              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

@@ -1,6 +1,8 @@
 import { Meta, StoryFn, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 import React, { useState } from "react";
 import { Button } from "../../button";
+import { Modal } from "../../modal";
 import { Textarea } from "../index";
 
 const meta: Meta<typeof Textarea> = {
@@ -124,6 +126,24 @@ export const Resize: StoryFn = () => {
   return <Textarea resize label="Ipsum enim quis culpa" />;
 };
 
+export const OnChange: StoryFn = () => {
+  return (
+    <Textarea
+      label="Ipsum enim quis culpa"
+      onChange={console.log}
+      maxLength={50}
+    />
+  );
+};
+OnChange.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const input = canvas.getByLabelText("Ipsum enim quis culpa");
+  userEvent.click(input);
+  await userEvent.type(input, "Aute fugiat ut culpa");
+  const text = canvas.getByText("30 tegn igjen");
+  expect(text).toBeVisible();
+};
+
 export const Controlled: StoryFn = () => {
   const [value, setValue] = useState("");
   return (
@@ -186,3 +206,20 @@ AutoScrollbar.argTypes = {
   maxRows: { type: "number" },
   minRows: { type: "number" },
 };
+
+export const ModalStrictMode: StoryFn<typeof Textarea> = () => {
+  // Story added after fixing an issue where TextareaAutoSize would reach max re-renders
+  // and set the height to 2px when used in StrictMode in a Modal that is initially open.
+  return (
+    <React.StrictMode>
+      <Modal open onClose={() => null} aria-label="Modal med textarea">
+        <Modal.Body>
+          <Textarea label="Har du noen tilbakemeldinger?" />
+        </Modal.Body>
+      </Modal>
+    </React.StrictMode>
+  );
+};
+ModalStrictMode.parameters = {
+  chromatic: { disable: true }, // Not reproducable in Chromatic
+};

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";
@@ -8,8 +9,8 @@ export * from "./date";
 export * from "./dropdown";
 export * from "./expansion-card";
 export * from "./form";
-export * from "./grid";
 export * from "./guide-panel";
+export * from "./overlays";
 export * from "./help-text";
 export * from "./internal-header";
 export * from "./link";
@@ -36,6 +37,5 @@ export * from "./layout/bleed";
 export * from "./layout/box";
 export * from "./layout/stack";
 export * from "./layout/grid";
-export * from "./layout/content-container";
 export * from "./layout/responsive";
 export * from "./layout/page";

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 {
@@ -272,6 +273,19 @@ export const Full = {
             </Bleed>
           </Box>
         </Box>
+        <Box
+          className="maxWidth"
+          background="surface-alt-1-subtle"
+          padding="10"
+        >
+          <Box background="surface-alt-2-subtle" padding="10">
+            <Bleed marginInline="full" reflectivePadding asChild>
+              <Box background="surface-success-subtle">
+                <BodyLong>full + reflectivePadding</BodyLong>
+              </Box>
+            </Bleed>
+          </Box>
+        </Box>
       </VStack>
     </>
   ),

package/src/layout/bleed/Bleed.tsx

@@ -13,7 +13,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginInline='4'
    * marginInline='4 5'
-   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6'}}
+   * marginInline={{xs: '0 32', sm: '3', md: '4 5', lg: '5', xl: '6', "2xl": '12'}}
    */
   marginInline?: ResponsiveProp<
     BleedSpacingInline | `${BleedSpacingInline} ${BleedSpacingInline}`
@@ -23,7 +23,7 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
    * @example
    * marginBlock='4'
    * marginBlock='4 5'
-   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
+   * marginBlock={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6', "2xl": '12'}}
    */
   marginBlock?: ResponsiveProp<
     BleedSpacingBlock | `${BleedSpacingBlock} ${BleedSpacingBlock}`

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";
 
@@ -196,7 +197,7 @@ export const PaddingBreakpoints = {
   render: () => (
     <div>
       <Box
-        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6" }}
+        padding={{ xs: "2", sm: "3", md: "4", lg: "5", xl: "6", "2xl": "8" }}
         background="surface-neutral"
       >
         <Box background="surface-alt-3-subtle">

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";
@@ -13,6 +16,7 @@ const meta = {
   title: "kitchen sink/navno-sidemal",
   parameters: {
     layout: "fullscreen",
+    chromatic: { disableSnapshot: true },
   },
 } satisfies Meta;
 

package/src/layout/utilities/css.ts

@@ -44,6 +44,9 @@ const translateTokenStringToCSS = (
       if (componentProp === "margin-inline" && x === "full") {
         const width = 100 / arr.length;
         return `calc((100vw - ${width}%)/-2)`;
+      } else if (componentProp === "padding-inline" && x === "full") {
+        const width = 100 / arr.length;
+        return `calc((100vw - ${width}%)/2)`;
       }
 
       let output = `var(--a-${tokenSubgroup}-${x})`;

package/src/layout/utilities/types.ts

@@ -14,7 +14,7 @@ export type BorderRadiiToken =
   | "0";
 export type ShadowToken = keyof typeof shadows.a.shadow;
 
-export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl";
+export type BreakpointsAlias = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 
 export type SpacingScale = keyof (typeof Spacing)["a"]["spacing"];
 

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/overlays/index.ts

@@ -0,0 +1,2 @@
+export { Portal } from "./portal/Portal";
+export type { PortalProps } from "./portal/Portal";