@navikt/ds-react 6.1.1 → 6.2.0

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'

package/src/layout/box/Box.tsx

@@ -13,11 +13,11 @@ import {
 } from "../utilities/types";
 
 export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Background color. Accepts a color token. */
+  /** CSS `background-color` property. Accepts a color token. */
   background?: BackgroundToken;
-  /** Border color. Accepts a color token. */
+  /** CSS `border-color` property. Accepts a color token. */
   borderColor?: BorderColorToken;
-  /** Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints.
+  /** CSS `border-radius` property. Accepts a radius token, or an object of radius tokens for different breakpoints.
    * @example
    * borderRadius='full'
    * borderRadius='0 full large small'
@@ -25,13 +25,13 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   borderRadius?: ResponsiveProp<SpaceDelimitedAttribute<BorderRadiiToken>>;
   /**
-   * Border-width. If this is not set there will be no border.
+   * CSS `border-width` property. If this is not set there will be no border.
    * @example
    * borderWidth='2'
    * borderWidth='1 2 3 4'
    */
   borderWidth?: SpaceDelimitedAttribute<"0" | "1" | "2" | "3" | "4" | "5">;
-  /** Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
+  /** Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints.
    * @example
    * padding='4'
    * padding={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}

package/src/layout/grid/HGrid.tsx

@@ -6,13 +6,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface HGridProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * Number of columns to display. Can be a number, a string with a unit or tokens for spesific breakpoints.
+   * Number of columns to display. Can be a number, a string with a unit, or tokens for specific breakpoints.
    * Sets `grid-template-columns`, so `fr`, `minmax` etc. works.
    * @example
    * columns={{ sm: 1, md: 1, lg: "1fr auto", xl: "1fr auto"}}
-   * @example
    * columns={3}
-   * @example
    * columns="repeat(3, minmax(0, 1fr))"
    */
   columns?: ResponsiveProp<number | string>;

package/src/layout/page/Page.tsx

@@ -12,7 +12,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
   as?: "div" | "body";
   /**
    * Background color. Accepts a color token.
-   * @default bg-default
+   * @default "bg-default"
    */
   background?: keyof typeof bgColors.a | "surface-subtle";
   /**
@@ -25,7 +25,7 @@ export interface PageProps extends React.HTMLAttributes<HTMLElement> {
   footerPosition?: "belowFold";
   /**
    * Adds a standardised padding of 4rem between content and footer
-   * @default block-end
+   * @default "end"
    */
   contentBlockPadding?: "end" | "none";
 }

package/src/layout/responsive/Responsive.tsx

@@ -6,13 +6,11 @@ import { BreakpointsAlias } from "../utilities/types";
 export interface ResponsiveProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * @example
-   * above='md'
+   * Will show/hide element above breakpoint (inclusive)
    */
   above?: Exclude<BreakpointsAlias, "xs">;
   /**
-   * @example
-   * below='md'
+   * Will show/hide element below breakpoint (inclusive)
    */
   below?: Exclude<BreakpointsAlias, "xs">;
   /**

package/src/layout/stack/Stack.tsx

@@ -7,7 +7,11 @@ import { ResponsiveProp, SpacingScale } from "../utilities/types";
 export interface StackProps extends HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   /**
-   * Justify-content
+   * CSS `justify-content` property.
+   *
+   * @example
+   * justify='center'
+   * justify={{xs: 'start', sm: 'center', md: 'end', lg: 'space-around', xl: 'space-between'}}
    */
   justify?: ResponsiveProp<
     | "start"
@@ -18,22 +22,32 @@ export interface StackProps extends HTMLAttributes<HTMLDivElement> {
     | "space-evenly"
   >;
   /**
-   * Align-items
+   * CSS `align-items` property.
+   *
+   * @example
+   * align='center'
+   * align={{xs: 'start', sm: 'center', md: 'end', lg: 'baseline', xl: 'stretch'}}
    */
   align?: ResponsiveProp<"start" | "center" | "end" | "baseline" | "stretch">;
   /**
-   * flex-wrap
+   * Sets the CSS `flex-wrap` property.
    */
   wrap?: boolean;
   /**
+   * CSS `gap` property.
+   *
    * @example
    * gap='4'
    * gap={{xs: '2', sm: '3', md: '4', lg: '5', xl: '6'}}
    */
   gap?: ResponsiveProp<SpacingScale>;
   /**
-   * flex-direction
+   * CSS `flex-direction` property.
    * @default "row"
+   *
+   * @example
+   * direction='row'
+   * direction={{xs: 'row', sm: 'column'}}
    */
   direction?: ResponsiveProp<"row" | "column">;
 }

package/src/list/types.ts

@@ -20,7 +20,7 @@ export interface ListProps extends React.HTMLAttributes<HTMLDivElement> {
   headingTag?: React.ElementType<any>;
   /**
    * Changes padding, height and font-size
-   * @default medium
+   * @default "medium"
    */
   size?: "medium" | "small";
 }

package/src/loader/Loader.tsx

