@uncinc/uncinc-react-kitchen-sink 2.8.5 → 2.8.9

package/dist/components/Cookie/Checkbox/style.scss

@@ -30,7 +30,6 @@
     // Checked
     &:checked ~ label:not(.no-styling) {
       &:before {
-
         background-position-y: -1em;
       }
     }

package/dist/components/GoogleConsentCookieBanner/Checkbox/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ChangeEventHandler } from 'react';
+import './style.scss';
+interface Props {
+    name: string;
+    id: string;
+    value: string;
+    label: string;
+    subLabel?: string;
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    disabled: boolean;
+}
+declare const Checkbox: React.FC<Props>;
+export default Checkbox;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import './style.scss';
+var Checkbox = function Checkbox(_ref) {
+  var name = _ref.name,
+    id = _ref.id,
+    value = _ref.value,
+    label = _ref.label,
+    subLabel = _ref.subLabel,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    onChange = _ref.onChange,
+    disabled = _ref.disabled;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "Checkbox GoogleConsentCookieBanner__checkbox"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    className: "Checkbox__input",
+    name: name,
+    id: id,
+    value: value,
+    checked: checked,
+    onChange: onChange,
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: "icon-before icon-checkmark"
+  }, label, " ", /*#__PURE__*/React.createElement("span", null, subLabel)));
+};
+export default Checkbox;

package/dist/components/GoogleConsentCookieBanner/Checkbox/style.scss

@@ -0,0 +1,40 @@
+@import '../../../styles/assets/mixins';
+@import '../../../styles/assets/variables';
+
+// Radio's and checkboxes
+.GoogleConsentCookieBanner {
+
+  &__checkbox {
+    label span {
+      font-size: 1.4rem;
+    }
+
+    input[type='checkbox'] {
+      position: absolute;
+      opacity: 0;
+
+      // Unchecked
+      ~ label:not(.no-styling) {
+        position: relative;
+        display: inline-block;
+        user-select: none;
+        cursor: pointer;
+
+        display: flex;
+        align-items: center;
+
+        &:before {
+          background-position-y: -1em;
+          font-size: 1.8rem;
+        }
+      }
+
+      // Checked
+      &:checked ~ label:not(.no-styling) {
+        &:before {
+          background-position-y: 0em;
+        }
+      }
+    }
+  }
+}

package/dist/components/GoogleConsentCookieBanner/CookieCategoryContents/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface CookieInformation {
+    title: string;
+    duration: string;
+    description: string;
+}
+export interface CookieCategoryContentsProps {
+    cookies: Array<CookieInformation>;
+    cookieNameLabel?: string;
+    durationLabel?: string;
+    descriptionLabel?: string;
+}
+declare const CookieCategoryContents: React.FC<CookieCategoryContentsProps>;
+export default CookieCategoryContents;

package/dist/components/GoogleConsentCookieBanner/CookieCategoryContents/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+var CookieCategoryContents = function CookieCategoryContents(_ref) {
+  var _ref$cookies = _ref.cookies,
+    cookies = _ref$cookies === void 0 ? [] : _ref$cookies,
+    _ref$cookieNameLabel = _ref.cookieNameLabel,
+    cookieNameLabel = _ref$cookieNameLabel === void 0 ? 'Cookie' : _ref$cookieNameLabel,
+    _ref$durationLabel = _ref.durationLabel,
+    durationLabel = _ref$durationLabel === void 0 ? 'Looptijd' : _ref$durationLabel,
+    _ref$descriptionLabel = _ref.descriptionLabel,
+    descriptionLabel = _ref$descriptionLabel === void 0 ? 'Beschrijving' : _ref$descriptionLabel;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "CookieCategoryContents"
+  }, cookies.map(function (cookie) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "cookie-description-".concat(cookie.title)
+    }, /*#__PURE__*/React.createElement("h3", null, cookieNameLabel), /*#__PURE__*/React.createElement("p", null, cookie.title), /*#__PURE__*/React.createElement("h3", null, durationLabel), /*#__PURE__*/React.createElement("p", null, cookie.duration), /*#__PURE__*/React.createElement("h3", null, descriptionLabel), /*#__PURE__*/React.createElement("p", null, cookie.description));
+  }));
+};
+export default CookieCategoryContents;

