@navikt/ds-react 7.33.5 → 7.35.0

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

package/src/timeline/pin/PinInternal.tsx

@@ -1,7 +1,6 @@
 import {
   FloatingFocusManager,
   autoUpdate,
-  arrow as flArrow,
   flip,
   offset,
   safePolygon,
@@ -13,8 +12,8 @@ import {
   useInteractions,
 } from "@floating-ui/react";
 import { format } from "date-fns";
-import React, { forwardRef, useRef, useState } from "react";
-import { useRenameCSS, useThemeInternal } from "../../theme/Theme";
+import React, { forwardRef, useState } from "react";
+import { useRenameCSS } from "../../theme/Theme";
 import { useMergeRefs } from "../../util/hooks/useMergeRefs";
 import { useI18n } from "../../util/i18n/i18n.hooks";
 import { useTimelineContext } from "../hooks/useTimelineContext";
@@ -37,16 +36,13 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
     const { cn } = useRenameCSS();
     const { startDate, endDate, direction } = useTimelineContext();
     const [open, setOpen] = useState(false);
-    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({
@@ -55,10 +51,9 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
       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 }),
       ],
     });
 
@@ -79,13 +74,6 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
 
     const mergedRef = useMergeRefs(refs.setReference, ref);
 
-    const staticSide = {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right",
-    }[placement.split("-")[0]];
-
     const label = translate("Pin.pin", {
       date: format(date, translate("dateFormat")),
     });
@@ -132,17 +120,6 @@ export const PinInternal = forwardRef<HTMLButtonElement, TimelinePinProps>(
               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>
         )}

package/src/util/i18n/locales/en.ts

