@navikt/ds-react 6.1.1 → 6.2.0

package/src/stepper/Stepper.tsx

@@ -5,7 +5,7 @@ import { StepperContext } from "./context";
 
 export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   /**
-   * <Stepper.Step /> elements
+   * `<Stepper.Step />` elements.
    */
   children: React.ReactNode;
   /**
@@ -15,16 +15,18 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
   orientation?: "horizontal" | "vertical";
   /**
    * Current active step.
-   * @note Stepper index starts at 1, not 0
+   *
+   * Stepper index starts at 1, not 0.
    */
   activeStep: number;
   /**
-   * Callback for next activeStep
-   * @note Stepper index starts at 1, not 0
+   * Callback for next `activeStep`.
+   *
+   * Stepper index starts at 1, not 0.
    */
   onStepChange?: (step: number) => void;
   /**
-   * Makes stepper non-interactive if false
+   * Makes stepper non-interactive if false.
    * @default true
    */
   interactive?: boolean;

package/src/table/AnimateHeight.tsx

@@ -51,7 +51,7 @@ interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   duration?: number;
   /**
-   * @default ease
+   * @default "ease"
    */
   easing?: string;
   height: Height;

package/src/tabs/TabList.tsx

@@ -15,7 +15,7 @@ import { TabsContext } from "./context";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * <Tabs.Tab /> elements
+   * `<Tabs.Tab />` elements
    */
   children: React.ReactNode;
 }

package/src/tabs/Tabs.tsx

@@ -11,34 +11,34 @@ export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
   children: React.ReactNode;
   /**
-   * Changes padding and font-size
+   * Changes padding and font-size.
    * @default "medium"
    */
   size?: "medium" | "small";
   /**
-   * onChange callback for selected Tab
+   * onChange callback for selected Tab.
    */
   onChange?: (value: string) => void;
   /**
-   * Controlled selected value
+   * Controlled selected value.
    */
   value?: string;
   /**
-   * If not controlled, a default-value needs to be set
+   * If not controlled, a default-value needs to be set.
    */
   defaultValue?: string;
   /**
-   * Automatically activates tab on focus/navigation
+   * Automatically activates tab on focus/navigation.
    * @default false
    */
   selectionFollowsFocus?: boolean;
   /**
-   * Loops back to start when navigating past last item
+   * Loops back to start when navigating past last item.
    * @default false
    */
   loop?: boolean;
   /**
-   * Icon position in Tab
+   * Icon position in Tab.
    * @default "left"
    */
   iconPosition?: "left" | "top";

package/src/timeline/Timeline.tsx

@@ -20,13 +20,15 @@ export interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Decides startingpoint in timeline.
    * Defaults to earliest date among the timeline periods.
-   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
+   *
+   * Using this disables use of ZoomButtons. You will need to control zooming yourself.
    */
   startDate?: Date;
   /**
    * Decides end-date for timeline.
    * Defaults to the latest date among the timeline periods.
-   * @note Using this disables use of ZoomButtons. You will need to control zooming yourself.
+   *
+   * Using this disables use of ZoomButtons. You will need to control zooming yourself.
    */
   endDate?: Date;
   /**
@@ -63,7 +65,8 @@ interface TimelineComponent
 
 /**
  * A component that displays a timeline of events. Meant for Internal systems.
- * @note Component is made for desktop enviroments and will start having issues on smaller screens.
+ *
+ * Component is made for desktop enviroments and will start having issues on smaller screens.
  *
  * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/timeline)
  * @see 🏷️ {@link TimelineProps}

package/src/timeline/period/index.tsx

@@ -38,8 +38,9 @@ export interface TimelinePeriodProps
    */
   children?: React.ReactNode;
   /**
-   * Visual active inidcation on period
-   * @note Make sure only one period is active at a time
+   * Visual active inidcation on period.
+   *
+   * Make sure only one period is active at a time.
    */
   isActive?: boolean;
 }

package/src/tooltip/Tooltip.tsx

@@ -22,8 +22,9 @@ import { useMergeRefs } from "../util/hooks/useMergeRefs";
 
 export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   /**
-   * Element tooltip anchors to
-   * @note Needs to be React.ReactElement, does not support multiple children/react fragment
+   * Element tooltip anchors to.
+   *
+   * Needs to be React.ReactElement, does not support multiple children/react fragment
    */
   children: React.ReactElement & React.RefAttributes<HTMLElement>;
   /**
@@ -32,45 +33,51 @@ export interface TooltipProps extends HTMLAttributes<HTMLDivElement> {
   open?: boolean;
   /**
    * Tells tooltip to start in open state.
-   * Use sparingly synce hover/focus on other elements will close it
-   * @note "open"-prop overwrites this
+   * Use _sparingly_ since hover/focus on other elements will close it.
+   *
+   * `open`-prop overwrites this.
    */
   defaultOpen?: boolean;
   /**
-   * Change handler for open
+   * Change handler for open.
    */
   onOpenChange?: (open: boolean) => void;
   /**
-   * Orientation for tooltip
+   * Orientation for tooltip.
    * @default "top"
    */
   placement?: "top" | "right" | "bottom" | "left";
   /**
-   * Toggles rendering of arrow
+   * Toggles rendering of arrow.
    * @default true
    */
   arrow?: boolean;
   /**
-   * Distance from anchor to tooltip
+   * Distance from anchor to tooltip.
    * @default 10px with arrow, 2px without arrow
    */
   offset?: number;
   /**
-   * Text-content inside tooltip
+   * Text-content inside tooltip.
    */
   content: string;
   /**
-   * Sets max allowed character length.
+   * Sets max character length.
+   *
+   * Ideally you should keep the length of the tooltip to a minimum (80 characters).
+   * Currently this prop only emits a warning in the console, which can be squelched
+   * by setting this to a larger number. However, before doing so you should _try_
+   * to shorten the content so that it fits into 80 characters.
    * @default 80
    */
   maxChar?: number;
   /**
-   * Adds a delay in milliseconds before opening tooltip
+   * Adds a delay in milliseconds before opening tooltip.
    * @default 150
    */
   delay?: number;
   /**
-   * List of Keyboard-keys for shortcuts
+   * List of Keyboard-keys for shortcuts.
    */
   keys?: string[];
 }