@navikt/ds-react 0.18.3 → 0.18.4

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;
   /**

package/src/tooltip/Tooltip.tsx

@@ -25,6 +25,7 @@ import { useId } from "../util";
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
    * Element tooltip anchors to
+   * @note Needs to be React.ReactElement, does not support multiple children/react fragment
    */
   children: React.ReactElement & React.RefAttributes<HTMLElement>;
   /**
@@ -32,7 +33,8 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
    */
   open?: boolean;
   /**
-   * Tells tooltip to start in open state
+   * Tells tooltip to start in open state.
+   * Use sparingly synce hover/focus on other elements will close it
    * @note "open"-prop overwrites this
    */
   defaultOpen?: boolean;
@@ -42,8 +44,8 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
    */
   placement?: "top" | "right" | "bottom" | "left";
   /**
-   *  Toggles rendering of arrow
-   *  @default true
+   * Toggles rendering of arrow
+   * @default true
    */
   arrow?: boolean;
   /**
@@ -52,17 +54,17 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
    */
   offset?: number;
   /**
-   * Content shown in tooltip
+   * Text-content inside tooltip
    */
   content: string;
   /**
-   * Sets max allowed character length
+   * Sets max allowed character length.
    * @default 80
    */
   maxChar?: number;
   /**
    * Adds a delay in milliseconds before opening tooltip
-   * @default 300
+   * @default 150
    */
   delay?: number;
   /**

package/src/typography/BodyLong.tsx

@@ -14,7 +14,7 @@ export interface BodyLongProps
    */
   children: React.ReactNode;
   /**
-   * Adds margins to typo
+   * Adds margin-bottom
    */
   spacing?: boolean;
 }

package/src/typography/BodyShort.tsx

@@ -14,7 +14,7 @@ export interface BodyShortProps
    */
   children: React.ReactNode;
   /**
-   * Adds margins to typo
+   * Adds margin-bottom
    */
   spacing?: boolean;
 }

package/src/typography/Detail.tsx

@@ -14,7 +14,7 @@ export interface DetailProps
    */
   children: React.ReactNode;
   /**
-   * Adds margins to typo
+   * Adds margin-bottom
    */
   spacing?: boolean;
 }

package/src/typography/Heading.tsx

@@ -9,7 +9,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
    */
   level?: "1" | "2" | "3" | "4" | "5" | "6";
   /**
-   * Sizes from largest "2xl" to smallest "s"
+   * Changes text-sizing
    */
   size: "xlarge" | "large" | "medium" | "small" | "xsmall";
   /**
@@ -17,7 +17,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
    */
   children: React.ReactNode;
   /**
-   * Adds margins to typo
+   * Adds margin-bottom
    * @default false
    */
   spacing?: boolean;

package/src/typography/Ingress.tsx

@@ -9,7 +9,7 @@ export interface IngressProps
    */
   children: React.ReactNode;
   /**
-   * Adds margins to typo
+   * Adds margin-bottom
    */
   spacing?: boolean;
 }

package/src/typography/Label.tsx

@@ -13,7 +13,7 @@ export interface LabelProps extends React.HTMLAttributes<HTMLParagraphElement> {
    */
   children: React.ReactNode;
   /**
-   * Adds margins to typo
+   * Adds margin-bottom
    */
   spacing?: boolean;
 }