@navikt/ds-react 5.12.5 → 5.14.0

package/src/table/ExpandableRow.tsx

@@ -1,8 +1,10 @@
-import { ChevronDownIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
-import React, { forwardRef, useState } from "react";
-import { useId } from "../util";
-import AnimateHeight from "../util/AnimateHeight";
+import React, { forwardRef } from "react";
+import { ChevronDownIcon } from "@navikt/aksel-icons";
+import { composeEventHandlers } from "../util/composeEventHandlers";
+import { useId } from "../util/hooks";
+import { useControllableState } from "../util/hooks/useControllableState";
+import AnimateHeight from "./AnimateHeight";
 import DataCell from "./DataCell";
 import Row, { RowProps } from "./Row";
 
@@ -65,45 +67,50 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
       expansionDisabled = false,
       expandOnRowClick = false,
       colSpan = 999,
+      onClick,
       ...rest
     },
-    ref
+    ref,
   ) => {
-    const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
+    const [_open, _setOpen] = useControllableState({
+      defaultValue: defaultOpen,
+      value: open,
+      onChange: onOpenChange,
+    });
+
     const id = useId();
-    const isOpen = open ?? internalOpen;
 
     const expansionHandler = (e) => {
-      onOpenChange?.(!isOpen);
-      if (open === undefined) {
-        setInternalOpen((oldOpen) => !oldOpen);
-      }
+      _setOpen((x) => !x);
       e.stopPropagation();
     };
 
     const onRowClick = (e) =>
       !isInteractiveTarget(e.target) && expansionHandler(e);
 
+    const handleRowClick = (
+      e: React.MouseEvent<HTMLTableRowElement, MouseEvent>,
+    ) => {
+      !expansionDisabled && expandOnRowClick && onRowClick(e);
+    };
+
     return (
       <>
         <Row
           {...rest}
           ref={ref}
           className={cl("navds-table__expandable-row", className, {
-            "navds-table__expandable-row--open": isOpen,
+            "navds-table__expandable-row--open": _open,
             "navds-table__expandable-row--expansion-disabled":
               expansionDisabled,
             "navds-table__expandable-row--clickable": expandOnRowClick,
           })}
-          onClick={(e) => {
-            !expansionDisabled && expandOnRowClick && onRowClick(e);
-            rest?.onClick?.(e);
-          }}
+          onClick={composeEventHandlers(onClick, handleRowClick)}
         >
           {togglePlacement === "right" && children}
           <DataCell
             className={cl("navds-table__toggle-expand-cell", {
-              "navds-table__toggle-expand-cell--open": isOpen,
+              "navds-table__toggle-expand-cell--open": _open,
             })}
           >
             {!expansionDisabled && (
@@ -111,24 +118,24 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
                 className="navds-table__toggle-expand-button"
                 type="button"
                 aria-controls={id}
-                aria-expanded={isOpen}
+                aria-expanded={_open}
                 onClick={expansionHandler}
               >
                 <ChevronDownIcon
                   className="navds-table__expandable-icon"
-                  title={isOpen ? "Vis mindre" : "Vis mer"}
+                  title={_open ? "Vis mindre" : "Vis mer"}
                 />
               </button>
             )}
           </DataCell>
           {togglePlacement === "left" && children}
         </Row>
-        <tr className="navds-table__expanded-row" aria-hidden={!isOpen} id={id}>
+        <tr className="navds-table__expanded-row" aria-hidden={!_open} id={id}>
           <td colSpan={colSpan} className="navds-table__expanded-row-cell">
             <AnimateHeight
               className="navds-table__expanded-row-collapse"
               innerClassName="navds-table__expanded-row-content"
-              height={isOpen ? "auto" : 0}
+              height={_open ? "auto" : 0}
               duration={250}
             >
               {content}
@@ -137,7 +144,7 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         </tr>
       </>
     );
-  }
+  },
 );
 
 function isInteractiveTarget(elm: HTMLElement) {
@@ -146,7 +153,7 @@ function isInteractiveTarget(elm: HTMLElement) {
   }
   if (
     ["BUTTON", "DETAILS", "LABEL", "SELECT", "TEXTAREA", "INPUT", "A"].includes(
-      elm.nodeName
+      elm.nodeName,
     )
   ) {
     return true;

package/src/table/Header.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface HeaderProps
   extends React.HTMLAttributes<HTMLTableSectionElement> {}

package/src/table/HeaderCell.tsx

@@ -9,6 +9,10 @@ export interface HeaderCellProps
    * @default "left"
    */
   align?: "left" | "center" | "right";
+  /**
+   * Adjusts font-size
+   */
+  textSize?: "medium" | "small";
 }
 
 export interface HeaderCellType
@@ -17,19 +21,20 @@ export interface HeaderCellType
   > {}
 
 export const HeaderCell: HeaderCellType = forwardRef(
-  ({ className, children, align, ...rest }, ref) => {
+  ({ className, children, align, textSize, ...rest }, ref) => {
     return (
       <th
         ref={ref}
         className={cl("navds-table__header-cell", "navds-label", className, {
           [`navds-table__header-cell--align-${align}`]: align,
+          "navds-label--small": textSize === "small",
         })}
         {...rest}
       >
         {children}
       </th>
     );
-  }
+  },
 );
 
 export default HeaderCell;

package/src/table/Row.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef } from "react";
 import cl from "clsx";
