@navikt/ds-react 7.33.5 → 7.34.0

package/src/alert/info-card/header/InfoCardHeader.tsx

@@ -0,0 +1,19 @@
+import { BaseAlert } from "../../base-alert";
+
+type InfoCardHeaderProps = BaseAlert.HeaderProps;
+
+/**
+ * @see 🏷️ {@link InfoCardHeaderProps}
+ * @example
+ * ```jsx
+ *  <InfoCard>
+ *    <InfoCard.Header icon={<InformationSquareIcon aria-hidden />}>
+ *      <InfoCard.Title>Info title</InfoCard.Title>
+ *    </InfoCard.Header>
+ *  </InfoCard>
+ * ```
+ */
+const InfoCardHeader = BaseAlert.Header;
+
+export { InfoCardHeader };
+export type { InfoCardHeaderProps };

package/src/alert/info-card/index.ts

@@ -0,0 +1,14 @@
+"use client";
+export {
+  InfoCard,
+  InfoCardHeader,
+  InfoCardTitle,
+  InfoCardContent,
+} from "./root/InfoCardRoot";
+
+export type {
+  InfoCardProps,
+  InfoCardHeaderProps,
+  InfoCardTitleProps,
+  InfoCardContentProps,
+} from "./root/InfoCardRoot";

package/src/alert/info-card/root/InfoCardRoot.tsx

@@ -0,0 +1,120 @@
+import React, { forwardRef } from "react";
+import { BaseAlert } from "../../base-alert";
+import {
+  InfoCardContent,
+  type InfoCardContentProps,
+} from "../content/InfoCardContent";
+import {
+  InfoCardHeader,
+  type InfoCardHeaderProps,
+} from "../header/InfoCardHeader";
+import { InfoCardTitle, type InfoCardTitleProps } from "../title/InfoCardTitle";
+
+type InfoCardProps = Omit<BaseAlert.RootProps, "type" | "global" | "status"> & {
+  /**
+   * Changes the HTML element used for the root element.
+   *
+   * **When using `section`, provide either `aria-label` or `aria-labelledby` for better accessibility.**
+   * `axe-core` might warn about unique landmarks if you have multiple InfoCards on page with the same label.
+   * In those cases consider updating to unique `aria-label` or `aria-labelledby` props.
+   * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
+   * @default "div"
+   */
+  as?: "div" | "section";
+};
+
+interface InfoCardComponent
+  extends React.ForwardRefExoticComponent<
+    InfoCardProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * @see 🏷️ {@link InfoCardHeaderProps}
+   * @example
+   * ```jsx
+   *  <InfoCard>
+   *    <InfoCard.Header icon={<InformationSquareIcon aria-hidden />}>
+   *      <InfoCard.Title>Info title</InfoCard.Title>
+   *    </InfoCard.Header>
+   *  </InfoCard>
+   * ```
+   */
+  Header: typeof InfoCardHeader;
+
+  /**
+   * Title component for InfoCard. Remember to use correct heading-level with the `as` prop.
+   * @see 🏷️ {@link InfoCardTitleProps}
+   * @example
+   * ```jsx
+   *  <InfoCard>
+   *    <InfoCard.Header>
+   *      <InfoCard.Title as="h2">Info title</InfoCard.Title>
+   *    </InfoCard.Header>
+   *  </InfoCard>
+   * ```
+   */
+  Title: typeof InfoCardTitle;
+
+  /**
+   * @see 🏷️ {@link InfoCardContentProps}
+   * @example
+   * ```jsx
+   *  <InfoCard>
+   *    <InfoCard.Header>
+   *      <InfoCard.Title>Info title</InfoCard.Title>
+   *    </InfoCard.Header>
+   *
+   *    <InfoCard.Content>Content</InfoCard.Content>
+   *  </InfoCard>
+   * ```
+   */
+  Content: typeof InfoCardContent;
+}
+
+/**
+ * A component for displaying informational content in a card format.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/infocard)
+ * @see 🏷️ {@link InfoCardProps}
+ * @example
+ * ```jsx
+ *  <InfoCard data-color="info">
+ *    <InfoCard.Header icon={<InformationSquareIcon aria-hidden />}>
+ *      <InfoCard.Title>Info title</InfoCard.Title>
+ *    </InfoCard.Header>
+ *    <InfoCard.Content>Content</InfoCard.Content>
+ *  </InfoCard>
+ * ```
+ */
+export const InfoCard = forwardRef<HTMLDivElement, InfoCardProps>(
+  (
+    {
+      "data-color": dataColor = "info",
+      as = "div",
+      ...restProps
+    }: InfoCardProps,
+    forwardedRef,
+  ) => {
+    return (
+      <BaseAlert.Root
+        ref={forwardedRef}
+        data-color={dataColor}
+        {...restProps}
+        type="moderate"
+        global={false}
+        as={as}
+      />
+    );
+  },
+) as InfoCardComponent;
+
+InfoCard.Header = InfoCardHeader;
+InfoCard.Title = InfoCardTitle;
+InfoCard.Content = InfoCardContent;
+
+export default InfoCard;
+export { InfoCardContent, InfoCardHeader, InfoCardTitle };
+export type {
+  InfoCardProps,
+  InfoCardHeaderProps,
+  InfoCardTitleProps,
+  InfoCardContentProps,
+};

