@uncinc/uncinc-react-kitchen-sink 2.3.2 → 2.3.4

package/dist/Context/withMapping.js

@@ -1,22 +1,17 @@
-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); }
-
+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); }
 import React, { useContext } from 'react';
 import KitchenSinkComponentMapperContext from './KitchenSinkComponentMapperContext';
-
 const withMapping = BaseComponent => props => {
   const {
     componentIsWrapped
   } = props;
   const context = useContext(KitchenSinkComponentMapperContext);
-
   if (context && BaseComponent && !componentIsWrapped && context[BaseComponent.name]) {
     const WrapperComponent = context[BaseComponent.name];
     return /*#__PURE__*/React.createElement(WrapperComponent, _extends({}, props, {
       componentIsWrapped: true
     }), props.children);
   }
-
   return /*#__PURE__*/React.createElement(BaseComponent, props, props.children);
 };
-
 export default withMapping;

package/dist/components/Accordion/AccordionItem/index.js

@@ -2,7 +2,6 @@ import React, { useState } from 'react';
 import c from 'classnames';
 import AnimateHeight from 'react-animate-height';
 import WysiwygField from '../../WysiwygField';
-
 const ContentParsed = ({
   children
 }) => {
@@ -11,10 +10,8 @@ const ContentParsed = ({
       html: children
     });
   }
-
   return /*#__PURE__*/React.createElement("div", null, children);
 };
-
 const AccordeonTitle = ({
   className,
   children
@@ -23,7 +20,6 @@ const AccordeonTitle = ({
     className: className
   }, children);
 };
-
 const AccordionItem = ({
   title,
   content,
@@ -55,7 +51,6 @@ const AccordionItem = ({
     className: "Accordion__item__content"
   }, /*#__PURE__*/React.createElement(ContentParsed, null, content))));
 };
