@navikt/ds-react 6.1.0 → 6.2.0

package/src/copybutton/CopyButton.tsx

@@ -14,7 +14,7 @@ import copy from "../util/copy";
 export interface CopyButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   /**
-   * 'xsmall' should only be used in tables
+   * `"xsmall"` should _only_ be used in tables.
    * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
@@ -23,11 +23,11 @@ export interface CopyButtonProps
    */
   variant?: "action" | "neutral";
   /**
-   * Text to copy to clipboard
+   * Text to copy to clipboard.
    */
   copyText: string;
   /**
-   *  Optional text in button
+   *  Optional text in button.
    */
   text?: string;
   /**
@@ -36,36 +36,38 @@ export interface CopyButtonProps
    */
   activeText?: string;
   /**
-   * Callback when 'copied'-state is active
+   * Callback that is called when internal copy-state changes.
+   *
+   * @param state `true` when copy-state is activated, `false` when copy-state is deactivated.
    */
   onActiveChange?: (state: boolean) => void;
   /**
-   *  Icon shown when button is not clicked
+   *  Icon shown when button is not clicked.
    * @default <FilesIcon />
    */
   icon?: React.ReactNode;
   /**
-   * Icon shown when active
+   * Icon shown when active.
    * @default <CheckmarkIcon />
    */
   activeIcon?: React.ReactNode;
   /**
-   * Timeout duration in milliseconds
+   * Timeout duration in milliseconds.
    * @default 2000
    */
   activeDuration?: number;
   /**
-   * Accessible label for icon (ignored if text is set)
-   * @default 'Kopier'
+   * Accessible label for icon (ignored if text is set).
+   * @default "Kopier"
    */
   title?: string;
   /**
-   * Accessible label for icon in active-state (ignored if text is set)
-   * @default 'Kopiert'
+   * Accessible label for icon in active-state (ignored if text is set).
+   * @default "Kopiert"
    */
   activeTitle?: string;
   /**
-   * Icon position in button
+   * Icon position in button.
    * @default "left"
    */
   iconPosition?: "left" | "right";

package/src/date/datepicker/datepicker.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import { Meta, StoryObj } from "@storybook/react";
 import { isSameDay } from "date-fns";
 import React, { useId, useState } from "react";

package/src/date/datepicker/types.ts

@@ -16,7 +16,7 @@ export type MultipleMode = {
   min?: number;
   max?: number;
   /**
-   * Allows selecting a week at a time. Only used with mode="multiple".
+   * Allows selecting a week at a time. Only used with `mode` is set to "multiple".
    */
   onWeekNumberClick?: DayPickerBase["onWeekNumberClick"];
 };
@@ -83,21 +83,22 @@ export interface DatePickerDefaultProps
    */
   showWeekNumber?: boolean;
   /**
-   * Open state for user-controlled state. Component controlled by default
+   * Open state for user-controlled state. Component controlled by default.
    */
   open?: boolean;
   /**
-   * onClose callback for user-controlled state
+   * onClose callback for user-controlled state.
    */
   onClose?: () => void;
   /**
-   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used
+   * onOpenToggle callback for user-controlled state. Only called if `<DatePicker.Input />` is used.
    */
   onOpenToggle?: () => void;
   /**
-   * Avoid using if possible!
+   * **Avoid using if possible!**
+   *
    * Changes what CSS position property to use.
-   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
+   * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape.
    * @default See Popover
    */
   strategy?: "absolute" | "fixed";

package/src/date/hooks/useDatepicker.tsx

@@ -49,10 +49,11 @@ export interface UseDatepickerOptions
    */
   onValidate?: (val: DateValidationT) => void;
   /**
-   * Allows input of with 'yy' year format.
+   * Allows input of with `yy` year format.
+   *
+   * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * e.g. In 2024 this equals to 1944 - 2043.
    * @default true
-   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
-   * In 2024 this equals to 1944 - 2043
    */
   allowTwoDigitYear?: boolean;
 }

package/src/date/hooks/useMonthPicker.tsx

@@ -36,10 +36,11 @@ export interface UseMonthPickerOptions
    */
   defaultYear?: Date;
   /**
-   * Allows input of with 'yy' year format.
-   * @default true
-   * @Note Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
+   * Allows input of with `yy` year format.
+   *
+   * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
    * In 2024 this equals to 1944 - 2043
+   * @default true
    */
   allowTwoDigitYear?: boolean;
 }

package/src/date/monthpicker/types.ts

