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

package/dist/Context/ViewportContext.js

@@ -18,11 +18,11 @@ const defaultValue = {
     SCREEN_HUGE: DEFAULT_SCREEN_HUGE
   },
   imageStyles: {
-    SCREEN_MOBILE: "small",
-    SCREEN_TABLET: "small",
-    SCREEN_NORMAL: "medium",
-    SCREEN_WIDE: "large",
-    SCREEN_HUGE: "large"
+    SCREEN_MOBILE: 'small',
+    SCREEN_TABLET: 'small',
+    SCREEN_NORMAL: 'medium',
+    SCREEN_WIDE: 'large',
+    SCREEN_HUGE: 'large'
   }
 };
 const ViewportContext = /*#__PURE__*/React.createContext(defaultValue);

package/dist/components/AbbreviationAnnotation/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import AbbreviationAnnotation from './';
+import AbbreviationAnnotation from '.';
 export default {
   title: 'Atoms/AbbreviationAnnotation'
 };

package/dist/components/AbbreviationAnnotation/stories.scss

@@ -1,4 +1,4 @@
-@import 'assets/variables';
+@import '../../styles/assets/variables';
 
 .AbbreviationAnnotationLink {
   background-color: $color--tertiary;

package/dist/components/AbbreviationAnnotation/style.scss

@@ -1,5 +1,3 @@
-@import 'assets/variables';
-
 .AbbreviationAnnotationLink {
   display: inline-block;
   padding: 0 0.5rem;

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

@@ -40,6 +40,7 @@ const AccordionItem = ({
   }, /*#__PURE__*/React.createElement(AccordeonTitle, {
     className: "Accordion__item__title"
   }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
     onClick: () => setCollapsed(!collapsed)
   }, /*#__PURE__*/React.createElement("span", {
     className: iconClasses

package/dist/components/Accordion/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Accordion from './';
+import Accordion from '.';
 import AccordionItem from './AccordionItem';
 import AccordionItemVariant from './AccordionItemVariant';
 export default {

package/dist/components/ApiAutocomplete/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ApiAutocomplete from './';
+import ApiAutocomplete from '.';
 export default {
   title: 'Organisms/Autocomplete'
 };

package/dist/components/Button/index.js

@@ -37,13 +37,17 @@ const Button = ({
     }
   };
   if (!href) {
-    return /*#__PURE__*/React.createElement("button", _extends({
-      type: htmlType,
-      className: classes,
-      href: href
-    }, props, {
-      onClick: onClick
-    }), children);
+    return (
+      /*#__PURE__*/
+      // eslint-disable-next-line react/button-has-type
+      React.createElement("button", _extends({
+        type: htmlType,
+        className: classes,
+        href: href
+      }, props, {
+        onClick: onClick
+      }), children)
+    );
   }
   return isExternalLink(href) ? /*#__PURE__*/React.createElement("a", _extends({
     className: classes,

package/dist/components/Button/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from './';
+import Button from '.';
 import './stories.scss';
 export default {
   title: 'Atoms/Button'

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

@@ -13,7 +13,7 @@ const CheckboxAndRadio = ({
   return /*#__PURE__*/React.createElement("div", {
     className: "Checkbox"
   }, /*#__PURE__*/React.createElement("input", {
-    type: type || "checkbox",
+    type: type || 'checkbox',
     className: "Checkbox__input",
     name: name,
     id: id,

package/dist/components/Cookie/index.js

@@ -44,6 +44,7 @@ const CookieCompliancePopup = props => {
     return item.value;
   });
   const defaultState = categories.reduce((prev, category) => {
+    // eslint-disable-next-line valid-typeof
     prev[category] = typeof defaultValues[category] !== undefined ? defaultValues[category] : true;
     return prev;
   }, {});
@@ -212,9 +213,11 @@ const CookieCompliancePopup = props => {
     primary: true,
     onClick: onConsentAll
   }, agreeText), showDisagree && /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: `Cookie__content__buttons__manual Cookie__content__buttons__manual-disagree ${manualButtonClassname}`,
     onClick: onConsent(false)
   }, disagreeText), /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: `Cookie__content__buttons__manual Cookie__content__buttons__manual-agree ${manualButtonClassname}`,
     onClick: e => {
       displayConsentChoices(e);
@@ -241,26 +244,26 @@ CookieCompliancePopup.defaultProps = {
   onAgree: () => {},
   onDisagree: () => {},
   showDisagree: false,
-  manualButtonClassname: "icon-after icon-chevron-right icon-variant-2",
+  manualButtonClassname: 'icon-after icon-chevron-right icon-variant-2',
   cookieLevels: [{
-    value: "necessary",
+    value: 'necessary',
     label: 'Benodigd',
-    description: "",
+    description: '',
     disabled: true
   }, {
-    value: "voorkeuren",
-    label: "Voorkeuren",
-    description: "",
+    value: 'voorkeuren',
+    label: 'Voorkeuren',
+    description: '',
     disabled: false
   }, {
-    value: "statistieken",
-    label: "Statistieken",
-    description: "",
+    value: 'statistieken',
+    label: 'Statistieken',
+    description: '',
     disabled: false
   }, {
-    value: "marketing",
-    label: "Marketing",
-    description: "",
+    value: 'marketing',
+    label: 'Marketing',
+    description: '',
     disabled: false
   }],
   defaultValues: {
@@ -277,6 +280,7 @@ CookieCompliancePopup.defaultProps = {
 };
 CookieCompliancePopup.propTypes = {
   agreeText: PropTypes.string,
+  disagreeText: PropTypes.string,
   manualText: PropTypes.string,
   manualHeader: PropTypes.func,
   manualButtonClassname: PropTypes.string,
@@ -288,5 +292,16 @@ CookieCompliancePopup.propTypes = {
     label: PropTypes.string,
     description: PropTypes.string,
     disabled: PropTypes.bool
-  }))
+  })),
+  cookieOptions: PropTypes.shape({
+    days: PropTypes.number,
+    path: PropTypes.string
+  }),
+  cookieDomain: PropTypes.string,
+  defaultValues: PropTypes.shape({
+    necessary: PropTypes.bool,
+    voorkeuren: PropTypes.bool,
+    statistieken: PropTypes.bool,
+    marketing: PropTypes.bool
+  })
 };

package/dist/components/Cookie/stories.js

@@ -1,35 +1,35 @@
 import React from 'react';
-import Cookie from './';
+import Cookie from '.';
 import './stories.scss';
 export default {
   title: 'Organisms/Cookie'
 };
 export const Default = () => /*#__PURE__*/React.createElement(Cookie, {
-  agreeText: 'Accepteren',
-  manualText: 'Zelf instellen',
-  onAgree: choices => console.log("User agreed to", choices),
-  onDisagree: () => console.log("User did NOT agree")
+  agreeText: "Accepteren",
+  manualText: "Zelf instellen",
+  onAgree: choices => console.log('User agreed to', choices),
+  onDisagree: () => console.log('User did NOT agree')
 }, /*#__PURE__*/React.createElement("h1", null, "Wij gebruiken cookies"), /*#__PURE__*/React.createElement("p", null, "Aliquam accumsan sem lacus, ut laoreet urna aliquam quis. Ut ut imperdiet tortor, sed vestibulum felis. Etiam a eleifend leo, eu interdum nulla. Etiam id elit ex. Etiam condimentum facilisis venenatis. Curabitur accumsan ut dui vel laoreet. Donec dapibus convallis diam, at sodales nulla laoreet ac. Nunc maximus, orci ac tristique dapibus, dolor felis semper lorem, eu dapibus turpis enim quis urna."));
 export const Advanced = () => /*#__PURE__*/React.createElement(Cookie, {
-  agreeText: 'Accepteren',
-  manualText: 'Zelf instellen',
+  agreeText: "Accepteren",
+  manualText: "Zelf instellen",
   showDisagree: true,
   onDisagree: () => {},
   manualButtonClassname: "",
   cookieLevels: [{
-    value: "necessary",
-    label: "Noodzakelijk",
-    description: "Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.",
+    value: 'necessary',
+    label: 'Noodzakelijk',
+    description: 'Noodzakelijke cookies helpen een website bruikbaarder te maken, door basisfuncties als paginanavigatie en toegang tot beveiligde gedeelten van de website mogelijk te maken. Zonder deze cookies kan de website niet naar behoren werken.',
     disabled: true
   }, {
-    value: "voorkeuren",
-    label: "Voorkeuren",
-    description: "Voorkeurscookies zorgen ervoor dat een website informatie kan onthouden die van invloed is op het gedrag en de vormgeving van de website, zoals de taal van uw voorkeur of de regio waar u woont.",
+    value: 'voorkeuren',
+    label: 'Voorkeuren',
+    description: 'Voorkeurscookies zorgen ervoor dat een website informatie kan onthouden die van invloed is op het gedrag en de vormgeving van de website, zoals de taal van uw voorkeur of de regio waar u woont.',
     disabled: false
   }, {
-    value: "statistieken",
-    label: "Statistieken",
-    description: "Statistische cookies helpen eigenaren van websites begrijpen hoe bezoekers hun website gebruiken, door anoniem gegevens te verzamelen en te rapporteren.",
+    value: 'statistieken',
+    label: 'Statistieken',
+    description: 'Statistische cookies helpen eigenaren van websites begrijpen hoe bezoekers hun website gebruiken, door anoniem gegevens te verzamelen en te rapporteren.',
     disabled: false
   }],
   defaultValues: {

package/dist/components/Dialog/index.js

@@ -0,0 +1,89 @@
+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, { useRef } from 'react';
+import { createPortal } from 'react-dom';
+import { RemoveScroll } from 'react-remove-scroll';
+import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
+import { v4 as uuidv4 } from 'uuid';
+import useDialogHelpers from '../../hooks/useDialogHelpers';
+import './style.scss';
+const Dialog = props => {
+  const {
+    id,
+    children,
+    isOpen,
+    closeFunction,
+    showCloseButton,
+    closeButtonText,
+    showCloseIcon,
+    closeIcon,
+    dialogLabel,
+    portalTarget
+  } = props;
+  const wrapper = useRef(null);
+  const {
+    t
+  } = useTranslation();
+  const {
+    labelId,
+    dialogHelpersProps
+  } = useDialogHelpers({
+    id: id,
+    wrapperElement: wrapper,
+    closeFunction: closeFunction,
+    isOpen: isOpen
+  });
+  if (!isOpen) return null;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
+    className: "Dialog"
+  }, /*#__PURE__*/React.createElement("div", _extends({
+    className: "Dialog__wrapper"
+  }, dialogHelpersProps, {
+    ref: wrapper
+  }), /*#__PURE__*/React.createElement("div", {
+    id: labelId,
+    className: "Dialog__sr-only"
+  }, dialogLabel), showCloseIcon && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "Dialog__closeicon",
+    "aria-label": t('general.close', 'Close'),
+    onClick: closeFunction
+  }, /*#__PURE__*/React.createElement("i", {
+    className: `icon ${closeIcon}`
+  })), /*#__PURE__*/React.createElement(RemoveScroll, {
+    className: "Dialog__inner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "Dialog__content"
+  }, children), showCloseButton && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "Dialog__closebutton",
+    onClick: closeFunction
+  }, closeButtonText))), /*#__PURE__*/React.createElement("div", {
+    className: "Dialog__backdrop",
+    "aria-label": t('general.close', 'Close')
+  })), portalTarget);
+};
+Dialog.propTypes = {
+  id: PropTypes.string,
+  children: PropTypes.element.isRequired,
+  isOpen: PropTypes.bool,
+  closeFunction: PropTypes.func,
+  showCloseButton: PropTypes.bool,
+  closeButtonText: PropTypes.string,
+  showCloseIcon: PropTypes.bool,
+  closeIcon: PropTypes.string,
+  dialogLabel: PropTypes.string,
+  portalTarget: PropTypes.element
+};
+Dialog.defaultProps = {
+  id: uuidv4(),
+  showCloseButton: false,
+  closeButtonText: 'Close',
+  showCloseIcon: false,
+  closeIcon: 'icon-cross',
+  dialogLabel: 'dialog',
+  isOpen: false,
+  closeFunction: null,
+  portalTarget: document.body
+};
+export default Dialog;

package/dist/components/Dialog/stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import useDialog from '../../hooks/useDialog';
+export default {
+  title: 'Molecules/Dialog'
+};
+export const Default = () => {
+  const Content = () => {
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "I'm a Dialog!"), /*#__PURE__*/React.createElement("p", null, "I've been created using the ", /*#__PURE__*/React.createElement("code", null, "useDialog"), " hook.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This hook provides you with:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeDialog"), " - a function to close the dialog")), "The ", /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " has several arguments:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "id"), " - a unique identifier (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "children"), " - the dialog's content. Wrapped within the dialog."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseButton"), " - render a close button? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseIcon"), " - render a close icon? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeButtonText"), " - text for the close button (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeIcon"), " - what icon to use. Default 'icon-cross' (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogLabel"), " - a label for a11y - default 'dialog' (optional)")), "Depending on where the dialog is being used, you might need to add a z-index.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This Dialog handles several things for you: Taking focus and keeping it inside and it allows you to close the Dialog by either pressing Escape or clicking outside of it. This is done by several different hooks.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Alternatively, if you need a more custom approach, you can opt to use the ", /*#__PURE__*/React.createElement("code", null, "useDialogControls"), " hook instead."));
+  };
+  return /*#__PURE__*/React.createElement("div", null, [...Array(3)].map(() => {
+    const {
+      openDialog,
+      DialogComponent
+    } = useDialog();
+    const uuid = uuidv4();
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      onClick: openDialog
+    }, "Open a dialog"), /*#__PURE__*/React.createElement(DialogComponent, {
+      id: uuid,
+      showCloseButton: true,
+      closeButtonText: "Click here to close me.",
+      showCloseIcon: true,
+      closeIcon: "icon-cross"
+    }, /*#__PURE__*/React.createElement(Content, null)));
+  }));
+};