-
 AccordionItem.defaultProps = {
   title: 'Default title',
   content: 'Default content',

package/dist/components/Accordion/AccordionItemVariant/index.js

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import AnimateHeight from 'react-animate-height';
 import c from 'classnames';
-
 const AccordionItemVariant = ({
   title,
   children,
@@ -14,16 +13,13 @@ const AccordionItemVariant = ({
 }) => {
   const [toggleAccordion, setToggleAccordion] = useState(false);
   const [height, setHeight] = useState(0);
-
   const toggle = () => {
     setToggleAccordion(!toggleAccordion);
     setHeight(height === 0 ? 'auto' : 0);
-
     if (onClick) {
       onClick();
     }
   };
-
   const AccordionItem = c('AccordionItem', className, toggleAccordion === true ? 'AccordionItem--active' : 'AccordionItem--inactive');
   return /*#__PURE__*/React.createElement("div", {
     className: AccordionItem
@@ -38,7 +34,6 @@ const AccordionItemVariant = ({
     height: height
   }, children));
 };
-
 AccordionItemVariant.defaultProps = {
   title: 'Default title',
   className: 'AccordionItemCustomClass',

package/dist/components/Accordion/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import c from 'classnames';
 import './style.scss';
-
 const Accordion = ({
   className,
   children
@@ -11,5 +10,4 @@ const Accordion = ({
     className: classes
   }, children);
 };
-
 export default Accordion;

package/dist/components/ApiAutocomplete/index.js

@@ -1,20 +1,18 @@
 import React, { useState } from 'react';
 import Autosuggest from 'react-autosuggest';
 import './style.scss';
-
 function abortableFetch(request, opts) {
   const controller = new AbortController();
   const signal = controller.signal;
   return {
     abort: () => controller.abort(),
-    ready: fetch(request, { ...opts,
+    ready: fetch(request, {
+      ...opts,
       signal
     })
   };
 }
-
 let currentFetch = null;
-
 const ApiAutocomplete = ({
   endpoint,
   placeholder,
@@ -28,14 +26,11 @@ const ApiAutocomplete = ({
 }) => {
   const [queryInput, setQuery] = useState(defaultValue || '');
   const [results, setResults] = useState([]);
-
   const getSuggestions = query => {
     const url = `${endpoint}?${queryParameter}=${query}`;
-
     if (currentFetch) {
       currentFetch.abort();
     }
-
     currentFetch = abortableFetch(url, requestOptions);
     currentFetch.ready.then(response => {
       return response.json();
@@ -45,10 +40,10 @@ const ApiAutocomplete = ({
         return item;
       });
       setResults(ajaxResults);
-    }).catch(e => {// Catch the error so the browser does not output errors.
+    }).catch(e => {
+      // Catch the error so the browser does not output errors.
     });
   };
-
   return /*#__PURE__*/React.createElement(Autosuggest, {
     suggestions: results,
     onSuggestionsFetchRequested: ({
@@ -69,12 +64,12 @@ const ApiAutocomplete = ({
     }) => {
       onSelectItem(suggestion);
     },
-    inputProps: { ...props,
+    inputProps: {
+      ...props,
       placeholder,
       value: queryInput,
       onBlur: event => {
         const value = event.target.value;
-
         if (!value || value.length === 0) {
           onSelectItem('');
         }
@@ -87,7 +82,6 @@ const ApiAutocomplete = ({
     }
   });
 };
-
 ApiAutocomplete.defaultProps = {
   getSuggestionValue: item => {
     return item.name;

package/dist/components/Button/index.js

@@ -1,5 +1,4 @@
-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); }
-
+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); }
 import React from 'react';
 import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -8,7 +7,6 @@ import gtm from '../../helpers/gtm';
 import { isExternalLink } from '../../helpers/link';
 import withMapping from '../../Context/withMapping';
 import './style.scss';
-
 const Button = ({
   href,
   dispatch,
@@ -27,19 +25,17 @@ const Button = ({
     'Button--inverted': inverted,
     'is-loading': loading
   });
-
   const onClick = event => {
-    if (loading) return; // Using element.innerText gives us purely the text of the element which is
-    // perfect for the tracking event. We don't want a string containing HTML.
+    if (loading) return;
 
+    // Using element.innerText gives us purely the text of the element which is
+    // perfect for the tracking event. We don't want a string containing HTML.
     const text = event.target ? event.target.innerText : 'Unknown';
     gtm.trackUserEvent('button', 'click', text, href);
-
     if (props.onClick) {
       props.onClick(event);
     }
   };
-
   if (!href) {
     return /*#__PURE__*/React.createElement("button", _extends({
       type: htmlType,
@@ -49,7 +45,6 @@ const Button = ({
       onClick: onClick
     }), children);
   }
-
   return isExternalLink(href) ? /*#__PURE__*/React.createElement("a", _extends({
     className: classes,
     href: href,
@@ -64,7 +59,6 @@ const Button = ({
     onClick: onClick
   }), children);
 };
-
 Button.defaultProps = {
   primary: true,
   inverted: false,

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import './style.scss';
-
 const CheckboxAndRadio = ({
   name,
   id,
@@ -27,5 +26,4 @@ const CheckboxAndRadio = ({
     className: "icon-before icon-checkmark"
   }, label));
 };
-
 export default CheckboxAndRadio;

package/dist/components/Cookie/index.js

@@ -7,7 +7,6 @@ import Button from '../Button';
 import Container from '../Layout/Container';
 import Checkbox from './Checkbox';
 import './style.scss';
-
 const CookieCompliancePopup = props => {
   const {
     className,
@@ -24,18 +23,22 @@ const CookieCompliancePopup = props => {
     defaultValues,
     manualHeader,
     manualButtonClassname
-  } = props; // This is an internal state to check whether we should show the options.
+  } = props;
+
+  // This is an internal state to check whether we should show the options.
+  const [manualChoiceVisible, setManualChoiceVisible] = useState(false);
 
-  const [manualChoiceVisible, setManualChoiceVisible] = useState(false); // This is an extra hidden variable to internally check if we should show the notification.
+  // This is an extra hidden variable to internally check if we should show the notification.
   // This also allows us to add an animation when the user accepts.
+  const [hiddenInternal, setHiddenInternal] = useState(false);
 
-  const [hiddenInternal, setHiddenInternal] = useState(false); // Cookie stating if the cookie has already been accepted. Uses the following states:
+  // Cookie stating if the cookie has already been accepted. Uses the following states:
   // 0: Declined (Not yet used).
   // 1: Not yet agreed/disagreed (Not yet used).
   // 2: Accepted.
+  const [didConsent, setDidConsent] = useCookie('cookie-agreed', null);
 
-  const [didConsent, setDidConsent] = useCookie('cookie-agreed', null); // Cookie stating whether we should render the notification.
-
+  // Cookie stating whether we should render the notification.
   const [hidden, setHidden] = useState(didConsent !== null);
   const categories = cookieLevels.map(item => {
     return item.value;
@@ -43,32 +46,35 @@ const CookieCompliancePopup = props => {
   const defaultState = categories.reduce((prev, category) => {
     prev[category] = typeof defaultValues[category] !== undefined ? defaultValues[category] : true;
     return prev;
-  }, {}); // Default choices for select, this way we can locally manage the state of the form.
+  }, {});
 
+  // Default choices for select, this way we can locally manage the state of the form.
   const [choicesSelected, setChoicesSelected] = useState(defaultState);
   useEffect(() => {
     if (hidden) {
       setHiddenInternal(true);
-    } // We don't want to add hidden to the dependency list, as this would -
+    }
+    // We don't want to add hidden to the dependency list, as this would -
     // unrender the notification immediately on save.
     // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  }, []); // Check if didConsent has been changed.
+  // Check if didConsent has been changed.
   // If so, set the hidden cookie for page reloads.
-
   useEffect(() => {
     if (didConsent !== null) {
       setHidden(true);
     }
-  }, [didConsent, cookieOptions, setHidden]); // This function expands the notification to show the options.
+  }, [didConsent, cookieOptions, setHidden]);
 
+  // This function expands the notification to show the options.
   const displayConsentChoices = e => {
     e.preventDefault();
     setManualChoiceVisible(true);
-  }; // This function sets cookie-agreed to 2 ( accepted state ),
-  // and also sets the accepted categories in CookieAgreedCategories.
-
+  };
 
+  // This function sets cookie-agreed to 2 ( accepted state ),
+  // and also sets the accepted categories in CookieAgreedCategories.
   const _onAgree = choices => {
     const selectedChoices = Object.keys(choices).filter(key => {
       return choices[key];
@@ -81,15 +87,17 @@ const CookieCompliancePopup = props => {
         });
       }
     });
-    setDidConsent('2', cookieOptions); // I used js-cookie for this insead of react-use-cookie because the encoding is not what we want
+    setDidConsent('2', cookieOptions);
+
+    // I used js-cookie for this insead of react-use-cookie because the encoding is not what we want
     // for arrays in react-use-cookie. This shouldn't be an issue, as we don't want to keep track of
     // CookieAgreedCategories, as we have that in state already.
-
     Cookies.set('cookie-agreed-categories', JSON.stringify(selectedChoices), {
       expires: 365,
       domain: cookieDomain
-    }); // Set cookie for current domain, so it does not appear twice.
+    });
 
+    // Set cookie for current domain, so it does not appear twice.
     const timestamp = Math.round(new Date().getTime() / 1000);
     const value = {
       ver: 1,
@@ -105,7 +113,6 @@ const CookieCompliancePopup = props => {
     });
     onAgree(choices);
   };
-
   const _onDisagree = () => {
     setDidConsent('0', cookieOptions);
     Cookies.set('cookie-agreed-categories', JSON.stringify([]), {
@@ -123,20 +130,19 @@ const CookieCompliancePopup = props => {
       domain: cookieDomain
     });
     onDisagree();
-  }; // Function for accepting al categories at once.
-
+  };
 
+  // Function for accepting al categories at once.
   const onConsentAll = () => {
     const allCategoriesSelected = categories.reduce((prev, category) => {
       prev[category] = true;
       return prev;
     }, {});
-
     _onAgree(allCategoriesSelected);
-  }; // This function is fired when the accept button is pressed.
-  // Also has eventual support for a false case.
-
+  };
 
+  // This function is fired when the accept button is pressed.
+  // Also has eventual support for a false case.
   const onConsent = value => {
     return () => {
       if (value === true) {
@@ -145,29 +151,30 @@ const CookieCompliancePopup = props => {
         _onDisagree();
       }
     };
-  }; // This function sets the value of the checkmark in the form state.
-
+  };
 
+  // This function sets the value of the checkmark in the form state.
   const handleChoiceState = event => {
     const {
       value,
       checked
     } = event.target;
-    setChoicesSelected({ ...choicesSelected,
+    setChoicesSelected({
+      ...choicesSelected,
       [value]: checked
     });
   };
-
   const classes = classNames('Cookie', className, {
     'Cookie--hidden': didConsent !== null
-  }); // If hiddenInternal is true, we do not render the notification.
+  });
 
+  // If hiddenInternal is true, we do not render the notification.
   if (hiddenInternal === true) {
     return null;
-  } // This function renders the different options of checkboxes,
-  // allowing us to add more checkboxes eventually.
-
+  }
 
+  // This function renders the different options of checkboxes,
+  // allowing us to add more checkboxes eventually.
   const renderChoices = () => {
     return cookieLevels.map(choice => {
       return /*#__PURE__*/React.createElement("div", {
@@ -189,7 +196,6 @@ const CookieCompliancePopup = props => {
       }, choice.description));
     });
   };
-
   return /*#__PURE__*/React.createElement("div", {
     className: classes
   }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
@@ -226,7 +232,6 @@ const CookieCompliancePopup = props => {
     onClick: onConsent(true)
   }, agreeText))))));
 };
-
 export default CookieCompliancePopup;
 CookieCompliancePopup.defaultProps = {
   agreeText: 'Accepteren',

package/dist/components/FontSizeSwitcher/index.js

@@ -1,7 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
 import './style.scss';
-
 const FontSizeSwitcher = ({
   defaultSize,
   incrementMode = false
@@ -9,12 +8,11 @@ const FontSizeSwitcher = ({
   const getCookie = n => {
     let a = `; ${document.cookie}`.match(`;\\s*${n}=([^;]+)`);
     return a ? a[1] : '';
-  }; // Use cookie by default to prevent flickering.
-
+  };
 
+  // Use cookie by default to prevent flickering.
   const cookie = getCookie('WCAG_font_size');
   const [currentSize, setCurrentSize] = useState(cookie ? parseInt(cookie) : defaultSize);
-
   const changeCurrentSize = size => {
     if (incrementMode === true && size >= 3) {
       document.cookie = `WCAG_font_size=${0}`;
@@ -24,7 +22,6 @@ const FontSizeSwitcher = ({
       setCurrentSize(parseInt(size));
     }
   };
-
   useEffect(() => {
     var html = document.getElementsByTagName('html')[0];
     html.classList.remove('font-size--small', 'font-size--regular', 'font-size--large');
@@ -39,7 +36,6 @@ const FontSizeSwitcher = ({
   const classesLarge = classnames("FontSizeSwitcher__button FontSizeSwitcher__button--large", {
     'active': currentSize === 2
   });
-
   if (incrementMode === true) {
     return /*#__PURE__*/React.createElement("div", {
       className: "FontSizeSwitcher FontSizeSwitcher--increment-mode",
@@ -54,7 +50,6 @@ const FontSizeSwitcher = ({
       className: classesLarge
     }, "Large"));
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: "FontSizeSwitcher"
   }, /*#__PURE__*/React.createElement("button", {
@@ -68,7 +63,6 @@ const FontSizeSwitcher = ({
     onClick: () => changeCurrentSize(2)
   }, "Large"));
 };
-
 FontSizeSwitcher.defaultProps = {
   defaultSize: 1
 };

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

@@ -1,12 +1,10 @@
-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); }
-
+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); }
 import React from 'react';
 import { Field } from 'formik';
 import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import withMapping from '../../../Context/withMapping';
 import './style.scss';
-
 const Checkbox = props => {
   const {
     title,
@@ -63,7 +61,6 @@ const Checkbox = props => {
     })), title);
   }));
 };
-
 Checkbox.defaultProps = {
   onChange: () => {}
 };

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

@@ -16,11 +16,9 @@ export const Checkbox = () => {
     fieldName: "agreed_with_statement",
     validation: value => {
       let error;
-
       if (!value) {
         error = 'This field is required';
       }
-
       return error;
     },
     onChange: e => {

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

@@ -1,11 +1,9 @@
-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); }
-
+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); }
 import React from 'react';
 import { Field } from 'formik';
 import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import './style.scss';
-
 function Checkbox(props) {
   const {
     name,
@@ -30,7 +28,6 @@ function Checkbox(props) {
       'icon-checkmark': true,
       'icon-variant-1': checked
     });
-
     if (props.value === '__other__') {
       const inputClasses = c({
         hidden: !field.value.includes('__other__')
@@ -54,7 +51,6 @@ function Checkbox(props) {
         }
       }));
     }
-
     return /*#__PURE__*/React.createElement("label", {
       className: classes,
       htmlFor: name
@@ -69,7 +65,6 @@ function Checkbox(props) {
     })), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("span", null, props.label), props.description && /*#__PURE__*/React.createElement("span", null, props.description)));
   });
 }
-
 const Checkboxes = props => {
   const {
     title,
@@ -120,5 +115,4 @@ const Checkboxes = props => {
     });
   }));
 };
