@navikt/ds-react 0.13.0 → 0.14.0-beta.1

package/cjs/form/Fieldset/Fieldset.js

@@ -58,9 +58,12 @@ const Fieldset = (0, react_1.forwardRef)((props, ref) => {
             react_1.default.createElement(__1.Label, { size: size, as: "legend", className: (0, classnames_1.default)("navds-fieldset__legend", {
                     "sr-only": !!hideLegend,
                 }) }, legend),
-            !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-fieldset__description", {
-                    "sr-only": !!hideLegend,
-                }), id: inputDescriptionId, size: size }, description)),
+            !!description &&
+                (size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-fieldset__description", {
+                        "sr-only": !!hideLegend,
+                    }), id: inputDescriptionId, size: "small", as: "div" }, props.description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-fieldset__description", {
+                        "sr-only": !!hideLegend,
+                    }), id: inputDescriptionId, size: "small", as: "div" }, props.description))),
             children,
             react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite", className: "navds-fieldset__error" }, showErrorMsg && (react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))))));
 });

package/cjs/form/Select.js

@@ -42,11 +42,14 @@ const useFormField_1 = require("./useFormField");
 const Select = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
     const { children, label, className, description, htmlSize, hideLabel = false } = props, rest = __rest(props, ["children", "label", "className", "description", "htmlSize", "hideLabel"]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, { "navds-select--error": hasError }) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
+            "navds-select--error": hasError,
+            "navds-select--disabled": !!inputProps.disabled,
+        }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-select__label", {
                 "sr-only": hideLabel,
             }) }, label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-select__description", {
+        !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-select__description", {
                 "sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-select__container" },

package/cjs/form/TextField.js

@@ -41,11 +41,16 @@ const useFormField_1 = require("./useFormField");
 const TextField = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textField");
     const { label, className, description, htmlSize, hideLabel = false, type = "text" } = props, rest = __rest(props, ["label", "className", "description", "htmlSize", "hideLabel", "type"]);
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, { "navds-text-field--error": hasError }) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
+            "navds-text-field--error": hasError,
+            "navds-text-field--disabled": !!inputProps.disabled,
+        }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", { "sr-only": hideLabel }) }, label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-text-field__description", {
+        !!description && (react_1.default.createElement(react_1.default.Fragment, null, size === "medium" ? (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-text-field__description", {
                 "sr-only": hideLabel,
-            }), id: inputDescriptionId, size: size }, description)),
+            }), id: inputDescriptionId, size: "small", as: "div" }, description)) : (react_1.default.createElement(__1.Detail, { className: (0, classnames_1.default)("navds-text-field__description", {
+                "sr-only": hideLabel,
+            }), id: inputDescriptionId, size: "small", as: "div" }, description)))),
         react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, type: type, className: (0, classnames_1.default)("navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`), size: htmlSize })),
         react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
 });

package/cjs/form/Textarea.js

@@ -46,11 +46,14 @@ const Textarea = (0, react_1.forwardRef)((props, ref) => {
     const { label, className, description, maxLength, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel"]);
     const maxLengthId = `TextareaMaxLength-${(0, __2.useId)()}`;
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
-    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, { "navds-textarea--error": hasError }) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
+            "navds-textarea--error": hasError,
+            "navds-textarea--disabled": !!inputProps.disabled,
+        }) },
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-textarea__label", {
                 "sr-only": hideLabel,
             }) }, label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-textarea__description", {
+        !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-textarea__description", {
                 "sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-textarea__wrapper" },

package/cjs/form/checkbox/Checkbox.js

@@ -25,25 +25,26 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const useCheckbox_1 = __importDefault(require("./useCheckbox"));
-const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 const __1 = require("../..");
 const Checkbox = (0, react_1.forwardRef)((props, ref) => {
-    const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useCheckbox_1.default)(props);
+    const { inputProps, hasError, size } = (0, useCheckbox_1.default)(props);
+    const Description = size === "medium" ? __1.BodyShort : __1.Detail;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-checkbox", `navds-checkbox--${size}`, {
             "navds-checkbox--error": hasError,
-            "navds-checkbox--with-error-message": showErrorMsg,
-            "navds-checkbox--with-description": !!props.description,
+            "navds-checkbox--disabled": inputProps.disabled,
         }) },
         react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(props, [
             "children",
             "size",
             "error",
-            "errorId",
             "description",
             "hideLabel",
         ]), inputProps, { className: "navds-checkbox__input", ref: ref })),
-        react_1.default.createElement(__1.BodyShort, { as: "label", htmlFor: inputProps.id, size: size, className: "navds-checkbox__label" }, props.hideLabel ? (react_1.default.createElement("span", { className: "sr-only" }, props.children)) : (props.children)),
-        props.description && (react_1.default.createElement(__1.BodyShort, { size: size, id: inputDescriptionId, className: "navds-checkbox__description" }, props.description)),
-        react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
+        react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-checkbox__label" },
+            react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-checkbox__content", {
+                    "sr-only": props.hideLabel,
+                }) },
+                react_1.default.createElement(__1.BodyShort, { as: "div", size: size }, props.children),
+                props.description && (react_1.default.createElement(Description, { as: "div", size: "small", className: "navds-checkbox__description" }, props.description))))));
 });
 exports.default = Checkbox;

package/cjs/form/checkbox/useCheckbox.js

