@entur/form - npm Package Compare versions

Comparing version 0.4.0 to 1.0.0

CHANGELOG.md

@@ -6,2 +6,17 @@ # Change Log
 
+# [1.0.0](https://bitbucket.org/enturas/design-system/compare/@entur/form@0.4.0...@entur/form@1.0.0) (2019-11-04)
+
+### Code Refactoring
+
+- **Dropdown, TextArea, TextField:** rewrite form field implementation ([0b6b9d0](https://bitbucket.org/enturas/design-system/commits/0b6b9d0d87c712366e05b6a275eea406f1a5cdb9))
+- **InputGroup:** rename FormGroup to InputGroup ([520281d](https://bitbucket.org/enturas/design-system/commits/520281d8dc461c73fb533db92ceed0ebf40a1823))
+- **InputGroup:** rename FormGroup to InputGroup ([725f121](https://bitbucket.org/enturas/design-system/commits/725f121f9597310a1c4f9e46501eeef1c8a82829))
+
+### BREAKING CHANGES
+
+- **InputGroup:** Rename FormGroup to InputGroup
+- **InputGroup:** FormGroup is now known as InputGroup. Change your imports. Also, variant="none" is not a valid form
+  control variant - pass null instead.
+- **Dropdown, TextArea, TextField:** Removes width prop (now fluid by default)
+
 # [0.4.0](https://bitbucket.org/enturas/design-system/compare/@entur/form@0.3.0...@entur/form@0.4.0) (2019-10-30)
@@ -8,0 +23,0 @@

dist/form.cjs.development.js

@@ -6,3 +6,3 @@ 'use strict';
 var React = _interopDefault(require('react'));
-var cx = _interopDefault(require('classnames'));
+var classNames = _interopDefault(require('classnames'));
 var icons = require('@entur/icons');
@@ -26,29 +26,19 @@ var typography = require('@entur/typography');
 
-var FormGroupContext =
+var InputGroupContext =
 /*#__PURE__*/
-React.createContext('none');
-
-function FormGroupProvider(_ref) {
-  var variant = _ref.variant,
-      rest = _objectWithoutPropertiesLoose(_ref, ["variant"]);
-
-  return React.createElement(FormGroupContext.Provider, Object.assign({
-    value: variant
-  }, rest));
-}
-
+React.createContext(null);
 function useVariant() {
-  var context = React.useContext(FormGroupContext);
+  var context = React.useContext(InputGroupContext);
   return context;
 }
-var FormGroup = function FormGroup(_ref2) {
-  var label = _ref2.label,
-      feedback = _ref2.feedback,
-      _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'none' : _ref2$variant,
-      children = _ref2.children;
-  return React.createElement(FormGroupProvider, {
-    variant: variant
+var InputGroup = function InputGroup(_ref) {
+  var label = _ref.label,
+      feedback = _ref.feedback,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? null : _ref$variant,
+      children = _ref.children;
+  return React.createElement(InputGroupContext.Provider, {
+    value: variant
   }, React.createElement("div", {
-    className: "entur-form-group"
+    className: "entur-input-group"
   }, React.createElement(typography.Label, {
@@ -59,15 +49,15 @@ style: {
   }, React.createElement("span", {
-    className: "entur-form-group__label"
-  }, label), children), feedback && variant !== 'none' && React.createElement(typography.SmallText, {
-    className: "entur-form-group__feedback-wrapper"
+    className: "entur-input-group__label"
+  }, label), children), feedback && variant && React.createElement(typography.SmallText, {
+    className: "entur-input-group__feedback-wrapper"
   }, React.createElement(AlertIcon, {
     level: variant
   }), React.createElement("span", {
-    className: "entur-form-group__feedback"
+    className: "entur-input-group__feedback"
   }, feedback))));
 };
 
-var AlertIcon = function AlertIcon(_ref3) {
-  var level = _ref3.level;
-  var iconClass = "entur-form-group__icon entur-form-group__icon--" + level;
+var AlertIcon = function AlertIcon(_ref2) {
+  var level = _ref2.level;
+  var iconClass = "entur-input-group__icon entur-input-group__icon--" + level;
 
@@ -95,3 +85,3 @@ switch (level) {
 
-    case 'none':
+    default:
       return null;
@@ -101,15 +91,30 @@ }
 
-function useFormComponentClasses(_ref) {
-  var _cx;
-
-  var variant = _ref.variant,
-      disabled = _ref.disabled,
+var BaseFormControl = function BaseFormControl(_ref) {
+  var children = _ref.children,
       className = _ref.className,
-      width = _ref.width;
-  var formGroupVariant = useVariant();
-  var prioritizedVariant = variant === 'none' ? formGroupVariant : variant;
-  var classList = cx("entur-form-component", (_cx = {}, _cx["entur-form-component--variant-" + prioritizedVariant] = prioritizedVariant, _cx["entur-form-component--disabled"] = disabled, _cx["entur-form-component--width-" + width] = width, _cx), className);
-  return classList;
-}
+      _ref$dark = _ref.dark,
+      dark = _ref$dark === void 0 ? false : _ref$dark,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      variant = _ref.variant,
+      prepend = _ref.prepend,
+      append = _ref.append,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "dark", "disabled", "variant", "prepend", "append"]);
 
+  var variantFromInputGroup = useVariant();
+  var currentVariant = variant || variantFromInputGroup;
+  return React.createElement("div", Object.assign({
+    className: classNames('entur-form-control-wrapper', className, {
+      'entur-form-control-wrapper--success': currentVariant === 'success',
+      'entur-form-control-wrapper--error': currentVariant === 'error',
+      'entur-form-control-wrapper--dark': dark,
+      'entur-form-control-wrapper--disabled': disabled
+    })
+  }, rest), prepend && React.createElement("div", {
+    className: "entur-form-control__prepend"
+  }, prepend), children, append && React.createElement("div", {
+    className: "entur-form-control__append"
+  }, append));
+};
+
 var TextField =
@@ -120,37 +125,22 @@ /*#__PURE__*/
       append = _ref.append,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      variant = _ref.variant,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      width = _ref.width,
       className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "append", "variant", "disabled", "width", "className"]);
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "append", "variant", "disabled", "className", "style"]);
 
-  var classList = useFormComponentClasses({
+  return React.createElement(BaseFormControl, {
+    disabled: disabled,
     variant: variant,
+    prepend: prepend,
+    append: append,
+    className: className,
+    style: style
+  }, React.createElement("input", Object.assign({
+    "aria-invalid": variant === 'error',
+    className: "entur-form-control",
     disabled: disabled,
-    className: ['entur-form-component--input', className],
-    width: width
-  });
-
-  if (prepend || append) {
-    return React.createElement("label", {
-      className: classList
-    }, prepend && React.createElement("span", {
-      className: "entur-form-component--input--prepend"
-    }, prepend), React.createElement("input", Object.assign({
-      disabled: disabled,
-      "aria-invalid": variant === 'error',
-      ref: ref
-    }, rest)), append && React.createElement("span", {
-      className: "entur-form-component--input--append"
-    }, append));
-  } else {
-    return React.createElement("input", Object.assign({
-      className: classList,
-      disabled: disabled,
-      "aria-invalid": variant === 'error',
-      ref: ref
-    }, rest));
-  }
+    ref: ref
+  }, rest)));
 });
@@ -161,26 +151,18 @@
 React.forwardRef(function (_ref, ref) {
-  var _ref2;
-
-  var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+  var variant = _ref.variant,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      _ref$resize = _ref.resize,
-      resize = _ref$resize === void 0 ? false : _ref$resize,
-      width = _ref.width,
-      rest = _objectWithoutPropertiesLoose(_ref, ["variant", "disabled", "className", "resize", "width"]);
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["variant", "disabled", "className", "style"]);
 
-  var classList = useFormComponentClasses({
+  return React.createElement(BaseFormControl, {
+    className: className,
+    disabled: disabled,
     variant: variant,
-    disabled: disabled,
-    className: ['entur-form-component--textarea', className, (_ref2 = {}, _ref2['entur-form-component__textarea--resize'] = resize, _ref2)],
-    width: width
-  });
-  return React.createElement("textarea", Object.assign({
-    disabled: disabled,
-    "aria-invalid": variant === 'error',
-    className: classList,
+    style: style
+  }, React.createElement("textarea", Object.assign({
+    className: "entur-form-control entur-textarea",
     ref: ref
-  }, rest));
+  }, rest)));
 });
@@ -190,19 +172,25 @@
   var className = _ref.className,
-      width = _ref.width,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      variant = _ref.variant,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "width", "variant", "disabled", "children"]);
+      prepend = _ref.prepend,
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "variant", "disabled", "children", "prepend", "style"]);
 
