npm - @uncinc/uncinc-react-kitchen-sink - Versions diffs - 2.8.4 → 2.8.9 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

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

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

package/dist/components/Dialog/DialogDrawerStory/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export function DialogHookStory(args: any): React.JSX.Element;
+export default DialogHookStory;
+import React from 'react';

package/dist/components/Dialog/DialogDrawerStory/index.js ADDED Viewed

@@ -0,0 +1,81 @@
+var _excluded = ["forwardRef", "children"],
+  _excluded2 = ["children"];
+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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React from 'react';
+import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
+import useDialog from '../../../hooks/useDialog';
+import Icon from '../../Icon';
+import './story.scss';
+var Content = function Content(_ref) {
+  var closeDialog = _ref.closeDialog;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    className: "Dialog__button_close",
+    type: "button",
+    onClick: function onClick() {
+      return closeDialog();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "close",
+    flair: "filled"
+  })), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeDialog"), " - a function to close the dialog")));
+};
+var WrapperComponent = function WrapperComponent(_ref2) {
+  var forwardRef = _ref2.forwardRef,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
+    initial: {
+      x: '100%'
+    },
+    animate: {
+      x: 0
+    },
+    exit: {
+      x: '100%'
+    },
+    ref: forwardRef
+  }), children);
+};
+var BackdropComponent = function BackdropComponent(_ref3) {
+  var children = _ref3.children,
+    props = _objectWithoutProperties(_ref3, _excluded2);
+  return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    }
+  }), children);
+};
+export var DialogHookStory = function DialogHookStory(args) {
+  var _useDialog = useDialog(),
+    dialogIsOpen = _useDialog.dialogIsOpen,
+    openDialog = _useDialog.openDialog,
+    closeDialog = _useDialog.closeDialog,
+    DialogComponent = _useDialog.DialogComponent;
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    onClick: openDialog
+  }, "Open a dialog"), /*#__PURE__*/React.createElement(MotionConfig, {
+    transition: {
+      duration: 0.5,
+      ease: 'easeOut'
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, dialogIsOpen && /*#__PURE__*/React.createElement(DialogComponent, _extends({
+    className: "DialogDrawer",
+    dialogIsOpen: dialogIsOpen,
+    closeDialog: closeDialog,
+    closeIcon: "icon-cross",
+    wrapperComponent: WrapperComponent,
+    backdropComponent: BackdropComponent
+  }, args), /*#__PURE__*/React.createElement(Content, {
+    closeDialog: closeDialog
+  })))));
+};
+export default DialogHookStory;

package/dist/components/Dialog/DialogDrawerStory/story.scss ADDED Viewed

@@ -0,0 +1,39 @@
+@import '../../Icon/style';
+$material-icon-names: (
+  close,
+);
+$custom-icon-path: '/assets/icons/';
+@include generateMaterialIconClasses;
+.DialogDrawer {
+  .Dialog__wrapper {
+    position: fixed;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    width: 25%;
+    max-height: none;
+    border-radius: 0;
+  }
+  .Dialog__button_close {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    background: none;
+    border: none;
+    cursor: pointer;
+    .Icon {
+      font-size: 300%;
+    }
+  }
+  .Dialog__backdrop {
+    background-color: rgba(0, 0, 0, 0.2);
+    -webkit-backdrop-filter: blur(2px);
+    backdrop-filter: blur(2px);
+  }
+}

package/dist/components/Dialog/DialogHookStory/index.js CHANGED Viewed

@@ -1,28 +1,79 @@
+var _excluded = ["forwardRef", "children"],
+  _excluded2 = ["children"];
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
 import useDialog from '../../../hooks/useDialog';
