Lerna versionbump [ci skip]

- @navikt/ds-react@0.2.3

@navikt/ds-react/accordion/Accordion.tsx

@@ -1,16 +1,39 @@
 import React, { forwardRef, useEffect, useRef, useState } from "react";
 import cl from "classnames";
 import { UnmountClosed, Collapse } from "react-collapse";
-
 import { Expand } from "@navikt/ds-icons";
 import { v4 as uuidv4 } from "uuid";
 
 export interface AccordionProps
   extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Component content
+   */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Content on interactive surface of component
+   */
   heading: React.ReactNode;
+  /**
+   * Opens component if 'true', closes if 'false'
+   * Using this props removes automatic control of open-state
+   * @default false
+   */
   open?: boolean;
+  /**
+   * Callback for when user interacts with component
+   *
+   * @param {object} event
+   */
   onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+  /**
+   * Removes content-element from dom when closed
+   * @default false
+   */
   renderContentWhenClosed?: boolean;
 }
 

@navikt/ds-react/alert/Alert.tsx

@@ -8,8 +8,22 @@ import {
 } from "@navikt/ds-icons";
 
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Decides what design the alert will have
+   */
   variant: "error" | "warning" | "info" | "success";
+  /**
+   * Component content
+   */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Reduces padding on component
+   * @default "medium"
+   */
   size?: "medium" | "small";
 }
 

@navikt/ds-react/button/Button.tsx

@@ -2,7 +2,23 @@ import React, { forwardRef } from "react";
 import cl from "classnames";
 
 export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Decides component design and interactions
+   * @default "primary"
+   */
   variant?: "primary" | "secondary" | "action" | "danger";
+  /**
+   * Reduces internal padding for component
+   * @default "medium"
+   */
   size?: "medium" | "small";
 }
 

@navikt/ds-react/content-container/ContentContainer.tsx

@@ -1,7 +1,17 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 
-export type ContentContainerProps = HTMLAttributes<HTMLDivElement>;
+export interface ContentContainerProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @ignore
+   */
+  classNames?: string;
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+}
+
 const ContentContainer = forwardRef<HTMLDivElement, ContentContainerProps>(
   ({ children, className, ...rest }, ref) => (
     <div

@navikt/ds-react/grid/Cell.tsx

@@ -3,9 +3,29 @@ import cl from "classnames";
 
 type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface CellProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Component content
+   */
+  children?: React.ReactNode;
+  /**
+   * Cell columns on width < 448px
+   */
   xs: Column;
+  /**
+   * Cell columns on min-width: 448
+   */
   sm?: Column;
+  /**
+   * Cell columns on min-width: 648
+   */
   md?: Column;
+  /**
+   * Cell columns on min-width: 960px
+   */
   lg?: Column;
 }
 

@navikt/ds-react/grid/Grid.tsx

@@ -1,7 +1,16 @@
 import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 
-export type GridProps = HTMLAttributes<HTMLDivElement>;
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+}
 const Grid = forwardRef<HTMLDivElement, GridProps>(
   ({ children, className, ...rest }, ref) => (
     <div ref={ref} className={cl("navds-grid", className)} {...rest}>

@navikt/ds-react/internal-header/InternalHeader.tsx

@@ -2,7 +2,14 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 
 export interface InternalHeaderProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Component content
+   */
   children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
 }
 
 const InternalHeader = forwardRef<HTMLElement, InternalHeaderProps>(

@navikt/ds-react/internal-header/InternalHeaderTitle.tsx

@@ -2,7 +2,18 @@ import React, { forwardRef, HTMLAttributes, createElement } from "react";
 import cl from "classnames";
 
 export interface InternalHeaderTitleProps extends HTMLAttributes<HTMLElement> {
+  /**
+   * Component content
+   */
   children?: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * Tag this component will use. Usefull for defining a button/link
+   * @default "h1"
+   */
   element?: keyof React.ReactHTML;
 }
 

@navikt/ds-react/internal-header/InternalHeaderUser.tsx

@@ -3,7 +3,17 @@ import cl from "classnames";
 
 export interface InternalHeaderUserProps
   extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * @ignore
+   */
+  className?: string;
+  /**
+   * user name
+   */
   name: string;
+  /**
+   * user ident
+   */
   ident: string;
 }
 

@navikt/ds-react/link/Link.tsx

@@ -3,6 +3,14 @@ import cl from "classnames";
 
 export interface LinkProps
   extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Component content
+   */
+  children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
   /**
    * Link anchor should direct to
    */

@navikt/ds-react/modal/Modal.tsx

@@ -5,9 +5,6 @@ import mergeRefs from "react-merge-refs";
 import { Close } from "@navikt/ds-icons";
 import { Button } from "../index";
 
-// TODO: Has to be documented well that the user has to import react-modal and call
-// ReactModal.setAppElement("#root")
-
 export interface ModalProps {
   /**
    * Content of modal
@@ -27,7 +24,7 @@ export interface ModalProps {
    */
   shouldCloseOnOverlayClick?: boolean;
   /**
-   * User defined classname for wrapper element
+   * @ignore
    */
   className?: string;
   /**

@navikt/ds-react/modal/stories/modal.stories.tsx

@@ -1,13 +1,12 @@
 import React, { useState } from "react";
 import { Modal } from "../index";
-import ReactModal from "react-modal";
 
 export default {
   title: "ds-react/modal",
   component: Modal,
 };
 
-ReactModal.setAppElement("#root");
+Modal.setAppElement("#root");
 
 export const All = () => {
   const [open, setOpen] = useState(true);

@navikt/ds-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",

@navikt/ds-react/popover/Popover.tsx

@@ -27,11 +27,19 @@ export interface PopoverProps extends HTMLAttributes<HTMLDivElement> {
    * Content rendered inside popover
    */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
   /**
    * Orientation for popover
-   * @default 'auto'
+   * @default "right"
    */
   placement?: Placement;
+  /**
+   * Small reduces padding on popover content
+   * @default "medium"
+   */
   size?: "medium" | "small";
 }
 

@navikt/ds-react/tag/Tag.tsx

@@ -2,7 +2,14 @@ import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "classnames";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Component content
+   */
   children: React.ReactNode;
+  /**
+   * @ignore
+   */
+  className?: string;
   /**
    * Changes background-color and border-color
    */
@@ -10,11 +17,12 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ children, className, variant }, ref) => {
+  ({ children, className, variant, ...rest }, ref) => {
     return (
       <span
         ref={ref}
         className={cl("navds-tag", className, `navds-tag--${variant}`)}
+        {...rest}
       >
         {children}
       </span>