@navikt/ds-react 0.13.3 → 0.14.2

package/cjs/form/Switch.js

@@ -0,0 +1,58 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = __importStar(require("react"));
+const __1 = require("..");
+const useFormField_1 = require("./useFormField");
+const Switch = (0, react_1.forwardRef)((props, ref) => {
+    const { inputProps, size } = (0, useFormField_1.useFormField)(props, "switch");
+    const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
+    const Description = size === "medium" ? __1.BodyShort : __1.Detail;
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch", props.className, `navds-switch--${size}`, {
+            "navds-switch--disabled": inputProps.disabled,
+        }) },
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["size"]), (0, __1.omit)(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: (0, classnames_1.default)(className, "navds-switch__input") })),
+        react_1.default.createElement("span", { className: "navds-switch__track" },
+            react_1.default.createElement("span", { className: "navds-switch__thumb" }, loading && react_1.default.createElement(__1.Loader, { size: "xsmall" }))),
+        react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-switch__content", {
+                    "sr-only": hideLabel,
+                    "navds-switch--with-description": !!description && !hideLabel,
+                }) },
+                react_1.default.createElement(__1.BodyShort, { as: "div", size: size, className: "navds-switch__label" }, children),
+                description && (react_1.default.createElement(Description, { as: "div", size: "small", className: "navds-switch__description" }, description))))));
+});
+exports.default = Switch;

package/cjs/form/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConfirmationPanel = exports.TextField = exports.Textarea = exports.Counter = exports.ErrorSummary = exports.Select = exports.SearchField = exports.RadioGroup = exports.Radio = exports.FieldsetContext = exports.Fieldset = exports.CheckboxGroup = exports.Checkbox = void 0;
+exports.ConfirmationPanel = exports.TextField = exports.Textarea = exports.Counter = exports.ErrorSummary = exports.Switch = exports.Select = exports.SearchField = exports.RadioGroup = exports.Radio = exports.FieldsetContext = exports.Fieldset = exports.CheckboxGroup = exports.Checkbox = void 0;
 var checkbox_1 = require("./checkbox");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
 Object.defineProperty(exports, "CheckboxGroup", { enumerable: true, get: function () { return checkbox_1.CheckboxGroup; } });
@@ -17,6 +17,8 @@ var search_field_1 = require("./search-field");
 Object.defineProperty(exports, "SearchField", { enumerable: true, get: function () { return search_field_1.SearchField; } });
 var Select_1 = require("./Select");
 Object.defineProperty(exports, "Select", { enumerable: true, get: function () { return __importDefault(Select_1).default; } });
+var Switch_1 = require("./Switch");
+Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return __importDefault(Switch_1).default; } });
 var error_summary_1 = require("./error-summary");
 Object.defineProperty(exports, "ErrorSummary", { enumerable: true, get: function () { return error_summary_1.ErrorSummary; } });
 var Textarea_1 = require("./Textarea");

package/cjs/loader/Loader.js

@@ -44,6 +44,6 @@ const Loader = (0, react_1.forwardRef)((_a, ref) => {
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
         react_1.default.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
         react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
-        react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-color-gray-40)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
+        react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
 });
 exports.default = Loader;

package/cjs/table/DataCell.js