-  var classList = useFormComponentClasses({
+  return React.createElement(BaseFormControl, {
+    dark: true,
+    disabled: disabled,
+    prepend: prepend,
+    append: React.createElement(icons.DownArrowIcon, {
+      inline: true
+    }),
     variant: variant,
-    disabled: disabled,
-    className: ['entur-form-component--dropdown', className],
-    width: width
-  });
-  return React.createElement("select", Object.assign({
-    className: classList
-  }, rest), children);
+    className: className,
+    style: style
+  }, React.createElement("select", Object.assign({
+    "aria-invalid": variant === 'error',
+    className: "entur-form-control",
+    disabled: disabled
+  }, rest), children));
 };
@@ -223,3 +211,3 @@ var DropdownItem = function DropdownItem(_ref2) {
   return React.createElement("fieldset", Object.assign({
-    className: cx('entur-fieldset', className)
+    className: classNames('entur-fieldset', className)
   }, rest), label && React.createElement(typography.Heading4, {
@@ -240,3 +228,3 @@ as: "legend",
   return React.createElement("label", {
-    className: cx('entur-form-component--checkbox__container', className)
+    className: classNames('entur-form-component--checkbox__container', className)
   }, React.createElement("input", Object.assign({
@@ -274,3 +262,3 @@ type: "checkbox",
 
-  var classList = cx(className, 'entur-form-component--radio__radio');
+  var classList = classNames(className, 'entur-form-component--radio__radio');
 
@@ -323,3 +311,3 @@ var _useRadioGroupContext = useRadioGroupContext(),
 exports.Fieldset = Fieldset;
-exports.FormGroup = FormGroup;
+exports.InputGroup = InputGroup;
 exports.Radio = Radio;
@@ -326,0 +314,0 @@ exports.RadioGroup = RadioGroup;

dist/form.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var a=e(require("react")),n=e(require("classnames")),r=require("@entur/icons"),t=require("@entur/typography");function o(e,a){if(null==e)return{};var n,r,t={},o=Object.keys(e);for(r=0;r<o.length;r++)a.indexOf(n=o[r])>=0||(t[n]=e[n]);return t}var c=a.createContext("none");function l(e){var n=e.variant,r=o(e,["variant"]);return a.createElement(c.Provider,Object.assign({value:n},r))}function s(){return a.useContext(c)}var i=function(e){var n=e.level,t="entur-form-group__icon entur-form-group__icon--"+n;switch(n){case"success":return a.createElement(r.ValidationCheckIcon,{className:t});case"error":return a.createElement(r.ValidationErrorIcon,{className:t});case"info":return a.createElement(r.ValidationInfoIcon,{className:t});case"warning":return a.createElement(r.ValidationExclamationIcon,{className:t});case"none":return null}};function m(e){var a,r=e.variant,t=e.disabled,o=e.className,c=e.width,l=s(),i="none"===r?l:r;return n("entur-form-component",((a={})["entur-form-component--variant-"+i]=i,a["entur-form-component--disabled"]=t,a["entur-form-component--width-"+c]=c,a),o)}var d=a.forwardRef(function(e,n){var r=e.prepend,t=e.append,c=e.variant,l=void 0===c?"none":c,s=e.disabled,i=void 0!==s&&s,d=e.width,u=e.className,p=o(e,["prepend","append","variant","disabled","width","className"]),f=m({variant:l,disabled:i,className:["entur-form-component--input",u],width:d});return r||t?a.createElement("label",{className:f},r&&a.createElement("span",{className:"entur-form-component--input--prepend"},r),a.createElement("input",Object.assign({disabled:i,"aria-invalid":"error"===l,ref:n},p)),t&&a.createElement("span",{className:"entur-form-component--input--append"},t)):a.createElement("input",Object.assign({className:f,disabled:i,"aria-invalid":"error"===l,ref:n},p))}),u=a.forwardRef(function(e,n){var r,t=e.variant,c=void 0===t?"none":t,l=e.disabled,s=void 0!==l&&l,i=e.className,d=e.resize,u=void 0!==d&&d,p=e.width,f=o(e,["variant","disabled","className","resize","width"]),v=m({variant:c,disabled:s,className:["entur-form-component--textarea",i,(r={},r["entur-form-component__textarea--resize"]=u,r)],width:p});return a.createElement("textarea",Object.assign({disabled:s,"aria-invalid":"error"===c,className:v,ref:n},f))}),p=function(e){var r=e.children,c=e.className,l=e.label,s=o(e,["children","className","label"]);return a.createElement("fieldset",Object.assign({className:n("entur-fieldset",c)},s),l&&a.createElement(t.Heading4,{as:"legend",className:"entur-legend"},l),r)},f=a.forwardRef(function(e,c){var l=e.className,s=e.children,i=o(e,["className","width","children"]);return a.createElement("label",{className:n("entur-form-component--checkbox__container",l)},a.createElement("input",Object.assign({type:"checkbox",ref:c},i)),a.createElement("span",{className:"entur-form-component--checkbox__icon"},a.createElement(r.CheckIcon,null)),s&&a.createElement(t.Label,{as:"span"},s))}),v=a.createContext(null),b=v.Provider,h=a.forwardRef(function(e,r){var c=e.className,l=e.children,s=e.value,i=o(e,["className","children","value"]),m=n(c,"entur-form-component--radio__radio"),d=function(){var e=a.useContext(v);if(!e)throw new Error("You need to wrap your RadioButtons in a RadioGroup component");return e}();return a.createElement("label",{className:"entur-form-component--radio__container"},a.createElement("input",Object.assign({type:"radio",name:d.name,ref:r,value:s,checked:d.value===s,onChange:d.onChange},i)),a.createElement("span",{className:m},a.createElement("span",{className:"entur-form-component--radio__circle"})),l&&a.createElement(t.Label,{as:"span"},l))});exports.Checkbox=f,exports.Dropdown=function(e){var n=e.className,r=e.width,t=e.variant,c=void 0===t?"none":t,l=e.disabled,s=void 0!==l&&l,i=e.children,d=o(e,["className","width","variant","disabled","children"]),u=m({variant:c,disabled:s,className:["entur-form-component--dropdown",n],width:r});return a.createElement("select",Object.assign({className:u},d),i)},exports.DropdownItem=function(e){var n=e.children,r=o(e,["children"]);return a.createElement("option",Object.assign({},r),n)},exports.Fieldset=p,exports.FormGroup=function(e){var n=e.feedback,r=e.variant,o=void 0===r?"none":r,c=e.children;return a.createElement(l,{variant:o},a.createElement("div",{className:"entur-form-group"},a.createElement(t.Label,{style:{display:"block"}},a.createElement("span",{className:"entur-form-group__label"},e.label),c),n&&"none"!==o&&a.createElement(t.SmallText,{className:"entur-form-group__feedback-wrapper"},a.createElement(i,{level:o}),a.createElement("span",{className:"entur-form-group__feedback"},n))))},exports.Radio=h,exports.RadioGroup=function(e){var n=e.name,r=e.value,t=e.children,c=e.onChange,l=o(e,["name","value","children","onChange"]),s=a.useMemo(function(){return{name:n,value:r,onChange:c}},[n,r,c]);return a.createElement(b,{value:s},a.createElement(p,Object.assign({},l),t))},exports.TextArea=u,exports.TextField=d,exports.useVariant=s;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}var a=e(require("react")),r=e(require("classnames")),n=require("@entur/icons"),t=require("@entur/typography");function l(e,a){if(null==e)return{};var r,n,t={},l=Object.keys(e);for(n=0;n<l.length;n++)a.indexOf(r=l[n])>=0||(t[r]=e[r]);return t}var c=a.createContext(null);function s(){return a.useContext(c)}var o=function(e){var r=e.level,t="entur-input-group__icon entur-input-group__icon--"+r;switch(r){case"success":return a.createElement(n.ValidationCheckIcon,{className:t});case"error":return a.createElement(n.ValidationErrorIcon,{className:t});case"info":return a.createElement(n.ValidationInfoIcon,{className:t});case"warning":return a.createElement(n.ValidationExclamationIcon,{className:t});default:return null}},i=function(e){var n=e.children,t=e.className,c=e.dark,o=void 0!==c&&c,i=e.disabled,u=void 0!==i&&i,d=e.variant,m=e.prepend,p=e.append,f=l(e,["children","className","dark","disabled","variant","prepend","append"]),v=s(),b=d||v;return a.createElement("div",Object.assign({className:r("entur-form-control-wrapper",t,{"entur-form-control-wrapper--success":"success"===b,"entur-form-control-wrapper--error":"error"===b,"entur-form-control-wrapper--dark":o,"entur-form-control-wrapper--disabled":u})},f),m&&a.createElement("div",{className:"entur-form-control__prepend"},m),n,p&&a.createElement("div",{className:"entur-form-control__append"},p))},u=a.forwardRef((function(e,r){var n=e.prepend,t=e.append,c=e.variant,s=e.disabled,o=void 0!==s&&s,u=e.className,d=e.style,m=l(e,["prepend","append","variant","disabled","className","style"]);return a.createElement(i,{disabled:o,variant:c,prepend:n,append:t,className:u,style:d},a.createElement("input",Object.assign({"aria-invalid":"error"===c,className:"entur-form-control",disabled:o,ref:r},m)))})),d=a.forwardRef((function(e,r){var n=e.variant,t=e.disabled,c=void 0!==t&&t,s=e.className,o=e.style,u=l(e,["variant","disabled","className","style"]);return a.createElement(i,{className:s,disabled:c,variant:n,style:o},a.createElement("textarea",Object.assign({className:"entur-form-control entur-textarea",ref:r},u)))})),m=function(e){var n=e.children,c=e.className,s=e.label,o=l(e,["children","className","label"]);return a.createElement("fieldset",Object.assign({className:r("entur-fieldset",c)},o),s&&a.createElement(t.Heading4,{as:"legend",className:"entur-legend"},s),n)},p=a.forwardRef((function(e,c){var s=e.className,o=e.children,i=l(e,["className","width","children"]);return a.createElement("label",{className:r("entur-form-component--checkbox__container",s)},a.createElement("input",Object.assign({type:"checkbox",ref:c},i)),a.createElement("span",{className:"entur-form-component--checkbox__icon"},a.createElement(n.CheckIcon,null)),o&&a.createElement(t.Label,{as:"span"},o))})),f=a.createContext(null),v=f.Provider,b=a.forwardRef((function(e,n){var c=e.className,s=e.children,o=e.value,i=l(e,["className","children","value"]),u=r(c,"entur-form-component--radio__radio"),d=function(){var e=a.useContext(f);if(!e)throw new Error("You need to wrap your RadioButtons in a RadioGroup component");return e}();return a.createElement("label",{className:"entur-form-component--radio__container"},a.createElement("input",Object.assign({type:"radio",name:d.name,ref:n,value:o,checked:d.value===o,onChange:d.onChange},i)),a.createElement("span",{className:u},a.createElement("span",{className:"entur-form-component--radio__circle"})),s&&a.createElement(t.Label,{as:"span"},s))}));exports.Checkbox=p,exports.Dropdown=function(e){var r=e.className,t=e.variant,c=e.disabled,s=void 0!==c&&c,o=e.children,u=e.prepend,d=e.style,m=l(e,["className","variant","disabled","children","prepend","style"]);return a.createElement(i,{dark:!0,disabled:s,prepend:u,append:a.createElement(n.DownArrowIcon,{inline:!0}),variant:t,className:r,style:d},a.createElement("select",Object.assign({"aria-invalid":"error"===t,className:"entur-form-control",disabled:s},m),o))},exports.DropdownItem=function(e){var r=e.children,n=l(e,["children"]);return a.createElement("option",Object.assign({},n),r)},exports.Fieldset=m,exports.InputGroup=function(e){var r=e.feedback,n=e.variant,l=void 0===n?null:n,s=e.children;return a.createElement(c.Provider,{value:l},a.createElement("div",{className:"entur-input-group"},a.createElement(t.Label,{style:{display:"block"}},a.createElement("span",{className:"entur-input-group__label"},e.label),s),r&&l&&a.createElement(t.SmallText,{className:"entur-input-group__feedback-wrapper"},a.createElement(o,{level:l}),a.createElement("span",{className:"entur-input-group__feedback"},r))))},exports.Radio=b,exports.RadioGroup=function(e){var r=e.name,n=e.value,t=e.children,c=e.onChange,s=l(e,["name","value","children","onChange"]),o=a.useMemo((function(){return{name:r,value:n,onChange:c}}),[r,n,c]);return a.createElement(v,{value:o},a.createElement(m,Object.assign({},s),t))},exports.TextArea=d,exports.TextField=u,exports.useVariant=s;
 //# sourceMappingURL=form.cjs.production.min.js.map

dist/form.esm.js

 import React from 'react';
-import cx from 'classnames';
-import { ValidationCheckIcon, ValidationErrorIcon, ValidationInfoIcon, ValidationExclamationIcon, CheckIcon } from '@entur/icons';
+import classNames from 'classnames';
+import { ValidationExclamationIcon, ValidationInfoIcon, ValidationErrorIcon, ValidationCheckIcon, DownArrowIcon, CheckIcon } from '@entur/icons';
 import { Label, SmallText, Heading4 } from '@entur/typography';
@@ -21,29 +21,19 @@
 
-var FormGroupContext =
+var InputGroupContext =
 /*#__PURE__*/
-React.createContext('none');
-
-function FormGroupProvider(_ref) {
-  var variant = _ref.variant,
-      rest = _objectWithoutPropertiesLoose(_ref, ["variant"]);
-
-  return React.createElement(FormGroupContext.Provider, Object.assign({
-    value: variant
-  }, rest));
-}
-
+React.createContext(null);
 function useVariant() {
-  var context = React.useContext(FormGroupContext);
+  var context = React.useContext(InputGroupContext);
   return context;
 }
-var FormGroup = function FormGroup(_ref2) {
-  var label = _ref2.label,
-      feedback = _ref2.feedback,
-      _ref2$variant = _ref2.variant,
-      variant = _ref2$variant === void 0 ? 'none' : _ref2$variant,
-      children = _ref2.children;
-  return React.createElement(FormGroupProvider, {
-    variant: variant
+var InputGroup = function InputGroup(_ref) {
+  var label = _ref.label,
+      feedback = _ref.feedback,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? null : _ref$variant,
+      children = _ref.children;
+  return React.createElement(InputGroupContext.Provider, {
+    value: variant
   }, React.createElement("div", {
-    className: "entur-form-group"
+    className: "entur-input-group"
   }, React.createElement(Label, {
@@ -54,15 +44,15 @@ style: {
   }, React.createElement("span", {
-    className: "entur-form-group__label"
-  }, label), children), feedback && variant !== 'none' && React.createElement(SmallText, {
-    className: "entur-form-group__feedback-wrapper"
+    className: "entur-input-group__label"
+  }, label), children), feedback && variant && React.createElement(SmallText, {
+    className: "entur-input-group__feedback-wrapper"
   }, React.createElement(AlertIcon, {
     level: variant
   }), React.createElement("span", {
-    className: "entur-form-group__feedback"
+    className: "entur-input-group__feedback"
   }, feedback))));
 };
 
-var AlertIcon = function AlertIcon(_ref3) {
-  var level = _ref3.level;
-  var iconClass = "entur-form-group__icon entur-form-group__icon--" + level;
+var AlertIcon = function AlertIcon(_ref2) {
+  var level = _ref2.level;
+  var iconClass = "entur-input-group__icon entur-input-group__icon--" + level;
 
@@ -90,3 +80,3 @@ switch (level) {
 
-    case 'none':
+    default:
       return null;
@@ -96,15 +86,30 @@ }
 
-function useFormComponentClasses(_ref) {
-  var _cx;
-
-  var variant = _ref.variant,
-      disabled = _ref.disabled,
+var BaseFormControl = function BaseFormControl(_ref) {
+  var children = _ref.children,
       className = _ref.className,
-      width = _ref.width;
-  var formGroupVariant = useVariant();
-  var prioritizedVariant = variant === 'none' ? formGroupVariant : variant;
-  var classList = cx("entur-form-component", (_cx = {}, _cx["entur-form-component--variant-" + prioritizedVariant] = prioritizedVariant, _cx["entur-form-component--disabled"] = disabled, _cx["entur-form-component--width-" + width] = width, _cx), className);
-  return classList;
-}
+      _ref$dark = _ref.dark,
+      dark = _ref$dark === void 0 ? false : _ref$dark,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      variant = _ref.variant,
+      prepend = _ref.prepend,
+      append = _ref.append,
+      rest = _objectWithoutPropertiesLoose(_ref, ["children", "className", "dark", "disabled", "variant", "prepend", "append"]);
 
+  var variantFromInputGroup = useVariant();
+  var currentVariant = variant || variantFromInputGroup;
+  return React.createElement("div", Object.assign({
+    className: classNames('entur-form-control-wrapper', className, {
+      'entur-form-control-wrapper--success': currentVariant === 'success',
+      'entur-form-control-wrapper--error': currentVariant === 'error',
+      'entur-form-control-wrapper--dark': dark,
+      'entur-form-control-wrapper--disabled': disabled
+    })
+  }, rest), prepend && React.createElement("div", {
+    className: "entur-form-control__prepend"
+  }, prepend), children, append && React.createElement("div", {
+    className: "entur-form-control__append"
+  }, append));
+};
+
 var TextField =
@@ -115,37 +120,22 @@ /*#__PURE__*/
       append = _ref.append,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      variant = _ref.variant,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      width = _ref.width,
       className = _ref.className,
-      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "append", "variant", "disabled", "width", "className"]);
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["prepend", "append", "variant", "disabled", "className", "style"]);
 
-  var classList = useFormComponentClasses({
+  return React.createElement(BaseFormControl, {
+    disabled: disabled,
     variant: variant,
+    prepend: prepend,
+    append: append,
+    className: className,
+    style: style
+  }, React.createElement("input", Object.assign({
+    "aria-invalid": variant === 'error',
+    className: "entur-form-control",
     disabled: disabled,
-    className: ['entur-form-component--input', className],
-    width: width
-  });
-
-  if (prepend || append) {
-    return React.createElement("label", {
-      className: classList
-    }, prepend && React.createElement("span", {
-      className: "entur-form-component--input--prepend"
-    }, prepend), React.createElement("input", Object.assign({
-      disabled: disabled,
-      "aria-invalid": variant === 'error',
-      ref: ref
-    }, rest)), append && React.createElement("span", {
-      className: "entur-form-component--input--append"
-    }, append));
-  } else {
-    return React.createElement("input", Object.assign({
-      className: classList,
-      disabled: disabled,
-      "aria-invalid": variant === 'error',
-      ref: ref
-    }, rest));
-  }
+    ref: ref
+  }, rest)));
 });
@@ -156,26 +146,18 @@
 React.forwardRef(function (_ref, ref) {
-  var _ref2;
-
-  var _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+  var variant = _ref.variant,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
-      _ref$resize = _ref.resize,
-      resize = _ref$resize === void 0 ? false : _ref$resize,
-      width = _ref.width,
-      rest = _objectWithoutPropertiesLoose(_ref, ["variant", "disabled", "className", "resize", "width"]);
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["variant", "disabled", "className", "style"]);
 
-  var classList = useFormComponentClasses({
+  return React.createElement(BaseFormControl, {
+    className: className,
+    disabled: disabled,
     variant: variant,
-    disabled: disabled,
-    className: ['entur-form-component--textarea', className, (_ref2 = {}, _ref2['entur-form-component__textarea--resize'] = resize, _ref2)],
-    width: width
-  });
-  return React.createElement("textarea", Object.assign({
-    disabled: disabled,
-    "aria-invalid": variant === 'error',
-    className: classList,
+    style: style
+  }, React.createElement("textarea", Object.assign({
+    className: "entur-form-control entur-textarea",
     ref: ref
-  }, rest));
+  }, rest)));
 });
@@ -185,19 +167,25 @@
   var className = _ref.className,
-      width = _ref.width,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'none' : _ref$variant,
+      variant = _ref.variant,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       children = _ref.children,
-      rest = _objectWithoutPropertiesLoose(_ref, ["className", "width", "variant", "disabled", "children"]);
+      prepend = _ref.prepend,
+      style = _ref.style,
+      rest = _objectWithoutPropertiesLoose(_ref, ["className", "variant", "disabled", "children", "prepend", "style"]);
 
-  var classList = useFormComponentClasses({
+  return React.createElement(BaseFormControl, {
+    dark: true,
+    disabled: disabled,
+    prepend: prepend,
+    append: React.createElement(DownArrowIcon, {
+      inline: true
+    }),
     variant: variant,
-    disabled: disabled,
-    className: ['entur-form-component--dropdown', className],
-    width: width
-  });
-  return React.createElement("select", Object.assign({
-    className: classList
-  }, rest), children);
+    className: className,
+    style: style
+  }, React.createElement("select", Object.assign({
+    "aria-invalid": variant === 'error',
+    className: "entur-form-control",
+    disabled: disabled
+  }, rest), children));
 };
@@ -218,3 +206,3 @@ var DropdownItem = function DropdownItem(_ref2) {
   return React.createElement("fieldset", Object.assign({
-    className: cx('entur-fieldset', className)
+    className: classNames('entur-fieldset', className)
   }, rest), label && React.createElement(Heading4, {
@@ -235,3 +223,3 @@ as: "legend",
   return React.createElement("label", {
-    className: cx('entur-form-component--checkbox__container', className)
+    className: classNames('entur-form-component--checkbox__container', className)
   }, React.createElement("input", Object.assign({
@@ -269,3 +257,3 @@ type: "checkbox",
 
-  var classList = cx(className, 'entur-form-component--radio__radio');
+  var classList = classNames(className, 'entur-form-component--radio__radio');
 
@@ -314,3 +302,3 @@ var _useRadioGroupContext = useRadioGroupContext(),
 
-export { Checkbox, Dropdown, DropdownItem, Fieldset, FormGroup, Radio, RadioGroup, TextArea, TextField, useVariant };
+export { Checkbox, Dropdown, DropdownItem, Fieldset, InputGroup, Radio, RadioGroup, TextArea, TextField, useVariant };
 //# sourceMappingURL=form.esm.js.map

dist/index.d.ts

 import React from "react";
-declare type VariantType = 'success' | 'error' | 'warning' | 'info' | 'none';
-declare function useVariant(): VariantType;
-declare type FormGroupProps = {
+declare type VariantType = 'success' | 'error' | 'warning' | 'info';
+declare function useVariant(): VariantType | null;
+declare type InputGroupProps = {
     /** Tekst/label over en form-komponent */
@@ -14,3 +14,3 @@ label?: string;
 };
-declare const FormGroup: React.FC<FormGroupProps>;
+declare const InputGroup: React.FC<InputGroupProps>;
 declare type TextFieldProps = {
@@ -23,5 +23,3 @@ /** Tekst eller ikon som kommer før inputfeltet */
     className?: string;
-    /** Sett bredden på feltet. Verdien "fluid" setter bredden til 100 % av containeren */
-    width?: 'fluid';
-    /** Hvilken valideringsfarge som vises. Hentes fra FormGroup om mulig */
+    /** Hvilken valideringsfarge som vises */
     variant?: VariantType;
@@ -34,12 +32,8 @@ /** Deaktiver tekstfeltet */
 declare type TextAreaProps = {
-    /** Klasse som sendes til komponenten. Bruk denne om du vil endre style */
+    /** Ekstra klassenavn */
     className?: string;
-    /** Settes til 'fluid' for flytende textarea */
-    width?: 'fluid';
-    /** Settes for å style komponenten basert på state */
+    /** Valideringsvariant */
     variant?: VariantType;
-    /** For å deaktivere inputfeltet */
+    /** Deaktiverer tekstområdet */
     disabled?: boolean;
-    /** true for å tillate resize horistontalt */
-    resize?: boolean;
     [key: string]: any;
@@ -51,4 +45,2 @@ };
     className?: string;
-    /** Settes til 'fluid' for flytende dropdown */
-    width?: 'fluid';
     /** Settes for å style komponenten basert på state/validering */
@@ -64,2 +56,4 @@ variant?: VariantType;
     children: React.ReactNode;
+    /** Tekst eller ikon som kommer før dropdownen */
+    prepend?: React.ReactNode;
     [key: string]: any;
@@ -74,3 +68,3 @@ } & React.HTMLProps<HTMLSelectElement>;
 declare const DropdownItem: React.FC<DropdownItemProps>;
-declare type Props = {
+declare type Props_$0 = {
     /** Innholdet i felt-gruppen. */
@@ -84,3 +78,3 @@ children: React.ReactNode;
 } & React.HTMLProps<HTMLFieldSetElement>;
-declare const Fieldset: React.FC<Props>;
+declare const Fieldset: React.FC<Props_$0>;
 declare type CheckboxProps = {
@@ -118,2 +112,2 @@ /** Klasse som sendes til komponenten. Bruk denne om du vil endre style */
 declare const RadioGroup: React.FC<RadioGroupProps>;
-export { TextField, useVariant, FormGroup, TextArea, Dropdown, DropdownItem, Fieldset, Checkbox, Radio, RadioGroup };
+export { TextField, useVariant, InputGroup, TextArea, Dropdown, DropdownItem, Fieldset, Checkbox, Radio, RadioGroup };

package.json

 {
   "name": "@entur/form",
-  "version": "0.4.0",
+  "version": "1.0.0",
   "license": "EUPL-1.2",
@@ -30,7 +30,7 @@ "main": "dist/index.js",
   "dependencies": {
-    "@entur/icons": "^0.2.0",
+    "@entur/icons": "^0.4.0",
     "@entur/tokens": "^1.0.0",
-    "@entur/typography": "^0.4.1"
-  },
-  "gitHead": "33a589c66b9169353060466237d3e69972b7a726"
+    "@entur/typography": "^0.4.1",
+    "classnames": "^2.2.6"
+  }
 }

README.md

@@ -5,3 +5,3 @@ # Form
 
-> 💡 Looking for the [documentation](https://entur-design-system.firebaseapp.com/komponenter/skjemaelementer/formgroup)?
+> 💡 Looking for the [documentation](https://entur-design-system.firebaseapp.com/komponenter/skjemaelementer/inputgroup)?
 
@@ -18,16 +18,2 @@ ## Installation
 
-```js
-<TextField />
-
-// Or with a FormGroup component wrapping it, giving it additional labels
-
-<FormGroup
-  title="Togdestinasjon"
-  alertLabel="Gratulerer"
-  alertLevel="success"
->
-  <TextField placeholder="Oslo" />
-</FormGroup>
-```
-
-Please refer to the [documentation](https://entur-design-system.firebaseapp.com/komponenter/skjemaelementer/formgroup) for further usage information.
+Please refer to the [documentation](https://entur-design-system.firebaseapp.com/komponenter/skjemaelementer/inputgroup) for further usage information.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of low quality alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

97536

decreased by-19.72%

Dependency count

6

increased by20%

Number of package files

12

decreased by-7.69%

Lines of code

960

decreased by-7.51%

Number of lines in readme file

18

decreased by-43.75%

Dependency changes

• + Addedclassnames@^2.2.6

• + Added@entur/icons@0.4.5(transitive)

• + Added@entur/utils@0.2.9(transitive)

• + Addedtiny-warning@1.0.3(transitive)

• - Removed@entur/icons@0.2.0(transitive)

• Updated@entur/icons@^0.4.0