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

Comparing version 1.0.0-alpha.13 to 1.0.0-alpha.14

build/browser/index.js

@@ -58,47 +58,46 @@ import React from 'react';
 
+function getWidthAsStyle(width, maxLength) {
+  if (width) {
+    return {
+      width: width
+    }; // prioritize width prop
+  }
+
+  if (maxLength && maxLength < 15) {
+    return {
+      width: "".concat(maxLength + 3, "ch")
+    }; // else use maxLength if not large
+  }
+
+  return undefined;
+}
+
+var BaseInputField = function BaseInputField(_ref) {
+  var maxLength = _ref.maxLength,
+      width = _ref.width,
+      invalid = _ref.invalid,
+      ariaDescribedby = _ref.ariaDescribedby,
+      rest = _objectWithoutProperties(_ref, ["maxLength", "width", "invalid", "ariaDescribedby"]);
+
+  var style = getWidthAsStyle(width, maxLength);
+  return React.createElement("input", _extends({
+    "data-testid": "jkl-text-field__input",
+    className: "jkl-text-field__input",
+    maxLength: maxLength,
+    style: style,
+    "aria-describedby": ariaDescribedby,
+    "aria-invalid": invalid
+  }, rest));
+};
+
 var TextField = function TextField(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "text" : _ref$type,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      helpLabel = _ref.helpLabel,
+  var helpLabel = _ref.helpLabel,
       errorLabel = _ref.errorLabel,
-      id = _ref.id,
       label = _ref.label,
       className = _ref.className,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
       variant = _ref.variant,
       forceCompact = _ref.forceCompact,
-      maxLength = _ref.maxLength,
-      width = _ref.width,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value", "variant", "forceCompact", "maxLength", "width"]);
+      rest = _objectWithoutProperties(_ref, ["helpLabel", "errorLabel", "label", "className", "variant", "forceCompact"]);
 
-  // Give warning when errorLabel or helpLabel is used on an inline TextField
-  if (process.env.NODE_ENV !== "production") {
-    if (inline && (helpLabel || errorLabel)) {
-      console.warn("WARNING: Inline TextFields do not display help- or error labels! The errorLabel prop can still be used to trigger an invalid state, but the reason will have to be described elsewhere.");
-    }
-  }
-
-  var componentClassName = "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
-
-  function getWidthAsStyle() {
-    if (width) {
-      return {
-        width: width
-      }; // prioritize width prop
-    }
-
-    if (maxLength && maxLength < 15) {
-      return {
-        width: "".concat(maxLength + 3, "ch")
-      }; // else use maxLength if not large
-    }
-
-    return undefined;
-  }
-
+  var componentClassName = "jkl-text-field".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
   return React.createElement("label", {
@@ -108,16 +107,7 @@ "data-testid": "jkl-text-field",
   }, React.createElement(Label, {
-    srOnly: inline,
     variant: variant,
     forceCompact: forceCompact
-  }, label), React.createElement("input", _extends({
-    type: type,
-    "aria-invalid": !!errorLabel,
-    className: "jkl-text-field__input",
-    id: id,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    value: value,
-    maxLength: maxLength,
-    style: getWidthAsStyle()
-  }, rest)), !inline && React.createElement(SupportLabel, {
+  }, label), React.createElement(BaseInputField, _extends({
+    invalid: !!errorLabel
+  }, rest)), React.createElement(SupportLabel, {
     helpLabel: helpLabel,
@@ -162,2 +152,101 @@ errorLabel: errorLabel,
 
-export { TextArea, TextField };
+var IconSearch = function IconSearch() {
+  return React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }, React.createElement("path", {
+    d: "M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5  4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5  8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"
+  }));
+};
+
+var IconClear = function IconClear() {
+  return React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }, React.createElement("path", {
+    d: "M12 11.293l10.293-10.293.707.707-10.293 10.293 10.293 10.293-.707.707-10.293-10.293-10.293 10.293-.707-.707 10.293-10.293-10.293-10.293.707-.707 10.293 10.293z"
+  }));
+};
+
+function getIcon(actionType) {
+  switch (actionType) {
+    case "clear":
+      return React.createElement(IconClear, null);
+
+    case "search":
+      return React.createElement(IconSearch, null);
+
+    default:
+      return null;
+  }
+}
+
+var ActionIcon = function ActionIcon(_ref) {
+  var action = _ref.action,
+      className = _ref.className;
+  return React.createElement("span", {
+    "data-testid": "jkl-action-icon",
+    className: className
+  }, getIcon(action));
+};
+
+var ActionTextField = function ActionTextField(_ref) {
+  var action = _ref.action,
+      forceCompact = _ref.forceCompact,
+      className = _ref.className,
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
+      variant = _ref.variant,
+      label = _ref.label,
+      baseInputProps = _objectWithoutProperties(_ref, ["action", "forceCompact", "className", "helpLabel", "errorLabel", "variant", "label"]);
+
+  var componentClassName = "jkl-text-field jkl-text-field--action".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  return React.createElement("label", {
+    "data-testid": "jkl-text-field",
+    className: componentClassName
+  }, React.createElement(Label, {
+    variant: variant,
+    forceCompact: forceCompact
+  }, label), React.createElement("div", {
+    className: "jkl-text-field__input-wrapper"
+  }, React.createElement(BaseInputField, _extends({
+    invalid: !!errorLabel
+  }, baseInputProps)), React.createElement("button", {
+    type: "button",
+    className: "jkl-text-field__action-button",
+    onClick: action.onClick,
+    "aria-label": action.label,
+    title: action.label
+  }, React.createElement(ActionIcon, {
+    className: "jkl-text-field__action-icon",
+    action: action.icon
+  }))), React.createElement(SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel,
+    forceCompact: forceCompact
+  }));
+};
+
+var InlineTextField = function InlineTextField(_ref) {
+  var label = _ref.label,
+      className = _ref.className,
+      variant = _ref.variant,
+      forceCompact = _ref.forceCompact,
+      rest = _objectWithoutProperties(_ref, ["label", "className", "variant", "forceCompact"]);
+
+  var componentClassName = "jkl-text-field jkl-text-field--inline".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  return React.createElement("label", {
+    "data-testid": "jkl-text-field",
+    className: componentClassName
+  }, React.createElement(Label, {
+    srOnly: true,
+    variant: variant,
+    forceCompact: forceCompact
+  }, label), React.createElement(BaseInputField, rest));
+};
+
+export { ActionTextField, BaseInputField, InlineTextField, TextArea, TextField };