@@ -35,8 +35,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("..");
+const _1 = require(".");
 const DataCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("td", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__cell", className) })));
+    var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
+    const context = (0, react_1.useContext)(_1.TableContext);
+    return (react_1.default.createElement(__1.BodyShort, Object.assign({ as: "td", ref: ref, className: (0, classnames_1.default)("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 exports.default = DataCell;

package/cjs/table/HeaderCell.js

@@ -35,8 +35,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const __1 = require("..");
 const HeaderCell = (0, react_1.forwardRef)((_a, ref) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("th", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__cell", className) })));
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    const context = (0, react_1.useContext)(__1.TableContext);
+    return (react_1.default.createElement(__1.Label, Object.assign({ as: "th", ref: ref, className: (0, classnames_1.default)("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 exports.default = HeaderCell;

package/cjs/table/Row.js

@@ -36,7 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Row = (0, react_1.forwardRef)((_a, ref) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__row", className) })));
+    var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
+    return (react_1.default.createElement("tr", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table__row", className, {
+            "navds-table__row--selected": selected,
+        }) })));
 });
 exports.default = Row;

package/cjs/table/Table.js

@@ -33,6 +33,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.TableContext = void 0;
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const Header_1 = __importDefault(require("./Header"));
@@ -40,9 +41,13 @@ const Body_1 = __importDefault(require("./Body"));
 const Row_1 = __importDefault(require("./Row"));
 const HeaderCell_1 = __importDefault(require("./HeaderCell"));
 const DataCell_1 = __importDefault(require("./DataCell"));
+exports.TableContext = (0, react_1.createContext)(null);
 const Table = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, size = "medium" } = _a, rest = __rest(_a, ["className", "size"]);
-    return (react_1.default.createElement("table", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table", `navds-table--${size}`, className) })));
+    var { className, zebraStripes = false, size = "medium" } = _a, rest = __rest(_a, ["className", "zebraStripes", "size"]);
+    return (react_1.default.createElement(exports.TableContext.Provider, { value: { size } },
+        react_1.default.createElement("table", Object.assign({}, rest, { ref: ref, className: (0, classnames_1.default)("navds-table", `navds-table--${size}`, className, {
+                "navds-table--zebra-stripes": zebraStripes,
+            }) }))));
 });
 Table.Header = Header_1.default;
 Table.Body = Body_1.default;

package/esm/form/Switch.d.ts

@@ -0,0 +1,18 @@
+import React, { InputHTMLAttributes } from "react";
+import { FormFieldProps } from "./useFormField";
+export interface SwitchProps extends Omit<FormFieldProps, "error" | "errorId">, Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+    /**
+     * Switch-label
+     */
+    children: React.ReactNode;
+    /**
+     * If enabled shows the label and description for screenreaders only
+     */
+    hideLabel?: boolean;
+    /**
+     * Toggles loading state with loader-component on switch
+     */
+    loading?: boolean;
+}
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
+export default Switch;

package/esm/form/Switch.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import cl from "classnames";
+import React, { forwardRef } from "react";
+import { BodyShort, Detail, Loader, omit } from "..";
+import { useFormField } from "./useFormField";
+const Switch = forwardRef((props, ref) => {
+    const { inputProps, size } = useFormField(props, "switch");
+    const { children, className, description, hideLabel = false, loading } = props, rest = __rest(props, ["children", "className", "description", "hideLabel", "loading"]);
+    const Description = size === "medium" ? BodyShort : Detail;
+    return (React.createElement("div", { className: cl("navds-switch", props.className, `navds-switch--${size}`, {
+            "navds-switch--disabled": inputProps.disabled,
+        }) },
+        React.createElement("input", Object.assign({}, omit(rest, ["size"]), omit(inputProps, ["aria-invalid", "aria-describedby"]), { ref: ref, type: "checkbox", className: cl(className, "navds-switch__input") })),
+        React.createElement("span", { className: "navds-switch__track" },
+            React.createElement("span", { className: "navds-switch__thumb" }, loading && React.createElement(Loader, { size: "xsmall" }))),
+        React.createElement("label", { htmlFor: inputProps.id, className: "navds-switch__label-wrapper" },
+            React.createElement("div", { className: cl("navds-switch__content", {
+                    "sr-only": hideLabel,
+                    "navds-switch--with-description": !!description && !hideLabel,
+                }) },
+                React.createElement(BodyShort, { as: "div", size: size, className: "navds-switch__label" }, children),
+                description && (React.createElement(Description, { as: "div", size: "small", className: "navds-switch__description" }, description))))));
+});
+export default Switch;
+//# sourceMappingURL=Switch.js.map

package/esm/form/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sourceRoot":"","sources":["../../src/form/Switch.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC;AACrD,OAAO,EAAkB,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAmB9D,MAAM,MAAM,GAAG,UAAU,CAAgC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAE3D,MAAM,EACJ,QAAQ,EACR,SAAS,EACT,WAAW,EACX,SAAS,GAAG,KAAK,EACjB,OAAO,KAEL,KAAK,EADJ,IAAI,UACL,KAAK,EAPH,gEAOL,CAAQ,CAAC;IAEV,MAAM,WAAW,GAAG,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC;IAE3D,OAAO,CACL,6BACE,SAAS,EAAE,EAAE,CAAC,cAAc,EAAE,KAAK,CAAC,SAAS,EAAE,iBAAiB,IAAI,EAAE,EAAE;YACtE,wBAAwB,EAAE,UAAU,CAAC,QAAQ;SAC9C,CAAC;QAEF,+CACM,IAAI,CAAC,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,EACpB,IAAI,CAAC,UAAU,EAAE,CAAC,cAAc,EAAE,kBAAkB,CAAC,CAAC,IAC1D,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,UAAU,EACf,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,qBAAqB,CAAC,IAC/C;QACF,8BAAM,SAAS,EAAC,qBAAqB;YACnC,8BAAM,SAAS,EAAC,qBAAqB,IAClC,OAAO,IAAI,oBAAC,MAAM,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B,CACF;QAEP,+BAAO,OAAO,EAAE,UAAU,CAAC,EAAE,EAAE,SAAS,EAAC,6BAA6B;YACpE,6BACE,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;oBACrC,SAAS,EAAE,SAAS;oBACpB,gCAAgC,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,SAAS;iBAC9D,CAAC;gBAEF,oBAAC,SAAS,IAAC,EAAE,EAAC,KAAK,EAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAC,qBAAqB,IAC5D,QAAQ,CACC;gBACX,WAAW,IAAI,CACd,oBAAC,WAAW,IACV,EAAE,EAAC,KAAK,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,2BAA2B,IAEpC,WAAW,CACA,CACf,CACG,CACA,CACJ,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/esm/form/index.d.ts

@@ -3,6 +3,7 @@ export { default as Fieldset, FieldsetContext, FieldsetProps, } from "./Fieldset
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
 export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
+export { default as Switch, SwitchProps } from "./Switch";
 export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";

package/esm/form/index.js

@@ -3,6 +3,7 @@ export { default as Fieldset, FieldsetContext, } from "./Fieldset";
 export { Radio, RadioGroup } from "./radio";
 export { SearchField } from "./search-field";
 export { default as Select } from "./Select";
+export { default as Switch } from "./Switch";
 export { ErrorSummary } from "./error-summary";
 export { Counter, default as Textarea } from "./Textarea";
 export { default as TextField } from "./TextField";

package/esm/form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAER,aAAa,GAEd,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,GAEhB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,EAAE,UAAU,EAA+B,MAAM,SAAS,CAAC;AACzE,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAe,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAqB,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAkB,MAAM,aAAa,CAAC;AACnE,OAAO,EACL,OAAO,IAAI,iBAAiB,GAE7B,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/form/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EAER,aAAa,GAEd,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,OAAO,IAAI,QAAQ,EACnB,eAAe,GAEhB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,EAAE,UAAU,EAA+B,MAAM,SAAS,CAAC;AACzE,OAAO,EAAE,WAAW,EAAoB,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAe,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAe,MAAM,UAAU,CAAC;AAC1D,OAAO,EAAE,YAAY,EAAqB,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAAE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAiB,MAAM,YAAY,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAkB,MAAM,aAAa,CAAC;AACnE,OAAO,EACL,OAAO,IAAI,iBAAiB,GAE7B,MAAM,qBAAqB,CAAC"}

package/esm/loader/Loader.js

@@ -20,7 +20,7 @@ const Loader = forwardRef((_a, ref) => {
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
         React.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
         React.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
-        React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-color-gray-40)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
+        React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
 });
 export default Loader;
 //# sourceMappingURL=Loader.js.map

package/esm/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAyB3B,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,GACf;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,4BAA4B,EACpC,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,OAAO,GACrB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAyB3B,MAAM,MAAM,GAAG,UAAU,CACvB,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,GACf;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,oCAAoC,EAC5C,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,OAAO,GACrB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/esm/table/DataCell.js

@@ -9,11 +9,14 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { BodyShort } from "..";
+import { TableContext } from ".";
 const DataCell = forwardRef((_a, ref) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("td", Object.assign({}, rest, { ref: ref, className: cl("navds-table__cell", className) })));
+    var { className, children = "" } = _a, rest = __rest(_a, ["className", "children"]);
+    const context = useContext(TableContext);
+    return (React.createElement(BodyShort, Object.assign({ as: "td", ref: ref, className: cl("navds-table__data-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 export default DataCell;
 //# sourceMappingURL=DataCell.js.map

package/esm/table/DataCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAS5B,MAAM,QAAQ,GAAiB,UAAU,CAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CACzE,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,IAAI,CAC1E,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DataCell.js","sourceRoot":"","sources":["../../src/table/DataCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC;AASjC,MAAM,QAAQ,GAAiB,UAAU,CACvC,CAAC,EAAqC,EAAE,GAAG,EAAE,EAAE;QAA9C,EAAE,SAAS,EAAE,QAAQ,GAAG,EAAE,OAAW,EAAN,IAAI,cAAnC,yBAAqC,CAAF;IAClC,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,SAAS,kBACR,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,wBAAwB,EAAE,SAAS,CAAC,EAClD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/table/HeaderCell.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+    scope?: string;
 }
 export interface HeaderCellType extends React.ForwardRefExoticComponent<HeaderCellProps & React.RefAttributes<HTMLTableCellElement>> {
 }

package/esm/table/HeaderCell.js

@@ -9,11 +9,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, useContext } from "react";
 import cl from "classnames";
+import { Label, TableContext } from "..";
 const HeaderCell = forwardRef((_a, ref) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("th", Object.assign({}, rest, { ref: ref, className: cl("navds-table__cell", className) })));
+    var { className, children } = _a, rest = __rest(_a, ["className", "children"]);
+    const context = useContext(TableContext);
+    return (React.createElement(Label, Object.assign({ as: "th", ref: ref, className: cl("navds-table__header-cell", className), size: context === null || context === void 0 ? void 0 : context.size }, rest), children));
 });
 export default HeaderCell;
 //# sourceMappingURL=HeaderCell.js.map

package/esm/table/HeaderCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAS5B,MAAM,UAAU,GAAmB,UAAU,CAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC7E,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,CAAC,IAAI,CAC1E,CAAA;CAAA,CAAC,CAAC;AAEH,eAAe,UAAU,CAAC"}
+{"version":3,"file":"HeaderCell.js","sourceRoot":"","sources":["../../src/table/HeaderCell.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC;AAWzC,MAAM,UAAU,GAAmB,UAAU,CAC3C,CAAC,EAAgC,EAAE,GAAG,EAAE,EAAE;QAAzC,EAAE,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAA9B,yBAAgC,CAAF;IAC7B,MAAM,OAAO,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEzC,OAAO,CACL,oBAAC,KAAK,kBACJ,EAAE,EAAC,IAAI,EACP,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,EACpD,IAAI,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,IACf,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/table/Row.d.ts

@@ -1,5 +1,10 @@
 import React from "react";
 interface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    /**
+     * Row is selected
+     * @default false
+     */
+    selected?: boolean;
 }
 export interface RowType extends React.ForwardRefExoticComponent<RowProps & React.RefAttributes<HTMLTableRowElement>> {
 }

package/esm/table/Row.js

@@ -12,8 +12,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { forwardRef } from "react";
 import cl from "classnames";
 const Row = forwardRef((_a, ref) => {
-    var { className } = _a, rest = __rest(_a, ["className"]);
-    return (React.createElement("tr", Object.assign({}, rest, { ref: ref, className: cl("navds-table__row", className) })));
+    var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
+    return (React.createElement("tr", Object.assign({}, rest, { ref: ref, className: cl("navds-table__row", className, {
+            "navds-table__row--selected": selected,
+        }) })));
 });
 export default Row;
 //# sourceMappingURL=Row.js.map

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,YAAY,CAAC;AAS5B,MAAM,GAAG,GAAY,UAAU,CAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IAAY,OAAA,CAC/D,4CAAQ,IAAI,IAAE,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,IAAI,CACzE,CAAA;CAAA,CAAC,CAAC;AAEH,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,YAAY,CAAC;AAe5B,MAAM,GAAG,GAAY,UAAU,CAC7B,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"}

package/esm/table/Table.d.ts

@@ -10,6 +10,11 @@ export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
      * @default "medium"
      */
     size?: "medium" | "small";
+    /**
+     * Zebra striped table
+     * @default false
+     */
+    zebraStripes?: boolean;
 }
 export interface TableType extends React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> {
     Header: HeaderType;
@@ -18,5 +23,9 @@ export interface TableType extends React.ForwardRefExoticComponent<TableProps &
     DataCell: DataCellType;
     HeaderCell: HeaderCellType;
 }
+export interface TableContextProps {
+    size: "medium" | "small";
+}
+export declare const TableContext: React.Context<TableContextProps | null>;
 declare const Table: TableType;
 export default Table;

package/esm/table/Table.js

@@ -9,16 +9,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { createContext, forwardRef } from "react";
 import cl from "classnames";
 import Header from "./Header";
 import Body from "./Body";
 import Row from "./Row";
 import HeaderCell from "./HeaderCell";
 import DataCell from "./DataCell";
+export const TableContext = createContext(null);
 const Table = forwardRef((_a, ref) => {
-    var { className, size = "medium" } = _a, rest = __rest(_a, ["className", "size"]);
-    return (React.createElement("table", Object.assign({}, rest, { ref: ref, className: cl("navds-table", `navds-table--${size}`, className) })));
+    var { className, zebraStripes = false, size = "medium" } = _a, rest = __rest(_a, ["className", "zebraStripes", "size"]);
+    return (React.createElement(TableContext.Provider, { value: { size } },
+        React.createElement("table", Object.assign({}, rest, { ref: ref, className: cl("navds-table", `navds-table--${size}`, className, {
+                "navds-table--zebra-stripes": zebraStripes,
+            }) }))));
 });
 Table.Header = Header;
 Table.Body = Body;

package/esm/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AAqBpD,MAAM,KAAK,GAAG,UAAU,CAAC,CAAC,EAAuC,EAAE,GAAG,EAAE,EAAE;QAAhD,EAAE,SAAS,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAArC,qBAAuC,CAAF;IAAY,OAAA,CACzE,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,CAAC,IAC/D,CACH,CAAA;CAAA,CAAc,CAAC;AAEhB,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,MAAsB,MAAM,UAAU,CAAC;AAC9C,OAAO,IAAkB,MAAM,QAAQ,CAAC;AACxC,OAAO,GAAgB,MAAM,OAAO,CAAC;AACrC,OAAO,UAA8B,MAAM,cAAc,CAAC;AAC1D,OAAO,QAA0B,MAAM,YAAY,CAAC;AA8BpD,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAA2B,IAAI,CAAC,CAAC;AAE1E,MAAM,KAAK,GAAG,UAAU,CACtB,CAAC,EAA6D,EAAE,GAAG,EAAE,EAAE;QAAtE,EAAE,SAAS,EAAE,YAAY,GAAG,KAAK,EAAE,IAAI,GAAG,QAAQ,OAAW,EAAN,IAAI,cAA3D,qCAA6D,CAAF;IAAY,OAAA,CACtE,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,IAAI,EAAE;QACpC,+CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,gBAAgB,IAAI,EAAE,EAAE,SAAS,EAAE;gBAC9D,4BAA4B,EAAE,YAAY;aAC3C,CAAC,IACF,CACoB,CACzB,CAAA;CAAA,CACW,CAAC;AAEf,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;AACtB,KAAK,CAAC,IAAI,GAAG,IAAI,CAAC;AAClB,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;AAChB,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;AAC9B,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE1B,eAAe,KAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.13.3",
+  "version": "0.14.2",
   "private": false,
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.6.3",
+    "@navikt/ds-icons": "^0.7.0",
     "@popperjs/core": "^2.10.1",
     "classnames": "^2.2.6",
     "react-collapse": "^5.1.0",
@@ -61,7 +61,8 @@
     "ts-jest": "^27.0.5"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0"
+    "@types/react": "^17.0.30",
+    "react": "^17.0.0"
   },
-  "gitHead": "f6c4f853afefa13244fe3f9bd55126d7caaa0b70"
+  "gitHead": "ce1c6de93566f930f4f9fc917ce6be9a997a9aa6"
 }

package/src/form/Switch.tsx

@@ -0,0 +1,81 @@
+import cl from "classnames";
+import React, { forwardRef, InputHTMLAttributes } from "react";
+import { BodyShort, Detail, Loader, omit } from "..";
+import { FormFieldProps, useFormField } from "./useFormField";
+
+export interface SwitchProps
+  extends Omit<FormFieldProps, "error" | "errorId">,
+    Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+  /**
+   * Switch-label
+   */
+  children: React.ReactNode;
+  /**
+   * If enabled shows the label and description for screenreaders only
+   */
+  hideLabel?: boolean;
+  /**
+   * Toggles loading state with loader-component on switch
+   */
+  loading?: boolean;
+}
+
+const Switch = forwardRef<HTMLInputElement, SwitchProps>((props, ref) => {
+  const { inputProps, size } = useFormField(props, "switch");
+
+  const {
+    children,
+    className,
+    description,
+    hideLabel = false,
+    loading,
+    ...rest
+  } = props;
+
+  const Description = size === "medium" ? BodyShort : Detail;
+
+  return (
+    <div
+      className={cl("navds-switch", props.className, `navds-switch--${size}`, {
+        "navds-switch--disabled": inputProps.disabled,
+      })}
+    >
+      <input
+        {...omit(rest, ["size"])}
+        {...omit(inputProps, ["aria-invalid", "aria-describedby"])}
+        ref={ref}
+        type="checkbox"
+        className={cl(className, "navds-switch__input")}
+      />
+      <span className="navds-switch__track">
+        <span className="navds-switch__thumb">
+          {loading && <Loader size="xsmall" />}
+        </span>
+      </span>
+
+      <label htmlFor={inputProps.id} className="navds-switch__label-wrapper">
+        <div
+          className={cl("navds-switch__content", {
+            "sr-only": hideLabel,
+            "navds-switch--with-description": !!description && !hideLabel,
+          })}
+        >
+          <BodyShort as="div" size={size} className="navds-switch__label">
+            {children}
+          </BodyShort>
+          {description && (
+            <Description
+              as="div"
+              size="small"
+              className="navds-switch__description"
+            >
+              {description}
+            </Description>
+          )}
+        </div>
+      </label>
+    </div>
+  );
+});
+
+export default Switch;

package/src/form/index.ts

@@ -12,6 +12,7 @@ export {
 export { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./radio";
 export { SearchField, SearchFieldProps } from "./search-field";
 export { default as Select, SelectProps } from "./Select";
+export { default as Switch, SwitchProps } from "./Switch";
 export { ErrorSummary, ErrorSummaryProps } from "./error-summary";
 export { Counter, default as Textarea, TextareaProps } from "./Textarea";
 export { default as TextField, TextFieldProps } from "./TextField";