@itcase/forms 1.0.54 → 1.0.56

package/dist/css/form/Field/RadioGroup/RadioGroup.css

@@ -3,12 +3,12 @@
 }
 .form-radio {
   &_state_success {
-    & .radio-button__state {
+    & .radio__state {
       border: solid 1px var(--radio-success-border);
     }
   }
   &_state_error {
-    & .radio-button__state {
+    & .radio__state {
       border: solid 1px var(--radio-error-border);
     }
   }

package/dist/itcase-forms.cjs.js

@@ -23,7 +23,7 @@ var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
 var Input = require('@itcase/ui/components/Input');
 var Icon = require('@itcase/ui/components/Icon');
-var RadioButton = require('@itcase/ui/components/RadioButton');
+var Radio = require('@itcase/ui/components/Radio');
 var Segmented = require('@itcase/ui/components/Segmented');
 var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
@@ -149,6 +149,10 @@ function FieldWrapperBase(props) {
     labelTextColor,
     labelTextSize,
     labelTextWidth,
+    helpText,
+    helpTextSize,
+    helpTextWeight,
+    helpTextColor,
     message,
     messageTextColor,
     messageTextSize,
@@ -216,16 +220,19 @@ function FieldWrapperBase(props) {
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
+    "data-testid": `${inputName}Field`,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
     htmlFor: id,
-    className: clsx__default.default('form-field__label')
+    className: clsx__default.default('form-field__label'),
+    "data-testid": `${inputName}FieldLabel`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-testid": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textWeight: descTextWidth,
@@ -241,21 +248,25 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-testid": `${inputName}FieldMessage`
   }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
     textWeight: errorMessageTextWeight,
     textColor: errorMessageTextColor,
-    id: `${inputName}-error`
-  }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    id: `${inputName}-error`,
+    dataTestId: `${inputName}FieldMessageError`
+  }, error), Boolean(helpText) && (!error || typeof error !== 'string') && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-field__message-item form-field__message-item_type_help-text",
+    size: helpTextSize,
+    textWeight: helpTextWeight,
+    textColor: helpTextColor,
+    dataTestId: `${inputName}FieldMessageHelpText`
+  }, helpText), (!showError && !helpText || showError && !helpText && (!error || typeof error !== 'string')) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize,
-    textWeight: messageTextWeight,
-    textColor: messageTextColor
-  }, message), (!showError && !message || showError && !message && (!error || typeof error !== 'string')) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    className: "form-field__message-item form-field__message-item_type_message",
-    size: messageTextSize
+    dataTestId: `${inputName}FieldMessagePlaceholder`
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
@@ -1308,6 +1319,7 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
     isRevealable,
     name,
     parse,
+    dataTestId,
     iconSize,
     isDisabled,
     iconBorder,
@@ -1372,7 +1384,8 @@ const InputField = /*#__PURE__*/React__default.default.memo(function InputField(
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      dataTestId: `${input.name}FieldInput`
     }, inputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
       iconFill: iconFill,
@@ -1412,7 +1425,7 @@ function RadioGroupItem(props) {
       onChange(option.value);
     }
   }, [onChange]);