build/browser/index.min.js

@@ -1,1 +0,1 @@
-import e from"react";import{Label as t,SupportLabel as a}from"@fremtind/jkl-typography-react";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var a,r,l=function(e,t){if(null==e)return{};var a,r,l={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var o=function(o){var n=o.type,i=void 0===n?"text":n,c=o.inline,d=void 0!==c&&c,p=o.readOnly,s=void 0!==p&&p,m=o.helpLabel,f=o.errorLabel,b=o.id,h=o.label,v=o.className,u=o.placeholder,y=o.value,x=o.variant,j=o.forceCompact,L=o.maxLength,O=o.width,k=l(o,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value","variant","forceCompact","maxLength","width"]);"production"!==process.env.NODE_ENV&&d&&(m||f)&&console.warn("WARNING: Inline TextFields do not display help- or error labels! The errorLabel prop can still be used to trigger an invalid state, but the reason will have to be described elsewhere.");var w="jkl-text-field".concat(d?" jkl-text-field--inline":"",j?" jkl-text-field--compact":"",v?" ".concat(v):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:w},e.createElement(t,{srOnly:d,variant:x,forceCompact:j},h),e.createElement("input",r({type:i,"aria-invalid":!!f,className:"jkl-text-field__input",id:b,placeholder:u,readOnly:s,value:y,maxLength:L,style:O?{width:O}:L&&L<15?{width:"".concat(L+3,"ch")}:void 0},k)),!d&&e.createElement(a,{helpLabel:m,errorLabel:f,forceCompact:j}))},n=function(o){var n=o.id,i=o.variant,c=o.label,d=o.className,p=o.helpLabel,s=o.errorLabel,m=o.rows,f=void 0===m?7:m,b=o.placeholder,h=void 0===b?" ":b,v=o.forceCompact,u=l(o,["id","variant","label","className","helpLabel","errorLabel","rows","placeholder","forceCompact"]),y="jkl-text-field jkl-text-area".concat(v?" jkl-text-field--compact":"",d?" ".concat(d):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:y},e.createElement(t,{variant:i,forceCompact:v},c),e.createElement("textarea",r({"aria-invalid":!!s,className:"jkl-text-field__input jkl-text-field__input--".concat(f,"-rows"),id:n,placeholder:h},u)),e.createElement(a,{helpLabel:p,errorLabel:s,forceCompact:v}))};export{n as TextArea,o as TextField};
+import e from"react";import{Label as t,SupportLabel as a}from"@fremtind/jkl-typography-react";function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var a,l,r=function(e,t){if(null==e)return{};var a,l,r={},c=Object.keys(e);for(l=0;l<c.length;l++)a=c[l],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(l=0;l<c.length;l++)a=c[l],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=function(t){var a=t.maxLength,c=t.width,n=t.invalid,i=t.ariaDescribedby,o=r(t,["maxLength","width","invalid","ariaDescribedby"]),m=function(e,t){return e?{width:e}:t&&t<15?{width:"".concat(t+3,"ch")}:void 0}(c,a);return e.createElement("input",l({"data-testid":"jkl-text-field__input",className:"jkl-text-field__input",maxLength:a,style:m,"aria-describedby":i,"aria-invalid":n},o))},n=function(n){var i=n.helpLabel,o=n.errorLabel,m=n.label,s=n.className,d=n.variant,f=n.forceCompact,p=r(n,["helpLabel","errorLabel","label","className","variant","forceCompact"]),u="jkl-text-field".concat(f?" jkl-text-field--compact":"",s?" ".concat(s):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:u},e.createElement(t,{variant:d,forceCompact:f},m),e.createElement(c,l({invalid:!!o},p)),e.createElement(a,{helpLabel:i,errorLabel:o,forceCompact:f}))},i=function(c){var n=c.id,i=c.variant,o=c.label,m=c.className,s=c.helpLabel,d=c.errorLabel,f=c.rows,p=void 0===f?7:f,u=c.placeholder,b=void 0===u?" ":u,v=c.forceCompact,x=r(c,["id","variant","label","className","helpLabel","errorLabel","rows","placeholder","forceCompact"]),h="jkl-text-field jkl-text-area".concat(v?" jkl-text-field--compact":"",m?" ".concat(m):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:h},e.createElement(t,{variant:i,forceCompact:v},o),e.createElement("textarea",l({"aria-invalid":!!d,className:"jkl-text-field__input jkl-text-field__input--".concat(p,"-rows"),id:n,placeholder:b},x)),e.createElement(a,{helpLabel:s,errorLabel:d,forceCompact:v}))},o=function(){return e.createElement("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fillRule:"evenodd",clipRule:"evenodd"},e.createElement("path",{d:"M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5  4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5  8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"}))},m=function(){return e.createElement("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fillRule:"evenodd",clipRule:"evenodd"},e.createElement("path",{d:"M12 11.293l10.293-10.293.707.707-10.293 10.293 10.293 10.293-.707.707-10.293-10.293-10.293 10.293-.707-.707 10.293-10.293-10.293-10.293.707-.707 10.293 10.293z"}))};var s=function(t){var a=t.action,l=t.className;return e.createElement("span",{"data-testid":"jkl-action-icon",className:l},function(t){switch(t){case"clear":return e.createElement(m,null);case"search":return e.createElement(o,null);default:return null}}(a))},d=function(n){var i=n.action,o=n.forceCompact,m=n.className,d=n.helpLabel,f=n.errorLabel,p=n.variant,u=n.label,b=r(n,["action","forceCompact","className","helpLabel","errorLabel","variant","label"]),v="jkl-text-field jkl-text-field--action".concat(o?" jkl-text-field--compact":"",m?" ".concat(m):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:v},e.createElement(t,{variant:p,forceCompact:o},u),e.createElement("div",{className:"jkl-text-field__input-wrapper"},e.createElement(c,l({invalid:!!f},b)),e.createElement("button",{type:"button",className:"jkl-text-field__action-button",onClick:i.onClick,"aria-label":i.label,title:i.label},e.createElement(s,{className:"jkl-text-field__action-icon",action:i.icon}))),e.createElement(a,{helpLabel:d,errorLabel:f,forceCompact:o}))},f=function(a){var l=a.label,n=a.className,i=a.variant,o=a.forceCompact,m=r(a,["label","className","variant","forceCompact"]),s="jkl-text-field jkl-text-field--inline".concat(o?" jkl-text-field--compact":"",n?" ".concat(n):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:s},e.createElement(t,{srOnly:!0,variant:i,forceCompact:o},l),e.createElement(c,m))};export{d as ActionTextField,c as BaseInputField,f as InlineTextField,i as TextArea,n as TextField};

