@uncinc/uncinc-react-kitchen-sink 2.3.3 → 2.3.5

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/AbbreviationAnnotation/index.js

@@ -0,0 +1,47 @@
+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, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import './style.scss';
+const AbbreviationAnnotation = ({
+  title,
+  children,
+  abbreviationTitle,
+  abbreviationContent,
+  ...props
+}) => {
+  const [visible, setVisible] = useState(false);
+  const handleClick = e => {
+    e.preventDefault();
+    setVisible(!visible);
+  };
+  const className = classnames('AbbreviationAnnotationLink', {
+    'AbbreviationAnnotationLink--uncollapsed': visible
+  });
+  const classNameInfo = classnames('AbbreviationAnnotation', {
+    'AbbreviationAnnotation--visible': visible
+  });
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("a", _extends({
+    className: className,
+    onClick: handleClick
+  }, props), /*#__PURE__*/React.createElement("div", {
+    className: "AbbreviationAnnotationLink__content"
+  }, abbreviationTitle(children))), /*#__PURE__*/React.createElement("div", {
+    className: classNameInfo
+  }, abbreviationContent(title)));
+};
+AbbreviationAnnotation.propTypes = {
+  title: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired,
+  abbreviationTitle: PropTypes.func,
+  abbreviationContent: PropTypes.func
+};
+AbbreviationAnnotation.defaultProps = {
+  abbreviationTitle: html => {
+    return /*#__PURE__*/React.createElement("div", null, html);
+  },
+  abbreviationContent: html => {
+    return /*#__PURE__*/React.createElement("div", null, html);
+  }
+};
+export default AbbreviationAnnotation;

package/dist/components/AbbreviationAnnotation/stories.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import AbbreviationAnnotation from './';
+export default {
+  title: 'Atoms/AbbreviationAnnotation'
+};
+const title = 'Titel';
+const content = 'Content';
+import './stories.scss';
+export const Default = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("p", null, "Lorem ipsum dolor sit amet, ", /*#__PURE__*/React.createElement("abbr", {
+  title: "Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi."
+}, "consectetur adipiscing"), " elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget."), /*#__PURE__*/React.createElement("p", null, "Donec feugiat, nunc vitae euismod", /*#__PURE__*/React.createElement(AbbreviationAnnotation, {
+  title: title,
+  abbreviationTitle: html => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, html, /*#__PURE__*/React.createElement("i", {
+      className: "icon icon-arrow icon-right"
+    }));
+  },
+  abbreviationContent: html => {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("i", {
+      className: "icon icon-arrow icon-content"
+    }), /*#__PURE__*/React.createElement("div", null, html));
+  }
+}, content), "posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare."), /*#__PURE__*/React.createElement("p", null, "Nam venenatis est eget lorem laoreet, id tempor urna hendrerit. Quisque suscipit in magna nec condimentum. Duis id tempor nisi. Sed rutrum urna elit, vitae placerat enim volutpat nec. Vivamus volutpat, magna sit amet commodo ultricies, enim turpis pretium libero, quis molestie nibh augue a ex. Nulla vestibulum vestibulum tellus, vel molestie libero vehicula nec. Sed maximus tortor vel ipsum cursus egestas. Proin suscipit tortor id luctus bibendum."));

package/dist/components/AbbreviationAnnotation/stories.scss

@@ -0,0 +1,39 @@
+@import 'assets/variables';
+
+.AbbreviationAnnotationLink {
+  background-color: $color--tertiary;
+  font-family: var(--font--primary);
+  font-weight: normal;
+
+  &__content {
+    color: $color--white;
+  }
+
+  .icon-left {
+    margin-right: 0.5rem;
+  }
+
+  .icon-right {
+    margin-left: 0.5rem;
+    transform: rotate(90deg);
+  }
+
+  &--uncollapsed {
+    .icon-right {
+      transform: rotate(-90deg);
+    }
+  }
+}
+
+.AbbreviationAnnotation {
+  color: $color--white;
+  background-color: $color--tertiary;
+
+  .icon-content {
+    display: block;
+    font-size: 200%;
+    margin-top: -0.25rem;
+    flex: 0 0 auto;
+    margin-right: 1rem;
+  }
+}

package/dist/components/AbbreviationAnnotation/style.scss

@@ -0,0 +1,33 @@
+@import 'assets/variables';
+
+.AbbreviationAnnotationLink {
+  display: inline-block;
+  padding: 0 0.5rem;
+  margin-right: 0.5rem;
+  text-decoration: none;
+  cursor: pointer;
+
+  :hover {
+    text-decoration: underline;
+  }
+
+  &__content {
+    white-space: nowrap;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+  }
+
+}
+
+.AbbreviationAnnotation {
+  margin: 1rem 0;
+  padding: 2.4rem;
+  display: none;
+  align-items: row;
+
+  &--visible {
+    display: flex;
+  }
+
+}

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 => {