@navikt/ds-react 1.3.2 → 1.3.3

package/_docs.json

@@ -5103,6 +5103,27 @@
           "name": "boolean"
         }
       },
+      "shadeOnHover": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Shade the table row on hover.",
+        "name": "shadeOnHover",
+        "parent": {
+          "fileName": "react/src/table/Row.tsx",
+          "name": "RowProps"
+        },
+        "declarations": [
+          {
+            "fileName": "react/src/table/Row.tsx",
+            "name": "RowProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",
@@ -5296,6 +5317,27 @@
           "name": "boolean"
         }
       },
+      "shadeOnHover": {
+        "defaultValue": {
+          "value": "true"
+        },
+        "description": "Shade the table row on hover.",
+        "name": "shadeOnHover",
+        "parent": {
+          "fileName": "src/table/Row.tsx",
+          "name": "RowProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/table/Row.tsx",
+            "name": "RowProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "boolean"
+        }
+      },
       "className": {
         "defaultValue": null,
         "description": "",

package/cjs/table/Row.js

@@ -41,9 +41,10 @@ exports.Row = void 0;
 const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 exports.Row = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
+    var { className, selected = false, shadeOnHover = true } = _a, rest = __rest(_a, ["className", "selected", "shadeOnHover"]);
     return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-table__row", className, {
             "navds-table__row--selected": selected,
+            "navds-table__row--shade-on-hover": shadeOnHover,
         }) })));
 });
 exports.default = exports.Row;

package/esm/table/Row.d.ts

@@ -5,6 +5,11 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
      * @default false
      */
     selected?: boolean;
+    /**
+     * Shade the table row on hover.
+     * @default true
+     */
+    shadeOnHover?: boolean;
 }
 export interface RowType extends React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>> {
 }

package/esm/table/Row.js

@@ -12,9 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "clsx";
 export const Row = forwardRef((_a, ref) => {
-    var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
+    var { className, selected = false, shadeOnHover = true } = _a, rest = __rest(_a, ["className", "selected", "shadeOnHover"]);
     return (React.createElement("tr", Object.assign({}, rest, { ref: ref, className: cl("navds-table__row", className, {
             "navds-table__row--selected": selected,
+            "navds-table__row--shade-on-hover": shadeOnHover,
         }) })));
 });
 export default Row;

package/esm/table/Row.js.map

@@ -1 +1 @@
-{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/table/Row.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAetB,MAAM,CAAC,MAAM,GAAG,GAAY,UAAU,CACpC,CAAC,EAAwC,EAAE,GAAG,EAAE,EAAE;QAAjD,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAtC,yBAAwC,CAAF;IAAY,OAAA,CACjD,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,4BAA4B,EAAE,QAAQ;SACvC,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}
+{"version":3,"file":"Row.js","sourceRoot":"","sources":["../../src/table/Row.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,MAAM,CAAC;AAoBtB,MAAM,CAAC,MAAM,GAAG,GAAY,UAAU,CACpC,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,QAAQ,GAAG,KAAK,EAAE,YAAY,GAAG,IAAI,OAAW,EAAN,IAAI,cAA3D,yCAA6D,CAAF;IAAY,OAAA,CACtE,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,EAAE;YAC3C,4BAA4B,EAAE,QAAQ;YACtC,kCAAkC,EAAE,YAAY;SACjD,CAAC,IACF,CACH,CAAA;CAAA,CACF,CAAC;AAEF,eAAe,GAAG,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom-interactions": "0.9.2",
-    "@navikt/ds-icons": "^1.3.2",
+    "@navikt/ds-icons": "^1.3.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.1.1",
@@ -74,5 +74,5 @@
       "optional": true
     }
   },
-  "gitHead": "b6d65ad80535872c70603f7c8814ce1d4e2f91dd"
+  "gitHead": "85518226c65170c4692b484118dcba8d2135944e"
 }

package/src/table/Row.tsx

@@ -7,6 +7,11 @@ export interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
    * @default false
    */
   selected?: boolean;
+  /**
+   * Shade the table row on hover.
+   * @default true
+   */
+  shadeOnHover?: boolean;
 }
 
 export interface RowType
@@ -15,12 +20,13 @@ export interface RowType
   > {}
 
 export const Row: RowType = forwardRef(
-  ({ className, selected = false, ...rest }, ref) => (
+  ({ className, selected = false, shadeOnHover = true, ...rest }, ref) => (
     <tr
       {...rest}
       ref={ref}
       className={cl("navds-table__row", className, {
         "navds-table__row--selected": selected,
+        "navds-table__row--shade-on-hover": shadeOnHover,
       })}
     />
   )

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

@@ -19,7 +19,7 @@ const TableComponent = (props) => (
       </Table.Row>
     </Table.Header>
     <Table.Body>
-      <Table.Row>
+      <Table.Row shadeOnHover={props.shadeOnHover}>
         {props.button && (
           <Table.DataCell
             style={{
@@ -35,7 +35,7 @@ const TableComponent = (props) => (
         <Table.DataCell>Picard</Table.DataCell>
         <Table.DataCell>Kaptein</Table.DataCell>
       </Table.Row>
-      <Table.Row>
+      <Table.Row shadeOnHover={props.shadeOnHover}>
         {props.button && (
           <Table.DataCell
             style={{
@@ -51,7 +51,7 @@ const TableComponent = (props) => (
         <Table.DataCell>Riker</Table.DataCell>
         <Table.DataCell>Kommandør</Table.DataCell>
       </Table.Row>
-      <Table.Row>
+      <Table.Row shadeOnHover={props.shadeOnHover}>
         {props.button && (
           <Table.DataCell
             style={{
@@ -73,6 +73,10 @@ const TableComponent = (props) => (
 
 export const Default = () => <TableComponent />;
 export const Zebra = () => <TableComponent zebraStripes />;
+export const NoShadeOnHover = () => <TableComponent shadeOnHover={false} />;
+export const ZebraNoShadeOnHover = () => (
+  <TableComponent zebraStripes shadeOnHover={false} />
+);
 export const Small = () => <TableComponent size="small" />;
 export const Buttons = () => <TableComponent size="small" button />;