@navikt/ds-react 7.33.5 → 7.35.0

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 };

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,123 @@
+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" | "as"
+> & {
+  /**
+   * 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/form/combobox/FilteredOptions/NoSearchHitsMessage.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { useRenameCSS } from "../../../theme/Theme";
+import { useI18n } from "../../../util/i18n/i18n.hooks";
 import { useInputContext } from "../Input/Input.context";
 import filteredOptionsUtil from "./filtered-options-util";
 
 const NoSearchHitsMessage = () => {
   const { cn } = useRenameCSS();
 
+  const translate = useI18n("Combobox");
+
   const {
     inputProps: { id },
   } = useInputContext();
@@ -15,7 +18,7 @@ const NoSearchHitsMessage = () => {
       className={cn("navds-combobox__list-item--no-options")}
       id={filteredOptionsUtil.getNoHitsId(id)}
     >
-      Ingen søketreff
+      {translate("noMatches")}
     </div>
   );
 };

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";