@fremtind/jkl-text-input-react - npm Package Compare versions

Comparing version 0.8.3 to 0.9.0

build/browser/index.js

@@ -1,2 +0,2 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { SupportLabel } from '@fremtind/jkl-typography-react';
@@ -58,40 +58,2 @@
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
 var TextField = function TextField(_ref) {
@@ -108,12 +70,18 @@ var _ref$type = _ref.type,
       label = _ref.label,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
+      className = _ref.className,
       placeholder = _ref.placeholder,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value"]);
+      variant = _ref.variant,
+      forceCompact = _ref.forceCompact,
+      maxLength = _ref.maxLength,
+      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value", "variant", "forceCompact", "maxLength"]);
 
+  var componentClassName = "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  var labelClassName = "jkl-label".concat(variant ? " jkl-label--".concat(variant) : "", forceCompact ? " jkl-label--compact" : "");
   return React.createElement("label", {
     "data-testid": "jkl-text-field",
-    className: "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", " ").concat(className)
-  }, React.createElement("input", _extends({
+    className: componentClassName
+  }, React.createElement("span", {
+    className: labelClassName
+  }, label), React.createElement("input", _extends({
     type: type,
@@ -123,12 +91,10 @@ "aria-invalid": !!errorLabel,
     id: id,
-    placeholder: " ",
+    placeholder: placeholder,
     readOnly: readOnly,
-    value: value
-  }, rest)), !value && placeholder && React.createElement("span", {
-    className: "jkl-text-field__placeholder"
-  }, placeholder), React.createElement("span", {
-    className: "jkl-text-field__label"
-  }, label), React.createElement(SupportLabel, {
+    value: value,
+    maxLength: maxLength
+  }, rest)), React.createElement(SupportLabel, {
     helpLabel: helpLabel,
-    errorLabel: errorLabel
+    errorLabel: errorLabel,
+    forceCompact: forceCompact
   }));
@@ -139,5 +105,5 @@ };
   var id = _ref.id,
+      variant = _ref.variant,
       label = _ref.label,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
+      className = _ref.className,
       helpLabel = _ref.helpLabel,
@@ -147,36 +113,19 @@ errorLabel = _ref.errorLabel,
       rows = _ref$rows === void 0 ? 7 : _ref$rows,