package/dist/components/GoogleConsentCookieBanner/CookieCategoryContentsPartners/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface PartnerInformation {
+    name: string;
+    description: string;
+    privacyPolicy: string;
+}
+export interface CookieCategoryContentsProps {
+    partners: Array<PartnerInformation>;
+    partnerNameLabel?: string;
+    descriptionLabel?: string;
+    privacyPolicyLabel?: string;
+}
+declare const CookieCategoryContentsPartners: React.FC<CookieCategoryContentsProps>;
+export default CookieCategoryContentsPartners;

package/dist/components/GoogleConsentCookieBanner/CookieCategoryContentsPartners/index.js

@@ -0,0 +1,23 @@
+import React from 'react';
+var CookieCategoryContentsPartners = function CookieCategoryContentsPartners(_ref) {
+  var _ref$partners = _ref.partners,
+    partners = _ref$partners === void 0 ? [] : _ref$partners,
+    _ref$partnerNameLabel = _ref.partnerNameLabel,
+    partnerNameLabel = _ref$partnerNameLabel === void 0 ? 'Partner' : _ref$partnerNameLabel,
+    _ref$descriptionLabel = _ref.descriptionLabel,
+    descriptionLabel = _ref$descriptionLabel === void 0 ? 'Beschrijving' : _ref$descriptionLabel,
+    _ref$privacyPolicyLab = _ref.privacyPolicyLabel,
+    privacyPolicyLabel = _ref$privacyPolicyLab === void 0 ? 'Privacy Policy' : _ref$privacyPolicyLab;
+  return /*#__PURE__*/React.createElement("ul", {
+    className: "CookieCategoryContents"
+  }, partners.map(function (partner) {
+    return /*#__PURE__*/React.createElement("li", {
+      key: "partner-description-".concat(partner.name)
+    }, /*#__PURE__*/React.createElement("h3", null, partnerNameLabel), /*#__PURE__*/React.createElement("p", null, partner.name), /*#__PURE__*/React.createElement("h3", null, descriptionLabel), /*#__PURE__*/React.createElement("p", null, partner.description), /*#__PURE__*/React.createElement("a", {
+      href: partner.privacyPolicy,
+      rel: "noreferrer",
+      target: "_blank"
+    }, privacyPolicyLabel));
+  }));
+};
+export default CookieCategoryContentsPartners;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import './style.scss';
+import { CookieCompliancePopupProps } from './types';
+export declare const COOKIE_CONSENT_CATEGORIES = "cookie_consent_categories";
+export declare const COOKIE_CONSENT_STATE = "cookie_consent_state";
+export declare const DEFAULT_COOKIE_EXPIRATION_DAYS = 365;
+export declare const CONSENT_UPDATE_EVENT = "consentUpdate";
+declare global {
+    interface Window {
+        dataLayer: any;
+        gtag: any;
+    }
+}
+declare const CookieCompliancePopup: React.FC<CookieCompliancePopupProps>;
+export default CookieCompliancePopup;

package/dist/components/GoogleConsentCookieBanner/index.js