package/dist/components/Dialog/style.scss

@@ -0,0 +1,72 @@
+.Dialog {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0,0,0,0);
+    border: 0;
+  }
+
+  &__closeicon {
+    position: absolute;
+    right: 1.5rem;
+    top: 1rem;
+    font-size: 2rem;
+    cursor: pointer;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2rem;
+    z-index: 1;
+    width: 50%;
+    max-height: 90vh;
+    background-color: white;
+    border-radius: 2rem;
+}
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2rem;
+    overflow: hidden;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  &__backdrop {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    cursor: pointer;
+    background: black;
+    opacity: 0.7;
+  }
+
+}
+
+code {
+  color: red;
+}

package/dist/components/FontSizeSwitcher/index.js

@@ -23,17 +23,17 @@ const FontSizeSwitcher = ({
     }
   };
   useEffect(() => {
-    var html = document.getElementsByTagName('html')[0];
+    let html = document.getElementsByTagName('html')[0];
     html.classList.remove('font-size--small', 'font-size--regular', 'font-size--large');
     html.classList.add(['font-size--small', 'font-size--regular', 'font-size--large'][currentSize]);
   }, [currentSize]);
-  const classesSmall = classnames("FontSizeSwitcher__button FontSizeSwitcher__button--small", {
+  const classesSmall = classnames('FontSizeSwitcher__button FontSizeSwitcher__button--small', {
     'active': currentSize === 0
   });
-  const classesRegular = classnames("FontSizeSwitcher__button FontSizeSwitcher__button--regular", {
+  const classesRegular = classnames('FontSizeSwitcher__button FontSizeSwitcher__button--regular', {
     'active': currentSize === 1
   });
-  const classesLarge = classnames("FontSizeSwitcher__button FontSizeSwitcher__button--large", {
+  const classesLarge = classnames('FontSizeSwitcher__button FontSizeSwitcher__button--large', {
     'active': currentSize === 2
   });
   if (incrementMode === true) {
@@ -43,22 +43,28 @@ const FontSizeSwitcher = ({
         changeCurrentSize(currentSize + 1);
       }
     }, /*#__PURE__*/React.createElement("button", {
+      type: "button",
       className: classesSmall
     }, "Small"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
       className: classesRegular
     }, "Regular"), /*#__PURE__*/React.createElement("button", {
+      type: "button",
       className: classesLarge
     }, "Large"));
   }
   return /*#__PURE__*/React.createElement("div", {
     className: "FontSizeSwitcher"
   }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: classesSmall,
     onClick: () => changeCurrentSize(0)
   }, "Small"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: classesRegular,
     onClick: () => changeCurrentSize(1)
   }, "Regular"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
     className: classesLarge,
     onClick: () => changeCurrentSize(2)
   }, "Large"));

