@navikt/ds-react 7.33.5 → 7.34.0

package/src/alert/base-alert/close-button/BaseAlertCloseButton.tsx

@@ -0,0 +1,44 @@
+import React, { forwardRef } from "react";
+import { XMarkIcon } from "@navikt/aksel-icons";
+import { Button } from "../../../button";
+import { useRenameCSS } from "../../../theme/Theme";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
+
+type BaseAlertCloseButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+/**
+ * @see 🏷️ {@link BaseAlertCloseButtonProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header>
+ *      <BaseAlert.Title>Info title</BaseAlert.Title>
+ *      <BaseAlert.CloseButton onClick={...} />
+ *    </BaseAlert.Header>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertCloseButton = forwardRef<
+  HTMLButtonElement,
+  BaseAlertCloseButtonProps
+>(({ className, ...restProps }: BaseAlertCloseButtonProps, forwardedRef) => {
+  const { cn } = useRenameCSS();
+  const translate = useI18n("global");
+
+  return (
+    <Button
+      ref={forwardedRef}
+      type="button"
+      {...restProps}
+      data-color="neutral"
+      variant="tertiary-neutral"
+      className={cn(className, "navds-base-alert__close-button")}
+      size="small"
+      title={translate("close")}
+      icon={<XMarkIcon aria-hidden />}
+    />
+  );
+});
+
+export { BaseAlertCloseButton };
+export type { BaseAlertCloseButtonProps };

package/src/alert/base-alert/content/BaseAlertContent.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS, useThemeInternal } from "../../../theme/Theme";
+
+interface BaseAlertContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link BaseAlertContentProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header>
+ *      <BaseAlert.Title>Info title</BaseAlert.Title>
+ *    </BaseAlert.Header>
+ *
+ *    <BaseAlert.Content>Content</BaseAlert.Content>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertContent = forwardRef<HTMLDivElement, BaseAlertContentProps>(
+  (
+    { children, className, ...restProps }: BaseAlertContentProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const themeContext = useThemeInternal(false);
+
+    return (
+      <div
+        ref={forwardedRef}
+        data-color={themeContext?.color}
+        {...restProps}
+        className={cn(className, "navds-base-alert__content")}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+export { BaseAlertContent };
+export type { BaseAlertContentProps };

package/src/alert/base-alert/header/BaseAlertHeader.tsx

@@ -0,0 +1,61 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
+import { BodyShort } from "../../../typography";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
+import { useBaseAlert } from "../root/BaseAlertRoot.context";
+import { BaseAlertStatusIcon } from "../root/BaseAlertRoot.utils";
+
+interface BaseAlertHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  /**
+   * Icon to display in the header.
+   */
+  icon?: React.ReactNode;
+}
+
+/**
+ * @see 🏷️ {@link BaseAlertHeaderProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header icon={<InformationSquareIcon aria-hidden />}>
+ *      <BaseAlert.Title>Info title</BaseAlert.Title>
+ *    </BaseAlert.Header>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertHeader = forwardRef<HTMLDivElement, BaseAlertHeaderProps>(
+  (
+    { children, className, icon, ...restProps }: BaseAlertHeaderProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const { status, color, statusId } = useBaseAlert();
+    const translate = useI18n("global");
+
+    const headerIcon =
+      icon ?? (status ? <BaseAlertStatusIcon status={status} /> : null);
+
+    return (
+      <div
+        ref={forwardedRef}
+        {...restProps}
+        data-color={color}
+        className={cn(className, "navds-base-alert__header")}
+      >
+        {headerIcon && (
+          <div className={cn("navds-base-alert__icon")}>{headerIcon}</div>
+        )}
+        {status && (
+          <BodyShort id={statusId} aria-hidden visuallyHidden>
+            {`${translate(status)}: `}
+          </BodyShort>
+        )}
+        {children}
+      </div>
+    );
+  },
+);
+
+export { BaseAlertHeader };
+export type { BaseAlertHeaderProps };

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

@@ -0,0 +1,2 @@
+"use client";
+export * as BaseAlert from "./namespace";

package/src/alert/base-alert/namespace.ts

@@ -0,0 +1,11 @@
+export { BaseAlertCloseButton as CloseButton } from "./close-button/BaseAlertCloseButton";
+export { BaseAlertContent as Content } from "./content/BaseAlertContent";
+export { BaseAlertTitle as Title } from "./title/BaseAlertTitle";
+export { BaseAlertHeader as Header } from "./header/BaseAlertHeader";
+export { BaseAlert as Root } from "./root/BaseAlertRoot";
+
+export type { BaseAlertCloseButtonProps as CloseButtonProps } from "./close-button/BaseAlertCloseButton";
+export type { BaseAlertContentProps as ContentProps } from "./content/BaseAlertContent";
+export type { BaseAlertTitleProps as TitleProps } from "./title/BaseAlertTitle";
+export type { BaseAlertHeaderProps as HeaderProps } from "./header/BaseAlertHeader";
+export type { BaseAlertProps as RootProps } from "./root/BaseAlertRoot";

package/src/alert/base-alert/root/BaseAlertRoot.context.tsx

@@ -0,0 +1,17 @@
+import { AkselColor } from "../../../types";
+import { createContext } from "../../../util/create-context";
+
+type BaseAlertContextProps = {
+  size: "medium" | "small";
+  status?: "announcement" | "success" | "warning" | "error";
+  color: AkselColor | undefined;
+  statusId: string;
+};
+
+const [BaseAlertProvider, useBaseAlert] = createContext<BaseAlertContextProps>({
+  name: "BaseAlert",
+  errorMessage: "useBaseAlert must be used within a BaseAlertProvider",
+});
+
+export { BaseAlertProvider, useBaseAlert };
+export type { BaseAlertContextProps };

package/src/alert/base-alert/root/BaseAlertRoot.tsx

@@ -0,0 +1,102 @@
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
+import { AkselColor } from "../../../types";
+import { useId } from "../../../util";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
+import {
+  type BaseAlertContextProps,
+  BaseAlertProvider,
+} from "./BaseAlertRoot.context";
+import { baseAlertStatusToDataColor } from "./BaseAlertRoot.utils";
+
+interface BaseAlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content.
+   */
+  children: React.ReactNode;
+  /**
+   * Changes the size.
+   * @default "medium"
+   */
+  size?: BaseAlertContextProps["size"];
+  /**
+   * Overrides color
+   */
+  "data-color"?: AkselColor;
+  /**
+   * Intensity of the alert
+   */
+  type: "moderate" | "strong";
+  /**
+   * Centers content and removes border-radius
+   * @default false
+   */
+  global?: boolean;
+  /**
+   * Type of alert
+   */
+  status?: BaseAlertContextProps["status"];
+  /**
+   * Changes the HTML element used for the root element.
+   *
+   * **Testing**: When using `axe-core` for accessibility testing, `section` might warn about unique landmarks if you have multiple Alerts on page with the same status.
+   * In those cases, consider using `div` as the root element, or adding unique `aria-label` or `aria-labelledby` props.
+   * @see [📝 Landmarks unique](https://dequeuniversity.com/rules/axe/4.6/landmark-unique)
+   * @default "section"
+   */
+  as?: "section" | "div";
+}
+
+const BaseAlert = forwardRef<HTMLDivElement, BaseAlertProps>(
+  (
+    {
+      children,
+      className,
+      size = "medium",
+      "data-color": dataColor,
+      type,
+      global = false,
+      status,
+      as: Component = "section",
+      "aria-label": ariaLabel,
+      role,
+      ...restProps
+    }: BaseAlertProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+
+    const statusId = useId();
+    const translate = useI18n("global");
+
+    const alertColor = status ? baseAlertStatusToDataColor(status) : dataColor;
+
+    return (
+      <BaseAlertProvider
+        size={size}
+        status={status}
+        color={alertColor}
+        statusId={statusId}
+      >
+        <Component
+          aria-label={
+            ariaLabel ??
+            (!status || Component === "div" ? undefined : translate(status))
+          }
+          ref={forwardedRef}
+          {...restProps}
+          className={cn(className, "navds-base-alert")}
+          data-size={size}
+          data-color={alertColor}
+          data-variant={type}
+          data-global={global}
+        >
+          <div role={role}>{children}</div>
+        </Component>
+      </BaseAlertProvider>
+    );
+  },
+);
+
+export { BaseAlert };
+export type { BaseAlertProps };

