@pareto-engineering/design-system 2.0.0-alpha.62 → 2.0.0-alpha.64

package/dist/cjs/a/Label/styles.scss

@@ -10,9 +10,9 @@ $default-padding: $default-padding-top $default-padding-side $default-padding-bo
 
 $default-color: primary;
 $default-image-size: 2em;
-$default-font-size: calc(1 em * var(--s-1));
+$default-font-size: calc(1em * var(--s-1));
 
-.#{bem.$base}.label{
+.#{bem.$base}.label {
     align-items: center;
     background: var(--x, var(--#{$default-color}));
     border-radius: 3em;
@@ -31,4 +31,4 @@ $default-font-size: calc(1 em * var(--s-1));
         border: 1px solid var(--x, var(--#{$default-color}));
         color: var(--x, var(--#{$default-color}));
     }
-}
+}

package/dist/cjs/f/FormInput/FormInput.js

@@ -89,7 +89,8 @@ var FormInput = _ref => {
 
   if (type === 'checkbox') {
     return /*#__PURE__*/React.createElement(_fields.Checkbox, _extends({
-      className: newClassName
+      className: newClassName,
+      disabled: disabled
     }, otherProps));
   }
 

package/dist/cjs/f/common/Label/Label.js

@@ -19,7 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // Local Definitions
 var baseClassName = _bem.default.base;
-var componentClassName = 'label';
+var componentClassName = 'form-label';
 /**
  * This is the component description.
  */

package/dist/cjs/f/common/Label/styles.scss

@@ -3,9 +3,6 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-
-.#{bem.$base}.label {
+.#{bem.$base}.form-label {
  color: var(--dark-x);
 }
-
-

package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js

@@ -70,7 +70,7 @@ var ChoicesInput = _ref => {
   }, options.map(choice => /*#__PURE__*/React.createElement(_common.Choice, _extends({
     key: choice.value,
     name: name,
-    id: "".concat(id, "-").concat(choice.value),
+    id: "".concat(name, "-").concat(choice.value),
     multiple: multiple,
     validate: validate,
     disabled: disabled

package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -41,15 +41,18 @@ var Choice = _ref => {
     validate,
     disabled
   } = _ref;
+  var type = multiple ? 'checkbox' : 'radio';
   var [field] = (0, _formik.useField)({
     name,
-    validate
+    validate,
+    type,
+    value
   });
   return /*#__PURE__*/React.createElement("div", {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("input", _extends({
-    type: multiple ? 'checkbox' : 'radio',
+    type: type,
     id: id,
     name: name
   }, field, {

package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js

@@ -47,13 +47,17 @@ var QueryCombobox = _ref => {
     extraVariables,
     optionsKeyMap,
     minLength,
-    transformSearch // ...otherProps
+    transformSearch,
+    validate // ...otherProps
 
   } = _ref;
   (0, React.useLayoutEffect)(() => {
     Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
   }, []);
-  var [, meta, helpers] = (0, _formik.useField)(name);
+  var [, meta, helpers] = (0, _formik.useField)({
+    name,
+    validate
+  });
   var {
     setValue,
     setError
@@ -217,7 +221,12 @@ QueryCombobox.propTypes = {
   /**
    * The function to transform the search input
    */
-  transformSearch: _propTypes.default.func
+  transformSearch: _propTypes.default.func,
+
+  /**
+   * The query combobox field validator function
+   */
+  validate: _propTypes.default.func
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

package/dist/cjs/f/fields/QuerySelect/QuerySelect.js

@@ -41,10 +41,14 @@ var QuerySelect = _ref => {
     disabled,
     color,
     loadingOption,
-    defaultOption // ...otherProps
+    defaultOption,
+    validate // ...otherProps
 
   } = _ref;
-  var [,, helpers] = (0, _formik.useField)(name);
+  var [,, helpers] = (0, _formik.useField)({
+    name,
+    validate
+  });
   var {
     setError
   } = helpers;
@@ -181,7 +185,12 @@ QuerySelect.propTypes = {
     value: _propTypes.default.string.isRequired,
     label: _propTypes.default.string.isRequired,
     disabled: _propTypes.default.bool.isRequired
-  })
+  }),
+
+  /**
+   * The query select field validator function
+   */
+  validate: _propTypes.default.func
 };
 QuerySelect.defaultProps = {
   disabled: false,

package/dist/cjs/f/fields/RatingsInput/common/Rating/Rating.js

@@ -38,12 +38,16 @@ var Rating = _ref => {
     ratingId,
     hover,
     setHover,
+    validate,
     activeBackgroundColor,
     inactiveBackgroundColor,
     showRatingValue // ...otherProps
 
   } = _ref;
-  var [field] = (0, _formik.useField)(name);
+  var [field] = (0, _formik.useField)({
+    name,
+    validate
+  });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, "x-".concat(activeBackgroundColor), "y-".concat(inactiveBackgroundColor)].filter(e => e).join(' '),
@@ -118,7 +122,12 @@ Rating.propTypes = {
   /**
    * Determines if the rating start value should be shown
    */
-  showRatingValue: _propTypes.default.bool
+  showRatingValue: _propTypes.default.bool,
+
+  /**
+   * The rating field validator function
+   */
+  validate: _propTypes.default.func
 };
 Rating.defaultProps = {
   activeBackgroundColor: 'main1',

package/dist/es/a/Label/styles.scss

@@ -10,9 +10,9 @@ $default-padding: $default-padding-top $default-padding-side $default-padding-bo
 
 $default-color: primary;
 $default-image-size: 2em;
-$default-font-size: calc(1 em * var(--s-1));
+$default-font-size: calc(1em * var(--s-1));
 
-.#{bem.$base}.label{
+.#{bem.$base}.label {
     align-items: center;
     background: var(--x, var(--#{$default-color}));
     border-radius: 3em;
@@ -31,4 +31,4 @@ $default-font-size: calc(1 em * var(--s-1));
         border: 1px solid var(--x, var(--#{$default-color}));
         color: var(--x, var(--#{$default-color}));
     }
-}
+}

package/dist/es/f/FormInput/FormInput.js

@@ -67,7 +67,8 @@ const FormInput = ({
 
   if (type === 'checkbox') {
     return /*#__PURE__*/React.createElement(Checkbox, _extends({
-      className: newClassName
+      className: newClassName,
+      disabled: disabled
     }, otherProps));
   }
 

package/dist/es/f/common/Label/Label.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import styleNames from '@pareto-engineering/bem'; // Local Definitions
 
 const baseClassName = styleNames.base;
-const componentClassName = 'label';
+const componentClassName = 'form-label';
 /**
  * This is the component description.
  */

package/dist/es/f/common/Label/styles.scss

@@ -3,9 +3,6 @@
 @use "@pareto-engineering/bem";
 @use "../../../form.scss";
 
-
-.#{bem.$base}.label {
+.#{bem.$base}.form-label {
  color: var(--dark-x);
 }
-
-

package/dist/es/f/fields/ChoicesInput/ChoicesInput.js

@@ -49,7 +49,7 @@ const ChoicesInput = ({
   }, options.map(choice => /*#__PURE__*/React.createElement(Choice, _extends({
     key: choice.value,
     name: name,
-    id: `${id}-${choice.value}`,
+    id: `${name}-${choice.value}`,
     multiple: multiple,
     validate: validate,
     disabled: disabled

package/dist/es/f/fields/ChoicesInput/common/Choice/Choice.js

@@ -25,15 +25,18 @@ const Choice = ({
   validate,
   disabled
 }) => {
+  const type = multiple ? 'checkbox' : 'radio';
   const [field] = useField({
     name,
-    validate
+    validate,
+    type,
+    value
   });
   return /*#__PURE__*/React.createElement("div", {
     className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
     style: style
   }, /*#__PURE__*/React.createElement("input", _extends({
-    type: multiple ? 'checkbox' : 'radio',
+    type: type,
     id: id,
     name: name
   }, field, {

package/dist/es/f/fields/QueryCombobox/QueryCombobox.js

@@ -26,13 +26,17 @@ const QueryCombobox = ({
   extraVariables,
   optionsKeyMap,
   minLength,
-  transformSearch // ...otherProps
+  transformSearch,
+  validate // ...otherProps
 
 }) => {
   useLayoutEffect(() => {
     import("./styles.scss");
   }, []);
-  const [, meta, helpers] = useField(name);
+  const [, meta, helpers] = useField({
+    name,
+    validate
+  });
   const {
     setValue,
     setError
@@ -195,7 +199,12 @@ QueryCombobox.propTypes = {
   /**
    * The function to transform the search input
    */
-  transformSearch: PropTypes.func
+  transformSearch: PropTypes.func,
+
+  /**
+   * The query combobox field validator function
+   */
+  validate: PropTypes.func
 };
 QueryCombobox.defaultProps = {
   optionsKeyMap: {

package/dist/es/f/fields/QuerySelect/QuerySelect.js

@@ -23,10 +23,14 @@ const QuerySelect = ({
   disabled,
   color,
   loadingOption,
-  defaultOption // ...otherProps
+  defaultOption,
+  validate // ...otherProps
 
 }) => {
-  const [,, helpers] = useField(name);
+  const [,, helpers] = useField({
+    name,
+    validate
+  });
   const {
     setError
   } = helpers;
@@ -160,7 +164,12 @@ QuerySelect.propTypes = {
     value: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     disabled: PropTypes.bool.isRequired
-  })
+  }),
+
+  /**
+   * The query select field validator function
+   */
+  validate: PropTypes.func
 };
 QuerySelect.defaultProps = {
   disabled: false,

package/dist/es/f/fields/RatingsInput/common/Rating/Rating.js

@@ -21,12 +21,16 @@ const Rating = ({
   ratingId,
   hover,
   setHover,
+  validate,
   activeBackgroundColor,
   inactiveBackgroundColor,
   showRatingValue // ...otherProps
 
 }) => {
-  const [field] = useField(name);
+  const [field] = useField({
+    name,
+    validate
+  });
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: [baseClassName, componentClassName, userClassName, `x-${activeBackgroundColor}`, `y-${inactiveBackgroundColor}`].filter(e => e).join(' '),
@@ -101,7 +105,12 @@ Rating.propTypes = {
   /**
    * Determines if the rating start value should be shown
    */
-  showRatingValue: PropTypes.bool
+  showRatingValue: PropTypes.bool,
+
+  /**
+   * The rating field validator function
+   */
+  validate: PropTypes.func
 };
 Rating.defaultProps = {
   activeBackgroundColor: 'main1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pareto-engineering/design-system",
-  "version": "2.0.0-alpha.62",
+  "version": "2.0.0-alpha.64",
   "description": "",
   "main": "dist/cjs/index.js",
   "module": "dist/es/index.js",