-
 export default Checkboxes;

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

@@ -4,8 +4,9 @@ import { mount } from 'enzyme';
 import { act } from '@testing-library/react';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import { Checkboxes } from './stories'; // Use sinon-chai for spies.
+import { Checkboxes } from './stories';
 
+// Use sinon-chai for spies.
 chai.use(sinonChai);
 describe('<Checkboxes />', () => {
   it('renders 5 label elements', () => {
@@ -47,17 +48,20 @@ describe('<Checkboxes />', () => {
       input.at(3).simulate('change');
       await new Promise(resolve => {
         setTimeout(resolve);
-      }); // Submit values, and wait for Formik to complete.
+      });
 
+      // Submit values, and wait for Formik to complete.
       wrapper.find('Formik').simulate('submit');
       await new Promise(resolve => {
         setTimeout(resolve);
       });
     });
-    wrapper.update(); // Should not display an error message.
+    wrapper.update();
 
-    expect(wrapper.find('div.Checkboxes__error')).to.have.lengthOf(0); // Submitted values should contain my value.
+    // Should not display an error message.
+    expect(wrapper.find('div.Checkboxes__error')).to.have.lengthOf(0);
 
+    // Submitted values should contain my value.
     expect(onSubmitCallback).to.have.been.calledWith({
       poison: ["rum", "whisky"]
     });

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

@@ -1,5 +1,4 @@
-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); }
-
+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); }
 import React from 'react';
 import FormikWrapper from '../FormikWrapper';
 import FormikCheckboxes from '.';
@@ -26,11 +25,9 @@ export const Checkboxes = props => {
     },
     validation: value => {
       let error;
-
       if (value && value.length === 0) {
         error = 'This field is required';
       }
-
       return error;
     },
     otherLabel: "Anders"

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

@@ -1,12 +1,9 @@
-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); }
-
+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); }
 import React from 'react';
 import TextField from '../TextField';
-
 const Date = props => {
   return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
     type: "date"
   }));
 };
-
 export default Date;

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

@@ -13,11 +13,9 @@ export const Date = () => {
     fieldName: "date",
     validation: value => {
       let error;
-
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
-
       return error;
     }
   }));

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

@@ -5,7 +5,6 @@ import c from 'classnames';
 import GenericFormElement from '../GenericFormElement';
 import "react-datepicker/dist/react-datepicker.css";
 import './style.scss';
-
 const DatePicker = props => {
   const {
     title,
@@ -57,5 +56,4 @@ const DatePicker = props => {
     });
   }));
 };
-
 export default DatePicker;

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

@@ -13,11 +13,9 @@ export const DatePicker = () => {
     fieldName: "date",
     validation: value => {
       let error;
-
       if (!value) {
         error = 'Dit is een vereist veld.';
       }
-
       return error;
     }
   }));