package/src/alert/base-alert/root/BaseAlertRoot.utils.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {
+  CheckmarkCircleFillIcon,
+  CheckmarkCircleIcon,
+  ExclamationmarkTriangleFillIcon,
+  ExclamationmarkTriangleIcon,
+  MegaphoneSpeakingFillIcon,
+  MegaphoneSpeakingIcon,
+  XMarkOctagonFillIcon,
+  XMarkOctagonIcon,
+} from "@navikt/aksel-icons";
+import type { AkselColor } from "../../../types";
+import type { BaseAlertContextProps } from "../root/BaseAlertRoot.context";
+
+function baseAlertStatusToDataColor(
+  status: BaseAlertContextProps["status"],
+): AkselColor {
+  switch (status) {
+    case "announcement":
+      return "neutral";
+    case "success":
+      return "success";
+    case "warning":
+      return "warning";
+    case "error":
+      return "danger";
+  }
+
+  return "neutral";
+}
+
+const STATUS_ICONS = {
+  announcement: {
+    fill: MegaphoneSpeakingFillIcon,
+    outline: MegaphoneSpeakingIcon,
+  },
+  success: {
+    fill: CheckmarkCircleFillIcon,
+    outline: CheckmarkCircleIcon,
+  },
+  warning: {
+    fill: ExclamationmarkTriangleFillIcon,
+    outline: ExclamationmarkTriangleIcon,
+  },
+  error: {
+    fill: XMarkOctagonFillIcon,
+    outline: XMarkOctagonIcon,
+  },
+} as const;
+
+function BaseAlertStatusIcon({
+  status,
+  fill = true,
+}: {
+  status: BaseAlertContextProps["status"];
+  fill?: boolean;
+}) {
+  if (!status) {
+    return null;
+  }
+
+  const Icon = fill ? STATUS_ICONS[status].fill : STATUS_ICONS[status].outline;
+
+  return <Icon aria-hidden />;
+}
+
+export { BaseAlertStatusIcon, baseAlertStatusToDataColor };

