@navikt/ds-react 0.16.17 → 0.16.20

package/src/modal/Modal.tsx

@@ -36,6 +36,11 @@ export interface ModalProps {
   "aria-labelledby"?: string;
   "aria-describedby"?: string;
   "aria-modal"?: boolean;
+  /**
+   * Sets aria-label on modal
+   * @warning This should be set if not using 'aria-labelledby' or 'aria-describedby'
+   */
+  "aria-label"?: string;
 }
 
 interface ModalComponent
@@ -62,6 +67,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
       "aria-describedby": ariaDescribedBy,
       "aria-labelledby": ariaLabelledBy,
       "aria-modal": ariaModal,
+      "aria-label": contentLabel,
       ...rest
     },
     ref
@@ -92,6 +98,7 @@ const Modal = forwardRef<ReactModal, ModalProps>(
           labelledby: ariaLabelledBy,
           modal: ariaModal,
         }}
+        contentLabel={contentLabel}
       >
         {children}
         {closeButton && (

package/src/modal/{stories/modal.stories.tsx → modal.stories.tsx}

@@ -16,9 +16,13 @@ export const All = () => {
   return (
     <>
       <button onClick={() => setOpen(true)}>Open modal</button>
-      <Modal open={open} onClose={() => setOpen(false)}>
+      <Modal
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="header123"
+      >
         <Modal.Content>
-          <h1>Header</h1>
+          <h1 id="header123">Header</h1>
           <h2>subheader</h2>
           <p>Cupidatat irure ipsum veniam ad in esse.</p>
           <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
@@ -32,9 +36,10 @@ export const All = () => {
         shouldCloseOnOverlayClick={false}
         open={openTwo}
         onClose={() => setOpenTwo(false)}
+        aria-labelledby="header123"
       >
         <Modal.Content>
-          <h1>Header</h1>
+          <h1 id="header123">Header</h1>
           <h2>subheader</h2>
           <p>
             Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
@@ -54,10 +59,9 @@ export const All = () => {
         open={openThree}
         closeButton={false}
         onClose={() => setOpenThree(false)}
+        aria-label="Min modal"
       >
         <Modal.Content>
-          <h1>Header</h1>
-          <h2>subheader</h2>
           <p>Cupidatat irure ipsum veniam ad in esse.</p>
           <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
         </Modal.Content>

package/src/table/ColumnHeader.tsx

@@ -0,0 +1,70 @@
+import React, { forwardRef, useContext } from "react";
+import { Down, Up } from "@navikt/ds-icons";
+import { TableContext } from "..";
+import HeaderCell, { HeaderCellProps } from "./HeaderCell";
+
+interface ColumnHeaderProps extends HeaderCellProps {
+  /**
+   * Key to sort by
+   */
+  sortKey?: string;
+  /**
+   * Column is sortable
+   * @default false
+   */
+  sortable?: boolean;
+}
+
+export interface ColumnHeaderType
+  extends React.ForwardRefExoticComponent<
+    ColumnHeaderProps & React.RefAttributes<HTMLTableCellElement>
+  > {}
+
+const ColumnHeader: ColumnHeaderType = forwardRef(
+  ({ className, children, sortable = false, sortKey, ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    if (sortable && !sortKey) {
+      console.warn("ColumnHeader with `sortable=true` must have a sortKey.");
+    }
+
+    return (
+      <HeaderCell
+        scope="col"
+        ref={ref}
+        className={className}
+        aria-sort={
+          sortable
+            ? context?.sort?.orderBy === sortKey
+              ? context?.sort?.direction
+              : "none"
+            : undefined
+        }
+        {...rest}
+      >
+        {sortable ? (
+          <button
+            className="navds-table__sort-button"
+            onClick={
+              sortable && sortKey
+                ? () => context?.onSortChange?.(sortKey)
+                : undefined
+            }
+          >
+            {children}
+            {context?.sort?.orderBy === sortKey &&
+            context?.sort?.direction === "descending" ? (
+              <Down aria-label="sorter synkende" />
+            ) : (
+              <Up aria-label="sorter stigende" />
+            )}
+          </button>
+        ) : (
+          children
+        )}
+      </HeaderCell>
+    );
+  }
+);
+
+export default ColumnHeader;

package/src/table/DataCell.tsx

@@ -3,7 +3,13 @@ import cl from "classnames";
 import { BodyShort } from "..";
 import { TableContext } from ".";
 
-interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}
+interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+  /**
+   * Content alignment
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
+}
 
 export interface DataCellType
   extends React.ForwardRefExoticComponent<
@@ -11,14 +17,16 @@ export interface DataCellType
   > {}
 
 const DataCell: DataCellType = forwardRef(
-  ({ className, children = "", ...rest }, ref) => {
+  ({ className, children = "", align, ...rest }, ref) => {
     const context = useContext(TableContext);
 
     return (
       <BodyShort
         as="td"
         ref={ref}
-        className={cl("navds-table__data-cell", className)}
+        className={cl("navds-table__data-cell", className, {
+          [`navds-table__data-cell--align-${align}`]: align,
+        })}
         size={context?.size}
         {...rest}
       >

package/src/table/HeaderCell.tsx

@@ -2,8 +2,14 @@ import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
 import { Label, TableContext } from "..";
 
-interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+export interface HeaderCellProps
+  extends React.ThHTMLAttributes<HTMLTableCellElement> {
   scope?: string;
+  /**
+   * Content alignment
+   * @default "left"
+   */
+  align?: "left" | "center" | "right";
 }
 
 export interface HeaderCellType
@@ -12,14 +18,16 @@ export interface HeaderCellType
   > {}
 
 const HeaderCell: HeaderCellType = forwardRef(
-  ({ className, children, ...rest }, ref) => {
+  ({ className, children, align, ...rest }, ref) => {
     const context = useContext(TableContext);
 
     return (
       <Label
         as="th"
         ref={ref}
-        className={cl("navds-table__header-cell", className)}
+        className={cl("navds-table__header-cell", className, {
+          [`navds-table__header-cell--align-${align}`]: align,
+        })}
         size={context?.size}
         {...rest}
       >

package/src/table/Table.tsx

@@ -3,9 +3,15 @@ import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
 import Row, { RowType } from "./Row";
+import ColumnHeader, { ColumnHeaderType } from "./ColumnHeader";
 import HeaderCell, { HeaderCellType } from "./HeaderCell";
 import DataCell, { DataCellType } from "./DataCell";
 
+export interface SortState {
+  orderBy: string;
+  direction: "ascending" | "descending";
+}
+
 export interface TableProps
   extends React.TableHTMLAttributes<HTMLTableElement> {
   /**
@@ -18,6 +24,14 @@ export interface TableProps
    * @default false
    */
   zebraStripes?: boolean;
+  /**
+   * Sort state
+   */
+  sort?: SortState;
+  /**
+   * Callback whens sort state changes
+   */
+  onSortChange?: (sortKey?: string) => void;
 }
 
 export interface TableType
@@ -29,17 +43,30 @@ export interface TableType
   Row: RowType;
   DataCell: DataCellType;
   HeaderCell: HeaderCellType;
+  ColumnHeader: ColumnHeaderType;
 }
 
 export interface TableContextProps {
   size: "medium" | "small";
+  onSortChange?: (sortKey: string) => void;
+  sort?: SortState;
 }
 
 export const TableContext = createContext<TableContextProps | null>(null);
 
 const Table = forwardRef(
-  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
-    <TableContext.Provider value={{ size }}>
+  (
+    {
+      className,
+      zebraStripes = false,
+      size = "medium",
+      onSortChange,
+      sort,
+      ...rest
+    },
+    ref
+  ) => (
+    <TableContext.Provider value={{ size, onSortChange, sort }}>
       <table
         {...rest}
         ref={ref}
@@ -54,6 +81,7 @@ const Table = forwardRef(
 Table.Header = Header;
 Table.Body = Body;
 Table.Row = Row;
+Table.ColumnHeader = ColumnHeader;
 Table.HeaderCell = HeaderCell;
 Table.DataCell = DataCell;