@@ -0,0 +1,338 @@
+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 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 _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; }
+import React, { useEffect, useState } from 'react';
+import useCookie from 'react-use-cookie';
+import Cookies from 'js-cookie';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import Accordion from '../Accordion';
+import AccordionItemVariant from '../Accordion/AccordionItemVariant';
+import Button from '../Button';
+import Container from '../Layout/Container';
+import Checkbox from './Checkbox';
+import './style.scss';
+import { LocalConsentStatus, AvailableConsentPermissions } from './types';
+export var COOKIE_CONSENT_CATEGORIES = 'cookie_consent_categories';
+export var COOKIE_CONSENT_STATE = 'cookie_consent_state';
+export var DEFAULT_COOKIE_EXPIRATION_DAYS = 365;
+export var CONSENT_UPDATE_EVENT = 'consentUpdate';
+var CookieCompliancePopup = function CookieCompliancePopup(props) {
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var className = props.className,
+    children = props.children,
+    _props$title = props.title,
+    title = _props$title === void 0 ? t('cookies.title') : _props$title,
+    _props$manualText = props.manualText,
+    manualText = _props$manualText === void 0 ? t('cookies.manual') : _props$manualText,
+    _props$acceptAllText = props.acceptAllText,
+    acceptAllText = _props$acceptAllText === void 0 ? t('cookies.acceptAll') : _props$acceptAllText,
+    _props$acceptSelectio = props.acceptSelectionText,
+    acceptSelectionText = _props$acceptSelectio === void 0 ? t('cookies.acceptSelection') : _props$acceptSelectio,
+    _props$onlyNecessaryT = props.onlyNecessaryText,
+    onlyNecessaryText = _props$onlyNecessaryT === void 0 ? t('cookies.acceptOnlyNecessary') : _props$onlyNecessaryT,
+    _props$cookieContents = props.cookieContentsShowMore,
+    cookieContentsShowMore = _props$cookieContents === void 0 ? /*#__PURE__*/React.createElement("div", null, t('cookies.showDetails')) : _props$cookieContents,
+    _props$cookieContents2 = props.cookieContentsShowLess,
+    cookieContentsShowLess = _props$cookieContents2 === void 0 ? /*#__PURE__*/React.createElement("div", null, t('cookies.hideDetails')) : _props$cookieContents2,
+    _props$showAcceptOnly = props.showAcceptOnlyNeeded,
+    showAcceptOnlyNeeded = _props$showAcceptOnly === void 0 ? true : _props$showAcceptOnly,
+    _props$onAgree = props.onAgree,
+    onAgree = _props$onAgree === void 0 ? function () {} : _props$onAgree,
+    _props$cookieLevels = props.cookieLevels,
+    cookieLevels = _props$cookieLevels === void 0 ? [{
+      value: 'necessary',
+      label: t('cookies.categories.necessary.label'),
+      subLabel: t('cookies.categories.necessary.subLabel'),
+      description: t('cookies.categories.necessary.description'),
+      disabled: true,
+      consentOptions: ['security_storage']
+    }, {
+      value: 'preferences',
+      label: t('cookies.categories.preferences.label'),
+      description: t('cookies.categories.preferences.description'),
+      disabled: false,
+      consentOptions: ['functionality_storage', 'personalization_storage']
+    }, {
+      value: 'statistics',
+      label: t('cookies.categories.statistics.label'),
+      description: t('cookies.categories.statistics.description'),
+      disabled: false,
+      consentOptions: ['analytics_storage']
+    }, {
+      value: 'marketing',
+      label: t('cookies.categories.marketing.label'),
+      description: t('cookies.categories.marketing.description'),
+      disabled: false,
+      consentOptions: ['ad_personalization', 'ad_user_data', 'ad_storage']
+    }] : _props$cookieLevels,
+    _props$cookieOptions = props.cookieOptions,
+    cookieOptions = _props$cookieOptions === void 0 ? {
+      days: DEFAULT_COOKIE_EXPIRATION_DAYS,
+      path: '/'
+    } : _props$cookieOptions,
+    _props$version = props.version,
+    version = _props$version === void 0 ? '1.0.0' : _props$version,
+    _props$cookieDomain = props.cookieDomain,
+    cookieDomain = _props$cookieDomain === void 0 ? null : _props$cookieDomain,
+    _props$defaultValues = props.defaultValues,
+    defaultValues = _props$defaultValues === void 0 ? {
+      necessary: true,
+      preferences: false,
+      statistics: false,
+      marketing: false
+    } : _props$defaultValues,
+    _props$manualHeader = props.manualHeader,
+    manualHeader = _props$manualHeader === void 0 ? '' : _props$manualHeader,
+    _props$manualButtonCl = props.manualButtonClassname,
+    manualButtonClassname = _props$manualButtonCl === void 0 ? 'Button' : _props$manualButtonCl;
+  if (!window.dataLayer) {
+    window.dataLayer = window.dataLayer || [];
+  }
+  if (!window.gtag) {
+    window.gtag = function () {
+      window.dataLayer.push(arguments.length <= 0 ? undefined : arguments[0]);
+    };
+  }
+
+  // This is an internal state to check whether we should show the options.
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    manualChoiceVisible = _useState2[0],
+    setManualChoiceVisible = _useState2[1];
+  // This is an internal state to check whether the user has answered in the current session.
+  // It is either null (because we don't know if it was already in the cookies) or true
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    answeredInCurrentSession = _useState4[0],
+    setAnsweredInCurrentSession = _useState4[1];
+
+  // Cookie stating if the cookie has already been accepted. Uses the following states:
+  // null: unknown
+  // STATUS DECLINED (0 as cookie value)
+  // STATUS NOT YET ANSWERED (1 as cookie value)
+  // STATUS ACCEPTED_ALL (2 as cookie value)
+  var _useCookie = useCookie(COOKIE_CONSENT_STATE, LocalConsentStatus.STATUS_DEFAULT),
+    _useCookie2 = _slicedToArray(_useCookie, 2),
+    didConsent = _useCookie2[0],
+    setDidConsent = _useCookie2[1];
+  var categories = cookieLevels.map(function (item) {
+    return item.value;
+  });
+  var defaultState = categories.reduce(function (prev, category) {
+    // eslint-disable-next-line valid-typeof
+    var newPartialState = prev;
+    if (defaultValues[category] !== undefined) {
+      newPartialState[category] = defaultValues[category];
+    } else {
+      newPartialState[category] = true;
+    }
+    return newPartialState;
+  }, {});
+
+  // Default choices for select, this way we can locally manage the state of the form.
+  var _useState5 = useState(defaultState),
+    _useState6 = _slicedToArray(_useState5, 2),
+    choicesSelected = _useState6[0],
+    setChoicesSelected = _useState6[1];
+  useEffect(function () {
+    // We now know the value of the cookie. If there is no cookie set,
+    // immediately set the didConsent state to STATUS_NOT_YET_ANSWERED.
+    if (didConsent === LocalConsentStatus.STATUS_DEFAULT) {
+      setDidConsent(JSON.stringify({
+        status: LocalConsentStatus.STATUS_NOT_YET_ANSWERED,
+        version: version
+      }), cookieOptions);
+    }
+  }, [didConsent, cookieOptions, setDidConsent]);
+  var isLoading = didConsent === undefined;
+  var didConsentContent = typeof didConsent === 'string' && didConsent.length > 0 ? JSON.parse(didConsent) : null;
+  var isPrompting = (didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_NOT_YET_ANSWERED;
+  var isAnswered = (didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_ACCEPTED || (didConsentContent === null || didConsentContent === void 0 ? void 0 : didConsentContent.status) === LocalConsentStatus.STATUS_ONLY_NECESSARY;
+
+  // This function expands the notification to show the options.
+  var displayConsentChoices = function displayConsentChoices(e) {
+    e.preventDefault();
+    setManualChoiceVisible(true);
+  };
+
+  // Build an object of passed consent, send that to google via "update"
+  // Set the cookie containing the consent categories and version
+  var handleGoogleConsent = function handleGoogleConsent() {
+    var selectedConsent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var selectedCategories = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+    var consentEventObject = {};
+    Object.values(AvailableConsentPermissions).forEach(function (consentOption) {
+      consentEventObject[consentOption] = selectedConsent.indexOf(consentOption) > -1 ? 'granted' : 'denied';
+    });
+    window.gtag('consent', 'update', consentEventObject);
+    window.gtag('event', CONSENT_UPDATE_EVENT);
+    Cookies.set(COOKIE_CONSENT_CATEGORIES, JSON.stringify({
+      categories: selectedCategories,
+      consent: consentEventObject
+    }), {
+      expires: cookieOptions.days,
+      domain: cookieDomain
+    });
+    setDidConsent(JSON.stringify({
+      status: LocalConsentStatus.STATUS_ACCEPTED,
+      version: version
+    }), cookieOptions);
+    setAnsweredInCurrentSession(true);
+  };
+
+  // On agree clicked, send consent for categories to Google
+  // Update cookie and fire agree callback
+  var onInternalAgree = function onInternalAgree(choices) {
+    var selectedCategories = Object.keys(choices).filter(function (key) {
+      return choices[key];
+    });
+    var selectedConsent = [];
+    cookieLevels.forEach(function (cookieLevel) {
+      if (selectedCategories.indexOf(cookieLevel.value) > -1) {
+        selectedConsent = selectedConsent.concat(cookieLevel.consentOptions);
+      }
+    });
+    handleGoogleConsent(selectedConsent, selectedCategories);
+    onAgree({
+      selectedCategories: selectedCategories,
+      consent: selectedConsent
+    });
+  };
+
+  // Function for accepting al categories at once.
+  var onConsentAll = function onConsentAll() {
+    var allCategoriesSelected = categories.reduce(function (prev, category) {
+      var newPartialState = prev;
+      newPartialState[category] = true;
+      return newPartialState;
+    }, {});
+    onInternalAgree(allCategoriesSelected);
+  };
+
+  // This function is fired when the accept button is pressed.
+  // Also has eventual support for a false case.
+  var onConsent = function onConsent(onlyNecessary) {
+    return function () {
+      if (onlyNecessary === true) {
+        onInternalAgree(defaultValues);
+      } else {
+        onInternalAgree(choicesSelected);
+      }
+    };
+  };
+
+  // This function sets the value of the checkmark in the form state.
+  var handleChoiceState = function handleChoiceState(event) {
+    var _ref = event.target,
+      value = _ref.value,
+      checked = _ref.checked;
+    setChoicesSelected(_objectSpread(_objectSpread({}, choicesSelected), {}, _defineProperty({}, value, checked)));
+  };
+  var classes = classNames('GoogleConsentCookieBanner', className, {
+    'GoogleConsentCookieBanner--prompting': isPrompting,
+    'GoogleConsentCookieBanner--loading': isLoading,
+    'GoogleConsentCookieBanner--answered': isAnswered,
+    // answering refers to the fact that the user has answered in the current session.
+    'GoogleConsentCookieBanner--answering': answeredInCurrentSession,
+    'GoogleConsentCookieBanner--hidden': isAnswered
+  });
+
+  // if it is answered in the current session
+  // we still render the cookie but with the --hidden modifier,
+  // allowing consumers to apply an animation if desired.
+  // In other words, don't render only if a user has
+  // answered in a previous session.
+  if (isAnswered && !answeredInCurrentSession) {
+    return null;
+  }
+
+  // This function renders the different options of checkboxes,
+  // allowing us to add more checkboxes eventually.
+  var renderChoices = function renderChoices() {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cookieLevels.map(function (choice) {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "GoogleConsentCookieBanner__category",
+        key: choice.value
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "CheckboxContainer"
+      }, /*#__PURE__*/React.createElement(Checkbox, {
+        name: "cookie-categories",
+        id: "cookie-category-".concat(choice.value),
+        onChange: handleChoiceState,
+        label: choice.label,
+        subLabel: choice.subLabel,
+        value: choice.value,
+        checked: choicesSelected[choice.value],
+        disabled: choice.disabled
+      })), /*#__PURE__*/React.createElement("div", {
+        className: "GoogleConsentCookieBanner__category__description"
+      }, choice.description), choice.contents && typeof choice.contents === 'function' && /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionItemVariant, {
+        title: "",
+        buttonOpened: cookieContentsShowLess,
+        buttonClosed: cookieContentsShowMore,
+        onClick: function onClick() {}
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "GoogleConsentCookieBanner__category__description"
+      }, choice.contents()))));
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classes
+  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement("div", {
+    className: "GoogleConsentCookieBanner__content ".concat(manualChoiceVisible ? 'GoogleConsentCookieBanner__content--full-height' : '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-12 GoogleConsentCookieBanner__content_header"
+  }, title && /*#__PURE__*/React.createElement("h3", null, title))), !manualChoiceVisible ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "row"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "col-12 GoogleConsentCookieBanner__content__message"
+  }, children), /*#__PURE__*/React.createElement("div", {
+    className: "col-12 GoogleConsentCookieBanner__content__buttons"
+  }, /*#__PURE__*/React.createElement(Button, {
+    id: "complete-agree",
+    className: "Button--cta",
+    primary: true,
+    onClick: onConsentAll
+  }, acceptAllText), showAcceptOnlyNeeded && /*#__PURE__*/React.createElement(Button, {
+    id: "only-necessary-agree",
+    className: "Button--cta",
+    inverted: true,
+    onClick: onConsent(true)
+  }, onlyNecessaryText), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "GoogleConsentCookieBanner__content__buttons__manual GoogleConsentCookieBanner__content__buttons__manual-agree ".concat(manualButtonClassname),
+    onClick: function onClick(e) {
+      displayConsentChoices(e);
+    }
+  }, manualText)))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "GoogleConsentCookieBanner__content__message"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "GoogleConsentCookieBanner__checkboxes-container"
+  }, manualHeader && /*#__PURE__*/React.createElement("div", {
+    className: "manualHeader"
+  }, manualHeader), renderChoices())), /*#__PURE__*/React.createElement("div", {
+    className: "GoogleConsentCookieBanner__content__buttons"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "Button--cta",
+    primary: true,
+    onClick: onConsent(false)
+  }, acceptSelectionText), /*#__PURE__*/React.createElement(Button, {
+    className: "Button--cta",
+    inverted: true,
+    onClick: onConsentAll
+  }, acceptAllText))))));
+};
+export default CookieCompliancePopup;