package/src/alert/base-alert/title/BaseAlertTitle.tsx

@@ -0,0 +1,63 @@
+import cl from "clsx";
+import React, { forwardRef } from "react";
+import { useRenameCSS } from "../../../theme/Theme";
+import { BodyShort } from "../../../typography";
+import { useId } from "../../../util";
+import { useBaseAlert } from "../root/BaseAlertRoot.context";
+
+interface BaseAlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  children: React.ReactNode;
+  /**
+   * Changes the HTML element used for the title.
+   * @default "h2"
+   */
+  as?: "h2" | "h3" | "h4" | "h5" | "h6" | "div";
+}
+
+/**
+ * Title component for BaseAlert. Remember to use correct heading-level with the `as` prop.
+ * @see 🏷️ {@link BaseAlertTitleProps}
+ * @example
+ * ```jsx
+ *  <BaseAlert>
+ *    <BaseAlert.Header>
+ *      <BaseAlert.Title as="h2">Info title</BaseAlert.Title>
+ *    </BaseAlert.Header>
+ *  </BaseAlert>
+ * ```
+ */
+const BaseAlertTitle = forwardRef<HTMLHeadingElement, BaseAlertTitleProps>(
+  (
+    {
+      children,
+      className,
+      as = "h2",
+      id: idProp,
+      ...restProps
+    }: BaseAlertTitleProps,
+    forwardedRef,
+  ) => {
+    const { cn } = useRenameCSS();
+    const { size, statusId } = useBaseAlert();
+
+    const titleId = useId(idProp);
+
+    return (
+      <BodyShort
+        ref={forwardedRef}
+        {...restProps}
+        as={as}
+        size={size === "medium" ? "large" : "medium"}
+        weight="semibold"
+        className={cn(className, "navds-base-alert__title")}
+        id={titleId}
+        aria-labelledby={cl(statusId, titleId)}
+      >
+        {children}
+      </BodyShort>
+    );
+  },
+);
+
+export { BaseAlertTitle };
+export type { BaseAlertTitleProps };

package/src/alert/global-alert/close-button/GlobalAlertCloseButton.tsx

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

package/src/alert/global-alert/content/GlobalAlertContent.tsx

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

package/src/alert/global-alert/header/GlobalAlertHeader.tsx

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

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

@@ -0,0 +1,16 @@
+"use client";
+export {
+  GlobalAlert,
+  GlobalAlertHeader,
+  GlobalAlertTitle,
+  GlobalAlertContent,
+  GlobalAlertCloseButton,
+} from "./root/GlobalAlertRoot";
+
+export type {
+  GlobalAlertProps,
+  GlobalAlertHeaderProps,
+  GlobalAlertTitleProps,
+  GlobalAlertContentProps,
+  GlobalAlertCloseButtonProps,
+} from "./root/GlobalAlertRoot";

package/src/alert/global-alert/root/GlobalAlertRoot.tsx