package/src/alert/info-card/title/InfoCardTitle.tsx

@@ -0,0 +1,20 @@
+import { BaseAlert } from "../../base-alert";
+
+type InfoCardTitleProps = BaseAlert.TitleProps;
+
+/**
+ * Title component for InfoCard. Remember to use correct heading-level with the `as` prop.
+ * @see 🏷️ {@link InfoCardTitleProps}
+ * @example
+ * ```jsx
+ *  <InfoCard>
+ *    <InfoCard.Header>
+ *      <InfoCard.Title as="h2">Info title</InfoCard.Title>
+ *    </InfoCard.Header>
+ *  </InfoCard>
+ * ```
+ */
+const InfoCardTitle = BaseAlert.Title;
+
+export { InfoCardTitle };
+export type { InfoCardTitleProps };

package/src/alert/local-alert/close-button/LocalAlertCloseButton.tsx

@@ -0,0 +1,20 @@
+import { BaseAlert } from "../../base-alert";
+
+type LocalAlertCloseButtonProps = BaseAlert.CloseButtonProps;
+
+/**
+ * @see 🏷️ {@link LocalAlertCloseButtonProps}
+ * @example
+ * ```jsx
+ *  <LocalAlert>
+ *    <LocalAlert.Header>
+ *      <LocalAlert.Title>Info title</LocalAlert.Title>
+ *     <LocalAlert.CloseButton onClick={() => alert("Closed!")} />
+ *    </LocalAlert.Header>
+ *  </LocalAlert>
+ * ```
+ */
+const LocalAlertCloseButton = BaseAlert.CloseButton;
+
+export { LocalAlertCloseButton };
+export type { LocalAlertCloseButtonProps };

package/src/alert/local-alert/content/LocalAlertContent.tsx

@@ -0,0 +1,21 @@
+import { BaseAlert } from "../../base-alert";
+
+type LocalAlertContentProps = BaseAlert.ContentProps;
+
+/**
+ * @see 🏷️ {@link LocalAlertContentProps}
+ * @example
+ * ```jsx
+ *  <LocalAlert>
+ *    <LocalAlert.Header>
+ *      <LocalAlert.Title>Info title</LocalAlert.Title>
+ *    </LocalAlert.Header>
+ *
+ *    <LocalAlert.Content>Content</LocalAlert.Content>
+ *  </LocalAlert>
+ * ```
+ */
+const LocalAlertContent = BaseAlert.Content;
+
+export { LocalAlertContent };
+export type { LocalAlertContentProps };

package/src/alert/local-alert/header/LocalAlertHeader.tsx

@@ -0,0 +1,24 @@
+import React, { forwardRef } from "react";
+import { BaseAlert } from "../../base-alert";
+
+type LocalAlertHeaderProps = Omit<BaseAlert.HeaderProps, "icon">;
+
+/**
+ * @see 🏷️ {@link LocalAlertHeaderProps}
+ * @example
+ * ```jsx
+ *  <LocalAlert>
+ *    <LocalAlert.Header>
+ *      <LocalAlert.Title>Info title</LocalAlert.Title>
+ *    </LocalAlert.Header>
+ *  </LocalAlert>
+ * ```
+ */
+const LocalAlertHeader = forwardRef<HTMLDivElement, LocalAlertHeaderProps>(
+  (props, forwardedRef) => {
+    return <BaseAlert.Header ref={forwardedRef} {...props} />;
+  },
+);
+
+export { LocalAlertHeader };
+export type { LocalAlertHeaderProps };