+var Content = function Content() {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "I've been created using the ", /*#__PURE__*/React.createElement("code", null, "useDialog"), " hook.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This hook provides you with:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeDialog"), " - a function to close the dialog")), "The ", /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " has several arguments:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "id"), " - a unique identifier (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "title"), " - a header element, or any element, really (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "children"), " - the dialog's content. Wrapped within the dialog."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseButton"), " - render a close button? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseIcon"), " - render a close icon? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeButtonText"), " - text for the close button (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeIcon"), " - what icon to use. Default 'icon-cross' (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogLabel"), " - a label for a11y - default 'dialog' (optional)")), "Depending on where the dialog is being used, you might need to add a z-index.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This Dialog handles several things for you: Taking focus and keeping it inside and it allows you to close the Dialog by either pressing Escape or clicking outside of it. This is done by several different hooks.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Alternatively, if you need a more custom approach, you can opt to use the ", /*#__PURE__*/React.createElement("code", null, "useDialogHelpers"), " hook instead."));
+};
+var Title = function Title() {
+  return /*#__PURE__*/React.createElement("h2", null, "I'm a Dialog!");
+};
+var WrapperComponent = function WrapperComponent(_ref) {
+  var forwardRef = _ref.forwardRef,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
+    initial: {
+      opacity: 0,
+      y: '100px'
+    },
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    exit: {
+      opacity: 0,
+      y: '100px'
+    },
+    ref: forwardRef
+  }), children);
+};
+var BackdropComponent = function BackdropComponent(_ref2) {
+  var children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement(motion.div, _extends({}, props, {
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    }
+  }), children);
+};
+var uuid = uuidv4();
 export var DialogHookStory = function DialogHookStory(args) {
   var _useDialog = useDialog(),
+    dialogIsOpen = _useDialog.dialogIsOpen,
     openDialog = _useDialog.openDialog,
+    closeDialog = _useDialog.closeDialog,
     DialogComponent = _useDialog.DialogComponent;
-  var uuid = uuidv4();
-  var Content = function Content() {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "I've been created using the ", /*#__PURE__*/React.createElement("code", null, "useDialog"), " hook.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This hook provides you with:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeDialog"), " - a function to close the dialog")), "The ", /*#__PURE__*/React.createElement("code", null, "DialogComponent"), " has several arguments:", /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "id"), " - a unique identifier (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "title"), " - a header element, or any element, really (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "children"), " - the dialog's content. Wrapped within the dialog."), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseButton"), " - render a close button? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "showCloseIcon"), " - render a close icon? (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeButtonText"), " - text for the close button (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "closeIcon"), " - what icon to use. Default 'icon-cross' (optional)"), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("code", null, "dialogLabel"), " - a label for a11y - default 'dialog' (optional)")), "Depending on where the dialog is being used, you might need to add a z-index.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "This Dialog handles several things for you: Taking focus and keeping it inside and it allows you to close the Dialog by either pressing Escape or clicking outside of it. This is done by several different hooks.", /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), "Alternatively, if you need a more custom approach, you can opt to use the ", /*#__PURE__*/React.createElement("code", null, "useDialogHelpers"), " hook instead."));
-  };
-  var title = function title() {
-    return /*#__PURE__*/React.createElement("h2", null, "I'm a Dialog!");
-  };
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: openDialog
-  }, "Open a dialog"), /*#__PURE__*/React.createElement(DialogComponent, _extends({
+  }, "Open a dialog"), /*#__PURE__*/React.createElement(MotionConfig, {
+    transition: {
+      duration: 0.5,
+      ease: 'easeOut'
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, dialogIsOpen && /*#__PURE__*/React.createElement(DialogComponent, _extends({
     id: uuid,
-    title: title,
     showCloseButton: true,
+    dialogIsOpen: dialogIsOpen,
+    closeDialog: closeDialog,
     closeButtonText: "Click here to close me.",
     showCloseIcon: true,
-    closeIcon: "icon-cross"
-  }, args), /*#__PURE__*/React.createElement(Content, null))));
+    closeIcon: "icon-cross",
+    titleComponent: Title,
+    wrapperComponent: WrapperComponent,
+    backdropComponent: BackdropComponent
+  }, args), /*#__PURE__*/React.createElement(Content, null)))));
 };
 export default DialogHookStory;

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

@@ -39,6 +39,16 @@ declare namespace Dialog {
         let disableClosers_1: boolean;
         export { disableClosers_1 as disableClosers };
     }
+    function Wrapper({ forwardRef, children, ...props }: {
+        [x: string]: any;
+        forwardRef: any;
+        children: any;
+    }): React.JSX.Element;
+    function Backdrop({ forwardRef, children, ...props }: {
+        [x: string]: any;
+        forwardRef: any;
+        children: any;
+    }): React.JSX.Element;
 }
 import React from 'react';
 import PropTypes from 'prop-types';