@@ -0,0 +1,132 @@
+import React, { forwardRef } from "react";
+import { BaseAlert } from "../../base-alert";
+import {
+  GlobalAlertCloseButton,
+  type GlobalAlertCloseButtonProps,
+} from "../close-button/GlobalAlertCloseButton";
+import {
+  GlobalAlertContent,
+  type GlobalAlertContentProps,
+} from "../content/GlobalAlertContent";
+import {
+  GlobalAlertHeader,
+  type GlobalAlertHeaderProps,
+} from "../header/GlobalAlertHeader";
+import {
+  GlobalAlertTitle,
+  type GlobalAlertTitleProps,
+} from "../title/GlobalAlertTitle";
+
+interface GlobalAlertProps
+  extends Omit<BaseAlert.RootProps, "type" | "global" | "data-color"> {
+  status: Exclude<BaseAlert.RootProps["status"], undefined>;
+}
+
+interface GlobalAlertComponent
+  extends React.ForwardRefExoticComponent<
+    GlobalAlertProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * @see 🏷️ {@link GlobalAlertHeaderProps}
+   * @example
+   * ```jsx
+   *  <GlobalAlert>
+   *    <GlobalAlert.Header>
+   *      <GlobalAlert.Title>Info title</GlobalAlert.Title>
+   *    </GlobalAlert.Header>
+   *  </GlobalAlert>
+   * ```
+   */
+  Header: typeof GlobalAlertHeader;
+
+  /**
+   * Title component for GlobalAlert. Remember to use correct heading-level with the `as` prop.
+   * @see 🏷️ {@link GlobalAlertTitleProps}
+   * @example
+   * ```jsx
+   *  <GlobalAlert>
+   *    <GlobalAlert.Header>
+   *      <GlobalAlert.Title as="h2">Info title</GlobalAlert.Title>
+   *    </GlobalAlert.Header>
+   *  </GlobalAlert>
+   * ```
+   */
+  Title: typeof GlobalAlertTitle;
+
+  /**
+   * @see 🏷️ {@link GlobalAlertContentProps}
+   * @example
+   * ```jsx
+   *  <GlobalAlert>
+   *    <GlobalAlert.Header>
+   *      <GlobalAlert.Title>Info title</GlobalAlert.Title>
+   *    </GlobalAlert.Header>
+   *
+   *    <GlobalAlert.Content>Content</GlobalAlert.Content>
+   *  </GlobalAlert>
+   * ```
+   */
+  Content: typeof GlobalAlertContent;
+
+  /**
+   * @see 🏷️ {@link GlobalAlertCloseProps}
+   * @example
+   * ```jsx
+   *  <GlobalAlert>
+   *    <GlobalAlert.Header>
+   *      <GlobalAlert.Title>Info title</GlobalAlert.Title>
+   *     <GlobalAlert.CloseButton onClick={() => alert("Closed!")} />
+   *    </GlobalAlert.Header>
+   *  </GlobalAlert>
+   * ```
+   */
+  CloseButton: typeof GlobalAlertCloseButton;
+}
+
+/**
+ * A component for displaying alerts about your app.
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/globalalert)
+ * @see 🏷️ {@link GlobalAlertProps}
+ * @example
+ * ```jsx
+ *  <GlobalAlert status="error">
+ *    <GlobalAlert.Header>
+ *      <GlobalAlert.Title>Alert title</GlobalAlert.Title>
+ *    </GlobalAlert.Header>
+ *    <GlobalAlert.Content>Content</GlobalAlert.Content>
+ *  </GlobalAlert>
+ * ```
+ */
+export const GlobalAlert = forwardRef<HTMLDivElement, GlobalAlertProps>(
+  (props: GlobalAlertProps, forwardedRef) => {
+    return (
+      <BaseAlert.Root
+        ref={forwardedRef}
+        role="alert"
+        {...props}
+        type="strong"
+        global
+      />
+    );
+  },
+) as GlobalAlertComponent;
+
+GlobalAlert.Header = GlobalAlertHeader;
+GlobalAlert.Title = GlobalAlertTitle;
+GlobalAlert.Content = GlobalAlertContent;
+GlobalAlert.CloseButton = GlobalAlertCloseButton;
+
+export default GlobalAlert;
+export {
+  GlobalAlertCloseButton,
+  GlobalAlertContent,
+  GlobalAlertHeader,
+  GlobalAlertTitle,
+};
+export type {
+  GlobalAlertCloseButtonProps,
+  GlobalAlertContentProps,
+  GlobalAlertHeaderProps,
+  GlobalAlertProps,
+  GlobalAlertTitleProps,
+};

package/src/alert/global-alert/title/GlobalAlertTitle.tsx

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

package/src/alert/info-card/content/InfoCardContent.tsx

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