@uncinc/uncinc-react-kitchen-sink 2.2.5 → 2.2.6

package/dist/components/Button/stories.scss

@@ -0,0 +1,45 @@
+@import '../../styles/assets/variables';
+
+.Button {
+  &.Button--styled {
+    display: inline-block;
+    border-radius: 5px;
+    text-decoration: none;
+    text-align: center;
+    cursor: pointer;
+
+    &--primary {
+      font-size: 21px;
+      background-color: black;
+      color: #ffffff;
+      font-weight: 600;
+      line-height: 1.14;
+      padding: 19px 30px;
+
+      &:hover {
+        background-color: #434343;
+      }
+      &:disabled {
+        font-family: inherit;
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+    }
+
+    &--inverted {
+      border: solid 1px #888888;
+      background-color: #ffffff;
+      padding: 18px 34.5px;
+      font-size: 18px;
+      font-weight: 600;
+      color: #000000;
+
+      &:hover {
+        background-color: #f1f1f1;
+      }
+      &:disabled {
+        font-family: inherit;
+        opacity: .5;
+      }
+    }
+  }
+}

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { Field } from 'formik';
-import classnames from 'classnames';
+import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import withMapping from '../../../Context/withMapping';
 import './style.scss';
@@ -18,10 +18,13 @@ const Checkbox = props => {
     error,
     value,
     displayRequiredIndicator,
-    onChange
+    onChange,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: "Checkbox",
+    className: c("Checkbox", wrapperClassName),
     required: required,
     description: description,
     fieldName: fieldName,
@@ -38,7 +41,7 @@ const Checkbox = props => {
     form
   }) => {
     const id = `${props.fieldName}--${props.value}`;
-    const classes = classnames('WebformCheckboxes__checkbox__input', {
+    const classes = c('WebformCheckboxes__checkbox__input', {
       'icon-before': true,
       'icon-checkmark': true,
       'icon-variant-1': field.value
@@ -54,7 +57,9 @@ const Checkbox = props => {
       onChange: e => {
         field.onChange(e);
         onChange(!field.value);
-      }
+      },
+      disabled: disabled,
+      className: className
     })), title);
   }));
 };

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

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { Field } from 'formik';
-import classnames from 'classnames';
+import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
 
@@ -10,7 +10,9 @@ function Checkbox(props) {
   const {
     name,
     value,
-    validate
+    validate,
+    disabled,
+    className
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     required: true,
@@ -23,7 +25,7 @@ function Checkbox(props) {
   }) => {
     const name = `${props.name}--${props.value}`;
     const checked = field.value && field.value.includes(value);
-    const classes = classnames('WebformCheckboxes__checkbox__input', {
+    const classes = c('WebformCheckboxes__checkbox__input', {
       'icon-before': true,
       'icon-checkmark': true,
       'icon-variant-1': checked
@@ -48,7 +50,9 @@ function Checkbox(props) {
 
         form.setFieldValue(field.name, Array.from(set));
         form.setFieldTouched(field.name, true);
-      }
+      },
+      disabled: disabled,
+      className: className
     })), props.label);
   });
 }
@@ -65,10 +69,13 @@ const Checkboxes = props => {
     error,
     type,
     options,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: "Checkboxes",
+    className: c("Checkboxes", wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -81,12 +88,15 @@ const Checkboxes = props => {
     return /*#__PURE__*/React.createElement(Checkbox, {
       key: value,
       label: label,
-      className: error && touched ? 'error' : null,
+      className: c(className, {
+        'error': error && touched
+      }),
       name: fieldName,
       type: type || 'text',
       value: value,
       placeholder: placeholder,
-      validate: validation
+      validate: validation,
+      disabled: disabled
     });
   }));
 };

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDatePicker from 'react-datepicker';
 import { Field } from 'formik';
+import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import "react-datepicker/dist/react-datepicker.css";
 import './style.scss';
