@navikt/ds-react 6.1.0 → 6.2.0

package/src/layout/box/Box.tsx

@@ -13,11 +13,11 @@ import {
 } from "../utilities/types";
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Background color. Accepts a color token. */
+  /** CSS `background-color` property. Accepts a color token. */
   background?: BackgroundToken;
-  /** Border color. Accepts a color token. */
+  /** CSS `border-color` property. Accepts a color token. */
   borderColor?: BorderColorToken;
-  /** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
+  /** CSS `border-radius` property. Accepts a radius token, or an object of radius tokens for different breakpoints.
    * @example
    * borderRadius='full'
    * borderRadius='0 full large small'
@@ -25,13 +25,13 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
   /**
-   * Border-width. If this is not set there will be no border.
+   * CSS `border-width` property. If this is not set there will be no border.
    * @example
    * borderWidth='2'
    * borderWidth='1 2 3 4'
    */
   borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-  /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /** Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
    * @example
    * padding='4'
    * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}

package/src/layout/grid/HGrid.tsx

@@ -6,13 +6,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * Number of columns to display. Can be a number, a string with a unit, or tokens for specific breakpoints.
    * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
    * @example
    * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-   * @example
    * columns={3}
-   * @example
    * columns="repeat(3, minmax(0, 1fr))"
    */
   columns?: ResponsiveProp<number | string>;

package/src/layout/page/Page.tsx

@@ -12,7 +12,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
   as?: "div" | "body";
   /**
    * Background color. Accepts a color token.
-   * @default bg-default
+   * @default "bg-default"
    */
   background?: keyof typeof bgColors.a | "surface-subtle";
   /**
@@ -25,7 +25,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
   footerPosition?: "belowFold";
   /**
    * Adds a standardised padding of 4rem between content and footer
-   * @default block-end
+   * @default "end"
    */
   contentBlockPadding?: "end" | "none";
 }

package/src/layout/responsive/Responsive.tsx

@@ -6,13 +6,11 @@ import { BreakpointsAlias } from "../utilities/types";
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * @example
-   * above='md'
+   * Will show/hide element above breakpoint (inclusive)
    */
   above?: Exclude<BreakpointsAlias, "xs">;
   /**
-   * @example
-   * below='md'
+   * Will show/hide element below breakpoint (inclusive)
    */
   below?: Exclude<BreakpointsAlias, "xs">;
   /**

package/src/layout/stack/Stack.tsx

@@ -7,7 +7,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * Justify-content
+   * CSS `justify-content` property.
+   *
+   * @example
+   * justify='center'
+   * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
    */
   justify?: ResponsiveProp<
     | "start"
@@ -18,22 +22,32 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
     | "space-evenly"
   >;
   /**
-   * Align-items
+   * CSS `align-items` property.
+   *
+   * @example
+   * align='center'
+   * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
    */
   align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
   /**
-   * flex-wrap
+   * Sets the CSS `flex-wrap` property.
    */
   wrap?: boolean;
   /**
+   * CSS `gap` property.
+   *
    * @example
    * gap='4'
    * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
    */
   gap?: ResponsiveProp<SpacingScale>;
   /**
-   * flex-direction
+   * CSS `flex-direction` property.
    * @default "row"
+   *
+   * @example
+   * direction='row'
+   * direction={{xs: 'row', sm: 'column'}}
    */
   direction?: ResponsiveProp<"row" | "column">;
 }

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

@@ -1,15 +1,22 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import { PlusCircleFillIcon } from "@navikt/aksel-icons";
 import { Alert } from "../../alert";
 import { ConfirmationPanel } from "../../form/confirmation-panel";
+import { Box } from "../../layout/box";
+import { VStack } from "../../layout/stack";
 import { BodyLong } from "../../typography";
 import Link from "../Link";
 import { RandomIcon } from "./RandomIcon";
 
