chore: go over react props and jsdoc

packages/react/src/components/Alert/Alert.tsx

@@ -10,16 +10,18 @@ export type AlertProps = MergeRight<
   {
     /**
      * Sets color and icon.
-     * @default info
+     *
+     * @default 'info'
      */
     'data-color'?: SeverityColors;
   }
 >;
 
 /**
  * Alerts are used to inform users about important information, warnings, errors, or success.
+ *
  * @example
- * <Alert color='info'>Dette er en informasjonsmelding</Alert>
+ * <Alert data-color='info'>Dette er en informasjonsmelding</Alert>
  */
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
   { 'data-color': color = 'info', className, ...rest },

packages/react/src/components/Badge/Badge.tsx

@@ -22,16 +22,7 @@ export type BadgeProps = MergeRight<
  * `Badge` is a non-interactive component for displaying status with or without numbers.
  *
  * @example without children
- * ```jsx
- * <Badge color='accent' count={5} />
- * ```
- *
- * @example with children
- * ```jsx
- * <Badge color='accent'>
- *  <Icon />
- * </Badge>
- * ```
+ * <Badge count={5} maxCount={10} />
  */
 export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
   { className, count, maxCount, ...rest },

packages/react/src/components/Badge/BadgePosition.tsx

@@ -20,6 +20,15 @@ export type BadgePositionProps = MergeRight<
   }
 >;
 