+import React, { forwardRef } from "react";
 
 export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
   /**
@@ -29,7 +29,7 @@ export const Row: RowType = forwardRef(
         "navds-table__row--shade-on-hover": shadeOnHover,
       })}
     />
-  )
+  ),
 );
 
 export default Row;

package/src/table/Table.tsx

@@ -87,7 +87,7 @@ export const Table = forwardRef(
       sort,
       ...rest
     },
-    ref
+    ref,
   ) => (
     <TableContext.Provider value={{ onSortChange, sort }}>
       <table
@@ -98,7 +98,7 @@ export const Table = forwardRef(
         })}
       />
     </TableContext.Provider>
-  )
+  ),
 ) as TableType;
 
 Table.Header = Header;

package/src/table/stories/table-async.stories.tsx

@@ -25,7 +25,7 @@ const updateData = async (url: string) => {
   const comparator = (
     a: Record<string, string | number | null>,
     b: Record<string, string | number | null>,
-    orderBy: string
+    orderBy: string,
   ) => {
     if ((b[orderBy] ?? "") < (a[orderBy] ?? "")) {
       return -1;
@@ -40,7 +40,7 @@ const updateData = async (url: string) => {
   const sort = newUrl.searchParams.get("sort");
 
   await new Promise((resolve) =>
-    setTimeout(resolve, Math.round(Math.random() * (1000 - 200) + 200))
+    setTimeout(resolve, Math.round(Math.random() * (1000 - 200) + 200)),
   );
 
   return {
@@ -69,7 +69,7 @@ export const Async = () => {
       page,
       sort: sort ? `${sort.orderBy}:${sort.direction}` : undefined,
     })}`,
-    (url) => updateData(url)
+    (url) => updateData(url),
   );
 
   if (!data) {
@@ -125,7 +125,7 @@ export const Async = () => {
                       sort?.direction === "ascending"
                         ? "descending"
                         : "ascending",
-                  }
+                  },
             )
           }
         >

package/src/table/stories/table.stories.tsx

@@ -1,26 +1,30 @@
 import React, { useState } from "react";
-import { Table } from "../";
-import { Alert, Button, Checkbox, Link } from "../..";
+import { Table, TableProps } from "../";
+import { Alert, Button, Checkbox, CheckboxGroup, Link } from "../..";
 
 export default {
   title: "ds-react/Table",
   component: Table,
 };
 
-const TableComponent = (props) => (
-  <Table {...props}>
+interface Props extends TableProps {
+  button?: boolean;
+  shadeOnHover?: boolean;
+}
+const TableComponent = ({ button, shadeOnHover, ...rest }: Props) => (
+  <Table {...rest}>
     <Table.Header>
       <Table.Row>
-        {props.button && <Table.HeaderCell>Action</Table.HeaderCell>}
+        {button && <Table.HeaderCell>Action</Table.HeaderCell>}
         <Table.HeaderCell>ID</Table.HeaderCell>
         <Table.HeaderCell>Fornavn</Table.HeaderCell>
-        <Table.HeaderCell>Etternavn</Table.HeaderCell>
-        <Table.HeaderCell>Rolle</Table.HeaderCell>
+        <Table.HeaderCell textSize="medium">Etternavn</Table.HeaderCell>
+        <Table.HeaderCell textSize="small">Rolle</Table.HeaderCell>
       </Table.Row>
     </Table.Header>
     <Table.Body>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -35,8 +39,8 @@ const TableComponent = (props) => (
         <Table.DataCell>Picard</Table.DataCell>
         <Table.DataCell>Kaptein</Table.DataCell>
       </Table.Row>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -51,8 +55,8 @@ const TableComponent = (props) => (
         <Table.DataCell>Riker</Table.DataCell>
         <Table.DataCell>Kommandør</Table.DataCell>
       </Table.Row>
-      <Table.Row shadeOnHover={props.shadeOnHover}>
-        {props.button && (
+      <Table.Row shadeOnHover={shadeOnHover}>
+        {button && (
           <Table.DataCell
             style={{
               paddingTop: 6,
@@ -64,8 +68,8 @@ const TableComponent = (props) => (
         )}
         <Table.HeaderCell>3</Table.HeaderCell>
         <Table.DataCell>Geordi</Table.DataCell>
-        <Table.DataCell>La Forge</Table.DataCell>
-        <Table.DataCell>Sjefsingeniør</Table.DataCell>
+        <Table.DataCell textSize="medium">La Forge</Table.DataCell>
+        <Table.DataCell textSize="small">Sjefsingeniør</Table.DataCell>
       </Table.Row>
     </Table.Body>
   </Table>
@@ -164,7 +168,7 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
         setList((oldList) =>
           oldList.includes(value)
             ? oldList.filter((id) => id !== value)
-            : [...oldList, value]
+            : [...oldList, value],
         ),
     ];
   };
@@ -229,22 +233,32 @@ const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
         </Table.Row>
         <Table.Row selected={selectedRows.includes("3")}>
           <Table.DataCell>
-            <Checkbox
-              size={size}
-              hideLabel
-              checked={selectedRows.includes("3")}
-              onChange={() => toggleSelectedRow("3")}
-              aria-labelledby={`x_r3-${size}`}
-            >
-              {" "}
-            </Checkbox>
+            <CheckboxGroup legend="velg flere felt" hideLegend>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+              <Checkbox
+                size={size}
+                hideLabel
+                checked={selectedRows.includes("3")}
+                onChange={() => toggleSelectedRow("3")}
+                aria-labelledby={`x_r3-${size}`}
+              >
+                {" "}
+              </Checkbox>
+            </CheckboxGroup>
           </Table.DataCell>
-          <Table.HeaderCell scope="row">
-            <span id={`x_r3-${size}`}>Rudolph Bachenmeier</span>
+          <Table.HeaderCell scope="row" colSpan={4}>
+            <span id={`x_r3-${size}`}>
+              Don&apos;t stack multiple checkboxes
+            </span>
           </Table.HeaderCell>
-          <Table.DataCell>32</Table.DataCell>
-          <Table.DataCell>Germany</Table.DataCell>
-          <Table.DataCell>70</Table.DataCell>
         </Table.Row>
       </Table.Body>
     </Table>

package/src/table/stories/tests/table.stories.tsx

@@ -1,5 +1,4 @@
-import { expect, jest } from "@storybook/jest";
-import { userEvent, within } from "@storybook/testing-library";
+import { expect, fn, userEvent, within } from "@storybook/test";
 import React from "react";
 import { Table } from "../..";
 
@@ -66,7 +65,7 @@ export const ClickableRowTest = {
     );
   },
   args: {
-    onOpenChange: jest.fn(),
+    onOpenChange: fn(),
   },
   play: async ({ canvasElement, args }) => {
     args.onOpenChange.mockClear();

package/src/tabs/Tab.tsx

@@ -2,7 +2,7 @@ import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, { forwardRef, useContext } from "react";
 import { BodyShort } from "../typography";
-import { OverridableComponent } from "../util";
+import { OverridableComponent } from "../util/types";
 import { TabsContext } from "./context";
 
 export interface TabProps
@@ -25,7 +25,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
   forwardRef(
     (
       { className, as: Component = "button", label, icon, value, ...rest },
-      ref
+      ref,
     ) => {
       const context = useContext(TabsContext);
 
@@ -45,7 +45,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
               className,
               {
                 "navds-tabs__tab--icon-only": icon && !label,
-              }
+              },
             )}
             {...rest}
           >
@@ -60,7 +60,7 @@ export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
           </Component>
         </RadixTabs.Trigger>
       );
-    }
+    },
   );
 
 export default Tab;

package/src/tabs/TabList.tsx

@@ -1,4 +1,3 @@
-import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
 import { TabsList } from "@radix-ui/react-tabs";
 import cl from "clsx";
 import React, {
@@ -9,7 +8,9 @@ import React, {
   useRef,
   useState,
 } from "react";
-import { debounce, mergeRefs } from "../util";
+import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
+import { debounce } from "../util";
+import { useMergeRefs } from "../util/hooks/useMergeRefs";
 import { TabsContext } from "./context";
 
 export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -23,7 +24,8 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
   ({ className, ...rest }, ref) => {
     const context = useContext(TabsContext);
     const listRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMemo(() => mergeRefs([listRef, ref]), [ref]);
+    const mergedRef = useMergeRefs(listRef, ref);
+
     const [displayScroll, setDisplayScroll] = useState({
       start: false,
       end: false,
@@ -43,10 +45,10 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
             showStartScroll === oldDisplayScroll.start &&
             showEndScroll === oldDisplayScroll.end
               ? oldDisplayScroll
-              : { start: showStartScroll, end: showEndScroll }
+              : { start: showStartScroll, end: showEndScroll },
           );
         }),
-      []
+      [],
     );
 
     useEffect(() => {
@@ -120,7 +122,7 @@ export const TabList = forwardRef<HTMLDivElement, TabListProps>(
         {showSteppers && <ScrollButton dir={1} hidden={!displayScroll.end} />}
       </div>
     );
-  }
+  },
 );
 
 export default TabList;

package/src/tabs/TabPanel.tsx

@@ -20,7 +20,7 @@ const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
       ref={ref}
       className={cl("navds-tabs__tabpanel", className)}
     />
-  )
+  ),
 );
 
 export default TabPanel;

package/src/tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta } from "@storybook/react";
 import React, { useState } from "react";
+import { DishwasherIcon, FreezerIcon, MugIcon } from "@navikt/aksel-icons";
 import { Tabs } from ".";
-import { FreezerIcon, MugIcon, DishwasherIcon } from "@navikt/aksel-icons";
 
 export default {
   title: "ds-react/Tabs",

package/src/tabs/Tabs.tsx

@@ -1,11 +1,11 @@
 import * as RadixTabs from "@radix-ui/react-tabs";
 import cl from "clsx";
-import React, { forwardRef, HTMLAttributes } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
-import { TabsContext } from "./context";
+import React, { HTMLAttributes, forwardRef } from "react";
+import { OverridableComponent } from "../util/types";
 import Tab, { TabProps } from "./Tab";
 import TabList, { TabListProps } from "./TabList";
 import TabPanel, { TabPanelProps } from "./TabPanel";
+import { TabsContext } from "./context";
 
 export interface TabsProps
   extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "dir"> {
@@ -105,7 +105,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
       iconPosition = "left",
       ...rest
     },
-    ref
+    ref,
   ) => {
     return (
       <RadixTabs.Root
@@ -126,7 +126,7 @@ export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
         </TabsContext.Provider>
       </RadixTabs.Root>
     );
-  }
+  },
 ) as TabsComponent;
 
 Tabs.Tab = Tab;

package/src/tag/Tag.tsx

@@ -1,5 +1,5 @@
-import React, { forwardRef, HTMLAttributes } from "react";
 import cl from "clsx";
+import React, { HTMLAttributes, forwardRef } from "react";
 import { BodyShort } from "../typography";
 
 export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
@@ -36,6 +36,10 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
    * @default "medium"
    */
   size?: "medium" | "small" | "xsmall";
