@navikt/ds-react 0.13.2 → 0.14.1

package/src/loader/stories/loader.stories.mdx

@@ -85,19 +85,3 @@ Størrelsen justeres også automatisk, slik at alt man trenger er å sette Loade
     <Loader />
   </Button>
 </Canvas>
-
-## Overskrive farger for å sikre kontrast
-
-I de casene der man må justere fargene for å ha bedre kontrast så kan man endre på selve css-variablene som bli brukt
-
-```css
---navds-loader-color-foreground: var(--navds-color-gray-40);
---navds-loader-color-background: var(--navds-color-gray-10);
---navds-loader-color-neutral-foreground: var(--navds-color-gray-40);
---navds-loader-color-interaction-foreground: var(--navds-color-blue-50);
---navds-loader-color-inverted-foreground: var(--navds-color-white);
---navds-loader-color-inverted-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-transparent-background: transparent;
---navds-loader-color-on-button-background: rgba(255, 255, 255, 0.3);
---navds-loader-color-on-button-foreground: currentColor;
-```

package/src/popover/stories/popover.stories.tsx

@@ -17,7 +17,7 @@ const Template = (props) => {
     <>
       <div
         style={{
-          background: "var(--navds-color-gray-60)",
+          background: "var(--navds-global-color-gray-600)",
           textAlign: "center",
           width: "2rem",
           height: "2rem",

package/src/speech-bubble/stories/speechbubble.stories.mdx

@@ -80,8 +80,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
 <SpeechBubble
   illustration="OLA"
   position="left"
-  illustrationBgColor="var(--navds-color-lightblue-10)"
-  backgroundColor="var(--navds-color-lightblue-20)"
+  illustrationBgColor="var(--navds-global-color-lightblue-100)"
+  backgroundColor="var(--navds-global-color-lightblue-200)"
 >
   <SpeechBubble.Bubble>
     Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -93,8 +93,8 @@ Man kan endre bakgrunnsfargen selv med `illustrationBgColor` og `backgroundColor
   <SpeechBubble
     illustration="OLA"
     position="left"
-    illustrationBgColor="var(--navds-color-lightblue-10)"
-    backgroundColor="var(--navds-color-lightblue-20)"
+    illustrationBgColor="var(--navds-global-color-lightblue-100)"
+    backgroundColor="var(--navds-global-color-lightblue-200)"
   >
     <SpeechBubble.Bubble>
       Aute minim nisi sunt mollit duis sunt nulla minim non proident.

package/src/speech-bubble/stories/speechbubble.stories.tsx

@@ -14,7 +14,7 @@ export const All = () => {
       <SpeechBubble
         illustration={<Illustration />}
         topText="Ola Normann 01.01.21 14:00"
-        backgroundColor="var(--navds-color-lightblue-20)"
+        backgroundColor="var(--navds-global-color-lightblue-200)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.
@@ -42,7 +42,7 @@ export const All = () => {
           </div>
         }
         position="right"
-        backgroundColor="var(--navds-color-gray-10)"
+        backgroundColor="var(--navds-global-color-gray-100)"
       >
         <SpeechBubble.Bubble>
           Aute minim nisi sunt mollit duis sunt nulla minim non proident.

package/src/table/DataCell.tsx

@@ -1,5 +1,7 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { BodyShort } from "..";
+import { TableContext } from ".";
 
 interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
 
@@ -8,8 +10,22 @@ export interface DataCellType
     DataCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const DataCell: DataCellType = forwardRef(({ className, ...rest }, ref) => (
-  <td {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const DataCell: DataCellType = forwardRef(
+  ({ className, children = "", ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <BodyShort
+        as="td"
+        ref={ref}
+        className={cl("navds-table__data-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </BodyShort>
+    );
+  }
+);
 
 export default DataCell;

package/src/table/HeaderCell.tsx

@@ -1,15 +1,32 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { Label, TableContext } from "..";
 
-interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
+interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+  scope?: string;
+}
 
 export interface HeaderCellType
   extends React.ForwardRefExoticComponent<
     HeaderCellProps & React.RefAttributes<HTMLTableCellElement>
   > {}
 
-const HeaderCell: HeaderCellType = forwardRef(({ className, ...rest }, ref) => (
-  <th {...rest} ref={ref} className={cl("navds-table__cell", className)} />
-));
+const HeaderCell: HeaderCellType = forwardRef(
+  ({ className, children, ...rest }, ref) => {
+    const context = useContext(TableContext);
+
+    return (
+      <Label
+        as="th"
+        ref={ref}
+        className={cl("navds-table__header-cell", className)}
+        size={context?.size}
+        {...rest}
+      >
+        {children}
+      </Label>
+    );
+  }
+);
 
 export default HeaderCell;

package/src/table/Row.tsx

@@ -1,15 +1,29 @@
 import React, { forwardRef } from "react";
 import cl from "classnames";
 
-interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {}
+interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+  /**
+   * Row is selected
+   * @default false
+   */
+  selected?: boolean;
+}
 
 export interface RowType
   extends React.ForwardRefExoticComponent<
     RowProps & React.RefAttributes<HTMLTableRowElement>
   > {}
 
-const Row: RowType = forwardRef(({ className, ...rest }, ref) => (
-  <tr {...rest} ref={ref} className={cl("navds-table__row", className)} />
-));
+const Row: RowType = forwardRef(
+  ({ className, selected = false, ...rest }, ref) => (
+    <tr
+      {...rest}
+      ref={ref}
+      className={cl("navds-table__row", className, {
+        "navds-table__row--selected": selected,
+      })}
+    />
+  )
+);
 
 export default Row;

package/src/table/Table.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { createContext, forwardRef } from "react";
 import cl from "classnames";
 import Header, { HeaderType } from "./Header";
 import Body, { BodyType } from "./Body";
@@ -12,6 +12,11 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
    * @default "medium"
    */
   size?: "medium" | "small";
+  /**
+   * Zebra striped table
+   * @default false
+   */
+  zebraStripes?: boolean;
 }
 
 export interface TableType
@@ -25,13 +30,25 @@ export interface TableType
   HeaderCell: HeaderCellType;
 }
 
-const Table = forwardRef(({ className, size = "medium", ...rest }, ref) => (
-  <table
-    {...rest}
-    ref={ref}
-    className={cl("navds-table", `navds-table--${size}`, className)}
-  />
-)) as TableType;
+export interface TableContextProps {
+  size: "medium" | "small";
+}
+
+export const TableContext = createContext<TableContextProps | null>(null);
+
+const Table = forwardRef(
+  ({ className, zebraStripes = false, size = "medium", ...rest }, ref) => (
+    <TableContext.Provider value={{ size }}>
+      <table
+        {...rest}
+        ref={ref}
+        className={cl("navds-table", `navds-table--${size}`, className, {
+          "navds-table--zebra-stripes": zebraStripes,
+        })}
+      />
+    </TableContext.Provider>
+  )
+) as TableType;
 
 Table.Header = Header;
 Table.Body = Body;

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

@@ -1,6 +1,6 @@
-import React from "react";
+import React, { useState } from "react";
 import { Table } from "../index";
-import { Alert, Link } from "@navikt/ds-react";
+import { Alert, Checkbox, Link } from "@navikt/ds-react";
 
 export default {
   title: "ds-react/table",
@@ -8,70 +8,46 @@ export default {
 };
 
 export const All = () => {
+  const TableComponent = (props) => (
+    <Table {...props}>
+      <Table.Header>
+        <Table.Row>
+          <Table.HeaderCell>ID</Table.HeaderCell>
+          <Table.HeaderCell>Fornavn</Table.HeaderCell>
+          <Table.HeaderCell>Etternavn</Table.HeaderCell>
+          <Table.HeaderCell>Rolle</Table.HeaderCell>
+        </Table.Row>
+      </Table.Header>
+      <Table.Body>
+        <Table.Row>
+          <Table.HeaderCell>1</Table.HeaderCell>
+          <Table.DataCell>Jean-Luc</Table.DataCell>
+          <Table.DataCell>Picard</Table.DataCell>
+          <Table.DataCell>Kaptein</Table.DataCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>2</Table.HeaderCell>
+          <Table.DataCell>William</Table.DataCell>
+          <Table.DataCell>Riker</Table.DataCell>
+          <Table.DataCell>Kommandør</Table.DataCell>
+        </Table.Row>
+        <Table.Row>
+          <Table.HeaderCell>3</Table.HeaderCell>
+          <Table.DataCell>Geordi</Table.DataCell>
+          <Table.DataCell>La Forge</Table.DataCell>
+          <Table.DataCell>Sjefsingeniør</Table.DataCell>
+        </Table.Row>
+      </Table.Body>
+    </Table>
+  );
   return (
     <>
       <h1>Table</h1>
-      <Table>
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Fornavn</Table.HeaderCell>
-            <Table.HeaderCell>Etternavn</Table.HeaderCell>
-            <Table.HeaderCell>Rolle</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.HeaderCell>1</Table.HeaderCell>
-            <Table.DataCell>Jean-Luc</Table.DataCell>
-            <Table.DataCell>Picard</Table.DataCell>
-            <Table.DataCell>Kaptein</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>2</Table.HeaderCell>
-            <Table.DataCell>William</Table.DataCell>
-            <Table.DataCell>Riker</Table.DataCell>
-            <Table.DataCell>Kommandør</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>3</Table.HeaderCell>
-            <Table.DataCell>Geordi</Table.DataCell>
-            <Table.DataCell>La Forge</Table.DataCell>
-            <Table.DataCell>Sjefsingeniør</Table.DataCell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
+      <TableComponent />
+      <h2>Zebra</h2>
+      <TableComponent zebraStripes />
       <h2>Small Table</h2>
-      <Table size="small">
-        <Table.Header>
-          <Table.Row>
-            <Table.HeaderCell>ID</Table.HeaderCell>
-            <Table.HeaderCell>Fornavn</Table.HeaderCell>
-            <Table.HeaderCell>Etternavn</Table.HeaderCell>
-            <Table.HeaderCell>Rolle</Table.HeaderCell>
-          </Table.Row>
-        </Table.Header>
-        <Table.Body>
-          <Table.Row>
-            <Table.HeaderCell>1</Table.HeaderCell>
-            <Table.DataCell>Jean-Luc</Table.DataCell>
-            <Table.DataCell>Picard</Table.DataCell>
-            <Table.DataCell>Kaptein</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>2</Table.HeaderCell>
-            <Table.DataCell>William</Table.DataCell>
-            <Table.DataCell>Riker</Table.DataCell>
-            <Table.DataCell>Kommandør</Table.DataCell>
-          </Table.Row>
-          <Table.Row>
-            <Table.HeaderCell>3</Table.HeaderCell>
-            <Table.DataCell>Geordi</Table.DataCell>
-            <Table.DataCell>La Forge</Table.DataCell>
-            <Table.DataCell>Sjefsingeniør</Table.DataCell>
-          </Table.Row>
-        </Table.Body>
-      </Table>
+      <TableComponent size="small" />
       <h2>Table with divs</h2>
       <Alert variant="warning">
         Obs! Hvis man skal bygge tabeller uten å bruke vanlig {"<tabell> "}
@@ -87,48 +63,48 @@ export const All = () => {
       <div className="navds-table" role="table">
         <div className="navds-table__header" role="rowgroup">
           <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
               Fornavn
             </div>
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
               Etternavn
             </div>
-            <div className="navds-table__cell" role="columnheader">
+            <div className="navds-table__header-cell" role="columnheader">
               Rolle
             </div>
           </div>
         </div>
         <div className="navds-table__body" role="rowgroup">
           <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               Jean-Luc
             </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               Picard
             </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               Kaptein
             </div>
           </div>
           <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               William
             </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               Riker
             </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               Kommandør
             </div>
           </div>
           <div className="navds-table__row" role="row">
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               Geordi
             </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               La Forge
             </div>
-            <div className="navds-table__cell" role="cell">
+            <div className="navds-table__data-cell" role="cell">
               Sjefsingeniør
             </div>
           </div>
@@ -137,3 +113,110 @@ export const All = () => {
     </>
   );
 };
+
+export const Selection = () => (
+  <>
+    <h1>Selection</h1>
+    <h2>Medium</h2>
+    <SelectionTable />
+    <h2>Small</h2>
+    <SelectionTable size="small" />
+  </>
+);
+
+const SelectionTable = ({ size = "medium" }: { size?: "small" | "medium" }) => {
+  const useToggleList = (initialState) => {
+    const [list, setList] = useState(initialState);
+
+    return [
+      list,
+      (value) =>
+        setList((list) =>
+          list.includes(value)
+            ? list.filter((id) => id !== value)
+            : [...list, value]
+        ),
+    ];
+  };
+
+  const [selectedRows, toggleSelectedRow] = useToggleList([]);
+
+  return (
+    <Table size={size}>
+      <Table.Body>
+        <Table.Row>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              checked={selectedRows.includes("all")}
+              onChange={() => toggleSelectedRow("all")}
+            >
+              Select all
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="col">Name</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Age</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Country</Table.HeaderCell>
+          <Table.HeaderCell scope="col">Points</Table.HeaderCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("1")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("1")}
+              onChange={() => toggleSelectedRow("1")}
+              aria-labelledby={`x_r1-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r1-${size}`}>Donald Smith</span>
+          </Table.HeaderCell>
+          <Table.DataCell>32</Table.DataCell>
+          <Table.DataCell>USA</Table.DataCell>
+          <Table.DataCell>38</Table.DataCell>
+        </Table.Row>
+        <Table.Row selected={selectedRows.includes("2")}>
+          <Table.DataCell>
+            <Checkbox
+              size={size}
+              hideLabel
+              checked={selectedRows.includes("2")}
+              onChange={() => toggleSelectedRow("2")}
+              aria-labelledby={`x_r2-${size}`}
+            >
+              {" "}
+            </Checkbox>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r2-${size}`}>Preben Aalborg</span>
+          </Table.HeaderCell>
+          <Table.DataCell>44</Table.DataCell>
+          <Table.DataCell>Denmark</Table.DataCell>
+          <Table.DataCell>11</Table.DataCell>
+        </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>
+          </Table.DataCell>
+          <Table.HeaderCell scope="row">
+            <span id={`x_r3-${size}`}>Rudolph Bachenmeier</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/typography/stories/index.css

@@ -1,3 +1,3 @@
 .typo-story > div:nth-child(even) {
-  background: var(--navds-color-gray-20);
+  background: var(--navds-global-color-gray-200);
 }