@@ -17,11 +18,13 @@ const DatePicker = props => {
     error,
     type,
     value,
-    setFieldValue,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: "DatePicker",
+    className: c("DatePicker", wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -37,16 +40,20 @@ const DatePicker = props => {
     error: error,
     type: type || "text",
     value: value
-  }, () => {
+  }, ({
+    form
+  }) => {
     return /*#__PURE__*/React.createElement(ReactDatePicker, {
       selected: value && new Date(value) || null,
       onChange: value => {
-        setFieldValue(fieldName, value);
+        form.setFieldValue(fieldName, value);
       },
       peekNextMonth: true,
       showMonthDropdown: true,
       showYearDropdown: true,
-      dropdownMode: "select"
+      dropdownMode: "select",
+      className: className,
+      disabled: disabled
     });
   }));
 };

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

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import moment from 'moment';
+import c from 'classnames';
 import SelectInput from '../Select/Input';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
@@ -15,7 +16,10 @@ const DateSelect = props => {
     values,
     setFieldValue,
     setFieldError,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props; // Set all states for the date.
 
   const [day, setDay] = useState();
@@ -96,7 +100,7 @@ const DateSelect = props => {
     setFieldValue(fieldName, birthdate.format('YYYY-MM-DD'));
   }, [day, month, year, fieldName, values, setFieldValue, setFieldError, requiredError]);
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: "DateSelect",
+    className: c("DateSelect", wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -105,6 +109,8 @@ const DateSelect = props => {
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, /*#__PURE__*/React.createElement(SelectInput, {
+    className: className,
+    disabled: disabled,
     fieldName: `${fieldName}[day]`,
     options: renderDayOptions(),
     value: day,
@@ -113,6 +119,8 @@ const DateSelect = props => {
       setDay(e);
     }
   }), /*#__PURE__*/React.createElement(SelectInput, {
+    className: className,
+    disabled: disabled,
     fieldName: `${fieldName}[month]`,
     options: renderMonthOptions(),
     value: month,
@@ -121,6 +129,8 @@ const DateSelect = props => {
       setMonth(e);
     }
   }), /*#__PURE__*/React.createElement(SelectInput, {
+    className: className,
+    disabled: disabled,
     fieldName: `${fieldName}[year]`,
     options: renderYearOptions(),
     value: year,

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

@@ -2,7 +2,61 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { Form, Formik } from 'formik';
-import PropTypes from 'prop-types';
+
+const renderChildrenRecursively = (child, childProps, displayRequiredIndicator) => {
+  const {
+    fieldName,
+    type,
+    htmlType,
+    children
+  } = child.props;
+
+  if (type === 'submit' || htmlType === 'submit') {
+    return /*#__PURE__*/React.cloneElement(child, {
+      disabled: childProps.isSubmitting
+    }, children);
+  }
+
+  const fieldProps = {
+    touched: childProps.touched[fieldName],
+    error: childProps.errors[fieldName],
+    value: childProps.values[fieldName],
+    displayRequiredIndicator: displayRequiredIndicator
+  };
+  return /*#__PURE__*/React.cloneElement(child, { ...child.props,
+    ...fieldProps
+  }, React.Children.map(children, subchild => {
+    // Happens when we conditionally render elements.
+    if (!subchild) {
+      return null;
+    } // Happens for simple text nodes.
+
+
+    if (!subchild.props) {
+      return /*#__PURE__*/React.createElement("span", null, subchild);
+    }
+
+    const {
+      fieldName,
+      children
+    } = subchild.props;
+    const fieldProps = {
+      touched: childProps.touched[fieldName],
+      error: childProps.errors[fieldName],
+      value: childProps.values[fieldName],
+      displayRequiredIndicator: displayRequiredIndicator
+    };
+
+    if (children) {
+      return renderChildrenRecursively(subchild, { ...childProps
+      }, displayRequiredIndicator);
+    }
+
+    return /*#__PURE__*/React.cloneElement(subchild, { ...childProps,
+      ...fieldProps
+    }, null);
+  }));
+};
 
 const FormikWrapper = props => {
   const {
@@ -25,49 +79,8 @@ const FormikWrapper = props => {
     validateOnMount: validateOnMount,
     onReset: onReset
   }, restProps), childProps => /*#__PURE__*/React.createElement(Form, null, React.Children.map(props.children, child => {
-    const {
-      fieldName,
-      type,
-      htmlType,
-      children
-    } = child.props;
-
-    if (type === 'submit' || htmlType === 'submit') {
-      return /*#__PURE__*/React.cloneElement(child, {
-        disabled: childProps.isSubmitting
-      }, children);
-    }
-
-    const fieldProps = {
-      touched: childProps.touched[fieldName],
-      error: childProps.errors[fieldName],
-      value: childProps.values[fieldName],
-      displayRequiredIndicator: displayRequiredIndicator
-    };
-    return /*#__PURE__*/React.cloneElement(child, { ...childProps,
-      ...fieldProps
-    }, null);
+    return renderChildrenRecursively(child, childProps, displayRequiredIndicator);
   })));
 };
 
-FormikWrapper.defaultProps = {
-  onSubmit: () => {},
-  initialValues: {},
-  displayRequiredIndicator: "optional",
-  validate: () => {},
-  validateOnChange: true,
-  validateOnBlur: true,
-  validateOnMount: false,
-  onReset: () => {}
-};
-FormikWrapper.propTypes = {
-  onSubmit: PropTypes.func,
-  initialValues: PropTypes.object,
-  displayRequiredIndicator: PropTypes.oneOf(['optional', 'required', 'none']),
-  validate: PropTypes.func,
-  validateOnChange: PropTypes.bool,
-  validateOnBlur: PropTypes.bool,
-  validateOnMount: PropTypes.bool,
-  onReset: PropTypes.func
-};
 export default FormikWrapper;

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

@@ -2,11 +2,15 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { Field } from 'formik';
-import classnames from 'classnames';
+import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
 
 const Radio = props => {
+  const {
+    className,
+    disabled
+  } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: props.name,
     validate: props.validate
@@ -15,14 +19,14 @@ const Radio = props => {
     form
   }) => {
     const name = `${props.name}--${props.value}`;
-    const classes = classnames('WebformRadios__radio__input', {
+    const classes = c('WebformRadios__radio__input', {
       'icon-before': true,
       'icon-radio': true,
       'icon-variant-1': field.value && field.value.includes(props.value)
     });
 
     if (props.value === '__other__') {
-      const inputClasses = classnames({
+      const inputClasses = c({
         hidden: field.value !== '__other__'
       });
       return /*#__PURE__*/React.createElement("div", {
@@ -46,9 +50,11 @@ const Radio = props => {
       htmlFor: name,
       className: classes
     }, /*#__PURE__*/React.createElement("input", _extends({}, field, {
+      className: className,
       type: "radio",
       id: name,
-      value: props.value
+      value: props.value,
+      disabled: disabled
     })), props.label);
   });
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Field } from 'formik';
+import c from 'classnames';
 import withMapping from '../../../Context/withMapping';
 import WysiwygField from '../../WysiwygField';
 
@@ -14,21 +15,27 @@ const SearchField = props => {
     touched,
     error,
     type,
-    value
+    value,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: "SearchField"
+    className: c("SearchField", wrapperClassName)
   }, title && /*#__PURE__*/React.createElement("label", {
     htmlFor: fieldName
   }, title, " ", !required && /*#__PURE__*/React.createElement("div", {
     className: "WebformComponent--optional"
   }, "- ", 'optioneel')), /*#__PURE__*/React.createElement(Field, {
-    className: error && touched ? 'error' : null,
+    className: c(className, {
+      'error': error && touched
+    }),
     name: fieldName,
     type: type || 'text',
     value: value,
     placeholder: placeholder,
-    validate: validation
+    validate: validation,
+    disabled: disabled
   }), description && /*#__PURE__*/React.createElement(WysiwygField, {
     property: "schema:text",
     html: description,

package/dist/components/Form/Select/Input/index.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import SelectStyled from 'react-select';
+import c from 'classnames';
 import { Field } from 'formik';
 import './style.scss';
 
@@ -12,7 +13,10 @@ const SelectInput = props => {
     defaultValue,
     onChange,
     options,
-    placeholder
+    placeholder,
+    disabled,
+    className,
+    wrapperClassName
   } = props;
   let {
     selectedOption
@@ -48,10 +52,11 @@ const SelectInput = props => {
   }) => {
     return /*#__PURE__*/React.createElement(SelectStyled, {
       id: id,
-      className: "Select__select",
-      classNamePrefix: "Select__inner",
+      className: c("Select__select", className),
+      classNamePrefix: c("Select__inner", wrapperClassName),
       value: selectedOption || "",
       defaultValue: defaultValue,
+      disabled: disabled,
       onChange: e => {
         if (e) {
           if (onChange) {

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

@@ -1,4 +1,7 @@
+function _extends() { _extends = Object.assign || 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); }
+
 import React from 'react';
+import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import SelectInput from './Input';
 import './style.scss';
@@ -11,10 +14,13 @@ const Select = props => {
     description,
     error,
     touched,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: "Select",
+    className: c("Select", wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -22,7 +28,12 @@ const Select = props => {
     touched: touched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, /*#__PURE__*/React.createElement(SelectInput, props));
+  }, /*#__PURE__*/React.createElement(SelectInput, _extends({}, props, {
+    className: c(className, {
+      'error': error && touched
+    }),
+    disabled: disabled
+  })));
 };
 
 export default Select;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Field } from 'formik';
+import c from 'classnames';
 import withMapping from '../../../Context/withMapping';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
@@ -16,7 +17,10 @@ const TextField = props => {
     error,
     value,
     displayRequiredIndicator,
-    onChange
+    onChange,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props;
   const type = props.type || "text";
 
@@ -24,7 +28,10 @@ const TextField = props => {
     const {
       handleChange
     } = props;
-    handleChange(e);
+
+    if (handleChange) {
+      handleChange(e);
+    }
 
     if (onChange) {
       onChange(e);
@@ -32,7 +39,7 @@ const TextField = props => {
   };
 
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: "TextField",
+    className: c("TextField", wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -41,13 +48,16 @@ const TextField = props => {
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, /*#__PURE__*/React.createElement(Field, {
-    className: error && touched ? 'error' : null,
+    className: c(className, {
+      'error': error && touched
+    }),
     name: fieldName,
     type: type,
     value: value,
     placeholder: placeholder,
     validate: validation,
-    onChange: handleChange
+    onKeyUp: handleChange,
+    disabled: disabled
   }));
 };
 

package/dist/components/Form/TextField/stories.js

@@ -26,6 +26,7 @@ export const TextField = props => {
       }
 
       return error;
-    }
+    },
+    onChange: e => console.log(e.target.value)
   }));
 };

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Field } from 'formik';
+import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
 
@@ -15,10 +16,13 @@ const Textarea = props => {
     error,
     rows,
     value,
-    displayRequiredIndicator
+    displayRequiredIndicator,
+    className,
+    wrapperClassName,
+    disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: "Textarea",
+    className: c("Textarea", wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -27,13 +31,16 @@ const Textarea = props => {
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, /*#__PURE__*/React.createElement(Field, {
-    className: error && touched ? 'error' : null,
+    className: c(className, {
+      'error': error && touched
+    }),
     name: fieldName,
     component: "textarea",
     value: value,
     placeholder: placeholder,
     rows: rows,
-    validate: validation
+    validate: validation,
+    disabled: disabled
   }));
 };
 

package/dist/components/WysiwygField/stories.scss

@@ -0,0 +1,3 @@
+.WysiwygField {
+  margin-right: 200px;
+}

package/dist/helpers/makeSafeForCSS.js

@@ -0,0 +1,5 @@
+const makeSafeForCSS = value => {
+  return encodeURIComponent(value).replace(/\.|%[0-9a-z]{2}/gi, '');
+};
+
+export default makeSafeForCSS;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.2.5",
+  "version": "2.2.6",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",