+  /**
+   * Tag Icon
+   */
+  icon?: React.ReactNode;
 }
 
 /**
@@ -50,7 +54,7 @@ export interface TagProps extends HTMLAttributes<HTMLSpanElement> {
  * ```
  */
 export const Tag = forwardRef<HTMLSpanElement, TagProps>(
-  ({ className, variant, size = "medium", ...rest }, ref) => (
+  ({ children, className, variant, size = "medium", icon, ...rest }, ref) => (
     <BodyShort
       {...rest}
       ref={ref}
@@ -60,10 +64,13 @@ export const Tag = forwardRef<HTMLSpanElement, TagProps>(
         "navds-tag",
         className,
         `navds-tag--${variant}`,
-        `navds-tag--${size}`
+        `navds-tag--${size}`,
       )}
-    />
-  )
+    >
+      {icon && <span className="navds-tag__icon--left">{icon}</span>}
+      {children}
+    </BodyShort>
+  ),
 );
 
 export default Tag;

package/src/tag/tag.stories.tsx

@@ -1,6 +1,10 @@
-import React from "react";
 import type { Meta } from "@storybook/react";
+import React from "react";
+import { ComponentIcon } from "@navikt/aksel-icons";
 import { Tag, TagProps } from ".";
+import { HStack } from "../layout/stack";
+
+const sizes: TagProps["size"][] = ["xsmall", "small", "medium"];
 
 const variants: TagProps["variant"][] = [
   "warning",
@@ -52,7 +56,11 @@ export default {
 
 export const Default = {
   render: (props) => (
-    <Tag variant={props.variant} size={props.size}>
+    <Tag
+      variant={props.variant}
+      size={props.size}
+      icon={props.icon && <ComponentIcon aria-hidden />}
+    >
       {props.children}
     </Tag>
   ),
@@ -60,6 +68,7 @@ export const Default = {
   args: {
     children: "Id elit esse",
     variant: "info",
+    icon: false,
   },
 };
 
@@ -98,3 +107,20 @@ export const Variants = () => {
     </div>
   );
 };
+
+export const WithIcons = () => {
+  return (
+    <HStack gap="2" align="start">
+      {sizes.reverse().map((size) => (
+        <Tag
+          key={size}
+          variant="neutral-moderate"
+          size={size}
+          icon={<ComponentIcon aria-hidden />}
+        >
+          {size}
+        </Tag>
+      ))}
+    </HStack>
+  );
+};