package/dist/components/GoogleConsentCookieBanner/style.scss

@@ -0,0 +1,105 @@
+@import '../../styles/assets/mixins';
+@import '../../styles/assets/variables';
+
+@keyframes slide {
+  0% {
+    transform: translateX(-50%) translateY(110vh);
+  }
+
+  100% {
+    transform: translateX(-50%) translateY(0);
+  }
+}
+
+.GoogleConsentCookieBanner {
+  position: fixed;
+  z-index: 10000;
+  bottom: 0;
+  left: 50%;
+  width: 100%;
+  max-height: 100%;
+
+  &__content {
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+
+    &__message {
+      overflow-y: auto;
+    }
+
+    &__full-height {
+      overflow-y: scroll;
+
+      @media #{$normal} {
+        overflow-y: unset;
+        height: auto;
+      }
+    }
+
+    &__buttons {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      @media #{$tablet} {
+        flex-direction: row;
+      }
+
+      .Button {
+        margin-right: 1rem;
+      }
+
+      .GoogleConsentCookieBanner__content__buttons__manual {
+        margin-right: 1rem;
+        padding: 0;
+        font-family: inherit;
+        font-size: inherit;
+        background: none;
+        border: 0;
+  
+        cursor: pointer;
+      }
+    }
+  }
+
+  .AccordionItem {
+    display: flex;
+    flex-direction: column;
+
+    &__title__wrapper {
+      order: 2;
+      cursor: pointer;
+    }
+
+    &__title {
+      display: none;
+    }
+  }
+
+  &__category {
+    display: inline-block;
+    margin-bottom: 2rem;
+  }
+
+  &--hidden {
+   display: none;
+
+   &__content__full-height {
+      position: inherit;
+      top: inherit;
+      right: inherit;
+      bottom: inherit;
+      left: inherit;
+    }
+  }
+
+  &--prompting {
+    transform: translateX(-50%) translateY(0);
+    animation: slide 1s forwards;
+  }
+
+  &--loading {
+    transform: translateX(-50%) translateY(110vh);
+  }
+}

