nav-frontend-skjema - npm Package Compare versions

Comparing version 3.0.53 to 3.1.0

lib/checkboks-panel-gruppe.d.ts

@@ -29,2 +29,6 @@ import * as React from "react";
     className?: string;
+    /**
+     * Option om man skal propagere feil til children
+     */
+    utenFeilPropagering?: boolean;
 }
@@ -31,0 +35,0 @@ declare class CheckboksPanelGruppe extends React.Component<CheckboksPanelGruppeProps> {

lib/checkboks-panel.d.ts

@@ -6,2 +6,3 @@ import * as React from "react";
     subtext?: string;
+    feil?: boolean;
 }
@@ -8,0 +9,0 @@ export interface CheckboksPanelState {

lib/checkboks-panel.js

@@ -37,11 +37,12 @@ "use strict";
     render() {
-        const _a = this.props, { id, label, subtext, disabled } = _a, other = __rest(_a, ["id", "label", "subtext", "disabled"]);
+        const _a = this.props, { id, label, subtext, disabled, feil } = _a, other = __rest(_a, ["id", "label", "subtext", "disabled", "feil"]);
         const { hasFocus, checked } = this.state;
         const inputId = id || nav_frontend_js_utils_1.guid();
-        const cls = classNames("inputPanel checkboksPanel", {
+        const cls = (feil) => classNames("inputPanel checkboksPanel", {
             "inputPanel--checked": checked && !disabled,
             "inputPanel--focused": hasFocus && !disabled,
             "inputPanel--disabled": disabled === true,
+            "skjemaelement__input--harFeil": feil && !checked,
         });
-        return (React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, (context) => (React.createElement("label", { className: cls, htmlFor: inputId },
+        return (React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, (context) => (React.createElement("label", { className: cls(disabled ? false : !!context.feil || !!feil), htmlFor: inputId },
             React.createElement("input", Object.assign({ id: inputId, className: "inputPanel__field", type: "checkbox", checked: checked, "aria-checked": checked, disabled: disabled, "aria-invalid": !!context.feil, "aria-errormessage": context.feilmeldingId }, other, { onFocus: () => this.toggleOutline(), onBlur: () => this.toggleOutline(), onChange: this.handleChange })),
@@ -48,0 +49,0 @@ React.createElement("span", { className: "inputPanel__label" }, label),

lib/checkbox.js

@@ -31,13 +31,13 @@ "use strict";
     render() {
-        const _a = this.props, { className, label, id, feil, checkboxRef } = _a, other = __rest(_a, ["className", "label", "id", "feil", "checkboxRef"]);
+        const _a = this.props, { className, label, id, feil, checkboxRef, disabled } = _a, other = __rest(_a, ["className", "label", "id", "feil", "checkboxRef", "disabled"]);
         const inputId = id || nav_frontend_js_utils_1.guid();
         // tslint:disable:react-a11y-role-has-required-aria-props
         return (React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, (context) => {
-            const feilmelding = context.feil || feil;
+            const feilmelding = !!disabled ? undefined : context.feil || feil;
             // eslint-disable-next-line no-shadow
             const feilmeldingId = context.feilmeldingId || nav_frontend_js_utils_1.guid();
             return (React.createElement("div", { className: cls(className) },
-                React.createElement("input", Object.assign({ type: "checkbox", className: inputCls(feil), id: inputId, ref: checkboxRef, "aria-invalid": !!feilmelding, "aria-errormessage": feilmelding ? feilmeldingId : undefined }, other)),
+                React.createElement("input", Object.assign({ type: "checkbox", className: inputCls(feilmelding), id: inputId, ref: checkboxRef, "aria-invalid": !!feilmelding, "aria-errormessage": feilmelding ? feilmeldingId : undefined, disabled: disabled }, other)),
                 React.createElement("label", { className: "skjemaelement__label", htmlFor: inputId }, label),
-                !context.feil && !!feil && (React.createElement(skjemaelement_feilmelding_1.default, { id: feilmeldingId }, typeof feilmelding !== "boolean" && feilmelding))));
+                !context.feil && !!feil && !disabled && (React.createElement(skjemaelement_feilmelding_1.default, { id: feilmeldingId }, typeof feilmelding !== "boolean" && feilmelding))));
         }));
@@ -44,0 +44,0 @@ }

lib/radio-panel-gruppe.d.ts

@@ -37,2 +37,6 @@ import * as React from "react";
     feil?: React.ReactNode | boolean;
+    /**
+     * Option om man skal propagere feil til children
+     */
+    utenFeilPropagering?: boolean;
 }
@@ -39,0 +43,0 @@ declare class RadioPanelGruppe extends React.Component<RadioPanelGruppeProps> {

lib/radio-panel.d.ts

@@ -9,2 +9,3 @@ import * as React from "react";
     radioRef?: (element: HTMLInputElement | null) => any;
+    feil?: boolean;
 }
@@ -11,0 +12,0 @@ export interface RadioPanelState {

lib/radio-panel.js

@@ -29,12 +29,13 @@ "use strict";
     render() {
-        const _a = this.props, { id, label, checked, disabled, radioRef } = _a, other = __rest(_a, ["id", "label", "checked", "disabled", "radioRef"]);
+        const _a = this.props, { id, label, checked, disabled, radioRef, feil } = _a, other = __rest(_a, ["id", "label", "checked", "disabled", "radioRef", "feil"]);
         const { hasFocus } = this.state;
         const inputId = id || nav_frontend_js_utils_1.guid();
-        const cls = classNames("inputPanel radioPanel", {
+        const cls = (feil) => classNames("inputPanel radioPanel", {
             "inputPanel--checked": checked && !disabled,
             "inputPanel--focused": hasFocus && !disabled,
             "inputPanel--disabled": disabled === true,
+            "skjemaelement__input--harFeil": feil && !checked,
         });
         /* eslint-disable jsx-a11y/role-supports-aria-props */
-        return (React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, (context) => (React.createElement("label", { className: cls, htmlFor: inputId },
+        return (React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, (context) => (React.createElement("label", { className: cls(disabled ? false : !!context.feil || !!feil), htmlFor: inputId },
             React.createElement("input", Object.assign({ id: inputId, className: "inputPanel__field", type: "radio", checked: checked, "aria-checked": checked, disabled: disabled, "aria-invalid": !!context.feil, "aria-errormessage": context.feilmeldingId, ref: radioRef }, other, { onFocus: () => this.toggleOutline(), onBlur: () => this.toggleOutline() })),
@@ -41,0 +42,0 @@ React.createElement("span", { className: "inputPanel__label" }, label)))));

lib/radio.d.ts

@@ -21,2 +21,6 @@ import * as React from "react";
     /**
+     * Toggle for om radioknapp skal ha error-styling
+     */
+    feil?: boolean;
+    /**
      * Referanse til selve radioknappen. Brukes for eksempel til å sette fokus
@@ -23,0 +27,0 @@ */

lib/radio.js

@@ -21,2 +21,5 @@ "use strict";
 const cls = (className) => classNames("skjemaelement", className);
+const inputCls = (harFeil) => classNames("skjemaelement__input radioknapp", {
+    "skjemaelement__input--harFeil": harFeil,
+});
 /**
@@ -27,7 +30,7 @@ * Radio
     render() {
-        const _a = this.props, { className, name, label, id, radioRef } = _a, other = __rest(_a, ["className", "name", "label", "id", "radioRef"]);
+        const _a = this.props, { className, name, label, id, radioRef, feil, disabled } = _a, other = __rest(_a, ["className", "name", "label", "id", "radioRef", "feil", "disabled"]);
         const inputId = id || nav_frontend_js_utils_1.guid();
         /* eslint-disable jsx-a11y/role-supports-aria-props */
         return (React.createElement(_1.SkjemaGruppeFeilContext.Consumer, null, (context) => (React.createElement("div", { className: cls(className) },
-            React.createElement("input", Object.assign({ type: "radio", name: name, className: "skjemaelement__input radioknapp", id: inputId, ref: radioRef, "aria-invalid": !!context.feil, "aria-errormessage": context.feil ? context.feilmeldingId : undefined }, other)),
+            React.createElement("input", Object.assign({ type: "radio", name: name, className: inputCls(disabled ? false : !!context.feil || !!feil), id: inputId, ref: radioRef, "aria-invalid": !!context.feil, "aria-errormessage": context.feil ? context.feilmeldingId : undefined, disabled: disabled }, other)),
             React.createElement("label", { className: "skjemaelement__label", htmlFor: inputId }, label)))));
@@ -34,0 +37,0 @@ }

package.json

 {
   "name": "nav-frontend-skjema",
-  "version": "3.0.53",
+  "version": "3.1.0",
   "main": "lib/index.js",
@@ -24,3 +24,3 @@ "types": "lib/index.d.ts",
     "nav-frontend-lenker": "^1.0.58",
-    "nav-frontend-skjema-style": "^2.0.29",
+    "nav-frontend-skjema-style": "^2.1.0",
     "nav-frontend-typografi": "^3.0.2",
@@ -35,3 +35,3 @@ "prop-types": "^15.5.10",
     "nav-frontend-lenker": "^1.0.60",
-    "nav-frontend-skjema-style": "^2.0.33",
+    "nav-frontend-skjema-style": "^2.1.0",
     "nav-frontend-typografi": "^3.0.4",
@@ -41,3 +41,3 @@ "prop-types": "^15.5.10",
   },
-  "gitHead": "fb1dfbc4de0a99fae1d3693ea4635e914bc24e82"
+  "gitHead": "2fd93bb2beaf9490e37be5a40c8a4e27ec1ad901"
 }

No alert changes

Improved metrics

Total package byte prevSize

144427

increased by1.39%

Lines of code

3855

increased by1.98%

No dependency changes