-      restProps = _objectWithoutProperties(_ref, ["id", "label", "className", "helpLabel", "errorLabel", "rows"]);
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? " " : _ref$placeholder,
+      restProps = _objectWithoutProperties(_ref, ["id", "variant", "label", "className", "helpLabel", "errorLabel", "rows", "placeholder"]);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var height = isFocused || restProps.value ? "".concat(rows * 2 + 0.5, "rem") : undefined;
-
-  function onBlur(event) {
-    setIsFocused(false);
-    restProps.onBlur && restProps.onBlur(event);
-  }
-
-  function onFocus() {
-    return setIsFocused(true);
-  }
-
+  var componentClassName = "jkl-text-field jkl-text-area".concat(className ? " ".concat(className) : "");
+  var labelClassName = "jkl-label".concat(variant ? " jkl-label--".concat(variant) : "");
   return React.createElement("label", {
     "data-testid": "jkl-text-field",
-    className: "jkl-text-field jkl-text-area ".concat(className)
-  }, React.createElement("textarea", _extends({
-    onFocus: onFocus,
-    onBlur: onBlur,
-    style: {
-      height: height
-    },
+    className: componentClassName
+  }, React.createElement("span", {
+    className: labelClassName
+  }, label), React.createElement("textarea", _extends({
     "aria-invalid": !!errorLabel,
-    className: "jkl-text-field__input",
+    className: "jkl-text-field__input jkl-text-field__input--".concat(rows, "-rows"),
     id: id,
-    placeholder: " "
-  }, restProps)), React.createElement("span", {
-    className: "jkl-text-field__label"
-  }, label), React.createElement(SupportLabel, {
+    placeholder: placeholder
+  }, restProps)), React.createElement(SupportLabel, {
     helpLabel: helpLabel,
@@ -183,0 +132,0 @@ errorLabel: errorLabel

build/browser/index.min.js

@@ -1,1 +0,1 @@
-import e,{useState as t}from"react";import{SupportLabel as l}from"@fremtind/jkl-typography-react";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var l,r,a=function(e,t){if(null==e)return{};var l,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var l=[],r=!0,a=!1,n=void 0;try{for(var i,o=e[Symbol.iterator]();!(r=(i=o.next()).done)&&(l.push(i.value),!t||l.length!==t);r=!0);}catch(e){a=!0,n=e}finally{try{r||null==o.return||o.return()}finally{if(a)throw n}}return l}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var i=function(t){var n=t.type,i=void 0===n?"text":n,o=t.inline,c=void 0!==o&&o,u=t.readOnly,d=void 0!==u&&u,s=t.helpLabel,f=t.errorLabel,p=t.id,b=t.label,m=t.className,v=void 0===m?"":m,y=t.placeholder,h=t.value,j=a(t,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field".concat(c?" jkl-text-field--inline":""," ").concat(v)},e.createElement("input",r({type:i,"aria-invalid":!!f,className:"jkl-text-field__input",id:p,placeholder:" ",readOnly:d,value:h},j)),!h&&y&&e.createElement("span",{className:"jkl-text-field__placeholder"},y),e.createElement("span",{className:"jkl-text-field__label"},b),e.createElement(l,{helpLabel:s,errorLabel:f}))},o=function(i){var o=i.id,c=i.label,u=i.className,d=void 0===u?"":u,s=i.helpLabel,f=i.errorLabel,p=i.rows,b=void 0===p?7:p,m=a(i,["id","label","className","helpLabel","errorLabel","rows"]),v=n(t(!1),2),y=v[0],h=v[1],j=y||m.value?"".concat(2*b+.5,"rem"):void 0;return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field jkl-text-area ".concat(d)},e.createElement("textarea",r({onFocus:function(){return h(!0)},onBlur:function(e){h(!1),m.onBlur&&m.onBlur(e)},style:{height:j},"aria-invalid":!!f,className:"jkl-text-field__input",id:o,placeholder:" "},m)),e.createElement("span",{className:"jkl-text-field__label"},c),e.createElement(l,{helpLabel:s,errorLabel:f}))};export{o as TextArea,i as TextField};
+import e from"react";import{SupportLabel as a}from"@fremtind/jkl-typography-react";function l(){return(l=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var l=arguments[a];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t])}return e}).apply(this,arguments)}function t(e,a){if(null==e)return{};var l,t,r=function(e,a){if(null==e)return{};var l,t,r={},n=Object.keys(e);for(t=0;t<n.length;t++)l=n[t],a.indexOf(l)>=0||(r[l]=e[l]);return r}(e,a);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)l=n[t],a.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}var r=function(r){var n=r.type,c=void 0===n?"text":n,o=r.inline,i=void 0!==o&&o,p=r.readOnly,d=void 0!==p&&p,s=r.helpLabel,m=r.errorLabel,b=r.id,f=r.label,u=r.className,v=r.placeholder,j=r.value,h=r.variant,x=r.forceCompact,y=r.maxLength,k=t(r,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value","variant","forceCompact","maxLength"]),L="jkl-text-field".concat(i?" jkl-text-field--inline":"",x?" jkl-text-field--compact":"",u?" ".concat(u):""),O="jkl-label".concat(h?" jkl-label--".concat(h):"",x?" jkl-label--compact":"");return e.createElement("label",{"data-testid":"jkl-text-field",className:L},e.createElement("span",{className:O},f),e.createElement("input",l({type:c,"aria-invalid":!!m,className:"jkl-text-field__input",id:b,placeholder:v,readOnly:d,value:j,maxLength:y},k)),e.createElement(a,{helpLabel:s,errorLabel:m,forceCompact:x}))},n=function(r){var n=r.id,c=r.variant,o=r.label,i=r.className,p=r.helpLabel,d=r.errorLabel,s=r.rows,m=void 0===s?7:s,b=r.placeholder,f=void 0===b?" ":b,u=t(r,["id","variant","label","className","helpLabel","errorLabel","rows","placeholder"]),v="jkl-text-field jkl-text-area".concat(i?" ".concat(i):""),j="jkl-label".concat(c?" jkl-label--".concat(c):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:v},e.createElement("span",{className:j},o),e.createElement("textarea",l({"aria-invalid":!!d,className:"jkl-text-field__input jkl-text-field__input--".concat(m,"-rows"),id:n,placeholder:f},u)),e.createElement(a,{helpLabel:p,errorLabel:d}))};export{n as TextArea,r as TextField};

build/cjs/index.js

@@ -7,4 +7,3 @@ 'use strict';
 
-var React = require('react');
-var React__default = _interopDefault(React);
+var React = _interopDefault(require('react'));
 var jklTypographyReact = require('@fremtind/jkl-typography-react');
@@ -66,40 +65,2 @@
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
 var TextField = function TextField(_ref) {
@@ -116,12 +77,18 @@ var _ref$type = _ref.type,
       label = _ref.label,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
+      className = _ref.className,
       placeholder = _ref.placeholder,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value"]);
+      variant = _ref.variant,
+      forceCompact = _ref.forceCompact,
+      maxLength = _ref.maxLength,
+      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value", "variant", "forceCompact", "maxLength"]);
 
-  return React__default.createElement("label", {
+  var componentClassName = "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  var labelClassName = "jkl-label".concat(variant ? " jkl-label--".concat(variant) : "", forceCompact ? " jkl-label--compact" : "");
+  return React.createElement("label", {
     "data-testid": "jkl-text-field",
-    className: "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", " ").concat(className)
-  }, React__default.createElement("input", _extends({
+    className: componentClassName
+  }, React.createElement("span", {
+    className: labelClassName
+  }, label), React.createElement("input", _extends({
     type: type,
@@ -131,12 +98,10 @@ "aria-invalid": !!errorLabel,
     id: id,
-    placeholder: " ",
+    placeholder: placeholder,
     readOnly: readOnly,
-    value: value
-  }, rest)), !value && placeholder && React__default.createElement("span", {
-    className: "jkl-text-field__placeholder"
-  }, placeholder), React__default.createElement("span", {
-    className: "jkl-text-field__label"
-  }, label), React__default.createElement(jklTypographyReact.SupportLabel, {
+    value: value,
+    maxLength: maxLength
+  }, rest)), React.createElement(jklTypographyReact.SupportLabel, {
     helpLabel: helpLabel,
-    errorLabel: errorLabel
+    errorLabel: errorLabel,
+    forceCompact: forceCompact
   }));
@@ -147,5 +112,5 @@ };
   var id = _ref.id,
+      variant = _ref.variant,
       label = _ref.label,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
+      className = _ref.className,
       helpLabel = _ref.helpLabel,
@@ -155,36 +120,19 @@ errorLabel = _ref.errorLabel,
       rows = _ref$rows === void 0 ? 7 : _ref$rows,
-      restProps = _objectWithoutProperties(_ref, ["id", "label", "className", "helpLabel", "errorLabel", "rows"]);
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? " " : _ref$placeholder,
+      restProps = _objectWithoutProperties(_ref, ["id", "variant", "label", "className", "helpLabel", "errorLabel", "rows", "placeholder"]);
 
-  var _useState = React.useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var height = isFocused || restProps.value ? "".concat(rows * 2 + 0.5, "rem") : undefined;
-
-  function onBlur(event) {
-    setIsFocused(false);
-    restProps.onBlur && restProps.onBlur(event);
-  }
-
-  function onFocus() {
-    return setIsFocused(true);
-  }
-
-  return React__default.createElement("label", {
+  var componentClassName = "jkl-text-field jkl-text-area".concat(className ? " ".concat(className) : "");
+  var labelClassName = "jkl-label".concat(variant ? " jkl-label--".concat(variant) : "");
+  return React.createElement("label", {
     "data-testid": "jkl-text-field",
-    className: "jkl-text-field jkl-text-area ".concat(className)
-  }, React__default.createElement("textarea", _extends({
-    onFocus: onFocus,
-    onBlur: onBlur,
-    style: {
-      height: height
-    },
+    className: componentClassName
+  }, React.createElement("span", {
+    className: labelClassName
+  }, label), React.createElement("textarea", _extends({
     "aria-invalid": !!errorLabel,
-    className: "jkl-text-field__input",
+    className: "jkl-text-field__input jkl-text-field__input--".concat(rows, "-rows"),
     id: id,
-    placeholder: " "
-  }, restProps)), React__default.createElement("span", {
-    className: "jkl-text-field__label"
-  }, label), React__default.createElement(jklTypographyReact.SupportLabel, {
+    placeholder: placeholder
+  }, restProps)), React.createElement(jklTypographyReact.SupportLabel, {
     helpLabel: helpLabel,
@@ -191,0 +139,0 @@ errorLabel: errorLabel

build/esm/index.js

@@ -1,2 +0,2 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { SupportLabel } from '@fremtind/jkl-typography-react';
@@ -58,40 +58,2 @@
 
-function _slicedToArray(arr, i) {
-  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
-}
-
-function _arrayWithHoles(arr) {
-  if (Array.isArray(arr)) return arr;
-}
-
-function _iterableToArrayLimit(arr, i) {
-  var _arr = [];
-  var _n = true;
-  var _d = false;
-  var _e = undefined;
-
-  try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
-      _arr.push(_s.value);
-
-      if (i && _arr.length === i) break;
-    }
-  } catch (err) {
-    _d = true;
-    _e = err;
-  } finally {
-    try {
-      if (!_n && _i["return"] != null) _i["return"]();
-    } finally {
-      if (_d) throw _e;
-    }
-  }
-
-  return _arr;
-}
-
-function _nonIterableRest() {
-  throw new TypeError("Invalid attempt to destructure non-iterable instance");
-}
-
 var TextField = function TextField(_ref) {
@@ -108,12 +70,18 @@ var _ref$type = _ref.type,
       label = _ref.label,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
+      className = _ref.className,
       placeholder = _ref.placeholder,
       value = _ref.value,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value"]);
+      variant = _ref.variant,
+      forceCompact = _ref.forceCompact,
+      maxLength = _ref.maxLength,
+      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value", "variant", "forceCompact", "maxLength"]);
 
+  var componentClassName = "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  var labelClassName = "jkl-label".concat(variant ? " jkl-label--".concat(variant) : "", forceCompact ? " jkl-label--compact" : "");
   return React.createElement("label", {
     "data-testid": "jkl-text-field",
-    className: "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", " ").concat(className)
-  }, React.createElement("input", _extends({
+    className: componentClassName
+  }, React.createElement("span", {
+    className: labelClassName
+  }, label), React.createElement("input", _extends({
     type: type,
@@ -123,12 +91,10 @@ "aria-invalid": !!errorLabel,
     id: id,
-    placeholder: " ",
+    placeholder: placeholder,
     readOnly: readOnly,
-    value: value
-  }, rest)), !value && placeholder && React.createElement("span", {
-    className: "jkl-text-field__placeholder"
-  }, placeholder), React.createElement("span", {
-    className: "jkl-text-field__label"
-  }, label), React.createElement(SupportLabel, {
+    value: value,
+    maxLength: maxLength
+  }, rest)), React.createElement(SupportLabel, {
     helpLabel: helpLabel,
-    errorLabel: errorLabel
+    errorLabel: errorLabel,
+    forceCompact: forceCompact
   }));
@@ -139,5 +105,5 @@ };
   var id = _ref.id,
+      variant = _ref.variant,
       label = _ref.label,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? "" : _ref$className,
+      className = _ref.className,
       helpLabel = _ref.helpLabel,
@@ -147,36 +113,19 @@ errorLabel = _ref.errorLabel,
       rows = _ref$rows === void 0 ? 7 : _ref$rows,
-      restProps = _objectWithoutProperties(_ref, ["id", "label", "className", "helpLabel", "errorLabel", "rows"]);
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? " " : _ref$placeholder,
+      restProps = _objectWithoutProperties(_ref, ["id", "variant", "label", "className", "helpLabel", "errorLabel", "rows", "placeholder"]);
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isFocused = _useState2[0],
-      setIsFocused = _useState2[1];
-
-  var height = isFocused || restProps.value ? "".concat(rows * 2 + 0.5, "rem") : undefined;
-
-  function onBlur(event) {
-    setIsFocused(false);
-    restProps.onBlur && restProps.onBlur(event);
-  }
-
-  function onFocus() {
-    return setIsFocused(true);
-  }
-
+  var componentClassName = "jkl-text-field jkl-text-area".concat(className ? " ".concat(className) : "");
+  var labelClassName = "jkl-label".concat(variant ? " jkl-label--".concat(variant) : "");
   return React.createElement("label", {
     "data-testid": "jkl-text-field",
-    className: "jkl-text-field jkl-text-area ".concat(className)
-  }, React.createElement("textarea", _extends({
-    onFocus: onFocus,
-    onBlur: onBlur,
-    style: {
-      height: height
-    },
+    className: componentClassName
+  }, React.createElement("span", {
+    className: labelClassName
+  }, label), React.createElement("textarea", _extends({
     "aria-invalid": !!errorLabel,
-    className: "jkl-text-field__input",
+    className: "jkl-text-field__input jkl-text-field__input--".concat(rows, "-rows"),
     id: id,
-    placeholder: " "
-  }, restProps)), React.createElement("span", {
-    className: "jkl-text-field__label"
-  }, label), React.createElement(SupportLabel, {
+    placeholder: placeholder
+  }, restProps)), React.createElement(SupportLabel, {
     helpLabel: helpLabel,
@@ -183,0 +132,0 @@ errorLabel: errorLabel

build/esm/index.min.js

@@ -1,1 +0,1 @@
-import e,{useState as t}from"react";import{SupportLabel as l}from"@fremtind/jkl-typography-react";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var l=arguments[t];for(var r in l)Object.prototype.hasOwnProperty.call(l,r)&&(e[r]=l[r])}return e}).apply(this,arguments)}function a(e,t){if(null==e)return{};var l,r,a=function(e,t){if(null==e)return{};var l,r,a={},n=Object.keys(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||(a[l]=e[l]);return a}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(r=0;r<n.length;r++)l=n[r],t.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(a[l]=e[l])}return a}function n(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var l=[],r=!0,a=!1,n=void 0;try{for(var i,o=e[Symbol.iterator]();!(r=(i=o.next()).done)&&(l.push(i.value),!t||l.length!==t);r=!0);}catch(e){a=!0,n=e}finally{try{r||null==o.return||o.return()}finally{if(a)throw n}}return l}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var i=function(t){var n=t.type,i=void 0===n?"text":n,o=t.inline,c=void 0!==o&&o,u=t.readOnly,d=void 0!==u&&u,s=t.helpLabel,f=t.errorLabel,p=t.id,b=t.label,m=t.className,v=void 0===m?"":m,y=t.placeholder,h=t.value,j=a(t,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value"]);return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field".concat(c?" jkl-text-field--inline":""," ").concat(v)},e.createElement("input",r({type:i,"aria-invalid":!!f,className:"jkl-text-field__input",id:p,placeholder:" ",readOnly:d,value:h},j)),!h&&y&&e.createElement("span",{className:"jkl-text-field__placeholder"},y),e.createElement("span",{className:"jkl-text-field__label"},b),e.createElement(l,{helpLabel:s,errorLabel:f}))},o=function(i){var o=i.id,c=i.label,u=i.className,d=void 0===u?"":u,s=i.helpLabel,f=i.errorLabel,p=i.rows,b=void 0===p?7:p,m=a(i,["id","label","className","helpLabel","errorLabel","rows"]),v=n(t(!1),2),y=v[0],h=v[1],j=y||m.value?"".concat(2*b+.5,"rem"):void 0;return e.createElement("label",{"data-testid":"jkl-text-field",className:"jkl-text-field jkl-text-area ".concat(d)},e.createElement("textarea",r({onFocus:function(){return h(!0)},onBlur:function(e){h(!1),m.onBlur&&m.onBlur(e)},style:{height:j},"aria-invalid":!!f,className:"jkl-text-field__input",id:o,placeholder:" "},m)),e.createElement("span",{className:"jkl-text-field__label"},c),e.createElement(l,{helpLabel:s,errorLabel:f}))};export{o as TextArea,i as TextField};
+import e from"react";import{SupportLabel as a}from"@fremtind/jkl-typography-react";function l(){return(l=Object.assign||function(e){for(var a=1;a<arguments.length;a++){var l=arguments[a];for(var t in l)Object.prototype.hasOwnProperty.call(l,t)&&(e[t]=l[t])}return e}).apply(this,arguments)}function t(e,a){if(null==e)return{};var l,t,r=function(e,a){if(null==e)return{};var l,t,r={},n=Object.keys(e);for(t=0;t<n.length;t++)l=n[t],a.indexOf(l)>=0||(r[l]=e[l]);return r}(e,a);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(t=0;t<n.length;t++)l=n[t],a.indexOf(l)>=0||Object.prototype.propertyIsEnumerable.call(e,l)&&(r[l]=e[l])}return r}var r=function(r){var n=r.type,c=void 0===n?"text":n,o=r.inline,i=void 0!==o&&o,p=r.readOnly,d=void 0!==p&&p,s=r.helpLabel,m=r.errorLabel,b=r.id,f=r.label,u=r.className,v=r.placeholder,j=r.value,h=r.variant,x=r.forceCompact,y=r.maxLength,k=t(r,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value","variant","forceCompact","maxLength"]),L="jkl-text-field".concat(i?" jkl-text-field--inline":"",x?" jkl-text-field--compact":"",u?" ".concat(u):""),O="jkl-label".concat(h?" jkl-label--".concat(h):"",x?" jkl-label--compact":"");return e.createElement("label",{"data-testid":"jkl-text-field",className:L},e.createElement("span",{className:O},f),e.createElement("input",l({type:c,"aria-invalid":!!m,className:"jkl-text-field__input",id:b,placeholder:v,readOnly:d,value:j,maxLength:y},k)),e.createElement(a,{helpLabel:s,errorLabel:m,forceCompact:x}))},n=function(r){var n=r.id,c=r.variant,o=r.label,i=r.className,p=r.helpLabel,d=r.errorLabel,s=r.rows,m=void 0===s?7:s,b=r.placeholder,f=void 0===b?" ":b,u=t(r,["id","variant","label","className","helpLabel","errorLabel","rows","placeholder"]),v="jkl-text-field jkl-text-area".concat(i?" ".concat(i):""),j="jkl-label".concat(c?" jkl-label--".concat(c):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:v},e.createElement("span",{className:j},o),e.createElement("textarea",l({"aria-invalid":!!d,className:"jkl-text-field__input jkl-text-field__input--".concat(m,"-rows"),id:n,placeholder:f},u)),e.createElement(a,{helpLabel:p,errorLabel:d}))};export{n as TextArea,r as TextField};

build/TextArea.d.ts

 import { ChangeEvent, FocusEvent } from "react";
+import { LabelVariant } from "@fremtind/jkl-core";
 interface Props {
@@ -13,4 +14,6 @@ label: string;
     rows?: number;
+    placeholder?: string;
+    variant?: LabelVariant;
 }
-export declare const TextArea: ({ id, label, className, helpLabel, errorLabel, rows, ...restProps }: Props) => JSX.Element;
+export declare const TextArea: ({ id, variant, label, className, helpLabel, errorLabel, rows, placeholder, ...restProps }: Props) => JSX.Element;
 export {};

build/TextField.d.ts

 import { ChangeEvent, FocusEvent } from "react";
+import { LabelVariant } from "@fremtind/jkl-core";
 interface Props {
@@ -18,4 +19,7 @@ label: string;
     placeholder?: string;
+    variant?: LabelVariant;
+    forceCompact?: boolean;
+    maxLength?: number;
 }
-export declare const TextField: ({ type, inline, readOnly, helpLabel, errorLabel, id, label, className, placeholder, value, ...rest }: Props) => JSX.Element;
+export declare const TextField: ({ type, inline, readOnly, helpLabel, errorLabel, id, label, className, placeholder, value, variant, forceCompact, maxLength, ...rest }: Props) => JSX.Element;
 export {};

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+# [0.9.0](https://github.com/fremtind/jokul/compare/@fremtind/jkl-text-input-react@0.8.3...@fremtind/jkl-text-input-react@0.9.0) (2019-10-09)
+
+
+### Bug Fixes
+
+* **text-field-test:** fixed test for max-length ([9dd8cb1](https://github.com/fremtind/jokul/commit/9dd8cb1)), closes [#419](https://github.com/fremtind/jokul/issues/419)
+
+
+### Features
+
+* **field-group:** remove Field component and update style of FieldGroup ([8a451ac](https://github.com/fremtind/jokul/commit/8a451ac))
+* extract label styles to core ([9fad287](https://github.com/fremtind/jokul/commit/9fad287))
+* implement Field pattern in text input ([f3877e4](https://github.com/fremtind/jokul/commit/f3877e4))
+* **text-field:** add max length to text-input ([4c27f39](https://github.com/fremtind/jokul/commit/4c27f39)), closes [#418](https://github.com/fremtind/jokul/issues/418)
+* **text-field:** add option to force compact mode ([07c7fea](https://github.com/fremtind/jokul/commit/07c7fea))
+* **text-field:** implement new design for text inputs ([13b45c6](https://github.com/fremtind/jokul/commit/13b45c6))
+* **text-input-react:** restore structure of text areas ([588dad5](https://github.com/fremtind/jokul/commit/588dad5))
+* **text-input-react:** restore structure of text inputs ([c520540](https://github.com/fremtind/jokul/commit/c520540))
+
+
+
+
+
 ## [0.8.3](https://github.com/fremtind/jokul/compare/@fremtind/jkl-text-input-react@0.8.2...@fremtind/jkl-text-input-react@0.8.3) (2019-09-26)
@@ -8,0 +31,0 @@

package.json

 {
     "name": "@fremtind/jkl-text-input-react",
-    "version": "0.8.3",
+    "version": "0.9.0",
     "publishConfig": {
@@ -40,7 +40,7 @@ "access": "public"
     "dependencies": {
-        "@fremtind/jkl-text-input": "^0.9.3",
-        "@fremtind/jkl-typography-react": "^0.8.3"
+        "@fremtind/jkl-text-input": "^0.10.0",
+        "@fremtind/jkl-typography-react": "^0.9.0"
     },
     "devDependencies": {
-        "@fremtind/browserslist-config-jkl": "^0.3.5"
+        "@fremtind/browserslist-config-jkl": "^0.4.0"
     },
@@ -63,3 +63,3 @@ "peerDependencies": {
     ],
-    "gitHead": "d7e02258d7fcaca6f3c26ffbfcd63a1ae855d81f"
+    "gitHead": "f79916c3cf2d48704066a05a77f7b9b57c7fbf64"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

29970

decreased by-4.34%

Lines of code

406

decreased by-22.22%

Dependency changes

• + Added@fremtind/jkl-core@0.11.0(transitive)

• + Added@fremtind/jkl-text-input@0.10.0(transitive)

• + Added@fremtind/jkl-typography-react@0.9.0(transitive)

• - Removed@fremtind/jkl-core@0.10.2(transitive)

• - Removed@fremtind/jkl-text-input@0.9.3(transitive)

• - Removed@fremtind/jkl-typography-react@0.8.3(transitive)

• Updated@fremtind/jkl-text-input@^0.10.0

• Updated@fremtind/jkl-typography-react@^0.9.0