package/dist/components/GoogleConsentCookieBanner/types.d.ts

@@ -0,0 +1,67 @@
+export declare enum LocalConsentStatus {
+    STATUS_DEFAULT = "-1",
+    STATUS_ONLY_NECESSARY = "0",
+    STATUS_NOT_YET_ANSWERED = "1",
+    STATUS_ACCEPTED = "2"
+}
+export declare enum AvailableConsentPermissions {
+    SECURITY_STORAGE = "security_storage",
+    FUNCTIONALITY_STORAGE = "functionality_storage",
+    PERSONALISATION_STORAGE = "personalization_storage",
+    ANALYTICS_STORAGE = "analytics_storage",
+    AD_PERSONALISATION = "ad_personalization",
+    AD_USER_DATA = "ad_user_data",
+    AD_STORAGE = "ad_storage"
+}
+export declare enum ConsentEventOption {
+    GRANTED = "granted",
+    DENIED = "denied"
+}
+export interface CategoryDefaultValues extends Record<string, boolean> {
+    necessary: boolean;
+    preferences: boolean;
+    statistics: boolean;
+    marketing: boolean;
+}
+export interface CookieLevel {
+    value: string;
+    label: string;
+    subLabel?: string;
+    description: string;
+    disabled: boolean;
+    consentOptions: Array<AvailableConsentPermissions>;
+    contents?: Function;
+}
+export interface CookieOptions {
+    days: Number;
+    path: string;
+}
+export interface ConsentEvent extends Record<string, string | undefined> {
+    security_storage?: ConsentEventOption;
+    functionality_storage?: ConsentEventOption;
+    personalization_storage?: ConsentEventOption;
+    analytics_storage?: ConsentEventOption;
+    ad_personalization?: ConsentEventOption;
+    ad_user_data?: ConsentEventOption;
+    ad_storage?: ConsentEventOption;
+}
+export interface CookieCompliancePopupProps {
+    className?: string;
+    children?: any;
+    acceptAllText?: string;
+    acceptSelectionText?: string;
+    onlyNecessaryText?: string;
+    title?: string;
+    cookieContentsShowMore?: string;
+    cookieContentsShowLess?: string;
+    manualText?: string;
+    manualHeader?: string;
+    onAgree?: Function;
+    showAcceptOnlyNeeded?: boolean;
+    manualButtonClassname?: string;
+    cookieLevels?: Array<CookieLevel>;
+    defaultValues?: CategoryDefaultValues;
+    cookieDomain?: string;
+    cookieOptions?: CookieOptions;
+    version?: string;
+}