@@ -14,13 +14,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const useFormField_1 = require("../useFormField");
 const CheckboxGroup_1 = require("./CheckboxGroup");
+const __1 = require("../..");
 /**
  * Handles props for Checkboxes in context with Fieldset and CheckboxGroup
  */
 const useCheckbox = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
     const checkboxGroup = (0, react_1.useContext)(CheckboxGroup_1.CheckboxGroupContext);
-    const _b = (0, useFormField_1.useFormField)(props, "checkbox"), { inputProps } = _b, rest = __rest(_b, ["inputProps"]);
+    const _b = (0, useFormField_1.useFormField)((0, __1.omit)(props, ["description"]), "checkbox"), { inputProps } = _b, rest = __rest(_b, ["inputProps"]);
     if (checkboxGroup) {
         if (props.checked) {
             console.warn("`checked` is unsupported on <Checkbox> elements within a <CheckboxGroup>. Please set a `value` or `defaultValue` on <CheckboxGroup> instead.");

package/cjs/form/radio/Radio.js

@@ -25,24 +25,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const __1 = require("../..");
-const ErrorMessage_1 = __importDefault(require("../ErrorMessage"));
 const useRadio_1 = require("./useRadio");
 const Radio = (0, react_1.forwardRef)((props, ref) => {
-    const { inputProps, errorId, showErrorMsg, size, hasError, inputDescriptionId, } = (0, useRadio_1.useRadio)(props);
+    const { inputProps, size, hasError } = (0, useRadio_1.useRadio)(props);
+    const Description = size === "medium" ? __1.BodyShort : __1.Detail;
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(props.className, "navds-radio", `navds-radio--${size}`, {
             "navds-radio--error": hasError,
-            "navds-radio--with-error-message": showErrorMsg,
-            "navds-radio--with-description": !!props.description,
+            "navds-radio--disabled": inputProps.disabled,
         }) },
-        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(props, [
-            "children",
-            "size",
-            "error",
-            "errorId",
-            "description",
-        ]), inputProps, { className: "navds-radio__input", ref: ref })),
-        react_1.default.createElement(__1.BodyShort, { as: "label", htmlFor: inputProps.id, size: size, className: "navds-radio__label" }, props.children),
-        props.description && (react_1.default.createElement(__1.BodyShort, { size: size, id: inputDescriptionId, className: "navds-radio__description" }, props.description)),
-        react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error))));
+        react_1.default.createElement("input", Object.assign({}, (0, __1.omit)(props, ["children", "size", "description"]), inputProps, { className: "navds-radio__input", ref: ref })),
+        react_1.default.createElement("label", { htmlFor: inputProps.id, className: "navds-radio__label" },
+            react_1.default.createElement("div", { className: "navds-radio__content" },
+                react_1.default.createElement(__1.BodyShort, { as: "div", size: size }, props.children),
+                props.description && (react_1.default.createElement(Description, { as: "div", size: "small", className: "navds-radio__description" }, props.description))))));
 });
 exports.default = Radio;

package/cjs/form/radio/useRadio.js

@@ -15,12 +15,13 @@ exports.useRadio = void 0;
 const react_1 = require("react");
 const useFormField_1 = require("../useFormField");
 const RadioGroup_1 = require("./RadioGroup");
+const __1 = require("../..");
 /**
  * Handles props for Radios in context with Fieldset and RadioGroup
  */
 const useRadio = (props) => {
     const radioGroup = (0, react_1.useContext)(RadioGroup_1.RadioGroupContext);
-    const _a = (0, useFormField_1.useFormField)(props, "radio"), { inputProps } = _a, rest = __rest(_a, ["inputProps"]);
+    const _a = (0, useFormField_1.useFormField)((0, __1.omit)(props, ["description"]), "radio"), { inputProps } = _a, rest = __rest(_a, ["inputProps"]);
     if (!radioGroup) {
         console.warn("<Radio> must be used inside <RadioGroup>.");
     }

package/cjs/form/search-field/SearchField.js

@@ -46,11 +46,14 @@ exports.SearchFieldContext = react_1.default.createContext(null);
 const SearchField = (0, react_1.forwardRef)((props, ref) => {
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "searchfield");
     const { className, hideLabel, children, label, description, error } = props, rest = __rest(props, ["className", "hideLabel", "children", "label", "description", "error"]);
-    return (react_1.default.createElement("div", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["id", "error", "errorId", "size", "disabled"]), { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", { "navds-search-field--error": hasError }) }),
+    return (react_1.default.createElement("div", Object.assign({ ref: ref }, (0, __1.omit)(rest, ["id", "error", "errorId", "size", "disabled"]), { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
+            "navds-search-field--error": hasError,
+            "navds-search-field--disabled": !!inputProps.disabled,
+        }) }),
         react_1.default.createElement(__1.Label, { htmlFor: inputProps.id, size: size, as: "label", className: (0, classnames_1.default)("navds-text-field__label", {
                 "sr-only": hideLabel,
             }) }, label),
-        !!description && (react_1.default.createElement(__1.BodyShort, { className: (0, classnames_1.default)("navds-text-field__description", {
+        !!description && (react_1.default.createElement(__1.BodyShort, { as: "div", className: (0, classnames_1.default)("navds-text-field__description", {
                 "sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-search-field__input-wrapper" },

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;