package/src/alert/local-alert/index.ts

@@ -0,0 +1,16 @@
+"use client";
+export {
+  LocalAlert,
+  LocalAlertHeader,
+  LocalAlertTitle,
+  LocalAlertContent,
+  LocalAlertCloseButton,
+} from "./root/LocalAlertRoot";
+
+export type {
+  LocalAlertProps,
+  LocalAlertHeaderProps,
+  LocalAlertTitleProps,
+  LocalAlertContentProps,
+  LocalAlertCloseButtonProps,
+} from "./root/LocalAlertRoot";

package/src/alert/local-alert/root/LocalAlertRoot.tsx

@@ -0,0 +1,133 @@
+import React, { forwardRef } from "react";
+import { BaseAlert } from "../../base-alert";
+import {
+  LocalAlertCloseButton,
+  type LocalAlertCloseButtonProps,
+} from "../close-button/LocalAlertCloseButton";
+import {
+  LocalAlertContent,
+  type LocalAlertContentProps,
+} from "../content/LocalAlertContent";
+import {
+  LocalAlertHeader,
+  type LocalAlertHeaderProps,
+} from "../header/LocalAlertHeader";
+import {
+  LocalAlertTitle,
+  type LocalAlertTitleProps,
+} from "../title/LocalAlertTitle";
+
+interface LocalAlertProps
+  extends Omit<BaseAlert.RootProps, "type" | "global" | "data-color"> {
+  status: Exclude<BaseAlert.RootProps["status"], undefined>;
+}
+
+interface LocalAlertComponent
+  extends React.ForwardRefExoticComponent<
+    LocalAlertProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * @see 🏷️ {@link LocalAlertHeaderProps}
+   * @example
+   * ```jsx
+   *  <LocalAlert>
+   *    <LocalAlert.Header>
+   *      <LocalAlert.Title>Info title</LocalAlert.Title>
+   *    </LocalAlert.Header>
+   *  </LocalAlert>
+   * ```
+   */
+  Header: typeof LocalAlertHeader;
+
+  /**
+   * Title component for LocalAlert. Remember to use correct heading-level with the `as` prop.
+   * @see 🏷️ {@link LocalAlertTitleProps}
+   * @example
+   * ```jsx
+   *  <LocalAlert>
+   *    <LocalAlert.Header>
+   *      <LocalAlert.Title as="h2">Info title</LocalAlert.Title>
+   *    </LocalAlert.Header>
+   *  </LocalAlert>
+   * ```
+   */
+  Title: typeof LocalAlertTitle;
+
+  /**
+   * @see 🏷️ {@link LocalAlertContentProps}
+   * @example
+   * ```jsx
+   *  <LocalAlert>
+   *    <LocalAlert.Header>
+   *      <LocalAlert.Title>Info title</LocalAlert.Title>
+   *    </LocalAlert.Header>
+   *
+   *    <LocalAlert.Content>Content</LocalAlert.Content>
+   *  </LocalAlert>
+   * ```
+   */
+  Content: typeof LocalAlertContent;
+
+  /**
+   * @see 🏷️ {@link LocalAlertCloseProps}
+   * @example
+   * ```jsx
+   *  <LocalAlert>
+   *    <LocalAlert.Header>
+   *      <LocalAlert.Title>Info title</LocalAlert.Title>
+   *     <LocalAlert.CloseButton onClick={() => alert("Closed!")} />
+   *    </LocalAlert.Header>
+   *  </LocalAlert>
+   * ```
+   */
+  CloseButton: typeof LocalAlertCloseButton;
+}
+
+/**
+ * A component for displaying important messages about a certain part of the page.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/localalert)
+ * @see 🏷️ {@link LocalAlertProps}
+ * @example
+ * ```jsx
+ *  <LocalAlert status="error">
+ *    <LocalAlert.Header>
+ *      <LocalAlert.Title>Alert title</LocalAlert.Title>
+ *    </LocalAlert.Header>
+ *    <LocalAlert.Content>Content</LocalAlert.Content>
+ *  </LocalAlert>
+ * ```
+ */
+export const LocalAlert = forwardRef<HTMLDivElement, LocalAlertProps>(
+  ({ status, ...restProps }: LocalAlertProps, forwardedRef) => {
+    return (
+      <BaseAlert.Root
+        ref={forwardedRef}
+        role="alert"
+        {...restProps}
+        type="strong"
+        global={false}
+        status={status}
+      />
+    );
+  },
+) as LocalAlertComponent;
+
+LocalAlert.Header = LocalAlertHeader;
+LocalAlert.Title = LocalAlertTitle;
+LocalAlert.Content = LocalAlertContent;
+LocalAlert.CloseButton = LocalAlertCloseButton;
+
+export default LocalAlert;
+export {
+  LocalAlertContent,
+  LocalAlertHeader,
+  LocalAlertTitle,
+  LocalAlertCloseButton,
+};
+export type {
+  LocalAlertProps,
+  LocalAlertContentProps,
+  LocalAlertHeaderProps,
+  LocalAlertTitleProps,
+  LocalAlertCloseButtonProps,
+};