@@ -8,15 +8,11 @@ export default {
     showLess: "Show less",
     readOnly: "Read-only",
     close: "Close",
-  },
-
-  Alert: {
-    closeAlert: "Close alert",
-    closeMessage: "Close message",
     error: "Error",
     info: "Information",
     success: "Success",
     warning: "Warning",
+    announcement: "Announcement",
   },
   Chips: {
     Removable: {
@@ -25,6 +21,7 @@ export default {
   },
   Combobox: {
     addOption: "Add",
+    noMatches: "No search hits",
     loading: "Searching…",
     maxSelected: "{selected} of max {limit} are selected.",
   },

package/src/util/i18n/locales/nb.ts

@@ -11,15 +11,11 @@ export default {
     showLess: "Vis mindre",
     readOnly: "Skrivebeskyttet",
     close: "Lukk",
-  },
-
-  Alert: {
-    closeAlert: "Lukk varsel",
-    closeMessage: "Lukk melding",
     error: "Feil",
     info: "Informasjon",
     success: "Suksess",
     warning: "Advarsel",
+    announcement: "Kunngjøring",
   },
   Chips: {
     Removable: {
@@ -30,6 +26,7 @@ export default {
   Combobox: {
     /** The input value will be appended to the end of this text, e.g. `Legg til "input value"`. */
     addOption: "Legg til",
+    noMatches: "Ingen søketreff",
     /** Loader title */
     loading: "Søker…",
     maxSelected: "{selected} av maks {limit} er valgt.",

package/src/util/i18n/locales/nn.ts

@@ -8,15 +8,11 @@ export default {
     showLess: "Vis mindre",
     readOnly: "Skrivebeskytta",
     close: "Lukk",
-  },
-
-  Alert: {
-    closeAlert: "Lukk varsel",
-    closeMessage: "Lukk melding",
     error: "Feil",
     info: "Informasjon",
     success: "Suksess",
     warning: "Åtvaring",
+    announcement: "Kunngjering",
   },
   Chips: {
     Removable: {
@@ -25,6 +21,7 @@ export default {
   },
   Combobox: {
     addOption: "Legg til",
+    noMatches: "Ingen søketreff",
     loading: "Søker…",
     maxSelected: "{selected} av maks {limit} er valt.",
   },

package/cjs/util/renderStoriesForChromatic.d.ts

@@ -1,5 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import React from "react";
-export declare function renderStoriesForChromatic(stories: Record<string, {
-    render?: (...args: any[]) => React.ReactNode;
-} | React.FunctionComponent>): StoryObj;

package/cjs/util/renderStoriesForChromatic.js

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderStoriesForChromatic = renderStoriesForChromatic;
-const react_1 = __importDefault(require("react"));
-function renderStoriesForChromatic(stories) {
-    return {
-        render: (...args) => (react_1.default.createElement(react_1.default.Fragment, null, Object.entries(stories).map(([storyName, Story]) => {
-            var _a;
-            return (react_1.default.createElement("div", { key: storyName },
-                react_1.default.createElement("h2", { className: "storyheading" }, storyName),
-                typeof Story === "function" ? react_1.default.createElement(Story, null) : (_a = Story.render) === null || _a === void 0 ? void 0 : _a.call(Story, ...args)));
-        }))),
-        parameters: {
-            chromatic: { disable: false },
-        },
-    };
-}
-//# sourceMappingURL=renderStoriesForChromatic.js.map

package/cjs/util/renderStoriesForChromatic.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":";;;;;AAIA,8DAqBC;AAxBD,kDAA0B;AAG1B,SAAgB,yBAAyB,CACvC,OAGC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CAAC,CACzD,8DACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CACnD,uCAAK,GAAG,EAAE,SAAS;gBACjB,sCAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,8BAAC,KAAK,OAAG,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC9D,CACP,CAAA;SAAA,CAAC,CACD,CACJ;QACD,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}

package/esm/util/renderStoriesForChromatic.d.ts

@@ -1,5 +0,0 @@
-import { StoryObj } from "@storybook/react-vite";
-import React from "react";
-export declare function renderStoriesForChromatic(stories: Record<string, {
-    render?: (...args: any[]) => React.ReactNode;
-} | React.FunctionComponent>): StoryObj;

package/esm/util/renderStoriesForChromatic.js

@@ -1,15 +0,0 @@
-import React from "react";
-export function renderStoriesForChromatic(stories) {
-    return {
-        render: (...args) => (React.createElement(React.Fragment, null, Object.entries(stories).map(([storyName, Story]) => {
-            var _a;
-            return (React.createElement("div", { key: storyName },
-                React.createElement("h2", { className: "storyheading" }, storyName),
-                typeof Story === "function" ? React.createElement(Story, null) : (_a = Story.render) === null || _a === void 0 ? void 0 : _a.call(Story, ...args)));
-        }))),
-        parameters: {
-            chromatic: { disable: false },
-        },
-    };
-}
-//# sourceMappingURL=renderStoriesForChromatic.js.map

package/esm/util/renderStoriesForChromatic.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"renderStoriesForChromatic.js","sourceRoot":"","sources":["../../src/util/renderStoriesForChromatic.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,UAAU,yBAAyB,CACvC,OAGC;IAED,OAAO;QACL,MAAM,EAAE,CAAC,GAAG,IAA0C,EAAE,EAAE,CAAC,CACzD,0CACG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE,EAAE;;YAAC,OAAA,CACnD,6BAAK,GAAG,EAAE,SAAS;gBACjB,4BAAI,SAAS,EAAC,cAAc,IAAE,SAAS,CAAM;gBAC5C,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,oBAAC,KAAK,OAAG,CAAC,CAAC,CAAC,MAAA,KAAK,CAAC,MAAM,sDAAG,GAAG,IAAI,CAAC,CAC9D,CACP,CAAA;SAAA,CAAC,CACD,CACJ;QACD,UAAU,EAAE;YACV,SAAS,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE;SAC9B;KACF,CAAC;AACJ,CAAC"}

package/src/util/renderStoriesForChromatic.tsx

@@ -1,26 +0,0 @@
-import { Args, StoryObj } from "@storybook/react-vite";
-import React from "react";
-import { Renderer, StoryContext } from "storybook/internal/types";
-
-export function renderStoriesForChromatic(
-  stories: Record<
-    string,
-    { render?: (...args: any[]) => React.ReactNode } | React.FunctionComponent
-  >,
-): StoryObj {
-  return {
-    render: (...args: [Args, StoryContext<Renderer, Args>]) => (
-      <>
-        {Object.entries(stories).map(([storyName, Story]) => (
-          <div key={storyName}>
-            <h2 className="storyheading">{storyName}</h2>
-            {typeof Story === "function" ? <Story /> : Story.render?.(...args)}
-          </div>
-        ))}
-      </>
-    ),
-    parameters: {
-      chromatic: { disable: false },
-    },
-  };
-}