-export default {
+const meta: Meta<typeof Link> = {
   title: "ds-react/Link",
   component: Link,
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
+export default meta;
 
 const LinkWrapper = ({
   children = "Ex aliqua incididunt",
@@ -27,53 +34,38 @@ const LinkWrapper = ({
       variant={variant as "action" | "neutral" | "subtle"}
       inlineText={inlineText}
     >
-      {iconLeft && (
-        <>
-          <RandomIcon />{" "}
-        </>
-      )}
+      {iconLeft && <RandomIcon />}
       {children}
-      {iconRight && (
-        <>
-          {" "}
-          <RandomIcon />
-        </>
-      )}
+      {iconRight && <RandomIcon />}
     </Link>{" "}
   </>
 );
 
 export const Default = {
-  render: ({ icon, inline }) => {
+  render: ({ icon, inline, underline }) => {
     const LinkD = () => (
-      <>
-        {" "}
-        <Link href="#" underline={!inline} inlineText={inline}>
-          {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
-          {icon && <PlusCircleFillIcon />}
-        </Link>{" "}
-      </>
+      <Link href="#" underline={underline} inlineText={inline}>
+        {icon && <PlusCircleFillIcon />}Ex aliqua incididunt
+        {icon && <PlusCircleFillIcon />}
+      </Link>
     );
 
     if (inline) {
       return (
-        <div
-          className="colgap"
-          style={{
-            width: "800px",
-            border: "1px solid black",
-            borderRadius: "8px",
-          }}
+        <Box
+          borderWidth="1"
+          borderRadius="large"
+          padding="4"
+          style={{ maxWidth: "800px" }}
         >
           <BodyLong>
-            Incididunt laborum nisi nisi Lorem
-            <LinkD />
-            in. Laborum aute fugiat officia adipisicing non veniam dolor nulla
-            non ex consectetur fugiat eiusmod aute. Culpa sit aute est duis
-            minim in in voluptate velit fugiat. Laboris est id deserunt ut ea
-            Lorem eu. Esse elit laboris aute commodo sint laborum fugiat aliqua.
+            Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
+            officia adipisicing non veniam dolor nulla non ex consectetur fugiat
+            eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
+            fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris
+            aute commodo sint laborum fugiat aliqua.
           </BodyLong>
-        </div>
+        </Box>
       );
     }
     return <LinkD />;
@@ -82,22 +74,21 @@ export const Default = {
   args: {
     icon: false,
     inline: false,
+    underline: true,
   },
 };
 
 export const InlineInsideBodyLong = {
   render: ({ iconLeft, iconRight }) => {
     return (
-      <div
-        className="colgap"
-        style={{
-          width: "800px",
-          border: "1px solid black",
-          borderRadius: "8px",
-        }}
+      <Box
+        borderWidth="1"
+        borderRadius="large"
+        padding="4"
+        style={{ width: "800px" }}
       >
         <style>{`.storybook-custom-spacing { white-space: pre;}`}</style>
-        <BodyLong>
+        <BodyLong spacing>
           <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
           Eiusmod aute.
           <LinkWrapper underline iconLeft={iconLeft} iconRight={iconRight} />
@@ -119,7 +110,7 @@ export const InlineInsideBodyLong = {
           </LinkWrapper>
           {"     "}spacing.
         </BodyLong>
-      </div>
+      </Box>
     );
   },
   args: {
@@ -128,86 +119,186 @@ export const InlineInsideBodyLong = {
   },
 };
 
-const DemoLink = () => (
+export const Varianter = {
+  render: ({ iconLeft, iconRight }) => {
+    return (
+      <VStack gap="3">
+        {["action", "neutral", "subtle"].map((variant) => (
+          <div key={variant}>
+            <LinkWrapper
+              iconLeft={iconLeft}
+              iconRight={iconRight}
+              variant={variant}
+            />
+          </div>
+        ))}
+      </VStack>
+    );
+  },
+  args: {
+    iconLeft: false,
+    iconRight: false,
+  },
+};
+
+const LinkWithIcon = () => (
   <Link href="#">
-    <PlusCircleFillIcon aria-hidden /> Ex aliqua incididunt{" "}
+    <PlusCircleFillIcon aria-hidden />
+    Ex aliqua incididunt
     <PlusCircleFillIcon aria-hidden />
   </Link>
 );
 
-export const Icon = () => <DemoLink />;
+export const Icon = () => <LinkWithIcon />;
+
+const Variants = () => (
+  <VStack gap="3">
+    {["action", "neutral", "subtle"].map((variant) => (
+      <div key={variant}>
+        <LinkWrapper variant={variant} />
+      </div>
+    ))}
+  </VStack>
+);
 
-export const InAlert = () => {
-  return (
+export const Chromatic = () => (
+  <>
+    <h2>Default</h2>
+    <Link href="#">Ex aliqua incididunt</Link>
+
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>Inline</h2>
+    <BodyLong style={{ width: 500 }}>
+      Culpa sit aute est duis minim in in voluptate{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
+        <PlusCircleFillIcon aria-hidden />
+      </Link>{" "}
+      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
+      nisi nisi{" "}
+      <Link href="#" inlineText>
+        dette er en veldig lang lenke som brekker over flere linjer
+      </Link>{" "}
+      Lorem officia adipisicing non veniam occaecat commodo id ad aliquip.
+    </BodyLong>
+
+    <h2>In Alert</h2>
     <div className="colgap">
       <Alert variant="info">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
       <Alert variant="success">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
       <Alert variant="warning">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
       <Alert variant="error">
-        <DemoLink />
+        <LinkWithIcon />
       </Alert>
     </div>
-  );
-};
 
-export const InConfirmationPanel = () => {
-  return (
+    <h2>In ConfirmationPanel</h2>
     <div className="colgap">
       <ConfirmationPanel label="demo">
-        <DemoLink />
+        <LinkWithIcon />
       </ConfirmationPanel>
       <ConfirmationPanel checked label="demo">
-        <DemoLink />
+        <LinkWithIcon />
       </ConfirmationPanel>
       <ConfirmationPanel error="demo" label="demo">
-        <DemoLink />
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+Chromatic.parameters = { chromatic: { disable: false } };
+
+export const ChromaticHover = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
       </ConfirmationPanel>
     </div>
-  );
+  </>
+);
+ChromaticHover.parameters = {
+  chromatic: { disable: false },
+  pseudo: { hover: true },
 };
 
-export const Variants = {
-  render: ({ iconLeft, iconRight }) => {
-    return (
-      <div className="colgap">
-        {["action", "neutral", "subtle"].map((variant) => (
-          <>
-            <div>
-              <LinkWrapper
-                iconLeft={iconLeft}
-                iconRight={iconRight}
-                variant={variant}
-              />
-            </div>
-          </>
-        ))}
-      </div>
-    );
-  },
-  args: {
-    iconLeft: false,
-    iconRight: false,
-  },
+export const ChromaticFocusVisible = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticFocusVisible.parameters = {
+  chromatic: { disable: false },
+  pseudo: { focusVisible: true },
 };
 
-export const InlineLink = {
-  render: () => (
-    <BodyLong>
-      Officia incididunt Culpa sit aute est duis minim in in voluptate velit
-      Incididunt laborum nisi nisi Lorem officia adipisicing non veniam{" "}
-      <Link href="#" inlineText={true}>
-        lenke til ny side
-        <PlusCircleFillIcon aria-hidden />
-      </Link>{" "}
-      Culpa sit aute est duis minim in in voluptate velit Incididunt laborum
-      nisi nisi Lorem officia adipisicing non veniam occaecat commodo id ad
-      aliquip.
-    </BodyLong>
-  ),
+export const ChromaticActive = () => (
+  <>
+    <h2>With icon</h2>
+    <LinkWithIcon />
+
+    <h2>Variants (no underline)</h2>
+    <Variants />
+
+    <h2>In Alert</h2>
+    <div className="colgap">
+      <Alert variant="info">
+        <LinkWithIcon />
+      </Alert>
+    </div>
+
+    <h2>In ConfirmationPanel</h2>
+    <div className="colgap">
+      <ConfirmationPanel checked label="demo">
+        <LinkWithIcon />
+      </ConfirmationPanel>
+    </div>
+  </>
+);
+ChromaticActive.parameters = {
+  chromatic: { disable: false },
+  pseudo: { active: true },
 };

package/src/list/types.ts

@@ -20,7 +20,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
   /**
    * Changes padding, height and font-size
-   * @default medium
+   * @default "medium"
    */
   size?: "medium" | "small";
 }

package/src/loader/Loader.tsx

@@ -35,6 +35,7 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**
    * Allows getting a ref to the component instance.
    * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
+   *
    * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    */
   ref?: React.Ref<SVGSVGElement>;

package/src/modal/Modal.tsx

@@ -12,7 +12,12 @@ import { ModalContextProvider, useModalContext } from "./Modal.context";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
 import ModalHeader from "./ModalHeader";
-import { getCloseHandler, useBodyScrollLock } from "./ModalUtils";
+import {
+  MouseCoordinates,
+  coordsAreInside,
+  getCloseHandler,
+  useBodyScrollLock,
+} from "./ModalUtils";
 import dialogPolyfill, { needPolyfill } from "./dialog-polyfill";
 import { ModalProps } from "./types";
 
@@ -86,6 +91,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       "aria-labelledby": ariaLabelledby,
       style,
       onClick,
+      onMouseDown,
       ...rest
     }: ModalProps,
     ref,
@@ -146,22 +152,46 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
       ...(!isWidthPreset ? { width } : {}),
     };
 
+    const mouseClickStart = useRef<MouseCoordinates>({
+      clientX: 0,
+      clientY: 0,
+    });
+    const handleModalMouseDown: React.MouseEventHandler<HTMLDialogElement> = (
+      event,
+    ) => {
+      mouseClickStart.current = event;
+    };
+
+    const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
+
     /**
-     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
+     * `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
      */
-    const handleModalClick = (event: React.MouseEvent<HTMLDialogElement>) => {
+    const handleModalClick = (
+      endEvent: React.MouseEvent<HTMLDialogElement>,
+    ) => {
+      if (endEvent.target !== modalRef.current) {
+        return;
+      }
+
+      const modalRect = modalRef.current.getBoundingClientRect();
+
       if (
-        closeOnBackdropClick &&
-        !needPolyfill &&
-        event.target === modalRef.current &&
-        (!onBeforeClose || onBeforeClose() !== false)
+        coordsAreInside(mouseClickStart.current, modalRect) ||
+        coordsAreInside(endEvent, modalRect)
       ) {
-        modalRef.current.close();
+        return;
+      }
+
+      if (onBeforeClose !== undefined && onBeforeClose() === false) {
+        return;
       }
+
+      modalRef.current.close();
     };
 
     /**
-     * @note onCancel fires when you press `Esc`
+     * onCancel fires when you press `Esc`
      */
     const handleModalCancel = (
       event: React.SyntheticEvent<HTMLDialogElement, Event>,
@@ -182,7 +212,16 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
         className={mergedClassName}
         style={mergedStyle}
         onCancel={composeEventHandlers(onCancel, handleModalCancel)}
-        onClick={composeEventHandlers(onClick, handleModalClick)}
+        onClick={
+          shouldHandleModalClick
+            ? composeEventHandlers(onClick, handleModalClick)
+            : onClick
+        }
+        onMouseDown={
+          shouldHandleModalClick
+            ? composeEventHandlers(onMouseDown, handleModalMouseDown)
+            : onMouseDown
+        }
         aria-labelledby={mergedAriaLabelledBy}
       >
         <ModalContextProvider

package/src/modal/ModalHeader.tsx

@@ -26,7 +26,7 @@ const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
             size="small"
             variant="tertiary-neutral"
             onClick={context.closeHandler}
-            icon={<XMarkIcon title="Lukk modalvindu" />}
+            icon={<XMarkIcon title="Lukk" />}
           />
         )}
         {children}

package/src/modal/ModalUtils.ts

@@ -1,6 +1,20 @@
 import React from "react";
 import type { ModalProps } from "./types";
 
+export interface MouseCoordinates {
+  clientX: number;
+  clientY: number;
+}
+
+export const coordsAreInside = (
+  { clientX, clientY }: MouseCoordinates,
+  { left, top, right, bottom }: DOMRect,
+) => {
+  if (clientX < left || clientY < top) return false;
+  if (clientX > right || clientY > bottom) return false;
+  return true;
+};
+
 export function getCloseHandler(
   modalRef: React.RefObject<HTMLDialogElement>,
   header: ModalProps["header"],