package/src/alert/local-alert/title/LocalAlertTitle.tsx

@@ -0,0 +1,20 @@
+import { BaseAlert } from "../../base-alert";
+
+type LocalAlertTitleProps = BaseAlert.TitleProps;
+
+/**
+ * Title component for LocalAlert. Remember to use correct heading-level with the `as` prop.
+ * @see 🏷️ {@link LocalAlertTitleProps}
+ * @example
+ * ```jsx
+ *  <LocalAlert>
+ *    <LocalAlert.Header>
+ *      <LocalAlert.Title as="h2">Info title</LocalAlert.Title>
+ *    </LocalAlert.Header>
+ *  </LocalAlert>
+ * ```
+ */
+const LocalAlertTitle = BaseAlert.Title;
+
+export { LocalAlertTitle };
+export type { LocalAlertTitleProps };

package/src/index.ts

@@ -163,6 +163,30 @@ export {
   type LinkCardIconProps,
   type LinkCardImageProps,
 } from "./link-card";
+export { InlineMessage, type InlineMessageProps } from "./inline-message";
+export {
+  GlobalAlert,
+  type GlobalAlertProps,
+  type GlobalAlertHeaderProps,
+  type GlobalAlertTitleProps,
+  type GlobalAlertContentProps,
+  type GlobalAlertCloseButtonProps,
+} from "./alert/global-alert";
+export {
+  InfoCard,
+  type InfoCardProps,
+  type InfoCardHeaderProps,
+  type InfoCardTitleProps,
+  type InfoCardContentProps,
+} from "./alert/info-card";
+export {
+  LocalAlert,
+  type LocalAlertProps,
+  type LocalAlertHeaderProps,
+  type LocalAlertTitleProps,
+  type LocalAlertContentProps,
+  type LocalAlertCloseButtonProps,
+} from "./alert/local-alert";
 
 /**
  * Theming

package/src/inline-message/icon/InlineMessageIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import {
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  InformationSquareFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
+import { useRenameCSS } from "../../theme/Theme";
+
+const STATUS_ICONS = {
+  info: InformationSquareFillIcon,
+  success: CheckmarkCircleFillIcon,
+  warning: ExclamationmarkTriangleFillIcon,
+  error: XMarkOctagonFillIcon,
+} as const;
+
+function InlineMessageIcon({
+  status,
+}: {
+  status: "info" | "success" | "warning" | "error";
+}) {
+  const { cn } = useRenameCSS();
+
+  if (!(status in STATUS_ICONS)) {
+    return null;
+  }
+
+  const Icon = STATUS_ICONS[status];
+
+  return <Icon className={cn("navds-inline-message__icon")} aria-hidden />;
+}
+
+export { InlineMessageIcon };

package/src/inline-message/index.ts

@@ -0,0 +1,3 @@
+"use client";
+export { InlineMessage } from "./root/InlineMessage";
+export type { InlineMessageProps } from "./root/InlineMessage";

package/src/inline-message/root/InlineMessage.tsx

@@ -0,0 +1,92 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import { BodyShort } from "../../typography";
+import { type OverridableComponent, useId } from "../../util";
+import { useI18n } from "../../util/i18n/i18n.hooks";
+import { InlineMessageIcon } from "../icon/InlineMessageIcon";
+
+interface InlineMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * InlineMessage status.
+   */
+  status: "info" | "success" | "warning" | "error";
+  /**
+   * InlineMessage size.
+   * @default "medium"
+   */
+  size?: "medium" | "small";
+}
+
+/**
+ * InlineMessage is used to highlight short messages next to other content.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/inline-message)
+ * @see 🏷️ {@link InlineMessageProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ * @example
+ * ```jsx
+ *  <InlineMessage status="error">
+ *    Inline Errormessage
+ *  </InlineMessage>
+ * ```
+ *
+ * @example
+ * As a link
+ * ```jsx
+ *  <InlineMessage status="error" as={Link} href="#">
+ *    Inline Errormessage
+ *  </InlineMessage>
+ * ```
+ */
+export const InlineMessage: OverridableComponent<
+  InlineMessageProps,
+  HTMLDivElement
+> = forwardRef(
+  (
+    {
+      as: Component = "div",
+      children,
+      className,
+      status,
+      size = "medium",
+      ...restProps
+    }: InlineMessageProps & { as?: React.ElementType },
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const themeContext = useThemeInternal(false);
+
+    const translate = useI18n("global");
+    const statusId = useId();
+    const contentId = useId();
+
+    return (
+      <BodyShort
+        ref={forwardedRef}
+        className={cn("navds-inline-message", className)}
+        data-color={status === "error" ? "danger" : status}
+        {...restProps}
+        size={size}
+        as={Component}
+        data-size={size}
+      >
+        <InlineMessageIcon status={status} />
+        {status && (
+          <BodyShort id={statusId} aria-hidden visuallyHidden>
+            {`${translate(status)}: `}
+          </BodyShort>
+        )}
+        <span
+          data-color={themeContext?.color}
+          id={contentId}
+          aria-labelledby={cl(statusId, contentId)}
+        >
+          {children}
+        </span>
+      </BodyShort>
+    );
+  },
+);
+
+export default InlineMessage;
+export type { InlineMessageProps };