package/dist/components/GoogleConsentCookieBanner/types.js

@@ -0,0 +1,22 @@
+export var LocalConsentStatus = /*#__PURE__*/function (LocalConsentStatus) {
+  LocalConsentStatus["STATUS_DEFAULT"] = "-1";
+  LocalConsentStatus["STATUS_ONLY_NECESSARY"] = "0";
+  LocalConsentStatus["STATUS_NOT_YET_ANSWERED"] = "1";
+  LocalConsentStatus["STATUS_ACCEPTED"] = "2";
+  return LocalConsentStatus;
+}({});
+export var AvailableConsentPermissions = /*#__PURE__*/function (AvailableConsentPermissions) {
+  AvailableConsentPermissions["SECURITY_STORAGE"] = "security_storage";
+  AvailableConsentPermissions["FUNCTIONALITY_STORAGE"] = "functionality_storage";
+  AvailableConsentPermissions["PERSONALISATION_STORAGE"] = "personalization_storage";
+  AvailableConsentPermissions["ANALYTICS_STORAGE"] = "analytics_storage";
+  AvailableConsentPermissions["AD_PERSONALISATION"] = "ad_personalization";
+  AvailableConsentPermissions["AD_USER_DATA"] = "ad_user_data";
+  AvailableConsentPermissions["AD_STORAGE"] = "ad_storage";
+  return AvailableConsentPermissions;
+}({});
+export var ConsentEventOption = /*#__PURE__*/function (ConsentEventOption) {
+  ConsentEventOption["GRANTED"] = "granted";
+  ConsentEventOption["DENIED"] = "denied";
+  return ConsentEventOption;
+}({});

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