@@ -69,7 +69,8 @@ export interface MonthPickerProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   onYearChange?: (y?: Date) => void;
   /**
-   * Avoid using if possible!
+   * **Avoid using if possible!**
+   *
    * Changes what CSS position property to use
    * You want to use "fixed" if parent wrapper has position relative, but you want popover to escape
    * @default "absolute"

package/src/date/parts/DateInput.tsx

@@ -21,7 +21,7 @@ export interface DateInputProps
   hideLabel?: boolean;
   /**
    * Changes padding and font-sizes
-   * @default medium
+   * @default "medium"
    */
   size?: "medium" | "small";
   /**

package/src/expansion-card/ExpansionCardTitle.tsx

@@ -7,7 +7,7 @@ export interface ExpansionCardTitleProps
   children: React.ReactNode;
   /**
    * Changes text-sizing
-   * @default medium
+   * @default "medium"
    */
   size?: "large" | "medium" | "small";
 }

package/src/form/checkbox/CheckboxGroup.tsx

@@ -19,7 +19,7 @@ export interface CheckboxGroupProps
     "onChange" | "errorPropagation" | "defaultValue"
   > {
   /**
-   * Collection of <Checkbox/>
+   * Collection of `<Checkbox/>`.
    */
   children: React.ReactNode;
   /**
@@ -27,11 +27,11 @@ export interface CheckboxGroupProps
    */
   value?: any[];
   /**
-   * Default checked checkboxes on render
+   * Default checked checkboxes on render.
    */
   defaultValue?: any[];
   /**
-   * Returns current checked checkboxes in group
+   * Returns current checked checkboxes in group.
    */
   onChange?: (value: any[]) => void;
 }

package/src/form/checkbox/types.ts

@@ -5,12 +5,12 @@ export interface CheckboxProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
-   * Adds error indication on checkbox
+   * Adds error indication on checkbox.
    * @default false
    */
   error?: boolean;
   /**
-   * Id for error resulting in checkbox having error
+   * Id for error resulting in checkbox having error.
    */
   errorId?: string;
   /**
@@ -26,12 +26,12 @@ export interface CheckboxProps
    */
   value?: any;
   /**
-   * Specify whether the Checkbox is in an indeterminate state
+   * Specify whether the Checkbox is in an indeterminate state.
    * @default false
    */
   indeterminate?: boolean;
   /**
-   * Adds a description to extend labling of Checkbox
+   * Adds a description to extend labling of Checkbox.
    */
   description?: string;
 }

package/src/form/combobox/types.ts

