@navikt/ds-react 6.6.0 → 6.7.0

package/src/collapsible/parts/Collapsible.Trigger.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from "react";
+import { Slot } from "../../util/Slot";
+import { composeEventHandlers } from "../../util/composeEventHandlers";
+import { useCollapsibleContext } from "../Collapsible.context";
+
+export interface CollapsibleTriggerProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "id" | "aria-controls" | "aria-expanded"
+  > {
+  /**
+   * When true, will render element as its child. This merges classes, styles and event handlers.
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const CollapsibleTrigger = forwardRef<
+  HTMLButtonElement,
+  CollapsibleTriggerProps
+>(({ children, asChild, onClick, ...rest }, ref) => {
+  const ctx = useCollapsibleContext();
+
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type="button"
+      data-state={ctx.state}
+      onClick={composeEventHandlers(onClick, ctx.onOpenToggle)}
+      {...rest}
+      id={ctx.triggerId}
+      aria-controls={ctx.open ? ctx.contentId : undefined}
+      aria-expanded={ctx.open}
+    >
+      {children}
+    </Comp>
+  );
+});
+
+export default CollapsibleTrigger;

package/src/index.ts

@@ -59,6 +59,7 @@ export { Modal, type ModalProps } from "./modal";
 export { Pagination, type PaginationProps } from "./pagination";
 export { Popover, type PopoverProps } from "./popover";
 export { Portal, type PortalProps } from "./portal";
+export { ProgressBar, type ProgressBarProps } from "./progress-bar";
 export { Provider, type ProviderProps } from "./provider";
 export { ReadMore, type ReadMoreProps } from "./read-more";
 export { Skeleton, type SkeletonProps } from "./skeleton";

package/src/layout/stack/Spacer.tsx

@@ -12,6 +12,6 @@ import React from "react";
  *  <MyComponent />
  * </HStack>
  */
-export const Spacer = () => <div className="navds-stack__spacer" />;
+export const Spacer = () => <span className="navds-stack__spacer" />;
 
 export default Spacer;

package/src/progress-bar/ProgressBar.tsx

@@ -0,0 +1,124 @@
+import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
+
+interface ProgressBarPropsBase
+  extends Omit<HTMLAttributes<HTMLDivElement>, "role"> {
+  /**
+   * Changes height.
+   * @default "medium"
+   */
+  size?: "large" | "medium" | "small";
+  /**
+   * Current progress. When duration is set, value is ignored.
+   */
+  value?: number;
+  /**
+   * Maximum progress.
+   * @default 100
+   */
+  valueMax?: number;
+  /**
+   * Expected task duration in seconds.
+   * ProgressBar grows with a preset animation for {duration} seconds.
+   * After a 4 sec delay, it then shows an indeterminate animation.
+   * A duration of 0 will show an indeterminate animation immediately.
+   * Temporary removed to avoid conflicts when updating API
+   */
+  //duration?: number;
+  /**
+   * String ID of the element that labels the progress bar.
+   * Not needed if `aria-label` is used.
+   */
+  "aria-labelledby"?: string;
+  /**
+   * String value that labels the progress bar.
+   * Not needed if `aria-labelledby` is used.
+   */
+  "aria-label"?: string;
+}
+
+export type ProgressBarProps = ProgressBarPropsBase &
+  (
+    | {
+        "aria-hidden": string;
+      }
+    | {
+        "aria-labelledby": string;
+        "aria-label"?: never;
+      }
+    | {
+        "aria-label": string;
+        "aria-labelledby"?: never;
+      }
+  );
+
+/**
+ * ProgressBar
+ * A component for visualizing progression in a process.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/progress-bar)
+ * @see 🏷️ {@link ProgressBarProps}
+ *
+ * @example
+ * // For loading content with an approximate duration in sec.
+ * <ProgressBar duration={30} />
+ *
+ * @example
+ * // As a step indicator for forms, questionnaires, etc.
+ * <ProgressBar value={2} valueMax={7} />
+ */
+export const ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(
+  (
+    {
+      size = "medium",
+      value = 0,
+      valueMax = 100,
+      "aria-labelledby": ariaLabelledBy,
+      "aria-label": ariaLabel,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const translate = 100 - (Math.round(value) / valueMax) * 100;
+    const duration = undefined;
+
+    return (
+      <div
+        ref={ref}
+        className={cl(
+          "navds-progress-bar",
+          `navds-progress-bar--${size}`,
+          className,
+        )}
+        aria-valuemax={duration ? 0 : Math.round(valueMax)}
+        aria-valuenow={duration ? 0 : Math.round(value)}
+        aria-valuetext={
+          duration
+            ? "Fremdrift kan ikke beregnes"
+            : `${Math.round(value)} av ${Math.round(valueMax)}`
+        }
+        role="progressbar"
+        aria-labelledby={ariaLabelledBy}
+        aria-label={ariaLabel}
+        {...rest}
+      >
+        <div
+          className={cl("navds-progress-bar__foreground", {
+            "navds-progress-bar__foreground--indeterminate":
+              Number.isInteger(duration),
+          })}
+          style={{
+            "--__ac-progress-bar-duration": Number.isInteger(duration)
+              ? `${duration}s`
+              : undefined,
+            "--__ac-progress-bar-delay": `${duration === 0 ? 0 : 4}s`,
+            "--__ac-progress-bar-translate": `-${translate}%`,
+          }}
+        />
+      </div>
+    );
+  },
+);
+
+export default ProgressBar;

package/src/progress-bar/index.ts

@@ -0,0 +1,2 @@
+"use client";
+export { default as ProgressBar, type ProgressBarProps } from "./ProgressBar";

package/src/typography/BodyLong.tsx

@@ -8,12 +8,12 @@ export interface BodyLongProps
   extends TypoProps,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * large: 20px, medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
   /**
-   * Text
+   * Text.
    */
   children: React.ReactNode;
 }
@@ -27,11 +27,11 @@ export interface BodyLongProps
  *
  * @example
  * ```jsx
- *     <BodyLong>
- *       Hvis du ikke bor sammen med begge foreldrene dine,
- *       kan du ha rett til barnebidrag fra en eller begge foreldre mens du
- *       fullfører videregående skole eller tilsvarende.
- *     </BodyLong>
+ * <BodyLong>
+ *   Hvis du ikke bor sammen med begge foreldrene dine,
+ *   kan du ha rett til barnebidrag fra en eller begge foreldre mens du
+ *   fullfører videregående skole eller tilsvarende.
+ * </BodyLong>
  * ```
  */
 export const BodyLong: OverridableComponent<

package/src/typography/BodyShort.tsx

@@ -8,12 +8,12 @@ export interface BodyShortProps
   extends TypoProps,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * large: 20px, medium: 18px, small: 16px
+   * large: 20px, medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "large" | "medium" | "small";
   /**
-   * Paragraph text
+   * Paragraph text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface BodyShortProps
  *
  * @example
  * ```jsx
- *     <BodyShort>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </BodyShort>
+ * <BodyShort>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </BodyShort>
  * ```
  */
 export const BodyShort: OverridableComponent<

package/src/typography/Detail.tsx

@@ -12,11 +12,11 @@ export interface DetailProps
    */
   size?: "medium" | "small";
   /**
-   * Paragraph text
+   * Text.
    */
   children: React.ReactNode;
   /**
-   * All caps
+   * ALL CAPS.
    */
   uppercase?: boolean;
 }
