@navikt/ds-react 0.18.3 → 0.18.6

package/src/form/ConfirmationPanel.tsx

@@ -1,9 +1,14 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 import { BodyLong, Checkbox, CheckboxProps } from "..";
+import ErrorMessage from "./ErrorMessage";
+import { useFormField } from "./useFormField";
 
 export interface ConfirmationPanelProps
-  extends Omit<CheckboxProps, "children"> {
+  extends Omit<
+    CheckboxProps,
+    "children" | "indeterminate" | "hideLabel" | "error"
+  > {
   /**
    * Additional information on panel
    */
@@ -12,30 +17,50 @@ export interface ConfirmationPanelProps
    * Checkbox label
    */
   label: React.ReactNode;
+  /**
+   * Error message for element
+   */
+  error?: React.ReactNode;
+  /**
+   * Override internal errorId
+   */
+  errorId?: string;
 }
 
 export const ConfirmationPanel = forwardRef<
   HTMLDivElement,
   ConfirmationPanelProps
 >(({ className, children, label, ...props }, ref) => {
+  const { errorId, showErrorMsg, hasError, size, inputProps } = useFormField(
+    props,
+    "confirmationPanel"
+  );
+
   return (
     <div
       ref={ref}
-      className={cl("navds-confirmation-panel", className, {
-        "navds-confirmation-panel--small": props.size === "small",
-        "navds-confirmation-panel--error": !!props.error,
+      className={cl("navds-confirmation-panel", "navds-form-field", className, {
+        "navds-confirmation-panel--small": size === "small",
+        "navds-confirmation-panel--error": hasError,
         "navds-confirmation-panel--checked": !!props.checked,
       })}
     >
-      {children && (
-        <BodyLong
-          size={props.size}
-          className="navds-confirmation-panel__content"
-        >
-          {children}
-        </BodyLong>
-      )}
-      <Checkbox {...props}>{label}</Checkbox>
+      <div className="navds-confirmation-panel__inner">
+        {children && (
+          <BodyLong
+            size={props.size}
+            className="navds-confirmation-panel__content"
+          >
+            {children}
+          </BodyLong>
+        )}
+        <Checkbox {...props} {...inputProps} error={hasError} size={size}>
+          {label}
+        </Checkbox>
+      </div>
+      <div id={errorId} aria-relevant="additions removals" aria-live="polite">
+        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+      </div>
     </div>
   );
 });

package/src/form/Fieldset/Fieldset.tsx

@@ -7,7 +7,7 @@ import { useFieldset } from "./useFieldset";
 
 export type FieldsetContextProps = {
   /**
-   * Error message applied to element
+   * Error message applied to element,
    */
   error?: React.ReactNode;
   /**
@@ -18,6 +18,9 @@ export type FieldsetContextProps = {
    * Changes paddings, margins and font-sizes
    */
   size: "medium" | "small";
+  /**
+   * Sets fieldset and all form-children to disabled
+   */
   disabled: boolean;
 };
 

package/src/form/Select.tsx

@@ -9,11 +9,11 @@ export interface SelectProps
   extends FormFieldProps,
     Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
   /**
-   * Collection of <option>-elements
+   * Collection of <option />-elements
    */
   children: React.ReactNode;
   /**
-   * Expose the HTML size attribute
+   * Exposes the HTML size attribute
    */
   htmlSize?: number;
   /**

package/src/form/Switch.tsx

@@ -47,6 +47,7 @@ export interface SwitchProps
   loading?: boolean;
   /**
    * Positions switch on left/right side of label
+   * @default "left"
    */
   position?: "left" | "right";
 }

package/src/form/TextField.tsx

@@ -8,15 +8,15 @@ export interface TextFieldProps
   extends FormFieldProps,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
   /**
-   * The current value (controlled).
+   * Controlled value
    */
   value?: string;
   /**
-   * The default value (uncontrolled).
+   * Defaults input-value without needing controlled-state
    */
   defaultValue?: string;
   /**
-   * Expose the HTML size attribute
+   * Exposes the HTML size attribute
    */
   htmlSize?: number;
   /**
@@ -28,7 +28,7 @@ export interface TextFieldProps
    */
   label: React.ReactNode;
   /**
-   * Type of form control
+   * Type of form control. Picking the correct type helps user fill inn their required information
    * @default "text"
    */
   type?: "email" | "number" | "password" | "tel" | "text" | "url";

package/src/form/Textarea.tsx

@@ -13,18 +13,25 @@ export interface TextareaProps
   extends FormFieldProps,
     React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   /**
-   * Visually allowed length of content
+   * Allowed character-count for content
+   * @note This is just a visual validator, you need to set actual character-limits if needed
    */
   maxLength?: number;
+  /**
+   * Controlled value
+   */
   value?: string;
+  /**
+   * Defaults input-value without needing controlled-state
+   */
   defaultValue?: string;
   /**
-   * Maximum number of rows to display.
+   * Maximum number of character rows to display.
    * @bug Internal scrolling with `maxLength` scrolls over maxLength-text
    */
   maxRows?: number;
   /**
-   * Minimum number of rows to display.
+   * Minimum number of character-rows to display when empty.
    */
   minRows?: number;
   /**

package/src/form/checkbox/Checkbox.tsx

@@ -8,12 +8,12 @@ export interface CheckboxProps
   extends Omit<FormFieldProps, "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
-   * Checkbox has error
+   * Adds error indication on checkbox
    * @default false
    */
   error?: boolean;
   /**
-   * Label for checkbox
+   * Checkbox label
    */
   children: React.ReactNode;
   /**

package/src/form/checkbox/CheckboxGroup.tsx

@@ -18,11 +18,11 @@ export interface CheckboxGroupProps
     "onChange" | "errorPropagation" | "defaultValue"
   > {
   /**
-   * Checkboxes
+   * Collection of <Checkbox/>
    */
   children: React.ReactNode;
   /**
-   * Controlled state for group
+   * Controlled state for checkboxes.
    */
   value?: any[];
   /**

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

@@ -5,7 +5,7 @@ import ErrorSummaryItem, { ErrorSummaryItemType } from "./ErrorSummaryItem";
 
 export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * ErrorSummaryItems
+   * Collectipn of ErrorSummary.Item
    */
   children: React.ReactNode;
   /**
@@ -18,7 +18,7 @@ export interface ErrorSummaryProps extends HTMLAttributes<HTMLDivElement> {
    */
   heading?: React.ReactNode;
   /**
-   * Allows setting a different HTML <tag>
+   * Allows setting a different HTML h-tag
    * @default "h2"
    */
   headingTag?: React.ElementType<any>;

package/src/form/radio/Radio.tsx

@@ -8,7 +8,7 @@ export interface RadioProps
   extends Omit<FormFieldProps, "error" | "errorId">,
     Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "value"> {
   /**
-   * Label for radio
+   * Radio label
    */
   children: React.ReactNode;
   /**

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;
   /**
@@ -29,15 +29,15 @@ export interface RadioGroupProps
    */
   name?: string;
   /**
-   * Default checked radiobutton
+   * Default checked Radio
    */
   defaultValue?: any;
   /**
-   * Controlled state for Radiobutton
+   * Controlled state for Radio
    */
   value?: any;
   /**
-   * Returns current checked radiobutton in group
+   * Returns current checked Radio in group
    */
   onChange?: (value: any) => void;
   /**

package/src/form/search/Search.tsx

@@ -26,7 +26,7 @@ export interface SearchProps
   children?: React.ReactNode;
   /**
    * Search label
-   * @info Will be hidden by default, is required for accessibility reasons.
+   * @note Will be hidden by default, is required for accessibility reasons.
    */
   label: React.ReactNode;
   /**
@@ -53,7 +53,7 @@ export interface SearchProps
    */
   clearButton?: boolean;
   /**
-   * Changes button-variant
+   * Changes button-variant, "simple" removes button
    * @default "primary"
    */
   variant?: "primary" | "secondary" | "simple";

package/src/form/useFormField.ts

@@ -18,6 +18,7 @@ export interface FormFieldProps {
   size?: "medium" | "small";
   /**
    * Disables element
+   * @note Avoid using if possible for accessibility purposes
    */
   disabled?: boolean;
   /**

package/src/help-text/HelpText.tsx

@@ -1,4 +1,5 @@
 import { Helptext as HelpTextIcon } from "@navikt/ds-icons";
+import { Placement } from "@popperjs/core";
 import cl from "classnames";
 import React, { forwardRef, useRef, useState } from "react";
 import mergeRefs from "react-merge-refs";
@@ -8,9 +9,19 @@ export interface HelpTextProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     Pick<PopoverProps, "strategy" | "placement"> {
   /**
-   * Component content
+   * Helptext-dialog content
    */
   children: React.ReactNode;
+  /**
+   * Adds a title-tooltip with the given text
+   * @default "hjelp"
+   */
+  title?: string;
+  /**
+   * Default dialog-placement on open
+   * @default "top"
+   */
+  placement?: Placement;
 }
 
 export const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(

package/src/link-panel/LinkPanel.tsx

@@ -15,7 +15,8 @@ export interface LinkPanelProps
    */
   children?: React.ReactNode;
   /**
-   * Toggles border on panel
+   * Adds border to panel if true
+   * @default true
    */
   border?: boolean;
 }

package/src/loader/Loader.tsx

@@ -4,7 +4,7 @@ import { useId } from "..";
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
-   * Changes sizing
+   * Changes Loader width/height
    * 64px | 40px | 32px | 24px | 20px | 16px
    * @default "medium"
    */
@@ -14,12 +14,13 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
    * @default "venter..."
    */
   title?: React.ReactNode;
-  /*
-   * Background-circle in svg set to transparent
+  /**
+   * Sets svg-background to transparent
+   * @default false
    */
   transparent?: boolean;
   /**
-   * Colored variants for loader
+   * Colored variants for Loader
    * @default "neutral"
    */
   variant?: "neutral" | "interaction" | "inverted";

package/src/modal/Modal.tsx

@@ -16,11 +16,11 @@ export interface ModalProps {
    */
   open: boolean;
   /**
-   * Called when modal wants to close
+   * Callback for modal wanting to close
    */
   onClose: () => void;
   /**
-   * If modal should close on overlay click
+   * If modal should close on overlay click (click outside Modal)
    * @default true
    */
   shouldCloseOnOverlayClick?: boolean;
@@ -29,12 +29,12 @@ export interface ModalProps {
    */
   className?: string;
   /**
-   * Toggles addition of a X-button on modal
+   * Removes close-button(X) when false
    * @default true
    */
   closeButton?: boolean;
   /**
-   * Callback for getting parent element modal will attach to
+   * Callback for setting parent element modal will attach to
    */
   parentSelector?(): HTMLElement;
   "aria-labelledby"?: string;

package/src/pagination/Pagination.tsx

@@ -6,6 +6,7 @@ import { BodyShort } from "..";
 export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
   /**
    * Current page
+   * @note Pagination indexing starts at 1
    */
   page: number;
   /**

package/src/panel/Panel.tsx

@@ -8,7 +8,7 @@ export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
    */
   children: React.ReactNode;
   /**
-   * Toggles border on panel
+   * Adds a border to panel when true
    * @default false
    */
   border?: boolean;

package/src/popover/Popover.tsx

@@ -13,6 +13,10 @@ import { useClientLayoutEffect } from "..";
 import PopoverContent, { PopoverContentType } from "./PopoverContent";
 
 export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Popover content
+   */
+  children: React.ReactNode;
   /**
    * Element popover anchors to
    */
@@ -25,18 +29,15 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * onClose callback
    */
   onClose: () => void;
-  /**
-   * Popover content
-   */
-  children: React.ReactNode;
   /**
    * Orientation for popover
+   * @note Try to keep general usage to "top", "bottom", "left", "right"
    * @default "right"
    */
   placement?: Placement;
   /**
-   *  Toggles rendering of arrow
-   *  @default true
+   * Adds a arrow from dialog to anchor when true
+   * @default true
    */
   arrow?: boolean;
   /**

package/src/speech-bubble/SpeechBubble.tsx

@@ -4,7 +4,7 @@ import Bubble, { BubbleType } from "./Bubble";
 
 export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Children of type <Bubble />
+   * Children of type <SpeechBubble.Bubble />
    */
   children: React.ReactNode;
   /**
@@ -12,11 +12,11 @@ export interface SpeechBubbleProps extends HTMLAttributes<HTMLDivElement> {
    */
   topText?: React.ReactNode;
   /**
-   * Illustration for messenger
+   * Illustration for messenger. Regular text for initials works to
    */
   illustration: React.ReactNode;
   /**
-   * Background color bubbles
+   * Background color on bubbles
    */
   backgroundColor?: string;
   /**

package/src/step-indicator/Step.tsx

@@ -11,10 +11,12 @@ export interface StepIndicatorStepProps
   children: React.ReactNode;
   /**
    * Disables interaction with element
+   * @note We recommend not using disabled if possible
    */
   disabled?: boolean;
   /**
    * Handled by StepIndicator
+   * @private
    */
   index?: number;
 }

package/src/stepper/Step.tsx

@@ -6,11 +6,12 @@ import { Label, OverridableComponent } from "..";
 export interface StepperStepProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   /**
-   * Text content under indicator
+   * Text content by indicator
    */
   children: string;
   /**
    * Handled by Stepper
+   * @private
    */
   index?: number;
 }

package/src/table/ColumnHeader.tsx

@@ -9,7 +9,7 @@ export interface ColumnHeaderProps extends HeaderCellProps {
    */
   sortKey?: string;
   /**
-   * Column is sortable
+   * Column is sortable, adds indicators to show sorting
    * @default false
    */
   sortable?: boolean;

package/src/table/DataCell.tsx

@@ -6,7 +6,7 @@ import { TableContext } from "./Table";
 export interface DataCellProps
   extends React.TdHTMLAttributes<HTMLTableCellElement> {
   /**
-   * Content alignment
+   * Content alignment inside cell
    * @default "left"
    */
   align?: "left" | "center" | "right";

package/src/table/ExpandableRow.tsx

@@ -31,7 +31,7 @@ export interface ExpandableRowProps extends RowProps {
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Disable expansion
+   * Disable expansio
    * @default false
    */
   expansionDisabled?: boolean;

package/src/table/HeaderCell.tsx

@@ -7,7 +7,7 @@ export interface HeaderCellProps
   extends React.ThHTMLAttributes<HTMLTableCellElement> {
   scope?: string;
   /**
-   * Content alignment
+   * Content alignment inside cell
    * @default "left"
    */
   align?: "left" | "center" | "right";

package/src/tabs/Tab.tsx

@@ -7,11 +7,11 @@ import { TabsContext } from "./Tabs";
 export interface TabProps
   extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
   /**
-   * Content
+   * Tab label
    */
   label?: React.ReactNode;
   /**
-   * Icon
+   * Tab Icon
    */
   icon?: React.ReactNode;
   /**

package/src/tabs/TabList.tsx

@@ -7,7 +7,7 @@ import mergeRefs from "react-merge-refs";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Tab elements
+   * <Tabs.Tab /> elements
    */
   children: React.ReactNode;
   /**

package/src/tabs/TabPanel.tsx

@@ -4,7 +4,7 @@ import React, { forwardRef } from "react";
 
 export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Tab panel
+   * Tab panel content
    */
   children: React.ReactNode;
   /**

package/src/tabs/Tabs.tsx

@@ -7,9 +7,6 @@ import TabPanel, { TabPanelType } from "./TabPanel";
 
 export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
-  /**
-   * Tabs elements
-   */
   children: React.ReactNode;
   /**
    * Changes padding and font-size
@@ -17,7 +14,7 @@ export interface TabsProps
    */
   size?: "medium" | "small";
   /**
-   * onChange
+   * onChange callback for selected Tab
    */
   onChange?: (value: string) => void;
   /**

package/src/tag/Tag.tsx

@@ -4,16 +4,15 @@ import { BodyShort, Detail } from "..";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
   /**
-   * Tag
+   * Tag label
    */
   children: React.ReactNode;
   /**
-   * Changes background-color and border-color
-   *
+   * Changes background and border color
    */
   variant: "warning" | "error" | "info" | "success";
   /**
-   * Changes sizing of tag
+   * Changes padding and font-sizes
    * @default "medium"
    */
   size?: "medium" | "small";

package/src/toggle-group/ToggleGroup.tsx

@@ -29,7 +29,7 @@ export interface ToggleGroupProps
    */
   defaultValue?: string;
   /**
-   * Returns elements that wants to be active
+   * Callback for selected toggle
    */
   onChange: (value: string) => void;
   /**