package/dist/components/FontSizeSwitcher/stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import FontSizeSwitcher from './';
+import FontSizeSwitcher from '.';
 export default {
   title: 'Molecules/FontSizeSwitcher'
 };

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

@@ -22,7 +22,7 @@ const Checkbox = props => {
     disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("Checkbox", wrapperClassName),
+    className: c('Checkbox', wrapperClassName),
     required: required,
     description: description,
     fieldName: fieldName,

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

@@ -86,7 +86,7 @@ const Checkboxes = props => {
     otherPlaceholder
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("Checkboxes", wrapperClassName),
+    className: c('Checkboxes', wrapperClassName),
     title: title,
     required: required,
     description: description,

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

@@ -63,7 +63,7 @@ describe('<Checkboxes />', () => {
 
     // Submitted values should contain my value.
     expect(onSubmitCallback).to.have.been.calledWith({
-      poison: ["rum", "whisky"]
+      poison: ['rum', 'whisky']
     });
   });
 });

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

@@ -3,7 +3,7 @@ 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 'react-datepicker/dist/react-datepicker.css';
 import './style.scss';
 const DatePicker = props => {
   const {
@@ -23,7 +23,7 @@ const DatePicker = props => {
     disabled = false
   } = props;
   return /*#__PURE__*/React.createElement(GenericFormElement, {
-    className: c("DatePicker", wrapperClassName),
+    className: c('DatePicker', wrapperClassName),
     title: title,
     required: required,
     description: description,
@@ -37,7 +37,7 @@ const DatePicker = props => {
     validation: validation,
     touched: touched,
     error: error,
-    type: type || "text",
+    type: type || 'text',
     value: value
   }, ({
     form

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

@@ -84,7 +84,6 @@ const DateSelect = props => {
       if (required && !values[fieldName]) {
         !dateNotValid && setError(requiredError);
         setShowError(true);
-        return;
       }
     }
   }, [isSubmitting]);
@@ -106,14 +105,14 @@ const DateSelect = props => {
         setError(notValidError);
         setShowError(true);
         setDateNotValid(true);
-        setFieldValue("dateSelect", '');
+        setFieldValue('dateSelect', '');
         return;
       }
 
       // The Date is valid, so we hide previous errors and set the FieldValue
       setShowError(false);
       setDateNotValid(false);
-      setFieldValue("dateSelect", date);
+      setFieldValue('dateSelect', date);
       return;
     }
 
@@ -122,7 +121,7 @@ const DateSelect = props => {
     // so that validation - and also the useEffect on isSubmitting - can do it's job.
     setShowError(false);
     setDateNotValid(false);
-    setFieldValue("dateSelect", '');
+    setFieldValue('dateSelect', '');
   }, [day, month, year]);
   return /*#__PURE__*/React.createElement(GenericFormElement, {
     className: "DateSelect",

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

@@ -26,7 +26,7 @@ export const DateSelect = () => {
     requiredError: "Please fill all fields.",
     notValidError: "That's not a valid date."
   }), /*#__PURE__*/React.createElement("p", null, "Selected date: ", date.toString()), /*#__PURE__*/React.createElement("input", {
-    class: "submitButton",
+    className: "submitButton",
     type: "submit",
     value: "Pick date"
   }));

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

@@ -22,9 +22,9 @@ const GenericFormElement = props => {
     className: error ? `FormElement ${className} error` : `FormElement ${className}`
   }, title && /*#__PURE__*/React.createElement("label", {
     htmlFor: fieldName
-  }, title, !required && displayRequiredIndicator === "optional" && /*#__PURE__*/React.createElement("span", {
+  }, title, !required && displayRequiredIndicator === 'optional' && /*#__PURE__*/React.createElement("span", {
     className: `FormElement__optional ${className}__optional`
-  }, t(['form.optional', ' - optioneel'])), required && displayRequiredIndicator === "required" && /*#__PURE__*/React.createElement("span", {
+  }, t(['form.optional', ' - optioneel'])), required && displayRequiredIndicator === 'required' && /*#__PURE__*/React.createElement("span", {
     className: `FormElement__required ${className}__required`
   }, t(['form.required', ' - vereist']))), /*#__PURE__*/React.createElement("div", {
     className: `FormElement__inner ${className}__inner`

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

@@ -1,7 +1,7 @@
 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 { useTranslation } from 'react-i18next';
 import TextField from '../TextField';
-import { useTranslation } from "react-i18next";
 const Number = props => {
   const {
     t

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

@@ -20,12 +20,12 @@ const SearchField = props => {
     disabled = false
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: c("SearchField", wrapperClassName)
+    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, {
+  }, "- optioneel")), /*#__PURE__*/React.createElement(Field, {
     className: c(className, {
       'error': error && touched
     }),