-  return /*#__PURE__*/React__default.default.createElement(RadioButton.RadioButton, Object.assign({
+  return /*#__PURE__*/React__default.default.createElement(Radio.Radio, Object.assign({
     className: "form-radio__item",
     checked: option.value === input.value,
     name: input.name,
@@ -2121,7 +2134,12 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     className,
     config,
     dataTour,
+    dataTestId,
     dataTourButtons,
+    dataTestIdButtons,
+    dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
     dataTourPrimaryButton,
     dataTourSecondaryButton,
     dataTourTertiaryButton,
@@ -2222,6 +2240,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         "data-tour": dataTour,
+        "data-testId": dataTestId,
         ref: () => onRefFormInstance(form),
         onSubmit: handleSubmit,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
@@ -2271,7 +2290,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         padding: buttonPadding,
         gap: buttonGap,
         className: "form__button",
-        dataTour: dataTourButtons
+        dataTour: dataTourButtons,
+        dataTestId: dataTestIdButtons
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         width: "fill",
         className: "form__button-item",
@@ -2282,7 +2302,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         label: primaryButtonLabel,
-        dataTour: dataTourPrimaryButton
+        dataTour: dataTourPrimaryButton,
+        dataTestId: dataTestIdPrimaryButton
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         width: "fill",
         className: "form__button-item",
@@ -2294,7 +2315,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextWeight: secondaryButtonLabelTextWeight,
         label: secondaryButtonLabel,
         onClick: onClickSecondaryButton,
-        dataTour: dataTourSecondaryButton
+        dataTour: dataTourSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         width: "fill",
         className: "form__button-item",
@@ -2306,7 +2328,8 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextWeight: tertiaryButtonLabelTextWeight,
         label: tertiaryButtonLabel,
         onClick: onClickTertiaryButton,
-        dataTour: dataTourTertiaryButton
+        dataTour: dataTourTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton
       }) : tertiaryButton), after);
     },
     subscription: {

package/dist/itcase-forms.esm.js

@@ -22,7 +22,7 @@ import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
 import { Input } from '@itcase/ui/components/Input';
 import { Icon } from '@itcase/ui/components/Icon';
-import { RadioButton } from '@itcase/ui/components/RadioButton';
+import { Radio } from '@itcase/ui/components/Radio';
 import { Segmented } from '@itcase/ui/components/Segmented';
 import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
@@ -139,6 +139,10 @@ function FieldWrapperBase(props) {
     labelTextColor,
     labelTextSize,
     labelTextWidth,
+    helpText,
+    helpTextSize,
+    helpTextWeight,
+    helpTextColor,
     message,
     messageTextColor,
     messageTextSize,
@@ -206,16 +210,19 @@ function FieldWrapperBase(props) {
   return /*#__PURE__*/React.createElement(Tag, {
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, set && `form-field_set_${set}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
     "data-tour": dataTour,
+    "data-testid": `${inputName}Field`,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
     htmlFor: id,
-    className: clsx('form-field__label')
+    className: clsx('form-field__label'),
+    "data-testid": `${inputName}FieldLabel`
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
     textWeight: labelTextWidth,
     textColor: labelTextColor
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-testid": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textWeight: descTextWidth,
@@ -231,21 +238,25 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-testid": `${inputName}FieldMessage`
   }, Boolean(showError) && error && typeof error === 'string' && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type-error",
     size: errorMessageTextSize,
     textWeight: errorMessageTextWeight,
     textColor: errorMessageTextColor,
-    id: `${inputName}-error`
-  }, error), Boolean(message) && (!error || typeof error !== 'string') && /*#__PURE__*/React.createElement(Text, {
+    id: `${inputName}-error`,
+    dataTestId: `${inputName}FieldMessageError`
+  }, error), Boolean(helpText) && (!error || typeof error !== 'string') && /*#__PURE__*/React.createElement(Text, {
+    className: "form-field__message-item form-field__message-item_type_help-text",
+    size: helpTextSize,
+    textWeight: helpTextWeight,
+    textColor: helpTextColor,
+    dataTestId: `${inputName}FieldMessageHelpText`
+  }, helpText), (!showError && !helpText || showError && !helpText && (!error || typeof error !== 'string')) && /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: messageTextSize,
-    textWeight: messageTextWeight,
-    textColor: messageTextColor
-  }, message), (!showError && !message || showError && !message && (!error || typeof error !== 'string')) && /*#__PURE__*/React.createElement(Text, {
-    className: "form-field__message-item form-field__message-item_type_message",
-    size: messageTextSize
+    dataTestId: `${inputName}FieldMessagePlaceholder`
   }, '\u00A0')), after);
 }
 FieldWrapperBase.defaultProps = {
@@ -1298,6 +1309,7 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
     isRevealable,
     name,
     parse,
+    dataTestId,
     iconSize,
     isDisabled,
     iconBorder,
@@ -1362,7 +1374,8 @@ const InputField = /*#__PURE__*/React.memo(function InputField(props) {
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus,
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      dataTestId: `${input.name}FieldInput`
     }, inputProps)), isRevealable && /*#__PURE__*/React.createElement(Icon, {
       className: "form-field__icon",
       iconFill: iconFill,
@@ -1402,7 +1415,7 @@ function RadioGroupItem(props) {
       onChange(option.value);
     }
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(RadioButton, Object.assign({
+  return /*#__PURE__*/React.createElement(Radio, Object.assign({
     className: "form-radio__item",
     checked: option.value === input.value,
     name: input.name,
@@ -2111,7 +2124,12 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     className,
     config,
     dataTour,
+    dataTestId,
     dataTourButtons,
+    dataTestIdButtons,
+    dataTestIdPrimaryButton,
+    dataTestIdSecondaryButton,
+    dataTestIdTertiaryButton,
     dataTourPrimaryButton,
     dataTourSecondaryButton,
     dataTourTertiaryButton,
@@ -2212,6 +2230,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass),
         name: formName,
         "data-tour": dataTour,
+        "data-testId": dataTestId,
         ref: () => onRefFormInstance(form),
         onSubmit: handleSubmit,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
@@ -2261,7 +2280,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         padding: buttonPadding,
         gap: buttonGap,
         className: "form__button",
-        dataTour: dataTourButtons
+        dataTour: dataTourButtons,
+        dataTestId: dataTestIdButtons
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         width: "fill",
         className: "form__button-item",
@@ -2272,7 +2292,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
         label: primaryButtonLabel,
-        dataTour: dataTourPrimaryButton
+        dataTour: dataTourPrimaryButton,
+        dataTestId: dataTestIdPrimaryButton
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         width: "fill",
         className: "form__button-item",
@@ -2284,7 +2305,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextWeight: secondaryButtonLabelTextWeight,
         label: secondaryButtonLabel,
         onClick: onClickSecondaryButton,
-        dataTour: dataTourSecondaryButton
+        dataTour: dataTourSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton
       }) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         width: "fill",
         className: "form__button-item",
@@ -2296,7 +2318,8 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextWeight: tertiaryButtonLabelTextWeight,
         label: tertiaryButtonLabel,
         onClick: onClickTertiaryButton,
-        dataTour: dataTourTertiaryButton
+        dataTour: dataTourTertiaryButton,
+        dataTestId: dataTestIdTertiaryButton
       }) : tertiaryButton), after);
     },
     subscription: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.54",
+  "version": "1.0.56",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,14 +30,14 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.1.12",
-    "@itcase/ui": "^1.0.97",
+    "@itcase/common": "^1.1.13",
+    "@itcase/ui": "^1.1.0",
     "axios": "^1.6.7",
     "clsx": "^2.1.0",
     "date-fns": "2.0.0-alpha.7",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.10.55",
+    "libphonenumber-js": "^1.10.57",
     "lodash": "^4.17.21",
     "luxon": "^3.4.4",
     "postcss": "^8.4.35",
@@ -50,12 +50,12 @@
     "react-select": "^5.8.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.9",
+    "@babel/core": "^7.24.0",
     "@babel/eslint-parser": "^7.23.10",
-    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
-    "@commitlint/cli": "^18.6.1",
-    "@commitlint/config-conventional": "^18.6.2",
+    "@commitlint/cli": "^19.0.3",
+    "@commitlint/config-conventional": "^19.0.3",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",
@@ -64,7 +64,7 @@
     "@semantic-release/git": "^10.0.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.56.0",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.29.1",
@@ -75,31 +75,31 @@
     "eslint-plugin-standard": "^5.0.0",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
-    "npm": "^10.4.0",
+    "npm": "^10.5.0",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
-    "postcss-dark-theme-class": "^1.2.0",
-    "postcss-discard-duplicates": "^6.0.1",
+    "postcss-dark-theme-class": "^1.2.1",
+    "postcss-discard-duplicates": "^6.0.2",
     "postcss-each": "^1.1.0",
     "postcss-easings": "^4.0.0",
     "postcss-extend-rule": "^4.0.0",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-hexrgba": "^2.1.0",
-    "postcss-import": "^16.0.0",
+    "postcss-import": "^16.0.1",
     "postcss-import-ext-glob": "^2.1.1",
     "postcss-mixins": "^9.0.4",
     "postcss-nested": "^6.0.1",
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-normalize": "^10.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^9.3.0",
+    "postcss-preset-env": "^9.4.0",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.2.5",
-    "react-datepicker": "^6.1.0",
-    "rollup": "^4.10.0",
+    "react-datepicker": "^6.2.0",
+    "rollup": "^4.12.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "semantic-release": "^23.0.2",
     "stylelint": "^16.2.1",