package/src/timeline/period/ClickablePeriod.tsx

@@ -1,7 +1,6 @@
 import {
   FloatingFocusManager,
   autoUpdate,
-  arrow as flArrow,
   flip,
   offset,
   safePolygon,
@@ -12,8 +11,8 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import React, { useRef, useState } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import React, { useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { usePeriodContext } from "../hooks/usePeriodContext";
@@ -57,28 +56,18 @@ const ClickablePeriod = React.memo(
     const { index } = useRowContext();
     const { firstFocus } = usePeriodContext();
     const { initiate, addFocusable } = useTimelineContext();
-    const arrowRef = useRef<HTMLDivElement | null>(null);
-    const translate = useI18n("Timeline");
 
-    const themeContext = useThemeInternal(false);
-    const showArrow = !themeContext?.isDarkside;
+    const translate = useI18n("Timeline");
 
-    const {
-      context,
-      placement,
-      middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },
-      refs,
-      floatingStyles,
-    } = useFloating({
+    const { context, placement, refs, floatingStyles } = useFloating({
       placement: restProps?.placement ?? "top",
       open,
       onOpenChange: (_open) => setOpen(_open),
       whileElementsMounted: autoUpdate,
       middleware: [
-        offset(showArrow ? 16 : 8),
+        offset(8),
         shift(),
         flip({ padding: 5, fallbackPlacements: ["bottom", "top"] }),
-        flArrow({ element: arrowRef, padding: 5 }),
       ],
     });
 
@@ -99,13 +88,6 @@ const ClickablePeriod = React.memo(
 
     const mergedRef = useMergeRefs(refs.setReference, periodRef);
 
-    const staticSide = {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right",
-    }[placement.split("-")[0]];
-
     const label = ariaLabel(start, end, status, statusLabel, translate);
 
     return (
@@ -175,17 +157,6 @@ const ClickablePeriod = React.memo(
               style={floatingStyles}
             >
               {children}
-              {showArrow && (
-                <div
-                  ref={arrowRef}
-                  style={{
-                    ...(arrowX != null ? { left: arrowX } : {}),
-                    ...(arrowY != null ? { top: arrowY } : {}),
-                    ...(staticSide ? { [staticSide]: "-0.5rem" } : {}),
-                  }}
-                  className={cn("navds-timeline__popover-arrow")}
-                />
-              )}
             </div>
           </FloatingFocusManager>
         )}