@@ -30,9 +30,9 @@ export interface DetailProps
  *
  * @example
  * ```jsx
- *     <Detail>
- *       Du må gjøre en filtrering for å se brukere i listen.
- *     </Detail>
+ * <Detail>
+ *   Du må gjøre en filtrering for å se brukere i listen.
+ * </Detail>
  * ```
  */
 export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =

package/src/typography/ErrorMessage.tsx

@@ -8,12 +8,12 @@ export interface ErrorMessageProps
   extends Pick<TypoProps, "spacing">,
     React.HTMLAttributes<HTMLParagraphElement> {
   /**
-   * medium: 18px, small: 16px
+   * medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Error text
+   * Error text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface ErrorMessageProps
  *
  * @example
  * ```jsx
- *     <ErrorMessage>
- *       Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </ErrorMessage>
+ * <ErrorMessage>
+ *   Du må fylle ut: Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </ErrorMessage>
  * ```
  */
 export const ErrorMessage: OverridableComponent<

package/src/typography/Heading.tsx

@@ -8,16 +8,16 @@ export interface HeadingProps
   extends Pick<TypoProps, "spacing" | "visuallyHidden" | "align" | "textColor">,
     React.HTMLAttributes<HTMLHeadingElement> {
   /**
-   * Heading level
+   * Heading level.
    * @default "1"
    */
   level?: "1" | "2" | "3" | "4" | "5" | "6";
   /**
-   * Changes text-sizing
+   * xlarge: 40px, large: 32px, medium: 24px, small: 20px, xsmall: 18px.
    */
   size: "xlarge" | "large" | "medium" | "small" | "xsmall";
   /**
-   * Heading text
+   * Heading text.
    */
   children: React.ReactNode;
 }
@@ -31,9 +31,9 @@ export interface HeadingProps
  *
  * @example
  * ```jsx
- *     <Heading level="1" size="xlarge">
- *       Hva kan vi hjelpe deg med?
- *     </Heading>
+ * <Heading level="1" size="xlarge">
+ *   Hva kan vi hjelpe deg med?
+ * </Heading>
  * ```
  */
 export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =

package/src/typography/Label.tsx

@@ -8,12 +8,12 @@ export interface LabelProps
   extends Omit<TypoProps, "weight" | "align" | "truncate">,
     React.LabelHTMLAttributes<HTMLLabelElement> {
   /**
-   * medium: 18px, small: 16px
+   * medium: 18px, small: 16px.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Paragraph text
+   * Label text.
    */
   children: React.ReactNode;
 }
@@ -27,9 +27,9 @@ export interface LabelProps
  *
  * @example
  * ```jsx
- *     <Label>
- *       Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
- *     </Label>
+ * <Label>
+ *   Oppgi årsaken til at du har ventet mer enn 6 måneder med å søke om refusjon
+ * </Label>
  * ```
  */
 export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =

package/src/typography/types.ts

@@ -12,15 +12,15 @@ export type TypoProps = {
    */
   align?: "start" | "center" | "end";
   /**
-   * Visually hide text. Text will still be accessible for screenreaders
+   * Visually hide text. Text will still be accessible for screenreaders.
    */
   visuallyHidden?: boolean;
   /**
-   * Adds spacing below text
+   * Adds spacing below text.
    */
   spacing?: boolean;
   /**
-   * Adjusts color
+   * Adjusts color.
    */
   textColor?: "default" | "subtle";
 };