build/cjs/index.js

@@ -64,47 +64,46 @@ 'use strict';
 
+function getWidthAsStyle(width, maxLength) {
+  if (width) {
+    return {
+      width: width
+    }; // prioritize width prop
+  }
+
+  if (maxLength && maxLength < 15) {
+    return {
+      width: "".concat(maxLength + 3, "ch")
+    }; // else use maxLength if not large
+  }
+
+  return undefined;
+}
+
+var BaseInputField = function BaseInputField(_ref) {
+  var maxLength = _ref.maxLength,
+      width = _ref.width,
+      invalid = _ref.invalid,
+      ariaDescribedby = _ref.ariaDescribedby,
+      rest = _objectWithoutProperties(_ref, ["maxLength", "width", "invalid", "ariaDescribedby"]);
+
+  var style = getWidthAsStyle(width, maxLength);
+  return React.createElement("input", _extends({
+    "data-testid": "jkl-text-field__input",
+    className: "jkl-text-field__input",
+    maxLength: maxLength,
+    style: style,
+    "aria-describedby": ariaDescribedby,
+    "aria-invalid": invalid
+  }, rest));
+};
+
 var TextField = function TextField(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "text" : _ref$type,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      helpLabel = _ref.helpLabel,
+  var helpLabel = _ref.helpLabel,
       errorLabel = _ref.errorLabel,
-      id = _ref.id,
       label = _ref.label,
       className = _ref.className,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
       variant = _ref.variant,
       forceCompact = _ref.forceCompact,
-      maxLength = _ref.maxLength,
-      width = _ref.width,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value", "variant", "forceCompact", "maxLength", "width"]);
+      rest = _objectWithoutProperties(_ref, ["helpLabel", "errorLabel", "label", "className", "variant", "forceCompact"]);
 
-  // Give warning when errorLabel or helpLabel is used on an inline TextField
-  if (process.env.NODE_ENV !== "production") {
-    if (inline && (helpLabel || errorLabel)) {
-      console.warn("WARNING: Inline TextFields do not display help- or error labels! The errorLabel prop can still be used to trigger an invalid state, but the reason will have to be described elsewhere.");
-    }
-  }
-
-  var componentClassName = "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
-
-  function getWidthAsStyle() {
-    if (width) {
-      return {
-        width: width
-      }; // prioritize width prop
-    }
-
-    if (maxLength && maxLength < 15) {
-      return {
-        width: "".concat(maxLength + 3, "ch")
-      }; // else use maxLength if not large
-    }
-
-    return undefined;
-  }
-
+  var componentClassName = "jkl-text-field".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
   return React.createElement("label", {
@@ -114,16 +113,7 @@ "data-testid": "jkl-text-field",
   }, React.createElement(jklTypographyReact.Label, {
-    srOnly: inline,
     variant: variant,
     forceCompact: forceCompact
-  }, label), React.createElement("input", _extends({
-    type: type,
-    "aria-invalid": !!errorLabel,
-    className: "jkl-text-field__input",
-    id: id,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    value: value,
-    maxLength: maxLength,
-    style: getWidthAsStyle()
-  }, rest)), !inline && React.createElement(jklTypographyReact.SupportLabel, {
+  }, label), React.createElement(BaseInputField, _extends({
+    invalid: !!errorLabel
+  }, rest)), React.createElement(jklTypographyReact.SupportLabel, {
     helpLabel: helpLabel,
@@ -168,3 +158,105 @@ errorLabel: errorLabel,
 
+var IconSearch = function IconSearch() {
+  return React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }, React.createElement("path", {
+    d: "M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5  4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5  8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"
+  }));
+};
+
+var IconClear = function IconClear() {
+  return React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }, React.createElement("path", {
+    d: "M12 11.293l10.293-10.293.707.707-10.293 10.293 10.293 10.293-.707.707-10.293-10.293-10.293 10.293-.707-.707 10.293-10.293-10.293-10.293.707-.707 10.293 10.293z"
+  }));
+};
+
+function getIcon(actionType) {
+  switch (actionType) {
+    case "clear":
+      return React.createElement(IconClear, null);
+
+    case "search":
+      return React.createElement(IconSearch, null);
+
+    default:
+      return null;
+  }
+}
+
+var ActionIcon = function ActionIcon(_ref) {
+  var action = _ref.action,
+      className = _ref.className;
+  return React.createElement("span", {
+    "data-testid": "jkl-action-icon",
+    className: className
+  }, getIcon(action));
+};
+
+var ActionTextField = function ActionTextField(_ref) {
+  var action = _ref.action,
+      forceCompact = _ref.forceCompact,
+      className = _ref.className,
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
+      variant = _ref.variant,
+      label = _ref.label,
+      baseInputProps = _objectWithoutProperties(_ref, ["action", "forceCompact", "className", "helpLabel", "errorLabel", "variant", "label"]);
+
+  var componentClassName = "jkl-text-field jkl-text-field--action".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  return React.createElement("label", {
+    "data-testid": "jkl-text-field",
+    className: componentClassName
+  }, React.createElement(jklTypographyReact.Label, {
+    variant: variant,
+    forceCompact: forceCompact
+  }, label), React.createElement("div", {
+    className: "jkl-text-field__input-wrapper"
+  }, React.createElement(BaseInputField, _extends({
+    invalid: !!errorLabel
+  }, baseInputProps)), React.createElement("button", {
+    type: "button",
+    className: "jkl-text-field__action-button",
+    onClick: action.onClick,
+    "aria-label": action.label,
+    title: action.label
+  }, React.createElement(ActionIcon, {
+    className: "jkl-text-field__action-icon",
+    action: action.icon
+  }))), React.createElement(jklTypographyReact.SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel,
+    forceCompact: forceCompact
+  }));
+};
+
+var InlineTextField = function InlineTextField(_ref) {
+  var label = _ref.label,
+      className = _ref.className,
+      variant = _ref.variant,
+      forceCompact = _ref.forceCompact,
+      rest = _objectWithoutProperties(_ref, ["label", "className", "variant", "forceCompact"]);
+
+  var componentClassName = "jkl-text-field jkl-text-field--inline".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  return React.createElement("label", {
+    "data-testid": "jkl-text-field",
+    className: componentClassName
+  }, React.createElement(jklTypographyReact.Label, {
+    srOnly: true,
+    variant: variant,
+    forceCompact: forceCompact
+  }, label), React.createElement(BaseInputField, rest));
+};
+
+exports.ActionTextField = ActionTextField;
+exports.BaseInputField = BaseInputField;
+exports.InlineTextField = InlineTextField;
 exports.TextArea = TextArea;
 exports.TextField = TextField;

