nav-frontend-skjema - npm Package Compare versions

Comparing version 0.1.6 to 0.1.7

lib/checkbox.js

@@ -40,5 +40,8 @@ 'use strict';
 
-var cls = function cls(className, harFeil) {
-    return (0, _classnames2.default)('skjemaelement skjemaelement--horisontal', className, {
-        'skjemaelement--harFeil': harFeil
+var cls = function cls(className) {
+    return (0, _classnames2.default)('skjemaelement skjemaelement--horisontal', className);
+};
+var inputCls = function inputCls(harFeil) {
+    return (0, _classnames2.default)('skjemaelement__input checkboks', {
+        'skjemaelement__input--harFeil': harFeil
     });
@@ -74,6 +77,6 @@ };
                 'div',
-                { className: cls(className, !!feil) },
+                { className: cls(className) },
                 _react2.default.createElement('input', _extends({
                     type: 'checkbox',
-                    className: 'skjemaelement__input checkboks',
+                    className: inputCls(feil),
                     id: inputId,
@@ -80,0 +83,0 @@ ref: checkboxRef

lib/input.js

@@ -38,7 +38,7 @@ 'use strict';
 
-var inputClass = function inputClass(width, className) {
-    return (0, _classnames2.default)('skjemaelement__input', className, 'input--' + width);
+var cls = function cls(className) {
+    return (0, _classnames2.default)('skjemaelement', className);
 };
-var skjemaElementClass = function skjemaElementClass(harFeil, className) {
-    return (0, _classnames2.default)('skjemaelement', className, { 'skjemaelement--harFeil': harFeil });
+var inputClass = function inputClass(width, className, harFeil) {
+    return (0, _classnames2.default)('skjemaelement__input', className, 'input--' + width, { 'skjemaelement__input--harFeil': harFeil });
 };
@@ -78,3 +78,3 @@
                 'div',
-                { className: skjemaElementClass(!!feil, className) },
+                { className: cls(className) },
                 _react2.default.createElement(
@@ -87,3 +87,3 @@ 'label',
                     type: 'text',
-                    className: inputClass(bredde, inputClassName),
+                    className: inputClass(bredde, inputClassName, feil),
                     id: inputId
@@ -90,0 +90,0 @@ }, other, {

lib/select.js

@@ -40,5 +40,8 @@ 'use strict';
 
-var cls = function cls(className, harFeil) {
-    return (0, _classnames2.default)('skjemaelement', className, {
-        'skjemaelement--harFeil': harFeil
+var cls = function cls(className) {
+    return (0, _classnames2.default)('skjemaelement', className);
+};
+var inputCls = function inputCls(harFeil) {
+    return (0, _classnames2.default)('skjemaelement__input', {
+        'skjemaelement__input--harFeil': harFeil
     });
@@ -79,3 +82,3 @@ };
                 'div',
-                { className: cls(className, !!feil) },
+                { className: cls(className) },
                 _react2.default.createElement(
@@ -93,3 +96,3 @@ 'label',
                             id: inputId,
-                            className: 'skjemaelement__input',
+                            className: inputCls(feil),
                             ref: selectRef
@@ -96,0 +99,0 @@ }, other),

lib/skjema-gruppe.js

@@ -40,12 +40,6 @@ 'use strict';
     return (0, _classnames2.default)(className, {
-        'skjema--harFeil': harFeil
+        'skjema__feilomrade--harFeil': harFeil
     });
 };
 
-var clsFeilomrade = function clsFeilomrade(harFeil) {
-    return (0, _classnames2.default)({
-        skjema__feilomrade: harFeil
-    });
-};
-
 /**
@@ -76,17 +70,13 @@ * Fieldset
                 'div',
-                _extends({ className: cls(className, !!feil) }, other),
+                _extends({ className: cls(className, feil) }, other),
                 _react2.default.createElement(
                     'div',
-                    { className: clsFeilomrade(!!feil) },
-                    _react2.default.createElement(
-                        'div',
-                        { className: 'skjemaelement__sporsmal' },
-                        title
-                    ),
-                    children,
-                    _react2.default.createElement(
-                        'div',
-                        { role: 'alert', 'aria-live': 'assertive', className: 'skjemaelement__feilmelding' },
-                        feil ? feil.feilmelding : null
-                    )
+                    { className: 'skjemaelement__sporsmal' },
+                    title
+                ),
+                children,
+                _react2.default.createElement(
+                    'div',
+                    { role: 'alert', 'aria-live': 'assertive', className: 'skjemaelement__feilmelding' },
+                    feil ? feil.feilmelding : null
                 )
@@ -93,0 +83,0 @@ );

lib/textarea.js

@@ -38,5 +38,10 @@ 'use strict';
 
+var inputCls = function inputCls(className, harFeil) {
+    return (0, _classnames2.default)(className, 'skjemaelement__input textarea--medMeta', { 'skjemaelement__input--harFeil': harFeil });
+};
+
 /**
  * Selvekspanderende tekstområde med teller
  */
+
 var Textarea = function (_Component) {
@@ -92,13 +97,7 @@ _inherits(Textarea, _Component);
             var textareaId = id || name || (0, _navFrontendJsUtils.guid)();
-            var cls = function cls(className) {
-                return (0, _classnames2.default)(className, 'skjemaelement__input textarea--medMeta');
-            };
             var antallTegn = other.value.length;
-            var skjemaElementClass = function skjemaElementClass(harFeil) {
-                return (0, _classnames2.default)('skjemaelement', 'textarea--container', { 'skjemaelement--harFeil': harFeil });
-            };
 
             return _react2.default.createElement(
                 'div',
-                { className: skjemaElementClass(!!feil) },
+                { className: 'skjemaelement textarea--container' },
                 _react2.default.createElement(
@@ -115,3 +114,3 @@ 'label',
                     onChange: this.handleChange,
-                    className: cls(textareaClass),
+                    className: inputCls(textareaClass, feil),
                     type: 'text',
@@ -118,0 +117,0 @@ id: textareaId,

package.json

 {
   "name": "nav-frontend-skjema",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "main": "lib/index.js",
@@ -18,3 +18,3 @@ "jsnext:main": "src/index.js",
     "nav-frontend-js-utils": "0.2.5",
-    "nav-frontend-skjema-style": "0.3.1",
+    "nav-frontend-skjema-style": "0.3.2",
     "prop-types": "^15.5.10",
@@ -27,3 +27,3 @@ "react": "^15.4.2"
     "nav-frontend-js-utils": "0.2.5",
-    "nav-frontend-skjema-style": "0.3.1",
+    "nav-frontend-skjema-style": "0.3.2",
     "prop-types": "^15.5.10",
@@ -30,0 +30,0 @@ "react": "^15.4.2"

src/checkbox.js

@@ -8,4 +8,5 @@ import PT from 'prop-types';
 
-const cls = (className, harFeil) => classNames('skjemaelement skjemaelement--horisontal', className, {
-    'skjemaelement--harFeil': harFeil
+const cls = (className) => classNames('skjemaelement skjemaelement--horisontal', className);
+const inputCls = (harFeil) => classNames('skjemaelement__input checkboks', {
+    'skjemaelement__input--harFeil': harFeil
 });
@@ -22,6 +23,6 @@
         return (
-            <div className={cls(className, !!feil)}>
+            <div className={cls(className)}>
                 <input
                     type="checkbox"
-                    className="skjemaelement__input checkboks"
+                    className={inputCls(feil)}
                     id={inputId}
@@ -28,0 +29,0 @@ ref={checkboxRef}

src/input.js

@@ -7,7 +7,8 @@ import React, { Component } from 'react';
 
-const inputClass = (width, className) => classNames('skjemaelement__input', className, `input--${width}`);
-const skjemaElementClass = (harFeil, className) => classNames(
-    'skjemaelement',
+const cls = (className) => classNames('skjemaelement', className);
+const inputClass = (width, className, harFeil) => classNames(
+    'skjemaelement__input',
     className,
-    { 'skjemaelement--harFeil': harFeil }
+    `input--${width}`,
+    { 'skjemaelement__input--harFeil': harFeil }
 );
@@ -24,7 +25,7 @@
         return (
-            <div className={skjemaElementClass(!!feil, className)}>
+            <div className={cls(className)}>
                 <label className="skjemaelement__label" htmlFor={inputId}>{label}</label>
                 <input
                     type="text"
-                    className={inputClass(bredde, inputClassName)}
+                    className={inputClass(bredde, inputClassName, feil)}
                     id={inputId}
@@ -31,0 +32,0 @@ {...other}

src/select.js

@@ -8,4 +8,5 @@ import PT from 'prop-types';
 
-const cls = (className, harFeil) => classNames('skjemaelement', className, {
-    'skjemaelement--harFeil': harFeil
+const cls = (className) => classNames('skjemaelement', className);
+const inputCls = (harFeil) => classNames('skjemaelement__input', {
+    'skjemaelement__input--harFeil': harFeil
 });
@@ -23,3 +24,3 @@ const selectCls = (bredde) => classNames('selectContainer', `input--${bredde}`);
         return (
-            <div className={cls(className, !!feil)}>
+            <div className={cls(className)}>
                 <label className="skjemaelement__label" htmlFor={inputId}>
@@ -31,3 +32,3 @@ {label}
                         id={inputId}
-                        className="skjemaelement__input"
+                        className={inputCls(feil)}
                         ref={selectRef}
@@ -34,0 +35,0 @@ {...other}

src/skjema-gruppe.js

@@ -8,9 +8,5 @@ import PT from 'prop-types';
 const cls = (className, harFeil) => classNames(className, {
-    'skjema--harFeil': harFeil
+    'skjema__feilomrade--harFeil': harFeil
 });
 
-const clsFeilomrade = (harFeil) => classNames({
-    skjema__feilomrade: harFeil
-});
-
 /**
@@ -23,9 +19,7 @@ * Fieldset
         return (
-            <div className={cls(className, !!feil)} {...other}>
-                <div className={clsFeilomrade(!!feil)}>
-                    <div className="skjemaelement__sporsmal">{title}</div>
-                    {children}
-                    <div role="alert" aria-live="assertive" className="skjemaelement__feilmelding">
-                        {feil ? feil.feilmelding : null}
-                    </div>
+            <div className={cls(className, feil)} {...other}>
+                <div className="skjemaelement__sporsmal">{title}</div>
+                {children}
+                <div role="alert" aria-live="assertive" className="skjemaelement__feilmelding">
+                    {feil ? feil.feilmelding : null}
                 </div>
@@ -32,0 +26,0 @@ </div>

src/textarea.js

@@ -7,2 +7,8 @@ import PT from 'prop-types';
 
+const inputCls = (className, harFeil) => classNames(
+    className,
+    'skjemaelement__input textarea--medMeta',
+    { 'skjemaelement__input--harFeil': harFeil }
+);
+
 /**
@@ -38,14 +44,7 @@ * Selvekspanderende tekstområde med teller
         const { label, maxLength, textareaClass, id, name, feil, tellerTekst, textareaRef, ...other } = this.props;
-
         const textareaId = id || name || guid();
-        const cls = (className) => classNames(className, 'skjemaelement__input textarea--medMeta');
         const antallTegn = other.value.length;
-        const skjemaElementClass = (harFeil) => classNames(
-            'skjemaelement',
-            'textarea--container',
-            { 'skjemaelement--harFeil': harFeil }
-        );
 
         return (
-            <div className={skjemaElementClass(!!feil)}>
+            <div className="skjemaelement textarea--container">
                 <label className="skjemaelement__label" htmlFor={textareaId}>
@@ -60,3 +59,3 @@ {label}
                     onChange={this.handleChange}
-                    className={cls(textareaClass)}
+                    className={inputCls(textareaClass, feil)}
                     type="text"
@@ -63,0 +62,0 @@ id={textareaId}

No alert changes

Worsened metrics

Total package byte prevSize

64187

decreased by-0.85%

Lines of code

1428

decreased by-0.63%

No dependency changes