chore: go over react props and jsdoc

.changeset/popular-tools-impress.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**Checkbox**: Rename `validation` to `error`

.changeset/ten-mirrors-pretend.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+**Radio**: Rename `validation` to `error`

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/Alert/index.ts

@@ -1 +1,2 @@
-export * from './Alert';
+export { Alert } from './Alert';
+export type { AlertProps } from './Alert';

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

@@ -22,16 +22,12 @@ 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} />
- * ```
+ * <Badge count={5} maxCount={10} />
  *
  * @example with children
- * ```jsx
- * <Badge color='accent'>
- *  <Icon />
+ * <Badge count={5} maxCount={10}>
+ *   <Icon />
  * </Badge>
- * ```
  */
 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/Badge/index.ts

@@ -1,6 +1,12 @@
 import { Badge as BadgeElm } from './Badge';
 import { BadgePosition } from './BadgePosition';
 
+/**
+ * `Badge` is a non-interactive component for displaying status with or without numbers.
+ *
+ * @example without children
+ * <Badge count={5} maxCount={10} />
+ */
 const Badge = Object.assign(BadgeElm, { Position: BadgePosition });
 
 Badge.Position.displayName = 'Badge.Position';

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/Breadcrumbs/index.ts

@@ -4,17 +4,22 @@ import { BreadcrumbsLink } from './BreadcrumbsLink';
 import { BreadcrumbsList } from './BreadcrumbsList';
 
 /**
- * Breadcrumbs are used to visualize the current page path.
+ * `Breadcrumbs` is a component that displays a list of breadcrumbs.
+ *
  * @example
- * <Breadcrumbs aria-label="You are here:">
- *  <Breadcrumbs.Link aria-label="Go back to level 2">Level 2</Breadcrumbs.Link>
+ * <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>Level 1</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 2</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 3</Breadcrumbs.Link></Breadcrumbs.Item>
- *   <Breadcrumbs.Item><Breadcrumbs.Link>Level 4</Breadcrumbs.Link></Breadcrumbs.Item>
+ *    <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>
+ * </Breadcrumbs>
  */
 export const Breadcrumbs = Object.assign(BreadcrumbsParent, {
   List: BreadcrumbsList,

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

@@ -11,14 +11,16 @@ export type ButtonProps = MergeRight<
   {
     /**
      * Specify which variant to use
-     * @default primary
+     * @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/Card/index.ts

@@ -1,6 +1,16 @@
 import { Card as CardParent } from './Card';
 import { CardBlock } from './CardBlock';
 
+/**
+ * Card component to present content in a structured way.
+ *
+ * @example
+ * <Card>
+ *  <Card.Block>Header</Card.Block>
+ *  <Card.Block>Content</Card.Block>
+ *  <Card.Block>Footer</Card.Block>
+ * </Card>
+ */
 const Card = Object.assign(CardParent, {
   Block: CardBlock,
 });

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?: ReactNode;
+    /**
+     * Error message for field
+     */
+    error?: ReactNode;
   } & LabelRequired
 >;
 
 /**
  * Checkbox used to select multiple options.
+ *
  * @example
  * <Checkbox label="I agree" value="agree" />
  */
@@ -37,7 +48,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
       children,
       label,
       description,
-      validation,
+      error,
       ...rest
     },
     ref,
@@ -47,7 +58,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         <Input type='checkbox' ref={ref} {...rest} />
         {!!label && <Label weight='regular'>{label}</Label>}
         {!!description && <div data-field='description'>{description}</div>}
-        {!!validation && <ValidationMessage>{validation}</ValidationMessage>}
+        {!!error && <ValidationMessage>{error}</ValidationMessage>}
       </Field>
     );
   },

packages/react/src/components/Checkbox/index.ts

@@ -1 +1,2 @@
-export * from './Checkbox';
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox';

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/Details/index.ts

@@ -3,11 +3,12 @@ import { DetailsContent } from './DetailsContent';
 import { DetailsSummary } from './DetailsSummary';
 
 /**
- * Details are used to toggle the visibility of content.
+ * Details component, contains `Details.Summary` and `Details.Content` components.
+ *
  * @example
  * <Details>
- *  <Details.Summary>Heading 1</Details.Summary>
- *  <Details.Content>Content 1</Details.Content>
+ *  <Details.Summary>Header</Details.Summary>
+ *  <Details.Content>Content</Details.Content>
  * </Details>
  */
 const Details = Object.assign(DetailsParent, {

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. Uses `hr` element.
+ *
+ * @example
+ * <Divider />
+ */
 export const Divider = forwardRef<HTMLHRElement, DividerProps>(function Divider(
   { className, ...rest },
   ref,

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

@@ -10,13 +10,41 @@ 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 with TriggerContext
+ * <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>
+ *
+ * @example without TriggerContext
+ * <Button popovertarget="my-dropdown">Trigger</Button>
+ * <Dropdown id="my-dropdown">
+ *   <Dropdown.Heading>Heading</Dropdown.Heading>
+ *   <Dropdown.List>
+ *     <Dropdown.Item>
+ *       <Dropdown.Button>Item</Dropdown.Button>
+ *     </Dropdown.Item>
+ *   </Dropdown.List>
+ * </Dropdown>
+ */
 export const Dropdown = forwardRef<HTMLDivElement, DropdownProps>(
   function DropdownContent(
     { placement = 'bottom-end', className, ...rest },