build/esm/index.js

@@ -58,47 +58,46 @@ import React from 'react';
 
+function getWidthAsStyle(width, maxLength) {
+  if (width) {
+    return {
+      width: width
+    }; // prioritize width prop
+  }
+
+  if (maxLength && maxLength < 15) {
+    return {
+      width: "".concat(maxLength + 3, "ch")
+    }; // else use maxLength if not large
+  }
+
+  return undefined;
+}
+
+var BaseInputField = function BaseInputField(_ref) {
+  var maxLength = _ref.maxLength,
+      width = _ref.width,
+      invalid = _ref.invalid,
+      ariaDescribedby = _ref.ariaDescribedby,
+      rest = _objectWithoutProperties(_ref, ["maxLength", "width", "invalid", "ariaDescribedby"]);
+
+  var style = getWidthAsStyle(width, maxLength);
+  return React.createElement("input", _extends({
+    "data-testid": "jkl-text-field__input",
+    className: "jkl-text-field__input",
+    maxLength: maxLength,
+    style: style,
+    "aria-describedby": ariaDescribedby,
+    "aria-invalid": invalid
+  }, rest));
+};
+
 var TextField = function TextField(_ref) {
-  var _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "text" : _ref$type,
-      _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$readOnly = _ref.readOnly,
-      readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-      helpLabel = _ref.helpLabel,
+  var helpLabel = _ref.helpLabel,
       errorLabel = _ref.errorLabel,
-      id = _ref.id,
       label = _ref.label,
       className = _ref.className,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
       variant = _ref.variant,
       forceCompact = _ref.forceCompact,
-      maxLength = _ref.maxLength,
-      width = _ref.width,
-      rest = _objectWithoutProperties(_ref, ["type", "inline", "readOnly", "helpLabel", "errorLabel", "id", "label", "className", "placeholder", "value", "variant", "forceCompact", "maxLength", "width"]);
+      rest = _objectWithoutProperties(_ref, ["helpLabel", "errorLabel", "label", "className", "variant", "forceCompact"]);
 
-  // Give warning when errorLabel or helpLabel is used on an inline TextField
-  if (process.env.NODE_ENV !== "production") {
-    if (inline && (helpLabel || errorLabel)) {
-      console.warn("WARNING: Inline TextFields do not display help- or error labels! The errorLabel prop can still be used to trigger an invalid state, but the reason will have to be described elsewhere.");
-    }
-  }
-
-  var componentClassName = "jkl-text-field".concat(inline ? " jkl-text-field--inline" : "", forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
-
-  function getWidthAsStyle() {
-    if (width) {
-      return {
-        width: width
-      }; // prioritize width prop
-    }
-
-    if (maxLength && maxLength < 15) {
-      return {
-        width: "".concat(maxLength + 3, "ch")
-      }; // else use maxLength if not large
-    }
-
-    return undefined;
-  }
-
+  var componentClassName = "jkl-text-field".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
   return React.createElement("label", {
@@ -108,16 +107,7 @@ "data-testid": "jkl-text-field",
   }, React.createElement(Label, {
-    srOnly: inline,
     variant: variant,
     forceCompact: forceCompact
-  }, label), React.createElement("input", _extends({
-    type: type,
-    "aria-invalid": !!errorLabel,
-    className: "jkl-text-field__input",
-    id: id,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    value: value,
-    maxLength: maxLength,
-    style: getWidthAsStyle()
-  }, rest)), !inline && React.createElement(SupportLabel, {
+  }, label), React.createElement(BaseInputField, _extends({
+    invalid: !!errorLabel
+  }, rest)), React.createElement(SupportLabel, {
     helpLabel: helpLabel,
@@ -162,2 +152,101 @@ errorLabel: errorLabel,
 
-export { TextArea, TextField };
+var IconSearch = function IconSearch() {
+  return React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }, React.createElement("path", {
+    d: "M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5  4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5  8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"
+  }));
+};
+
+var IconClear = function IconClear() {
+  return React.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    fillRule: "evenodd",
+    clipRule: "evenodd"
+  }, React.createElement("path", {
+    d: "M12 11.293l10.293-10.293.707.707-10.293 10.293 10.293 10.293-.707.707-10.293-10.293-10.293 10.293-.707-.707 10.293-10.293-10.293-10.293.707-.707 10.293 10.293z"
+  }));
+};
+
+function getIcon(actionType) {
+  switch (actionType) {
+    case "clear":
+      return React.createElement(IconClear, null);
+
+    case "search":
+      return React.createElement(IconSearch, null);
+
+    default:
+      return null;
+  }
+}
+
+var ActionIcon = function ActionIcon(_ref) {
+  var action = _ref.action,
+      className = _ref.className;
+  return React.createElement("span", {
+    "data-testid": "jkl-action-icon",
+    className: className
+  }, getIcon(action));
+};
+
+var ActionTextField = function ActionTextField(_ref) {
+  var action = _ref.action,
+      forceCompact = _ref.forceCompact,
+      className = _ref.className,
+      helpLabel = _ref.helpLabel,
+      errorLabel = _ref.errorLabel,
+      variant = _ref.variant,
+      label = _ref.label,
+      baseInputProps = _objectWithoutProperties(_ref, ["action", "forceCompact", "className", "helpLabel", "errorLabel", "variant", "label"]);
+
+  var componentClassName = "jkl-text-field jkl-text-field--action".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  return React.createElement("label", {
+    "data-testid": "jkl-text-field",
+    className: componentClassName
+  }, React.createElement(Label, {
+    variant: variant,
+    forceCompact: forceCompact
+  }, label), React.createElement("div", {
+    className: "jkl-text-field__input-wrapper"
+  }, React.createElement(BaseInputField, _extends({
+    invalid: !!errorLabel
+  }, baseInputProps)), React.createElement("button", {
+    type: "button",
+    className: "jkl-text-field__action-button",
+    onClick: action.onClick,
+    "aria-label": action.label,
+    title: action.label
+  }, React.createElement(ActionIcon, {
+    className: "jkl-text-field__action-icon",
+    action: action.icon
+  }))), React.createElement(SupportLabel, {
+    helpLabel: helpLabel,
+    errorLabel: errorLabel,
+    forceCompact: forceCompact
+  }));
+};
+
+var InlineTextField = function InlineTextField(_ref) {
+  var label = _ref.label,
+      className = _ref.className,
+      variant = _ref.variant,
+      forceCompact = _ref.forceCompact,
+      rest = _objectWithoutProperties(_ref, ["label", "className", "variant", "forceCompact"]);
+
+  var componentClassName = "jkl-text-field jkl-text-field--inline".concat(forceCompact ? " jkl-text-field--compact" : "", className ? " ".concat(className) : "");
+  return React.createElement("label", {
+    "data-testid": "jkl-text-field",
+    className: componentClassName
+  }, React.createElement(Label, {
+    srOnly: true,
+    variant: variant,
+    forceCompact: forceCompact
+  }, label), React.createElement(BaseInputField, rest));
+};
+
+export { ActionTextField, BaseInputField, InlineTextField, TextArea, TextField };

build/esm/index.min.js

@@ -1,1 +0,1 @@
-import e from"react";import{Label as t,SupportLabel as a}from"@fremtind/jkl-typography-react";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e}).apply(this,arguments)}function l(e,t){if(null==e)return{};var a,r,l=function(e,t){if(null==e)return{};var a,r,l={},o=Object.keys(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||(l[a]=e[a]);return l}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)a=o[r],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(l[a]=e[a])}return l}var o=function(o){var n=o.type,i=void 0===n?"text":n,c=o.inline,d=void 0!==c&&c,p=o.readOnly,s=void 0!==p&&p,m=o.helpLabel,f=o.errorLabel,b=o.id,h=o.label,v=o.className,u=o.placeholder,y=o.value,x=o.variant,j=o.forceCompact,L=o.maxLength,O=o.width,k=l(o,["type","inline","readOnly","helpLabel","errorLabel","id","label","className","placeholder","value","variant","forceCompact","maxLength","width"]);"production"!==process.env.NODE_ENV&&d&&(m||f)&&console.warn("WARNING: Inline TextFields do not display help- or error labels! The errorLabel prop can still be used to trigger an invalid state, but the reason will have to be described elsewhere.");var w="jkl-text-field".concat(d?" jkl-text-field--inline":"",j?" jkl-text-field--compact":"",v?" ".concat(v):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:w},e.createElement(t,{srOnly:d,variant:x,forceCompact:j},h),e.createElement("input",r({type:i,"aria-invalid":!!f,className:"jkl-text-field__input",id:b,placeholder:u,readOnly:s,value:y,maxLength:L,style:O?{width:O}:L&&L<15?{width:"".concat(L+3,"ch")}:void 0},k)),!d&&e.createElement(a,{helpLabel:m,errorLabel:f,forceCompact:j}))},n=function(o){var n=o.id,i=o.variant,c=o.label,d=o.className,p=o.helpLabel,s=o.errorLabel,m=o.rows,f=void 0===m?7:m,b=o.placeholder,h=void 0===b?" ":b,v=o.forceCompact,u=l(o,["id","variant","label","className","helpLabel","errorLabel","rows","placeholder","forceCompact"]),y="jkl-text-field jkl-text-area".concat(v?" jkl-text-field--compact":"",d?" ".concat(d):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:y},e.createElement(t,{variant:i,forceCompact:v},c),e.createElement("textarea",r({"aria-invalid":!!s,className:"jkl-text-field__input jkl-text-field__input--".concat(f,"-rows"),id:n,placeholder:h},u)),e.createElement(a,{helpLabel:p,errorLabel:s,forceCompact:v}))};export{n as TextArea,o as TextField};
+import e from"react";import{Label as t,SupportLabel as a}from"@fremtind/jkl-typography-react";function l(){return(l=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var l in a)Object.prototype.hasOwnProperty.call(a,l)&&(e[l]=a[l])}return e}).apply(this,arguments)}function r(e,t){if(null==e)return{};var a,l,r=function(e,t){if(null==e)return{};var a,l,r={},c=Object.keys(e);for(l=0;l<c.length;l++)a=c[l],t.indexOf(a)>=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(l=0;l<c.length;l++)a=c[l],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var c=function(t){var a=t.maxLength,c=t.width,n=t.invalid,i=t.ariaDescribedby,o=r(t,["maxLength","width","invalid","ariaDescribedby"]),m=function(e,t){return e?{width:e}:t&&t<15?{width:"".concat(t+3,"ch")}:void 0}(c,a);return e.createElement("input",l({"data-testid":"jkl-text-field__input",className:"jkl-text-field__input",maxLength:a,style:m,"aria-describedby":i,"aria-invalid":n},o))},n=function(n){var i=n.helpLabel,o=n.errorLabel,m=n.label,s=n.className,d=n.variant,f=n.forceCompact,p=r(n,["helpLabel","errorLabel","label","className","variant","forceCompact"]),u="jkl-text-field".concat(f?" jkl-text-field--compact":"",s?" ".concat(s):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:u},e.createElement(t,{variant:d,forceCompact:f},m),e.createElement(c,l({invalid:!!o},p)),e.createElement(a,{helpLabel:i,errorLabel:o,forceCompact:f}))},i=function(c){var n=c.id,i=c.variant,o=c.label,m=c.className,s=c.helpLabel,d=c.errorLabel,f=c.rows,p=void 0===f?7:f,u=c.placeholder,b=void 0===u?" ":u,v=c.forceCompact,x=r(c,["id","variant","label","className","helpLabel","errorLabel","rows","placeholder","forceCompact"]),h="jkl-text-field jkl-text-area".concat(v?" jkl-text-field--compact":"",m?" ".concat(m):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:h},e.createElement(t,{variant:i,forceCompact:v},o),e.createElement("textarea",l({"aria-invalid":!!d,className:"jkl-text-field__input jkl-text-field__input--".concat(p,"-rows"),id:n,placeholder:b},x)),e.createElement(a,{helpLabel:s,errorLabel:d,forceCompact:v}))},o=function(){return e.createElement("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fillRule:"evenodd",clipRule:"evenodd"},e.createElement("path",{d:"M15.853 16.56c-1.683 1.517-3.911 2.44-6.353 2.44-5.243 0-9.5-4.257-9.5-9.5s4.257-9.5 9.5-9.5 9.5  4.257 9.5 9.5c0 2.442-.923 4.67-2.44 6.353l7.44 7.44-.707.707-7.44-7.44zm-6.353-15.56c4.691 0 8.5 3.809 8.5  8.5s-3.809 8.5-8.5 8.5-8.5-3.809-8.5-8.5 3.809-8.5 8.5-8.5z"}))},m=function(){return e.createElement("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fillRule:"evenodd",clipRule:"evenodd"},e.createElement("path",{d:"M12 11.293l10.293-10.293.707.707-10.293 10.293 10.293 10.293-.707.707-10.293-10.293-10.293 10.293-.707-.707 10.293-10.293-10.293-10.293.707-.707 10.293 10.293z"}))};var s=function(t){var a=t.action,l=t.className;return e.createElement("span",{"data-testid":"jkl-action-icon",className:l},function(t){switch(t){case"clear":return e.createElement(m,null);case"search":return e.createElement(o,null);default:return null}}(a))},d=function(n){var i=n.action,o=n.forceCompact,m=n.className,d=n.helpLabel,f=n.errorLabel,p=n.variant,u=n.label,b=r(n,["action","forceCompact","className","helpLabel","errorLabel","variant","label"]),v="jkl-text-field jkl-text-field--action".concat(o?" jkl-text-field--compact":"",m?" ".concat(m):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:v},e.createElement(t,{variant:p,forceCompact:o},u),e.createElement("div",{className:"jkl-text-field__input-wrapper"},e.createElement(c,l({invalid:!!f},b)),e.createElement("button",{type:"button",className:"jkl-text-field__action-button",onClick:i.onClick,"aria-label":i.label,title:i.label},e.createElement(s,{className:"jkl-text-field__action-icon",action:i.icon}))),e.createElement(a,{helpLabel:d,errorLabel:f,forceCompact:o}))},f=function(a){var l=a.label,n=a.className,i=a.variant,o=a.forceCompact,m=r(a,["label","className","variant","forceCompact"]),s="jkl-text-field jkl-text-field--inline".concat(o?" jkl-text-field--compact":"",n?" ".concat(n):"");return e.createElement("label",{"data-testid":"jkl-text-field",className:s},e.createElement(t,{srOnly:!0,variant:i,forceCompact:o},l),e.createElement(c,m))};export{d as ActionTextField,c as BaseInputField,f as InlineTextField,i as TextArea,n as TextField};