package/dist/components/Dialog/index.js CHANGED Viewed

@@ -1,14 +1,18 @@
+var _excluded = ["forwardRef", "children"],
+  _excluded2 = ["forwardRef", "children"];
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
 import { RemoveScroll } from 'react-remove-scroll';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import useDialogHelpers from '../../hooks/useDialogHelpers';
 import './style.scss';
 var Dialog = function Dialog(props) {
   var id = props.id,
-    title = props.title,
     children = props.children,
     isOpen = props.isOpen,
     closeFunction = props.closeFunction,
@@ -18,10 +22,21 @@ var Dialog = function Dialog(props) {
     closeIcon = props.closeIcon,
     dialogLabel = props.dialogLabel,
     portalTarget = props.portalTarget,
-    disableClosers = props.disableClosers;
+    disableClosers = props.disableClosers,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$titleComponent = props.titleComponent,
+    titleComponent = _props$titleComponent === void 0 ? null : _props$titleComponent,
+    _props$wrapperCompone = props.wrapperComponent,
+    wrapperComponent = _props$wrapperCompone === void 0 ? Dialog.Wrapper : _props$wrapperCompone,
+    _props$backdropCompon = props.backdropComponent,
+    backdropComponent = _props$backdropCompon === void 0 ? Dialog.Wrapper : _props$backdropCompon;
   var wrapper = useRef(null);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var TitleComponent = titleComponent;
+  var WrapperComponent = wrapperComponent;
+  var BackdropComponent = backdropComponent;
   var _useDialogHelpers = useDialogHelpers({
       id: id,
       wrapperElement: wrapper,
@@ -34,18 +49,18 @@ var Dialog = function Dialog(props) {
     dialogId = _useDialogHelpers.id;
   if (!isOpen) return null;
   return /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement("div", {
-    className: "Dialog",
+    className: classnames('Dialog', className),
     id: dialogId
-  }, /*#__PURE__*/React.createElement("div", _extends({
+  }, /*#__PURE__*/React.createElement(WrapperComponent, _extends({
     className: "Dialog__wrapper"
   }, dialogHelpersProps, {
-    ref: wrapper
+    forwardRef: wrapper
   }), /*#__PURE__*/React.createElement("div", {
     id: labelId,
     className: "Dialog__sr-only"
-  }, dialogLabel), title && /*#__PURE__*/React.createElement("div", {
+  }, dialogLabel), TitleComponent && /*#__PURE__*/React.createElement("div", {
     className: "Dialog__title"
-  }, title()), showCloseIcon && /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(TitleComponent, null)), showCloseIcon && /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "Dialog__closeicon",
     "aria-label": t('general.close', 'Close'),
@@ -60,7 +75,7 @@ var Dialog = function Dialog(props) {
     type: "button",
     className: "Dialog__closebutton",
     onClick: closeFunction
-  }, closeButtonText))), /*#__PURE__*/React.createElement("div", {
+  }, closeButtonText))), /*#__PURE__*/React.createElement(BackdropComponent, {
     className: "Dialog__backdrop",
     "aria-label": t('general.close', 'Close')
   })), portalTarget);
@@ -92,4 +107,20 @@ Dialog.defaultProps = {
   portalTarget: typeof document !== 'undefined' ? document.body : null,
   disableClosers: false
 };
+Dialog.Wrapper = function (_ref) {
+  var forwardRef = _ref.forwardRef,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: forwardRef
+  }, props), children);
+};
+Dialog.Backdrop = function (_ref2) {
+  var forwardRef = _ref2.forwardRef,
+    children = _ref2.children,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: forwardRef
+  }, props), children);
+};
 export default Dialog;

package/dist/components/Dialog/style.scss CHANGED Viewed

@@ -50,7 +50,6 @@
     height: 100%;
     position: absolute;
     cursor: pointer;
-    background: black;
-    opacity: 0.7;
+    background-color: var(--Dialog--backdrop-background-color, rgba(0, 0, 0, 0.7));
   }
 }

package/dist/components/Download/index.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ export interface DownloadProps {
     filesize?: number;
     filename?: string;
     mime: string;
-    target?: string;
+    target?: HTMLAnchorElement['target'];
     className?: string;
 }
 declare const Download: React.FC<DownloadProps>;

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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;