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

package/dist/components/Cookie/index.js

@@ -1,57 +1,91 @@
-import React, { useEffect, useState } from 'react';
-import PropTypes from 'prop-types';
-import useCookie from 'react-use-cookie';
-import Cookies from 'js-cookie';
-import classNames from 'classnames';
-import Button from '../Button';
-import Container from '../Layout/Container';
-import Checkbox from './Checkbox';
-import './style.scss';
-const CookieCompliancePopup = props => {
-  const {
-    className,
-    children,
-    manualText,
-    agreeText,
-    disagreeText,
-    showDisagree,
-    onAgree,
-    onDisagree,
-    cookieLevels,
-    cookieOptions,
-    cookieDomain,
-    defaultValues,
-    manualHeader,
-    manualButtonClassname
-  } = props;
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactUseCookie = _interopRequireDefault(require("react-use-cookie"));
+var _jsCookie = _interopRequireDefault(require("js-cookie"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Container = _interopRequireDefault(require("../Layout/Container"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+require("./style.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var CookieCompliancePopup = function CookieCompliancePopup(props) {
+  var className = props.className,
+    children = props.children,
+    manualText = props.manualText,
+    agreeText = props.agreeText,
+    disagreeText = props.disagreeText,
+    showDisagree = props.showDisagree,
+    onAgree = props.onAgree,
+    onDisagree = props.onDisagree,
+    cookieLevels = props.cookieLevels,
+    cookieOptions = props.cookieOptions,
+    cookieDomain = props.cookieDomain,
+    defaultValues = props.defaultValues,
+    manualHeader = props.manualHeader,
+    manualButtonClassname = props.manualButtonClassname;
 
   // This is an internal state to check whether we should show the options.
-  const [manualChoiceVisible, setManualChoiceVisible] = useState(false);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    manualChoiceVisible = _useState2[0],
+    setManualChoiceVisible = _useState2[1];
 
   // 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);
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hiddenInternal = _useState4[0],
+    setHiddenInternal = _useState4[1];
 
   // 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);
+  var _useCookie = (0, _reactUseCookie.default)('cookie-agreed', null),
+    _useCookie2 = _slicedToArray(_useCookie, 2),
+    didConsent = _useCookie2[0],
+    setDidConsent = _useCookie2[1];
 
   // Cookie stating whether we should render the notification.
-  const [hidden, setHidden] = useState(didConsent !== null);
-  const categories = cookieLevels.map(item => {
+  var _useState5 = (0, _react.useState)(didConsent !== null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hidden = _useState6[0],
+    setHidden = _useState6[1];
+  var categories = cookieLevels.map(function (item) {
     return item.value;
   });
-  const defaultState = categories.reduce((prev, category) => {
+  var defaultState = categories.reduce(function (prev, category) {
     // eslint-disable-next-line valid-typeof
-    prev[category] = typeof defaultValues[category] !== undefined ? defaultValues[category] : true;
+    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.
-  const [choicesSelected, setChoicesSelected] = useState(defaultState);
-  useEffect(() => {
+  var _useState7 = (0, _react.useState)(defaultState),
+    _useState8 = _slicedToArray(_useState7, 2),
+    choicesSelected = _useState8[0],
+    setChoicesSelected = _useState8[1];
+  (0, _react.useEffect)(function () {
     if (hidden) {
       setHiddenInternal(true);
     }
@@ -62,29 +96,29 @@ const CookieCompliancePopup = props => {
 
   // Check if didConsent has been changed.
   // If so, set the hidden cookie for page reloads.
-  useEffect(() => {
+  (0, _react.useEffect)(function () {
     if (didConsent !== null) {
       setHidden(true);
     }
   }, [didConsent, cookieOptions, setHidden]);
 
   // This function expands the notification to show the options.
-  const displayConsentChoices = e => {
+  var displayConsentChoices = function displayConsentChoices(e) {
     e.preventDefault();
     setManualChoiceVisible(true);
   };
 
   // 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 => {
+  var _onAgree = function _onAgree(choices) {
+    var selectedChoices = Object.keys(choices).filter(function (key) {
       return choices[key];
     });
-    Object.keys(choices).forEach(key => {
+    Object.keys(choices).forEach(function (key) {
       if (choicesSelected[key]) {
         window.dataLayer = window.dataLayer || [];
         window.dataLayer.push({
-          event: `cookies-accepted-${key}`
+          event: "cookies-accepted-".concat(key)
         });
       }
     });
@@ -93,40 +127,40 @@ const CookieCompliancePopup = props => {
     // 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), {
+    _jsCookie.default.set('cookie-agreed-categories', JSON.stringify(selectedChoices), {
       expires: 365,
       domain: cookieDomain
     });
 
     // Set cookie for current domain, so it does not appear twice.
-    const timestamp = Math.round(new Date().getTime() / 1000);
-    const value = {
+    var timestamp = Math.round(new Date().getTime() / 1000);
+    var value = {
       ver: 1,
       utc: timestamp,
       region: 'nl'
     };
-    categories.forEach(category => {
+    categories.forEach(function (category) {
       value[category] = true;
     }, {});
-    Cookies.set('cookie-consent', JSON.stringify(value), {
+    _jsCookie.default.set('cookie-consent', JSON.stringify(value), {
       expires: 365,
       domain: cookieDomain
     });
     onAgree(choices);
   };
-  const _onDisagree = () => {
+  var _onDisagree = function _onDisagree() {
     setDidConsent('0', cookieOptions);
-    Cookies.set('cookie-agreed-categories', JSON.stringify([]), {
+    _jsCookie.default.set('cookie-agreed-categories', JSON.stringify([]), {
       expires: 365,
       domain: cookieDomain
     });
-    const timestamp = Math.round(new Date().getTime() / 1000);
-    const value = {
+    var timestamp = Math.round(new Date().getTime() / 1000);
+    var value = {
       ver: 1,
       utc: timestamp,
       region: 'nl'
     };
-    Cookies.set('cookie-consent', JSON.stringify(value), {
+    _jsCookie.default.set('cookie-consent', JSON.stringify(value), {
       expires: 365,
       domain: cookieDomain
     });
@@ -134,8 +168,8 @@ const CookieCompliancePopup = props => {
   };
 
   // Function for accepting al categories at once.
-  const onConsentAll = () => {
-    const allCategoriesSelected = categories.reduce((prev, category) => {
+  var onConsentAll = function onConsentAll() {
+    var allCategoriesSelected = categories.reduce(function (prev, category) {
       prev[category] = true;
       return prev;
     }, {});
@@ -144,8 +178,8 @@ const CookieCompliancePopup = props => {
 
   // This function is fired when the accept button is pressed.
   // Also has eventual support for a false case.
-  const onConsent = value => {
-    return () => {
+  var onConsent = function onConsent(value) {
+    return function () {
       if (value === true) {
         _onAgree(choicesSelected);
       } else {
@@ -155,17 +189,13 @@ const CookieCompliancePopup = props => {
   };
 
   // This function sets the value of the checkmark in the form state.
-  const handleChoiceState = event => {
-    const {
-      value,
-      checked
-    } = event.target;
-    setChoicesSelected({
-      ...choicesSelected,
-      [value]: checked
-    });
+  var handleChoiceState = function handleChoiceState(event) {
+    var _event$target = event.target,
+      value = _event$target.value,
+      checked = _event$target.checked;
+    setChoicesSelected(_objectSpread(_objectSpread({}, choicesSelected), {}, _defineProperty({}, value, checked)));
   };
-  const classes = classNames('Cookie', className, {
+  var classes = (0, _classnames.default)('Cookie', className, {
     'Cookie--hidden': didConsent !== null
   });
 
@@ -176,73 +206,74 @@ const CookieCompliancePopup = props => {
 
   // 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", {
+  var renderChoices = function renderChoices() {
+    return cookieLevels.map(function (choice) {
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: "Cookie__category col-xs-12 col-lg-6",
         key: choice.value
-      }, /*#__PURE__*/React.createElement("div", {
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "Checkbox"
-      }, /*#__PURE__*/React.createElement(Checkbox, {
+      }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
         name: "cookie-categories",
         type: "checkbox",
-        id: `cookie-category-${choice.value}`,
+        id: "cookie-category-".concat(choice.value),
         onChange: handleChoiceState,
         label: choice.label,
         value: choice.value,
         checked: choicesSelected[choice.value],
         disabled: choice.disabled
-      })), /*#__PURE__*/React.createElement("div", {
+      })), /*#__PURE__*/_react.default.createElement("div", {
         className: "Cookie__category__description"
       }, choice.description));
     });
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     className: classes
-  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
-    className: `Cookie__content ${manualChoiceVisible ? 'Cookie__content--full-height' : ''}`
-  }, !manualChoiceVisible ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Container.default, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "Cookie__content ".concat(manualChoiceVisible ? 'Cookie__content--full-height' : '')
+  }, !manualChoiceVisible ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "col-12 Cookie__content__message"
-  }, children), /*#__PURE__*/React.createElement("div", {
+  }, children), /*#__PURE__*/_react.default.createElement("div", {
     className: "col-12 Cookie__content__buttons"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     id: "complete-agree",
     className: "Button--cta",
     primary: true,
     onClick: onConsentAll
-  }, agreeText), showDisagree && /*#__PURE__*/React.createElement("button", {
+  }, agreeText), showDisagree && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    className: `Cookie__content__buttons__manual Cookie__content__buttons__manual-disagree ${manualButtonClassname}`,
+    className: "Cookie__content__buttons__manual Cookie__content__buttons__manual-disagree ".concat(manualButtonClassname),
     onClick: onConsent(false)
-  }, disagreeText), /*#__PURE__*/React.createElement("button", {
+  }, disagreeText), /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    className: `Cookie__content__buttons__manual Cookie__content__buttons__manual-agree ${manualButtonClassname}`,
-    onClick: e => {
+    className: "Cookie__content__buttons__manual Cookie__content__buttons__manual-agree ".concat(manualButtonClassname),
+    onClick: function onClick(e) {
       displayConsentChoices(e);
     }
-  }, manualText)))) : /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  }, manualText)))) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     className: "Cookie__content__message"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "Cookie__checkboxes-container row"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "col-12"
-  }, manualHeader), renderChoices())), /*#__PURE__*/React.createElement("div", {
+  }, manualHeader), renderChoices())), /*#__PURE__*/_react.default.createElement("div", {
     className: "Cookie__content__buttons"
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: "Button--cta",
     onClick: onConsent(true)
   }, agreeText))))));
 };
-export default CookieCompliancePopup;
+var _default = CookieCompliancePopup;
+exports.default = _default;
 CookieCompliancePopup.defaultProps = {
   agreeText: 'Accepteren',
   disagreeText: 'Alles weigeren',
   manualText: 'Zelf instellen',
-  manualHeader: () => {},
-  onAgree: () => {},
-  onDisagree: () => {},
+  manualHeader: function manualHeader() {},
+  onAgree: function onAgree() {},
+  onDisagree: function onDisagree() {},
   showDisagree: false,
   manualButtonClassname: 'icon-after icon-chevron-right icon-variant-2',
   cookieLevels: [{
@@ -279,29 +310,29 @@ CookieCompliancePopup.defaultProps = {
   }
 };
 CookieCompliancePopup.propTypes = {
-  agreeText: PropTypes.string,
-  disagreeText: PropTypes.string,
-  manualText: PropTypes.string,
-  manualHeader: PropTypes.func,
-  manualButtonClassname: PropTypes.string,
-  onAgree: PropTypes.func,
-  onDisagree: PropTypes.func,
-  showDisagree: PropTypes.bool,
-  cookieLevels: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-    description: PropTypes.string,
-    disabled: PropTypes.bool
+  agreeText: _propTypes.default.string,
+  disagreeText: _propTypes.default.string,
+  manualText: _propTypes.default.string,
+  manualHeader: _propTypes.default.func,
+  manualButtonClassname: _propTypes.default.string,
+  onAgree: _propTypes.default.func,
+  onDisagree: _propTypes.default.func,
+  showDisagree: _propTypes.default.bool,
+  cookieLevels: _propTypes.default.arrayOf(_propTypes.default.shape({
+    value: _propTypes.default.string,
+    label: _propTypes.default.string,
+    description: _propTypes.default.string,
+    disabled: _propTypes.default.bool
   })),
-  cookieOptions: PropTypes.shape({
-    days: PropTypes.number,
-    path: PropTypes.string
+  cookieOptions: _propTypes.default.shape({
+    days: _propTypes.default.number,
+    path: _propTypes.default.string
   }),
-  cookieDomain: PropTypes.string,
-  defaultValues: PropTypes.shape({
-    necessary: PropTypes.bool,
-    voorkeuren: PropTypes.bool,
-    statistieken: PropTypes.bool,
-    marketing: PropTypes.bool
+  cookieDomain: _propTypes.default.string,
+  defaultValues: _propTypes.default.shape({
+    necessary: _propTypes.default.bool,
+    voorkeuren: _propTypes.default.bool,
+    statistieken: _propTypes.default.bool,
+    marketing: _propTypes.default.bool
   })
 };

package/dist/components/Cookie/stories.js

@@ -1,41 +1,91 @@
-import React from 'react';
-import Cookie from '.';
-import './stories.scss';
-export default {
-  title: 'Organisms/Cookie'
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.Advanced = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactUseCookie5 = _interopRequireDefault(require("react-use-cookie"));
+var _ = _interopRequireDefault(require("."));
+require("./stories.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+var _default = {
+  title: 'Organisms/Cookie',
+  component: _.default
 };
-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')
-}, /*#__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",
-  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.',
-    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.',
-    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.',
-    disabled: false
-  }],
-  defaultValues: {
-    necessary: true,
-    voorkeuren: true,
-    statistieken: true
-  },
-  manualHeader: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "Manual choice"), /*#__PURE__*/React.createElement("p", null, "You have a choice."))
-}, /*#__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."));
+exports.default = _default;
+var Default = function Default(args) {
+  var _reactUseCookie = (0, _reactUseCookie5.default)('cookie-agreed', null),
+    _reactUseCookie2 = _slicedToArray(_reactUseCookie, 2),
+    didConsent = _reactUseCookie2[0],
+    setDidConsent = _reactUseCookie2[1];
+
+  // Reset the cookie so we can keep testing the component.
+  (0, _react.useEffect)(function () {
+    setDidConsent('');
+  }, [setDidConsent]);
+  if (didConsent) return /*#__PURE__*/_react.default.createElement("p", null, "Loading...");
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    agreeText: "Accepteren",
+    manualText: "Zelf instellen",
+    onAgree: function onAgree(choices) {
+      return console.log('User agreed to', choices);
+    },
+    onDisagree: function onDisagree() {
+      return console.log('User did NOT agree');
+    }
+  }, args), /*#__PURE__*/_react.default.createElement("h1", null, "Wij gebruiken cookies"), /*#__PURE__*/_react.default.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."));
+};
+exports.Default = Default;
+var Advanced = function Advanced(args) {
+  var _reactUseCookie3 = (0, _reactUseCookie5.default)('cookie-agreed', null),
+    _reactUseCookie4 = _slicedToArray(_reactUseCookie3, 2),
+    didConsent = _reactUseCookie4[0],
+    setDidConsent = _reactUseCookie4[1];
+
+  // Reset the cookie so we can keep testing the component.
+  (0, _react.useEffect)(function () {
+    setDidConsent('');
+  }, [setDidConsent]);
+  if (didConsent) return /*#__PURE__*/_react.default.createElement("p", null, "Loading...");
+  return /*#__PURE__*/_react.default.createElement(_.default, _extends({
+    agreeText: "Accepteren",
+    manualText: "Zelf instellen",
+    showDisagree: true,
+    onDisagree: function 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.',
+      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.',
+      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.',
+      disabled: false
+    }],
+    defaultValues: {
+      necessary: true,
+      voorkeuren: true,
+      statistieken: true
+    },
+    manualHeader: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "Manual choice"), /*#__PURE__*/_react.default.createElement("p", null, "You have a choice."))
+  }, args), /*#__PURE__*/_react.default.createElement("h1", null, "Wij gebruiken cookies"), /*#__PURE__*/_react.default.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."));
+};
+exports.Advanced = Advanced;

package/dist/components/Dialog/index.d.ts

@@ -0,0 +1,38 @@
+export default Dialog;
+declare function Dialog(props: any): React.ReactPortal;
+declare namespace Dialog {
+    namespace propTypes {
+        let id: PropTypes.Requireable<string>;
+        let children: PropTypes.Validator<PropTypes.ReactElementLike>;
+        let isOpen: PropTypes.Requireable<boolean>;
+        let closeFunction: PropTypes.Requireable<(...args: any[]) => any>;
+        let showCloseButton: PropTypes.Requireable<boolean>;
+        let closeButtonText: PropTypes.Requireable<string>;
+        let showCloseIcon: PropTypes.Requireable<boolean>;
+        let closeIcon: PropTypes.Requireable<string>;
+        let dialogLabel: PropTypes.Requireable<string>;
+        let portalTarget: PropTypes.Requireable<PropTypes.ReactElementLike>;
+    }
+    namespace defaultProps {
+        let id_1: any;
+        export { id_1 as id };
+        let showCloseButton_1: boolean;
+        export { showCloseButton_1 as showCloseButton };
+        let closeButtonText_1: string;
+        export { closeButtonText_1 as closeButtonText };
+        let showCloseIcon_1: boolean;
+        export { showCloseIcon_1 as showCloseIcon };
+        let closeIcon_1: string;
+        export { closeIcon_1 as closeIcon };
+        let dialogLabel_1: string;
+        export { dialogLabel_1 as dialogLabel };
+        let isOpen_1: boolean;
+        export { isOpen_1 as isOpen };
+        let closeFunction_1: any;
+        export { closeFunction_1 as closeFunction };
+        let portalTarget_1: HTMLElement;
+        export { portalTarget_1 as portalTarget };
+    }
+}
+import React from 'react';
+import PropTypes from 'prop-types';