build/index.d.ts

@@ -1,3 +0,5 @@
-import { TextField } from "./TextField";
-import { TextArea } from "./TextArea";
-export { TextField, TextArea };
+export { TextField } from "./TextField";
+export { TextArea } from "./TextArea";
+export { ActionTextField } from "./ActionTextField";
+export { InlineTextField } from "./InlineTextField";
+export { BaseInputField } from "./BaseInputField";

build/TextArea.d.ts

@@ -1,19 +0,11 @@
-import { ChangeEvent, FocusEvent } from "react";
-import { LabelVariant } from "@fremtind/jkl-core";
-interface Props {
+import { FocusEvent } from "react";
+import { BaseInputProps } from "./BaseInputField";
+interface Props extends BaseInputProps {
     label: string;
-    value?: string;
-    onChange?: (value: ChangeEvent<HTMLTextAreaElement>) => void;
     onBlur?: (value: FocusEvent<HTMLTextAreaElement>) => void;
-    className?: string;
-    id?: string;
-    required?: boolean;
+    rows?: number;
     helpLabel?: string;
     errorLabel?: string;
-    rows?: number;
-    placeholder?: string;
-    variant?: LabelVariant;
-    forceCompact?: boolean;
 }
 export declare const TextArea: ({ id, variant, label, className, helpLabel, errorLabel, rows, placeholder, forceCompact, ...restProps }: Props) => JSX.Element;
 export {};

build/TextField.d.ts

@@ -1,25 +0,10 @@
-import { ChangeEvent, FocusEvent } from "react";
-import { LabelVariant } from "@fremtind/jkl-core";
-interface Props {
+/// <reference types="react" />
+import { BaseInputProps } from "./BaseInputField";
+interface Props extends BaseInputProps {
     label: string;
-    value?: string;
-    inline?: boolean;
     helpLabel?: string;
     errorLabel?: string;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
-    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     type?: "text" | "number" | "tel" | "password" | "email" | "year";
-    id?: string;
-    autoComplete?: string;
-    required?: boolean;
-    readOnly?: boolean;
-    className?: string;
-    placeholder?: string;
-    variant?: LabelVariant;
-    forceCompact?: boolean;
-    maxLength?: number;
-    width?: string;
 }
-export declare const TextField: ({ type, inline, readOnly, helpLabel, errorLabel, id, label, className, placeholder, value, variant, forceCompact, maxLength, width, ...rest }: Props) => JSX.Element;
+export declare const TextField: ({ helpLabel, errorLabel, label, className, variant, forceCompact, ...rest }: Props) => JSX.Element;
 export {};

CHANGELOG.md

@@ -6,2 +6,25 @@ # Change Log
 
+# [1.0.0-alpha.14](https://github.com/fremtind/jokul/compare/@fremtind/jkl-text-input-react@1.0.0-alpha.13...@fremtind/jkl-text-input-react@1.0.0-alpha.14) (2019-12-03)
+
+
+### Bug Fixes
+
+* add type to button ([aa8f825](https://github.com/fremtind/jokul/commit/aa8f82548fe19c6bd6be16cd88e2643fcf28348d))
+* fix circular dependency in index, move into utils.ts ([fc79bc0](https://github.com/fremtind/jokul/commit/fc79bc0af338127ef306496cd39fceac939d65f0))
+* send props to BaseInputField and fix invalid-state ([9fcf5ec](https://github.com/fremtind/jokul/commit/9fcf5ecfd98c1b22609b29e8d9453140d04d4821))
+
+
+### Features
+
+* add aria-describedby to BaseInputField ([9e8898e](https://github.com/fremtind/jokul/commit/9e8898e9bbb8683631adcee32eacc3a4bc0506ea))
+* add BaseInputField component and enable stand-alone use of Label ([7f37cd4](https://github.com/fremtind/jokul/commit/7f37cd43dd336a18f80edb070017edbdb9dd77ce))
+* add className and remove forceCompact ([c9171c6](https://github.com/fremtind/jokul/commit/c9171c66a65e226c3bf133a8beffde696e4bf5bf))
+* add description prop to action-button ([b6c6139](https://github.com/fremtind/jokul/commit/b6c613970b281fd122de5a004232d51f7f57df0b))
+* add description prop to button ([8c73461](https://github.com/fremtind/jokul/commit/8c734610d1b639e577ec0882549077da062e2aa9))
+* **action-text-field:** add new text-field component ([4fdd80b](https://github.com/fremtind/jokul/commit/4fdd80b06d51ec633f2dd28ebcb1bc5a71f6c8ac))
+
+
+
+
+
 # [1.0.0-alpha.13](https://github.com/fremtind/jokul/compare/@fremtind/jkl-text-input-react@1.0.0-alpha.12...@fremtind/jkl-text-input-react@1.0.0-alpha.13) (2019-11-13)
@@ -8,0 +31,0 @@

package.json

 {
     "name": "@fremtind/jkl-text-input-react",
-    "version": "1.0.0-alpha.13",
+    "version": "1.0.0-alpha.14",
     "homepage": "https://fremtind.github.io/jokul/",
@@ -41,4 +41,4 @@ "publishConfig": {
     "dependencies": {
-        "@fremtind/jkl-text-input": "^1.0.0-alpha.13",
-        "@fremtind/jkl-typography-react": "^1.0.0-alpha.13"
+        "@fremtind/jkl-text-input": "^1.0.0-alpha.14",
+        "@fremtind/jkl-typography-react": "^1.0.0-alpha.14"
     },
@@ -64,3 +64,3 @@ "devDependencies": {
     ],
-    "gitHead": "980cacb315aa36976f0b35e579c4325b3772a3a9"
+    "gitHead": "7e41a79b40d4ca9310c6f5ae782433b6b0fc85c8"
 }

README.md

@@ -5,4 +5,3 @@ # [`@fremtind/jkl-text-input-react`](https://fremtind.github.io/jokul/components/textfield/)
 
-[Bruk og prinsipper TextField](https://fremtind.github.io/jokul/components/textfield/) er beskrevet i `@fremtind/jkl-text-input` stil-pakken.
-[Bruk og prinsipper TextArea](https://fremtind.github.io/jokul/components/textarea/) er beskrevet i `@fremtind/jkl-text-input` stil-pakken.
+[Bruk og prinsipper](https://fremtind.github.io/jokul/components/textfield/) er beskrevet i `@fremtind/jkl-text-input` stil-pakken.
 
@@ -12,1 +11,60 @@ ## Kom i gang
 [Lær hvordan du kan ta i bruk Jøkul](https://fremtind.github.io/jokul/developer/getting-started/)
+
+## Bruk av React-pakken
+
+### Installasjon
+
+1. Installèr pakken med `yarn add @fremtind/jkl-text-input-react` eller `npm i @fremtind/jkl-text-input-react`. Stil-pakken blir automatisk installert som en avhengighet.
+
+2. Importer _både_ React-pakken (velg komponenten(e) du trenger) og stil-pakken i prosjektet ditt:
+
+```js
+import { TextField, TextArea, ActionTextField, InlineTextField, BaseInputField } from "@fremtind/jkl-text-input-react";
+import "@fremtind/jkl-text-input/text-input.min.css";
+```
+
+### Generell Bruk
+
+Du må spesifisere en `label` for `TextField`, `TextArea`, `ActionTextField` og `InlineTextField`. Etiketten vil ikke vises for sistnevnte, men blir fortsatt tatt i bruk til skjermlesere.
+
+Størrelsen på etiketten kan settes ved prop-en `variant`, hvor størrelsene er definert ved `"small" | "medium" | "large"`. Hvis komponentene skal brukes på mobile flater eller av andre årsaker trenger å være fremvist i sin kompakte variant må man ta i bruk `forceCompact`.
+
+Det er to måter å avgrense den fysiske størrelsen til inndata-feltet, enten ved å bruke `width` eller `maxLength`. `maxLength` vil kun bestemme fysisk størrelse hvis `width` ikke er definert, siden `width` tar prioritet. Merk at `maxLength` fortsatt vil bestemme hvor mange tegn som kan tastes inn i feltet.
+
+```jsx
+if (width) {
+    return { width }; // prioritize width prop
+}
+
+if (maxLength && maxLength < 15) {
+    return { width: `${maxLength + 3}ch` }; // else use maxLength if not large
+}
+```
+
+Komponentene tar imot hjelpe- og feilmeldinger gjennom `helpLabel` og `errorLabel`. Dersom `errorLabel` finnes vises _kun_ denne. Disse vil _ikke_ vises for komponenten `InlineTextField` og må fremvises på andre måter. Siden komponenten ikke har feil- og hjelpetekst brukes prop-en `invalid` for å sette feiltilstand.
+
+Handlingen/Ikonet som skal brukes på et `ActionTextField` gis gjennom prop-en `action`:
+
+```jsx
+type action = {
+    icon: IconVariant, // "clear" | "search"
+    label: string,
+    onClick: (event: MouseEvent) => void,
+};
+```
+
+### Særskilt bruk
+
+#### BaseInputField
+
+Denne er kun eksponert for å dekke spesielle behov og anbefales ikke å brukes.
+Skal denne brukes frittstående må den akkompagneres av en `Label` fra [`@fremtind/jkl-typography-react`](https://fremtind.github.io/jokul/components/typography/) hvor `standAlone` og `htmlFor` skal være spesifisert. Eksempel på hvordan denne kan brukes:
+
+```tsx
+<Label standAlone htmlFor="complicatedquestion">
+    Lorem ipsum...
+</Label>
+<p className="description" id="longdescription">...dolor sit amet</p>
+<BaseInputField id="complicatedquestion" ariaDescribedby="longdescription" />
+<SupportLabel errorLabel={error && "Oida, her gikk noe galt!"}>
+```

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55665

increased by51.16%

Number of package files

18

increased by50%

Lines of code

779

increased by61.62%

Number of lines in readme file

69

increased by527.27%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@fremtind/jkl-text-input@^1.0.0-alpha.14

• Updated@fremtind/jkl-typography-react@^1.0.0-alpha.14