@@ -16,11 +16,11 @@ export interface ComboboxProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "value"> {
   /**
-   * Combobox label
+   * Combobox label.
    */
   label: React.ReactNode;
   /**
-   * List of options to use for autocompletion
+   * List of options to use for autocompletion.
    */
   options: string[];
   /**
@@ -28,11 +28,11 @@ export interface ComboboxProps
    */
   allowNewValues?: boolean;
   /**
-   * If "true" adds a button to clear the value in the input field
+   * If `true` adds a button to clear the value in the input field
    */
   clearButton?: boolean;
   /**
-   * Custom name for the clear button. Requires "clearButton" to be "true".
+   * Custom name for the clear button. Requires `clearButton` to be `true`.
    *
    * @default "Tøm"
    */
@@ -59,13 +59,13 @@ export interface ComboboxProps
    */
   isListOpen?: boolean;
   /**
-   * Set to "true" when doing an async search and waiting for new filteredOptions.
+   * Set to `true` when doing an async search and waiting for new filteredOptions.
    *
    * Will show a spinner in the dropdown and announce to screen readers that it is loading.
    */
   isLoading?: boolean;
   /**
-   * Set to "true" to allow multiple selections
+   * Set to `true` to allow multiple selections.
    *
    * This will display selected values as a list of Chips in front of the input field, instead of a selection replacing the value of the input.
    *
@@ -82,18 +82,18 @@ export interface ComboboxProps
     value?: string,
   ) => void;
   /**
-   * Callback function triggered whenever the input field is cleared
+   * Callback function triggered whenever the input field is cleared.
    *
    * @param event
    * @returns
    */
   onClear?: (event: React.PointerEvent | React.KeyboardEvent) => void;
   /**
-   * Callback function triggered whenever an option is selected or de-selected
+   * Callback function triggered whenever an option is selected or de-selected.
    *
-   * @param option
-   * @param isSelected - Whether the option has been selected or unselected
-   * @param isCustomOption - Whether the option comes from user input, instead of from the list
+   * @param option The selected option.
+   * @param isSelected Whether the option has been selected or unselected.
+   * @param isCustomOption Whether the option comes from user input, instead of from the list.
    * @returns
    */
   onToggleSelected?: (
@@ -113,25 +113,25 @@ export interface ComboboxProps
    */
   maxSelected?: MaxSelected;
   /**
-   * Set to "true" to enable inline autocomplete.
+   * Set to `true` to enable inline autocomplete.
    *
    * @default false
    */
   shouldAutocomplete?: boolean;
   /**
-   * When set to "true" displays selected options as Chips before the input field
+   * When set to `true` displays selected options as Chips before the input field
    *
    * @default true
    */
   shouldShowSelectedOptions?: boolean;
   /**
-   * When set to "true" displays the toggle button for opening/closing the dropdown list
+   * When set to `true` displays the toggle button for opening/closing the dropdown list
    *
    * @default true
    */
   toggleListButton?: boolean;
   /**
-   * Custom name for the toggle list-button. Requires "toggleListButton" to be "true".
+   * Custom name for the toggle list-button. Requires "toggleListButton" to be `true`.
    *
    * @default "Alternativer"
    */

package/src/form/error-summary/ErrorSummary.tsx

@@ -6,20 +6,20 @@ import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Collectipn of ErrorSummary.Item
+   * Collection of `ErrorSummary.Item`.
    */
   children: React.ReactNode;
   /**
-   * Changes padding and font-sizes
+   * Changes padding and font-sizes.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * Heading above links
+   * Heading above links.
    */
   heading?: React.ReactNode;
   /**
-   * Allows setting a different HTML h-tag
+   * Allows setting a different HTML h-tag.
    * @default "h2"
    */
   headingTag?: React.ElementType<any>;
@@ -30,7 +30,7 @@ interface ErrorSummaryComponent
     ErrorSummaryProps & React.RefAttributes<HTMLDivElement>
   > {
   /**
-   * Link to error
+   * Link to error.
    *
    * @see [🤖 OverridableComponent](https://aksel.nav.no/grunnleggende/kode/overridablecomponent) support
    *

package/src/form/radio/RadioGroup.tsx

@@ -21,7 +21,7 @@ export interface RadioGroupProps
     "onChange" | "errorPropagation" | "defaultValue"
   > {
   /**
-   * Collection of <Radio />-elements
+   * Collection of `<Radio />`-elements
    */
   children: React.ReactNode;
   /**

package/src/form/search/Search.tsx

@@ -26,8 +26,9 @@ export interface SearchProps
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "type"> {
   children?: React.ReactNode;
   /**
-   * Search label
-   * @note Will be hidden by default, is required for accessibility reasons.
+   * Search label.
+   *
+   * Will be hidden by default, is required for accessibility reasons.
    */
   label: React.ReactNode;
   /**

package/src/form/select/Select.tsx

@@ -8,27 +8,27 @@ import { FormFieldProps, useFormField } from "../useFormField";
 
 export interface SelectProps
   extends FormFieldProps,
-    Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    Omit<SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple"> {
   /**
-   * Collection of <option />-elements
+   * Collection of <option />-elements.
    */
   children: React.ReactNode;
   /**
-   * Exposes the HTML size attribute
+   * Exposes the HTML size attribute.
    */
   htmlSize?: number;
   /**
-   * Label for select
+   * Sets inline-style on select wrapper.
    */
-  label: React.ReactNode;
+  style?: React.CSSProperties;
   /**
-   * If enabled shows the label and description for screenreaders only
+   * Label for select.
    */
-  hideLabel?: boolean;
+  label: React.ReactNode;
   /**
-   * Sets inline-style on select wrapper
+   * Shows label and description for screenreaders only.
    */
-  style?: React.CSSProperties;
+  hideLabel?: boolean;
 }
 
 /**

package/src/form/select/select.stories.tsx

@@ -1,36 +1,15 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryFn, StoryObj } from "@storybook/react";
 import React from "react";
-import Select from "./Select";
+import Select, { SelectProps } from "./Select";
 
-export default {
+const meta: Meta<typeof Select> = {
   title: "ds-react/Select",
   component: Select,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-  },
   parameters: {
     chromatic: { disable: true },
   },
-} as Meta;
-
-type Story = StoryObj<typeof Select>;
+};
+export default meta;
 
 const content = (
   <>
@@ -40,16 +19,32 @@ const content = (
   </>
 );
 
-export const Default = {
-  render: (props) => {
-    return (
-      <Select {...props} label="Ipsum enim quis culpa">
-        {content}
-      </Select>
-    );
+export const Default: StoryFn<Omit<SelectProps, "children">> = (props) => (
+  <Select {...props}>{content}</Select>
+);
+Default.args = {
+  label: "Ipsum enim quis culpa",
+};
+Default.argTypes = {
+  description: {
+    type: "string",
+  },
+  size: {
+    control: { type: "radio" },
+    options: ["medium", "small"],
+  },
+  error: {
+    type: "string",
+  },
+  hideLabel: {
+    type: "boolean",
+  },
+  disabled: {
+    type: "boolean",
+  },
+  readOnly: {
+    type: "boolean",
   },
-
-  args: {},
 };
 
 export const Small = () => {
@@ -138,12 +133,12 @@ export const Readonly = () => {
   );
 };
 
-export const Chromatic: Story = {
+export const Chromatic: StoryObj<typeof Select> = {
   render: () => (
     <div>
       <div>
         <h2>Default</h2>
-        {Default.render?.({ label: "Ipsum enim quis culpa" })}
+        <Default label="Ipsum enim quis culpa" />
       </div>
       <div>
         <h2>Small</h2>

package/src/form/switch/Switch.tsx

@@ -36,24 +36,24 @@ export interface SwitchProps
   extends Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
-   * Switch-label
+   * Switch-label.
    */
   children: React.ReactNode;
   /**
-   * If enabled shows the label and description for screenreaders only
+   * If enabled shows the label and description for screenreaders only.
    */
   hideLabel?: boolean;
   /**
-   * Toggles loading state with loader-component on switch
+   * Toggles loading state with loader-component on switch.
    */
   loading?: boolean;
   /**
-   * Positions switch on left/right side of label
+   * Positions switch on left/right side of label.
    * @default "left"
    */
   position?: "left" | "right";
   /**
-   * Adds a description to extend labling of Switch
+   * Adds a description to extend labling of Switch.
    */
   description?: string;
 }

package/src/form/textarea/Textarea.tsx

@@ -17,7 +17,8 @@ export interface TextareaProps
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
    * Allowed character-count for content
-   * @note This is just a visual indicator! You will need to handle actual character-limits/validation if needed
+   *
+   * This is just a visual indicator! You will still need to handle actual character-limits/validation if needed.
    */
   maxLength?: number;
   /**
@@ -37,15 +38,15 @@ export interface TextareaProps
    */
   minRows?: number;
   /**
-   * Textarea label
+   * Textarea label.
    */
   label: React.ReactNode;
   /**
-   * If enabled shows the label and description for screenreaders only
+   * If enabled shows the label and description for screenreaders only.
    */
   hideLabel?: boolean;
   /**
-   * Enables resizing of field
+   * Enables resizing of field.
    */
   resize?: boolean | "vertical" | "horizontal";
   /**

package/src/form/useFormField.ts

@@ -5,32 +5,34 @@ import { FieldsetContext } from "./fieldset/context";
 
 export interface FormFieldProps {
   /**
-   * Error message for element
+   * Adds a description to extend labling of the field.
+   * Error message for element.
    */
   error?: React.ReactNode;
   /**
-   * Override internal errorId
+   * Override internal errorId.
    */
   errorId?: string;
   /**
-   * Changes font-size, padding and gaps
+   * Changes font-size, padding and gaps.
    */
   size?: "medium" | "small";
   /**
-   * Disables element
-   * @note Avoid using if possible for accessibility purposes
+   * **Avoid using if possible for accessibility purposes**.
+   *
+   * Disables element.
    */
   disabled?: boolean;
   /**
-   * Adds a description to extend labling of a field
+   * Adds a description to extend labling of a field.
    */
   description?: React.ReactNode;
   /**
-   * Override internal id
+   * Override internal id.
    */
   id?: string;
   /**
-   * Read only-state
+   * Read-only state.
    */
   readOnly?: boolean;
 }

package/src/layout/bleed/Bleed.tsx

@@ -9,7 +9,11 @@ export type BleedSpacingBlock = "0" | "px" | SpacingScale;
 
 export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
   /** **Negative** horizontal margin around children.
-   *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   * Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   *
+   * The `px` value is useful to nudge by just 1px.
+   * The `full` value is used to extend the margin to the full width of the parent.
+   *
    * @example
    * marginInline='4'
    * marginInline='4 5'
@@ -20,6 +24,10 @@ export interface BleedProps extends React.HTMLAttributes<HTMLDivElement> {
   >;
   /** **Negative** vertical margin around children.
    *  Accepts a spacing token or an object of spacing tokens for different breakpoints.
+   *
+   * The `px` value is useful to nudge by just 1px.
+   * This prop does **not** accept the `full` value.
+   *
    * @example
    * marginBlock='4'
    * marginBlock='4 5'