@uncinc/uncinc-react-kitchen-sink 2.6.7 → 2.7.0

package/dist/components/Cookie/Checkbox/style.scss

@@ -2,35 +2,37 @@
 @import '../../../styles/assets/variables';
 
 // Radio's and checkboxes
-input[type='checkbox'],
-input[type='radio'] {
-  position: absolute;
-  opacity: 0;
+.Cookie {
+  input[type='checkbox'],
+  input[type='radio'] {
+    position: absolute;
+    opacity: 0;
 
-  // Unchecked
-  ~ label:not(.no-styling) {
-    position: relative;
-    display: inline-block;
-    margin-bottom: 0;
-    font-weight: bold;
-    color: black;
-    user-select: none;
-    cursor: pointer;
+    // Unchecked
+    ~ label:not(.no-styling) {
+      position: relative;
+      display: inline-block;
+      margin-bottom: 0;
+      font-weight: bold;
+      color: black;
+      user-select: none;
+      cursor: pointer;
 
-    display: flex;
-    align-items: center;
+      display: flex;
+      align-items: center;
 
-    &:before {
-      margin-right: 1rem;
-      font-size: 1.8rem;
+      &:before {
+        margin-right: 1rem;
+        font-size: 1.8rem;
+      }
     }
-  }
 
-  // Checked
-  &:checked ~ label:not(.no-styling) {
-    &:before {
+    // Checked
+    &:checked ~ label:not(.no-styling) {
+      &:before {
 
-      background-position-y: -1em;
+        background-position-y: -1em;
+      }
     }
   }
 }

package/dist/components/Form/Checkbox/index.js

@@ -7,8 +7,10 @@ exports.default = exports.Checkbox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
 var _withMapping = _interopRequireDefault(require("../../../Context/withMapping"));
+var _FormikWrapper = require("../FormikWrapper");
 require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -18,28 +20,42 @@ var Checkbox = function Checkbox(props) {
     description = props.description,
     fieldName = props.fieldName,
     validation = props.validation,
-    touched = props.touched,
-    error = props.error,
-    value = props.value,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     _onChange = props.onChange,
     className = props.className,
     wrapperClassName = props.wrapperClassName,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled;
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    values = _useExtendedFormikCon.values,
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var isTouched = touched[fieldName];
+  var value = values[fieldName];
+  var error = errors[fieldName];
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && !value) {
+      return t(['webform.components.checkbox.required', 'webform.required', 'webform_required']);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('Checkbox', wrapperClassName),
     required: required,
     description: description,
     fieldName: fieldName,
-    touched: touched,
+    touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
     required: required,
     name: fieldName,
     value: value,
-    validate: validation
+    validate: handleValidation
   }, function (_ref) {
     var field = _ref.field,
       form = _ref.form;
@@ -47,6 +63,7 @@ var Checkbox = function Checkbox(props) {
     var classes = (0, _classnames.default)('WebformCheckboxes__checkbox__input', {
       'icon-before': true,
       'icon-checkmark': true,
+      'icon-variant-0': !field.value,
       'icon-variant-1': field.value
     });
     return /*#__PURE__*/_react.default.createElement("label", {

package/dist/components/Form/Checkboxes/index.js

@@ -7,16 +7,25 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+var _FormikWrapper = require("../FormikWrapper");
 require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function Checkbox(props) {
   var name = props.name,
     value = props.value,
     validate = props.validate,
     disabled = props.disabled,
-    className = props.className;
+    className = props.className,
+    _onChange = props.onChange;
   return /*#__PURE__*/_react.default.createElement(_formik.Field, {
     required: true,
     name: name,
@@ -30,8 +39,22 @@ function Checkbox(props) {
     var classes = (0, _classnames.default)('WebformCheckboxes__checkbox__input', {
       'icon-before': true,
       'icon-checkmark': true,
+      'icon-variant-0': !checked,
       'icon-variant-1': checked
     });
+    var checkedValues = function checkedValues() {
+      // The value we return here is based on the current state, meaning,
+      // before we update it using setFieldValue. Therefore, when the current
+      // value is unchecked, we want to add it to the list of checked values.
+      // And if the current value is checked, we want to filter it out of the
+      // list of checked values.
+      if (!checked) {
+        return [].concat(_toConsumableArray(field.value), [value]);
+      }
+      return field.value.filter(function (item) {
+        return item !== value;
+      });
+    };
     if (props.value === '__other__') {
       var inputClasses = (0, _classnames.default)({
         hidden: !field.value.includes('__other__')
@@ -46,7 +69,13 @@ function Checkbox(props) {
         id: name,
         checked: checked,
         disabled: disabled,
-        className: className
+        className: className,
+        onChange: function onChange(event) {
+          if (_onChange) {
+            _onChange(value, checkedValues());
+          }
+          field.onChange(event);
+        }
       })), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, props.otherLabel ? props.otherLabel : props.label), props.description && /*#__PURE__*/_react.default.createElement("span", null, props.description)), /*#__PURE__*/_react.default.createElement("textarea", {
         placeholder: props.otherPlaceholder,
         className: inputClasses,
@@ -65,7 +94,13 @@ function Checkbox(props) {
       id: name,
       checked: checked,
       disabled: disabled,
-      className: className
+      className: className,
+      onChange: function onChange(event) {
+        if (_onChange) {
+          _onChange(value, checkedValues());
+        }
+        field.onChange(event);
+      }
     })), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", null, props.label), props.description && /*#__PURE__*/_react.default.createElement("span", null, props.description)));
   });
 }
@@ -76,26 +111,40 @@ var Checkboxes = function Checkboxes(props) {
     placeholder = props.placeholder,
     fieldName = props.fieldName,
     validation = props.validation,
-    touched = props.touched,
-    error = props.error,
     type = props.type,
     options = props.options,
     _props$descriptions = props.descriptions,
     descriptions = _props$descriptions === void 0 ? {} : _props$descriptions,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     className = props.className,
     wrapperClassName = props.wrapperClassName,
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     otherLabel = props.otherLabel,
-    otherPlaceholder = props.otherPlaceholder;
+    otherPlaceholder = props.otherPlaceholder,
+    onChange = props.onChange;
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var isTouched = touched[fieldName];
+  var error = errors[fieldName];
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && (!value || !Array.isArray(value) || value.length === 0)) {
+      return t(['webform.components.checkboxes.required', 'webform.required', 'webform_required']);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('Checkboxes', wrapperClassName),
     title: title,
     required: required,
     description: description,
     fieldName: fieldName,
-    touched: touched,
+    touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, Object.keys(options).map(function (value) {
@@ -106,16 +155,17 @@ var Checkboxes = function Checkboxes(props) {
       label: label,
       description: description,
       className: (0, _classnames.default)(className, {
-        'error': error && touched
+        'error': error && isTouched
       }),
       name: fieldName,
       type: type || 'text',
       value: value,
       placeholder: placeholder,
-      validate: validation,
+      validate: handleValidation,
       disabled: disabled,
       otherLabel: otherLabel,
-      otherPlaceholder: otherPlaceholder
+      otherPlaceholder: otherPlaceholder,
+      onChange: onChange
     });
   }));
 };

package/dist/components/Form/DateField/index.d.ts

@@ -0,0 +1,3 @@
+export default DateField;
+declare function DateField(props: any): React.JSX.Element;
+import React from 'react';

package/dist/components/Form/DateField/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactI18next = require("react-i18next");
+var _TextField = _interopRequireDefault(require("../TextField"));
+var _excluded = ["required", "minDate", "maxDate", "validation"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var DateField = function DateField(props) {
+  var required = props.required,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    validation = props.validation,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && (value === undefined || value === null || value === '')) {
+      return t(['webform.components.date.required', 'webform.required', 'webform_required']);
+    }
+    if (minDate && new Date(value).getTime() < new Date(minDate).getTime()) {
+      return t(['webform.components.date.min', 'webform.min', 'webform_min'], {
+        date: value,
+        minDate: minDate
+      });
+    }
+    if (maxDate && new Date(value).getTime() > new Date(maxDate).getTime()) {
+      return t(['webform.components.date.max', 'webform.max', 'webform_max'], {
+        date: value,
+        maxDate: maxDate
+      });
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({}, restProps, {
+    type: "date",
+    required: required,
+    validation: handleValidation
+  }));
+};
+var _default = DateField;
+exports.default = _default;

package/dist/components/Form/DatePicker/index.js

@@ -8,10 +8,16 @@ var _react = _interopRequireDefault(require("react"));
 var _reactDatepicker = _interopRequireDefault(require("react-datepicker"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+var _FormikWrapper = require("../FormikWrapper");
 require("react-datepicker/dist/react-datepicker.css");
 require("./style.scss");
+var _excluded = ["title", "required", "description", "placeholder", "fieldName", "validation", "className", "wrapperClassName", "disabled", "minDate", "maxDate", "onChange"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var DatePicker = function DatePicker(props) {
   var title = props.title,
     required = props.required,
@@ -19,47 +25,79 @@ var DatePicker = function DatePicker(props) {
     placeholder = props.placeholder,
     fieldName = props.fieldName,
     validation = props.validation,
-    touched = props.touched,
-    error = props.error,
-    type = props.type,
-    value = props.value,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     className = props.className,
     wrapperClassName = props.wrapperClassName,
     _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled;
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
+    _onChange = props.onChange,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    values = _useExtendedFormikCon.values,
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    setFieldValue = _useExtendedFormikCon.setFieldValue,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var isTouched = touched[fieldName];
+  var value = values[fieldName];
+  var error = errors[fieldName];
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && !value) {
+      return t(['webform.components.date_picker.required', 'webform.required', 'webform_required']);
+    }
+    if (minDate && new Date(value).getTime() < new Date(minDate).getTime()) {
+      return t(['webform.components.date_picker.min', 'webform.min', 'webform_min'], {
+        date: value,
+        minDate: minDate
+      });
+    }
+    if (maxDate && new Date(value).getTime() > new Date(maxDate).getTime()) {
+      return t(['webform.components.date_picker.max', 'webform.max', 'webform_max'], {
+        date: value,
+        maxDate: maxDate
+      });
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('DatePicker', wrapperClassName),
     title: title,
     required: required,
     description: description,
     fieldName: fieldName,
-    touched: touched,
+    touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+    id: fieldName,
+    name: fieldName,
+    validate: handleValidation,
     fieldName: fieldName,
-    validation: validation,
     touched: touched,
     error: error,
-    type: type || 'text',
     value: value
-  }, function (_ref) {
-    var form = _ref.form;
-    return /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, {
-      id: fieldName,
+  }, function () {
+    return /*#__PURE__*/_react.default.createElement(_reactDatepicker.default, _extends({
       selected: value && new Date(value) || null,
       onChange: function onChange(value) {
-        form.setFieldValue(fieldName, value);
+        setFieldValue(fieldName, value);
+        if (_onChange) _onChange(value);
       },
       peekNextMonth: true,
       showMonthDropdown: true,
       showYearDropdown: true,
       dropdownMode: "select",
+      id: fieldName,
+      name: fieldName,
       className: className,
       disabled: disabled,
       placeholderText: placeholder
-    });
+    }, restProps));
   }));
 };
 var _default = DatePicker;

package/dist/components/Form/DateSelect/index.d.ts

@@ -12,6 +12,7 @@ declare namespace DateSelect {
         let dayPlaceholder: string;
         let monthPlaceholder: string;
         let yearPlaceholder: string;
+        let validation: undefined;
     }
 }
 import React from 'react';