@navikt/ds-react 4.0.0 → 4.1.1

package/src/toggle-group/ToggleGroup.tsx

@@ -1,3 +1,4 @@
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import cl from "clsx";
 import React, {
   createContext,
@@ -5,9 +6,8 @@ import React, {
   HTMLAttributes,
   useState,
 } from "react";
-import ToggleItem, { ToggleItemType } from "./ToggleItem";
-import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import { Label, useId } from "..";
+import ToggleItem, { ToggleItemProps } from "./ToggleItem";
 
 export interface ToggleGroupProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -47,7 +47,12 @@ interface ToggleGroupComponent
   extends React.ForwardRefExoticComponent<
     ToggleGroupProps & React.RefAttributes<HTMLDivElement>
   > {
-  Item: ToggleItemType;
+  /**
+   * @see 🏷️ {@link ToggleItemProps}
+   */
+  Item: React.ForwardRefExoticComponent<
+    ToggleItemProps & React.RefAttributes<HTMLButtonElement>
+  >;
 }
 
 interface ToggleContextProps {
@@ -58,6 +63,21 @@ export const ToggleGroupContext = createContext<ToggleContextProps | null>(
   null
 );
 
+/**
+ * A component that displays a group of toggle buttons.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/toggle-group)
+ * @see 🏷️ {@link ToggleGroupProps}
+ *
+ * @example
+ * ```jsx
+ * <ToggleGroup defaultValue="lest" onChange={console.log} size="small">
+ *   <ToggleGroup.Item value="ulest">Ulest</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="lest">Leste</ToggleGroup.Item>
+ *   <ToggleGroup.Item value="sendt">Sendt</ToggleGroup.Item>
+ * </ToggleGroup>
+ * ```
+ */
 export const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
   (
     {

package/src/toggle-group/ToggleItem.tsx

@@ -16,10 +16,6 @@ export interface ToggleItemProps
   value: string;
 }
 
-export type ToggleItemType = React.ForwardRefExoticComponent<
-  ToggleItemProps & React.RefAttributes<HTMLButtonElement>
->;
-
 const ToggleItem = forwardRef<HTMLButtonElement, ToggleItemProps>(
   ({ className, children, ...rest }, ref) => {
     const context = useContext(ToggleGroupContext);
@@ -40,6 +36,6 @@ const ToggleItem = forwardRef<HTMLButtonElement, ToggleItemProps>(
       </RadixToggleGroup.Item>
     );
   }
-) as ToggleItemType;
+);
 
 export default ToggleItem;

package/src/tooltip/Tooltip.tsx

@@ -75,6 +75,19 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   keys?: string[];
 }
 
+/**
+ * A component that displays a tooltip when the user hovers over its child element.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/tooltip)
+ * @see 🏷️ {@link TooltipProps}
+ *
+ * @example
+ * ```jsx
+ * <Tooltip content="Skriv ut dokument">
+ *   <Button icon={<PrinterLargeIcon title="demo knapp" />} />
+ * </Tooltip>
+ * ```
+ */
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   (
     {

package/src/typography/BodyLong.tsx

@@ -19,6 +19,20 @@ export interface BodyLongProps
   spacing?: boolean;
 }
 
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link BodyLongProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <BodyLong level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </BodyLong>
+ * ```
+ */
 export const BodyLong: OverridableComponent<
   BodyLongProps,
   HTMLParagraphElement

package/src/typography/BodyShort.tsx

@@ -19,6 +19,20 @@ export interface BodyShortProps
   spacing?: boolean;
 }
 
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link BodyShortProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <BodyShort level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </BodyShort>
+ * ```
+ */
 export const BodyShort: OverridableComponent<
   BodyShortProps,
   HTMLParagraphElement

package/src/typography/Detail.tsx

@@ -22,6 +22,20 @@ export interface DetailProps
   uppercase?: boolean;
 }
 
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link DetailProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Detail level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Detail>
+ * ```
+ */
 export const Detail: OverridableComponent<DetailProps, HTMLParagraphElement> =
   forwardRef(
     (

package/src/typography/ErrorMessage.tsx

@@ -19,6 +19,20 @@ export interface ErrorMessageProps
   spacing?: boolean;
 }
 
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link ErrorMessageProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <ErrorMessage level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </ErrorMessage>
+ * ```
+ */
 export const ErrorMessage: OverridableComponent<
   ErrorMessageProps,
   HTMLParagraphElement

package/src/typography/Heading.tsx

@@ -23,6 +23,20 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
   spacing?: boolean;
 }
 
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link HeadingProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Heading level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Heading>
+ * ```
+ */
 export const Heading: OverridableComponent<HeadingProps, HTMLHeadingElement> =
   forwardRef(
     ({ level = "1", size, spacing = false, className, as, ...rest }, ref) => {

package/src/typography/Ingress.tsx

@@ -14,6 +14,20 @@ export interface IngressProps
   spacing?: boolean;
 }
 
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link IngressProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Ingress level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Ingress>
+ * ```
+ */
 export const Ingress: OverridableComponent<IngressProps, HTMLParagraphElement> =
   forwardRef(({ className, spacing, as: Component = "p", ...rest }, ref) => (
     <Component

package/src/typography/Label.tsx

@@ -19,6 +19,20 @@ export interface LabelProps
   spacing?: boolean;
 }
 
+/**
+ * Part of a set of components for displaying text with consistent typography.
+ *
+ * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/typography)
+ * @see 🏷️ {@link LabelProps}
+ * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
+ *
+ * @example
+ * ```jsx
+ *     <Label level="1" size="xlarge">
+ *       Pengestøtte når du er syk
+ *     </Label>
+ * ```
+ */
 export const Label: OverridableComponent<LabelProps, HTMLLabelElement> =
   forwardRef(
     (