@@ -1,4 +1,4 @@
-export function Pagination({ currentPage, totalPages, pageRangeDisplayed, marginPagesDisplayed, setCurrentPage, previousLabel, nextLabel, containerClassName, disabledClassName, activeClassName, breakClassName, showWhenOnePage, controlled, scrollToTop, scrollToTopOffset, scrollToTopBehavior }: {
+export function Pagination({ currentPage, totalPages, pageRangeDisplayed, marginPagesDisplayed, setCurrentPage, previousLabel, nextLabel, containerClassName, disabledClassName, activeClassName, breakClassName, showWhenOnePage, controlled, scrollToTop, scrollToTopOffset, scrollToTopBehavior, }: {
     currentPage: any;
     totalPages: any;
     pageRangeDisplayed: any;

package/dist/components/SearchKit/SearchPage/index.js

@@ -33,7 +33,7 @@ export var routeToStateFn = function routeToStateFn(routeState) {
       item.max = Number(item.max);
     }
     if (item.boolValue) {
-      item.boolValue = item.boolValue == "true";
+      item.boolValue = item.boolValue == 'true';
     }
     if (item.geoBoundingBox) {
       item.geoBoundingBox.topLeft.lat = Number(item.geoBoundingBox.topLeft.lat);

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import './style.scss';
 export interface TagProps {
-    name: string;
+    name: React.ReactNode;
     stretchClickableArea?: boolean;
     deleteButtonAriaLabel?: string;
     className?: string;
-    onDelete?: (name: string) => void;
+    onDelete?: (name: string | React.ReactNode) => void;
     link?: string;
     onClick?: () => void;
     target?: HTMLAnchorElement['target'];

package/dist/config/i18next/locales/nl.json

@@ -19,6 +19,39 @@
       "dec": "December"
     }
   },
+  "cookie": {
+    "title": "Cookies",
+    "manual": "Zelf instellen",
+    "acceptAll": "Alles Accepteren",
+    "acceptSelection": "Accepteer selectie",
+    "acceptOnlyNecessary": "Alleen noodzakelijke",
+    "showDetails": "Show details",
+    "hideDetails": "Verberg details",
+    "contents": {
+      "partner": "Partner",
+      "description": "Beschrijving",
+      "privacyPolicy": "Privacy Policy"
+    },
+    "categories": {
+      "necessary": {
+        "label": "Noodzakelijk",
+        "subLabel": "(altijd actief)",
+        "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."
+      },
+      "preferences": {
+        "label": "Voorkeuren",
+        "description": "Voorkeuren cookies geven inzicht in je interesses, je acties op de website en maken het ook mogelijk een contactformulier te gebruiken."
+      },
+      "statistics": {
+        "label": "Statistieken",
+        "description": "Statistische cookies helpen ons te begrijpen hoe bezoekers de website gebruiken, door anoniem gegevens te verzamelen en te rapporteren."
+      },
+      "marketing": {
+        "label": "Marketing",
+        "description": "Marketing cookies maken het mogelijk om onze campagne resultaten te meten, zo kunnen wij gerichter adverteren en kosten besparen. \uFEFF"
+      }
+    }
+  },
   "form": {
     "required": "vereist",
     "optional": "optioneel"

package/dist/index.d.ts

@@ -49,6 +49,9 @@ export { default as TitleWithText } from "./components/TitleWithText";
 export { default as TableRender } from "./components/TableRender";
 export { default as ApiAutocomplete } from "./components/ApiAutocomplete";
 export { default as Cookie } from "./components/Cookie";
+export { default as GoogleConsentCookieBanner } from "./components/GoogleConsentCookieBanner";
+export { default as CookieCategoryContents } from "./components/GoogleConsentCookieBanner/CookieCategoryContents";
+export { default as CookieCategoryContentsPartners } from "./components/GoogleConsentCookieBanner/CookieCategoryContentsPartners";
 export { default as Downloads } from "./organisms/Downloads";
 export { default as Header } from "./components/Header";
 export { default as MediaPlayer } from "./components/MediaPlayer";

package/dist/index.js

@@ -56,6 +56,9 @@ export { default as TableRender } from './components/TableRender';
 // Organisms
 export { default as ApiAutocomplete } from './components/ApiAutocomplete';
 export { default as Cookie } from './components/Cookie';
+export { default as GoogleConsentCookieBanner } from './components/GoogleConsentCookieBanner';
+export { default as CookieCategoryContents } from './components/GoogleConsentCookieBanner/CookieCategoryContents';
+export { default as CookieCategoryContentsPartners } from './components/GoogleConsentCookieBanner/CookieCategoryContentsPartners';
 export { default as Downloads } from './organisms/Downloads';
 export { default as Header } from './components/Header';
 export { default as MediaPlayer } from './components/MediaPlayer';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.8.5",
+  "version": "2.8.9",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -54,16 +54,6 @@
     "@loadable/component": "^5.15.0",
     "@searchkit/client": "^3.0.0",
     "@searchkit/elastic-ui": "^3.0.0",
-    "@types/jest": "^29.5.1",
-    "@types/node": "^20.1.0",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@types/react-html-parser": "^2.0.2",
-    "@types/react-pdf": "^6",
-    "@types/react-router": "^5.1.20",
-    "@types/uuid": "^9.0.2",
-    "@types/video.js": "^7.3.52",
-    "@types/webpack-env": "^1.18.0",
     "apollo-server-micro": "^3.4.0",
     "bootstrap": "^4",
     "eslint-webpack-plugin": "^2",
@@ -135,6 +125,17 @@
     "@testing-library/jest-dom": "^5.11.2",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^29.5.1",
+    "@types/js-cookie": "^3.0.6",
+    "@types/node": "^20.1.0",
+    "@types/react": "^18.2.6",
+    "@types/react-dom": "^18.2.4",
+    "@types/react-html-parser": "^2.0.2",
+    "@types/react-pdf": "^6",
+    "@types/react-router": "^5.1.20",
+    "@types/uuid": "^9.0.2",
+    "@types/video.js": "^7.3.52",
+    "@types/webpack-env": "^1.18.0",
     "@uncinc/eslint-config": "^1.1.2",
     "@uncinc/stylelint-config": "^1.0.2",
     "babel-jest": "^29.4.3",