@@ -35,6 +35,7 @@ export interface LoaderProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
   /**
    * Allows getting a ref to the component instance.
    * Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
+   *
    * @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
    */
   ref?: React.Ref<SVGSVGElement>;

package/src/modal/Modal.tsx

@@ -165,7 +165,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     const shouldHandleModalClick = closeOnBackdropClick && !needPolyfill;
 
     /**
-     * @note `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
+     * `closeOnBackdropClick` has issues on polyfill when nesting modals (DatePicker)
      */
     const handleModalClick = (
       endEvent: React.MouseEvent<HTMLDialogElement>,
@@ -191,7 +191,7 @@ export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
     };
 
     /**
-     * @note onCancel fires when you press `Esc`
+     * onCancel fires when you press `Esc`
      */
     const handleModalCancel = (
       event: React.SyntheticEvent<HTMLDialogElement, Event>,

package/src/modal/types.ts

@@ -1,25 +1,24 @@
 interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
   /**
-   * Content for the header. Alteratively you can use <Modal.Header> instead for more control,
-   * but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
+   * Content for the header. Alteratively you can use `<Modal.Header>` instead for more control, but then you have to set `aria-label` or `aria-labelledby` on the modal manually.
    */
   header?: {
     label?: string;
     icon?: React.ReactNode;
     heading: string;
     /**
-     * Heading size
+     * Heading size.
      * @default "medium"
      * */
     size?: "medium" | "small";
     /**
-     * Removes close-button (X) when false
+     * Removes close-button (X) when false.
      * @default true
      */
     closeButton?: boolean;
   };
   /**
-   * Modal content
+   * Modal content.
    */
   children: React.ReactNode;
   /**
@@ -36,12 +35,13 @@ interface ModalPropsBase extends React.DialogHTMLAttributes<HTMLDialogElement> {
    * Called when the user tries to close the modal by one of the built-in methods.
    * Used if you want to ask the user for confirmation before closing.
    * @warning Will not always be called when pressing Esc. See `onCancel` for more info.
-   * @returns Whether to close the modal
+   * @returns Whether to close the modal or not
    */
   onBeforeClose?: () => boolean;
   /**
-   * *Sometimes** called when the user presses the Esc key.
-   * @warning *Some browsers does not always trigger this event. Chrome only triggers it if you have
+   * _Sometimes*_ called when the user presses the Esc key.
+   *
+   *  *: Some browsers does not always trigger this event. Chrome only triggers it if you have
    *  interacted with the modal, and will not trigger it a second time if you press Esc twice in a row.
    */
   onCancel?: React.ReactEventHandler<HTMLDialogElement>;

package/src/pagination/Pagination.tsx

@@ -9,8 +9,9 @@ import PaginationItem, {
 
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
-   * Current page
-   * @note Pagination indexing starts at 1
+   * Current page.
+   *
+   * Pagination indexing starts at 1.
    */
   page: number;
   /**

package/src/pagination/PaginationItem.tsx

@@ -16,7 +16,7 @@ export interface PaginationItemProps extends ButtonProps {
   page: number;
   /**
    * Changes padding, height and font-size
-   * @default medium
+   * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
 }

package/src/popover/Popover.tsx

@@ -42,7 +42,8 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
   onClose: () => void;
   /**
    * Default orientation of popover
-   * @note Try to keep general usage to "top", "bottom", "left", "right"
+   *
+   * Try to keep general usage to "top", "bottom", "left", "right".
    * @default "top"
    */
   placement?:

package/src/read-more/ReadMore.tsx

@@ -8,20 +8,20 @@ import { useControllableState } from "../util/hooks/useControllableState";
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   /**
-   * Content inside ReadMore
+   * Content inside ReadMore.
    */
   children: React.ReactNode;
   /**
-   * ReadMore header content
+   * ReadMore header content.
    */
   header: React.ReactNode;
   /**
-   * Opens component if 'true', closes if 'false'
-   * Using this prop removes automatic control of open-state
+   * Opens component if `true`, closes if `false`.
+   * Using this prop removes automatic control of open-state.
    */
   open?: boolean;
   /**
-   * Initially open
+   * Initially open.
    * @default false
    */
   defaultOpen?: boolean;
@@ -30,8 +30,8 @@ export interface ReadMoreProps
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Changes fontsize for content
-   * @default medium
+   * Changes fontsize for content.
+   * @default "medium"
    */
   size?: "medium" | "small";
 }

package/src/stepper/Step.tsx

@@ -8,21 +8,21 @@ import { StepperContext } from "./context";
 export interface StepperStepProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
-   * Text content by indicator
+   * Text content by indicator.
    */
   children: string;
   /**
-   * Handled by Stepper, overwriting may break component logic
+   * Handled by Stepper, overwriting may break component logic.
    * @private
    */
   unsafe_index?: number;
   /**
-   * Makes step-indicator a checkmark
+   * Makes step-indicator a checkmark.
    * @default false
    */
   completed?: boolean;
   /**
-   * Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
+   * Makes step non-interactive if false. Step will be set to a `<div>`, overriding `as`-prop.
    * @default true
    */
   interactive?: boolean;