@uncinc/uncinc-react-kitchen-sink 2.8.51 → 2.9.0

package/dist/components/GoogleConsentCookieBanner/index.js

@@ -0,0 +1,341 @@
+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,
+    _props$necessaryButto = props.necessaryButtonInverted,
+    necessaryButtonInverted = _props$necessaryButto === void 0 ? true : _props$necessaryButto;
+  if (!window.dataLayer) {
+    window.dataLayer = window.dataLayer || [];
+  }
+  if (!window.gtag) {
+    // eslint-disable-next-line prefer-rest-params
+    window.gtag = function () {
+      window.dataLayer.push(arguments);
+    };
+  }
+
+  // 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: necessaryButtonInverted,
+    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: necessaryButtonInverted,
+    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,68 @@
+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;
+    necessaryButtonInverted?: boolean;
+    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/Icon/style.scss

@@ -98,3 +98,50 @@ $material-icon-styles: (
   width: 1em;
   @include icon-color(#000000);
 }
+
+
+/// gridIconToMaterialIcon
+///
+/// Mixin to overwrite old icon-implementations.
+///
+/// @param {String} $icon-name - name of the icon.
+/// Needs to correspond with the file name of the icon.
+///
+/// @param {String} $style - Material Icon style
+///
+/// @param {Boolean} $custom - Are we overwwriting with a
+/// custom icon?
+///
+/// @example scss
+///   .icon-arrow {
+///     @include gridIconToMaterialIcon('download');
+///   }
+///
+/// @example scss
+///   .icon-download {
+///     @include gridIconToMaterialIcon($icon-name: 'custom_download', $custom: true);
+///   }
+///
+@mixin gridIconToMaterialIcon(
+  $icon-name: null,
+  $style: 'outlined',
+  $custom: false,
+) {
+  @if not $icon-name {
+    @error 'an icon name is required'
+  }
+
+  @if not $custom {
+    background: url('~@material-design-icons/svg/#{$style}/#{$icon-name}.svg');
+  } @else {
+    background: url('#{$custom-icon-path}/#{$icon-name}.svg');
+  }
+
+  display: block;
+  width: 1em;
+  height: 1em;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: 1em;
+}

package/dist/components/Image/AdaptivePicture/index.js

@@ -6,8 +6,9 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
 import c from 'classnames';
-import './style.scss';
+import urlParse from 'url';
 import { isValidImage, useImageLoader, calculateTargetSrc } from '../helpers';
+import './style.scss';
 
 // extend html img props
 
@@ -44,19 +45,30 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     if (!container) return;
     var resizeObserver = new ResizeObserver(function (entries) {
       var widthAfterResize = entries[0].contentRect.width;
+      var newSrcRequired = false;
       if (image.width < widthAfterResize) {
         var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
         if (targetSrc !== newTargetSrc) {
           setTargetSrc(newTargetSrc);
+          newSrcRequired = true;
         }
       } else {
         var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
         if (targetSrc !== _newTargetSrc) {
           setTargetSrc(_newTargetSrc);
+          newSrcRequired = true;
         }
       }
       if (status === 'PENDING') {
         setStatus('INITIAL_BREAKPOINT_CALCULATED');
+
+        // We always load the smallest source. If that's also the source we need
+        // set INITIAL_LOADED directly.
+        // With caching turned on, the onLoad function on the img would only trigger once
+        // and thus never unblur the smallest
+        if (!newSrcRequired) {
+          setStatus('INITIAL_LOADED');
+        }
       }
     });
     resizeObserver.observe(container);
@@ -68,7 +80,13 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
   }, [fallbackImage, status, targetSrc, validatedSources]);
   var loadedUrl = useImageLoader(fallbackImage, targetSrc, imageRef);
   function onErrorFallback(e) {
-    if (e.target.src !== fallbackImage) {
+    // Make sure that both URLs are absolute URLs, so we can compare them.
+    // Otherwise this error callback will constantly be thrown.
+    var link = document.createElement('a');
+    link.href = e.target.src;
+    var link2 = document.createElement('a');
+    link2.href = fallbackImage;
+    if (link.href !== link2.href) {
       e.target.src = fallbackImage;
     }
   }
@@ -86,7 +104,11 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
       if (_onLoad) {
         _onLoad(e);
       }
-      if (status === 'INITIAL_BREAKPOINT_CALCULATED' && e.target.src === targetSrc) {
+
+      // To handle relative URLs
+      var current = urlParse.parse(e.target.src);
+      var target = urlParse.parse(targetSrc);
+      if (status === 'INITIAL_BREAKPOINT_CALCULATED' && current.pathname === target.pathname) {
         setStatus('INITIAL_LOADED');
       }
     },

package/dist/components/Image/AdaptivePicture/style.scss

@@ -1,4 +1,5 @@
 .AdaptivePicture {
+  display: block;
   width: 100%;
 }
 

package/dist/components/Image/helpers/index.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import path from 'path';
 import { useEffect, useState } from 'react';
-var breakpoints = [0, 256, 512, 1024, 2048];
+var breakpoints = [256, 512, 1024, 2048];
 var mimeTypes = {
   '.gif': 'image/gif',
   '.png': 'image/png',