+/**
+ * `BadgePosition` is a component that positions the badge.
+ *
+ * @example
+ * <BadgePosition placement='top-right' overlap='circle'>
+ *  <Badge count={5} maxCount={10} />
+ *  <Element />
+ * </BadgePosition>
+ */
 export const BadgePosition = forwardRef<HTMLSpanElement, BadgePositionProps>(
   function BadgePlacement(
     { className, overlap = 'rectangle', placement = 'top-right', ...rest },

packages/react/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -14,6 +14,24 @@ export type BreadcrumbsProps = MergeRight<
   }
 >;
 
+/**
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
+ * @example
+ * <Breadcrumbs aria-label='Du er her:' {...args}>
+ *  <Breadcrumbs.Link href='#' aria-label='Tilbake til Nivå 1'>
+ *    Nivå 1
+ *  </Breadcrumbs.Link>
+ *  <Breadcrumbs.List>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 1</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *    <Breadcrumbs.Item>
+ *      <Breadcrumbs.Link href='#'>Nivå 2</Breadcrumbs.Link>
+ *    </Breadcrumbs.Item>
+ *  </Breadcrumbs.List>
+ * </Breadcrumbs>
+ */
 export const Breadcrumbs = forwardRef<HTMLElement, BreadcrumbsProps>(
   ({ 'aria-label': ariaLabel = 'Du er her:', className, ...rest }, ref) => (
     <nav

packages/react/src/components/Button/Button.tsx

@@ -14,11 +14,13 @@ export type ButtonProps = MergeRight<
      * @default primary
      */
     variant?: 'primary' | 'secondary' | 'tertiary';
-    /** Toggle icon only styling, pass icon as children
+    /**
+     * Toggle icon only styling, pass icon as children
      * @default false
      */
     icon?: boolean;
-    /** Toggle loading state
+    /**
+     * Toggle loading state
      * @default false
      */
     loading?: boolean;
@@ -37,6 +39,7 @@ export type ButtonProps = MergeRight<
 
 /**
  * Button used for interaction
+ *
  * @example
  * <Button>Click me</Button>
  */

packages/react/src/components/Card/Card.tsx

@@ -14,6 +14,10 @@ export type CardProps = MergeRight<
      * @default neutral
      */
     'data-color'?: 'subtle' | DefaultProps['data-color'];
+    /**
+     * Change the default rendered element for the one passed as a child, merging their props and behavior.
+     * @default false
+     */
     asChild?: boolean;
     /** Instances of `Card.Block`, `Divider` or other React nodes */
     children: ReactNode;
@@ -22,6 +26,7 @@ export type CardProps = MergeRight<
 
 /**
  * Card component to present content in a structured way.
+ *
  * @example
  * <Card>
  *  <Card.Block>Header</Card.Block>

packages/react/src/components/Checkbox/Checkbox.tsx

@@ -10,21 +10,32 @@ import { ValidationMessage } from '../ValidationMessage';
 export type CheckboxProps = MergeRight<
   DefaultProps & Omit<InputProps, 'type' | 'role' | 'size'>,
   {
-    /** Optional aria-label */
+    /**
+     * Optional aria-label
+     */
     'aria-label'?: string;
-    /** Checkbox label */
+    /**
+     * Checkbox label
+     */
     label?: ReactNode;
-    /** Description for field */
+    /**
+     * Description for field
+     */
     description?: ReactNode;
-    /** Value of the `input` element */
+    /**
+     * Value of the `input` element
+     */
     value?: InputProps['value'];
-    /** Validation message for field */
+    /**
+     * Validation message for field
+     */
     validation?: ReactNode;
   } & LabelRequired
 >;
 
 /**
  * Checkbox used to select multiple options.
+ *
  * @example
  * <Checkbox label="I agree" value="agree" />
  */

packages/react/src/components/Chip/Chips.tsx

@@ -27,6 +27,7 @@ export type ChipCheckboxProps = MergeRight<
 
 /**
  * Chip.Button used for interaction
+ *
  * @example
  * <Chip.Button>Click me</Chip.Button>
  */

packages/react/src/components/Details/Details.tsx

@@ -28,9 +28,13 @@ export type DetailsProps = MergeRight<
      * @default false
      */
     defaultOpen?: boolean;
-    /** Callback function when Details toggles due to click on summary or find in page-search */
+    /**
+     * Callback function when Details toggles due to click on summary or find in page-search
+     */
     onToggle?: (event: Event) => void;
-    /** Content should be one `<Details.Summary>` and `<Details.Content>` */
+    /**
+     * Content should be one `<Details.Summary>` and `<Details.Content>`
+     */
     children?: ReactNode;
   }
 > &
@@ -41,10 +45,11 @@ export type DetailsProps = MergeRight<
 
 /**
  * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <DetailsSummary>Header</DetailsSummary>
- *  <DetailsContent>Content</DetailsContent>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 export const Details = forwardRef<HTMLDetailsElement, DetailsProps>(

packages/react/src/components/Details/DetailsContent.tsx

@@ -5,6 +5,7 @@ export type DetailsContentProps = HTMLAttributes<HTMLDivElement>;
 
 /**
  * Details content component, contains the content of the details item.
+ *
  * @example
  * <DetailsContent>Content</DetailsContent>
  */

packages/react/src/components/Details/DetailsSummary.tsx

@@ -8,6 +8,7 @@ export type DetailsSummaryProps = {
 
 /**
  * Details summary component, contains a the heading to toggle the content.
+ *
  * @example
  * <Details.Summary>Heading</Details.Summary>
  */

packages/react/src/components/Divider/Divider.tsx

@@ -4,6 +4,12 @@ import { forwardRef } from 'react';
 
 export type DividerProps = HTMLAttributes<HTMLHRElement>;
 
+/**
+ * Divider component, used to separate content.
+ *
+ * @example
+ * <Divider />
+ */
 export const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(
   { className, ...rest },
   ref,

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -10,13 +10,30 @@ import type { PopoverProps } from '../Popover';
 export type DropdownProps = MergeRight<
   DefaultProps & Omit<PopoverProps, 'variant'>,
   {
-    /** The placement of the dropdown
+    /**
+     * The placement of the dropdown
      * @default bottom-end
      */
     placement?: Placement;
   }
 >;
 
+/**
+ * Dropdown component, used to display a list of options.
+ *
+ * @example
+ * <Dropdown.TriggerContext>
+ *   <Dropdown.Trigger>Dropdown trigger</Dropdown.Trigger>
+ *   <Dropdown placement='bottom-end'>
+ *     <Dropdown.Heading>Dropdown</Dropdown.Heading>
+ *     <Dropdown.List>
+ *       <Dropdown.Item>
+ *         <Dropdown.Button>Option</Dropdown.Button>
+ *       </Dropdown.Item>
+ *     </Dropdown.List>
+ *   </Dropdown>
+ * </Dropdown.TriggerContext>
+ */
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   function DropdownContent(
     { placement = 'bottom-end', className, ...rest },

packages/react/src/components/Dropdown/DropdownTriggerContext.tsx

@@ -8,13 +8,16 @@ export type DropdownTriggerContextProps = {
 
 /**
  * DropdownTriggerContext enables use of the `.Trigger` for the Dropdown component.
+ *
  * @example
  * <Dropdown.TriggerContext>
  *  <Dropdown.Trigger>Dropdown</Dropdown.Trigger>
  *  <Dropdown>
  *   <Dropdown.Heading>Heading</Dropdown.Heading>
  *    <Dropdown.List>
- *      <Dropdown.Item>Button 1</Dropdown.Item>
+ *      <Dropdown.Item>
+ *        <Dropdown.Button>Button</Dropdown.Button>
+ *      </Dropdown.Item>
  *    </Dropdown.List>
  *  </Dropdown>
  * </Dropdown.TriggerContext>

packages/react/src/components/ErrorSummary/ErrorSummary.tsx

@@ -18,6 +18,18 @@ export type ErrorSummaryProps = Omit<
   'data-color'
 >;
 
+/**
+ * ErrorSummary component, used to display a list of errors.
+ *
+ * @example
+ * <ErrorSummary>
+ *   <ErrorSummary.Heading>Heading</ErrorSummary.Heading>
+ *   <ErrorSummary.List>
+ *     <ErrorSummary.Item>Error 1</ErrorSummary.Item>
+ *     <ErrorSummary.Item>Error 2</ErrorSummary.Item>
+ *   </ErrorSummary.List>
+ * </ErrorSummary>
+ */
 export const ErrorSummary = forwardRef<HTMLDivElement, ErrorSummaryProps>(
   function ErrorSummary(
     {