@micromag/consent 0.3.705 → 0.3.706

package/assets/css/styles.css

@@ -1,5 +1,5 @@
 .micromag-consent-buttons-close-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}
-.micromag-consent-buttons-pill-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border:1px solid #fff;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;padding:6px 10px;position:relative}.micromag-consent-buttons-pill-container:active,.micromag-consent-buttons-pill-container:hover{background-color:#0b57d0;background-color:var(--color-primary,#0b57d0);color:#fff}
-.micromag-consent-fields-checkbox-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;line-height:1.2}.micromag-consent-fields-checkbox-container .micromag-consent-fields-checkbox-check{margin-right:6px}.micromag-consent-fields-checkbox-container .micromag-consent-fields-checkbox-input{accent-color:#0b57d0;accent-color:var(--color-primary,#0b57d0);cursor:pointer;display:block;height:1rem;margin:0 0 5px;width:1rem}.micromag-consent-fields-checkbox-container .micromag-consent-fields-checkbox-label{-ms-flex-positive:1;cursor:pointer;flex-grow:1;font-weight:800}.micromag-consent-fields-checkbox-container:active .micromag-consent-fields-checkbox-label,.micromag-consent-fields-checkbox-container:hover .micromag-consent-fields-checkbox-label{-webkit-text-decoration:underline;text-decoration:underline}
-.micromag-consent-forms-cookies-container{max-height:calc(100vh - 20px);overflow-y:scroll;padding:15px;position:relative}.micromag-consent-forms-cookies-container .micromag-consent-forms-cookies-description,.micromag-consent-forms-cookies-container .micromag-consent-forms-cookies-title{margin-bottom:1rem}.micromag-consent-forms-cookies-container .micromag-consent-forms-cookies-button{border-radius:10px;font-weight:700;margin:0 5px 5px 0}
+.micromag-consent-buttons-pill-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border:1px solid #fff;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;line-height:1.2;padding:0;padding:8px 12px;position:relative}.micromag-consent-buttons-pill-container:active,.micromag-consent-buttons-pill-container:hover{background-color:#0b57d0;background-color:var(--color-primary,#0b57d0);color:#fff}
+.micromag-consent-fields-checkbox-container{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:start;align-items:flex-start;line-height:1.2}.micromag-consent-fields-checkbox-container .micromag-consent-fields-checkbox-check{margin-right:6px}.micromag-consent-fields-checkbox-container .micromag-consent-fields-checkbox-input{accent-color:#0b57d0;accent-color:var(--color-primary,#0b57d0);cursor:pointer;display:block;height:1rem;margin:0 0 5px;width:1rem}.micromag-consent-fields-checkbox-container .micromag-consent-fields-checkbox-label{-ms-flex-positive:1;cursor:pointer;flex-grow:1;font-weight:700;line-height:1}.micromag-consent-fields-checkbox-container:active .micromag-consent-fields-checkbox-label,.micromag-consent-fields-checkbox-container:hover .micromag-consent-fields-checkbox-label{-webkit-text-decoration:underline;text-decoration:underline}
+.micromag-consent-forms-cookies-container{max-height:calc(100vh - 20px);overflow-y:scroll;padding:15px;position:relative}.micromag-consent-forms-cookies-container .micromag-consent-forms-cookies-description,.micromag-consent-forms-cookies-container .micromag-consent-forms-cookies-label,.micromag-consent-forms-cookies-container .micromag-consent-forms-cookies-title{margin-bottom:1rem}.micromag-consent-forms-cookies-container .micromag-consent-forms-cookies-button{border-radius:10px;font-weight:700;margin:0 5px 5px 0}
 .micromag-consent-container{background-color:#000;background-color:var(--color-background,#000);border-radius:10px;color:#fff;color:var(--color-text,#fff);max-width:800px;position:relative}.micromag-consent-container .micromag-consent-close{color:#fff;color:var(--color-primary,#fff);cursor:pointer;font-size:1.5rem;position:absolute;right:15px;top:10px;z-index:10}

package/es/index.js

@@ -1,17 +1,17 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React, { useMemo, useState, useCallback, useRef, useInsertionEffect } from 'react';
+import React, { useCallback, useRef, useInsertionEffect, useState } from 'react';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Button } from '@micromag/core/components';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import isString from 'lodash/isString';
-import { defineMessages, FormattedMessage } from 'react-intl';
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { FormattedMessage } from 'react-intl';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import JSCookie from 'js-cookie';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import { useConsent } from '@micromag/core/contexts';
 
 var styles$4 = {"container":"micromag-consent-buttons-close-container"};
 
@@ -38,147 +38,8 @@ var CloseButton = function CloseButton(_ref) {
 CloseButton.propTypes = propTypes$5;
 CloseButton.defaultProps = defaultProps$5;
 
-var messages = defineMessages({
-  functionality_title: {
-    id: "consent.functionality_title",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Functionnal"
-    }]
-  },
-  functionality_description: {
-    id: "consent.functionality_description",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cookies required for the site to function properly."
-    }]
-  },
-  analytics_title: {
-    id: "consent.analytics_title",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Analytics"
-    }]
-  },
-  analytics_description: {
-    id: "consent.analytics_description",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cookies used to measure user behavior."
-    }]
-  },
-  ad_storage_title: {
-    id: "consent.ad_storage_title",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Ad Storage"
-    }]
-  },
-  ad_storage_description: {
-    id: "consent.ad_storage_description",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cookies used for advertising purposes."
-    }]
-  },
-  ad_personalization_title: {
-    id: "consent.ad_personalization_title",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Ad Personalization"
-    }]
-  },
-  ad_personalization_description: {
-    id: "consent.ad_personalization_description",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cookies used for ad targeting."
-    }]
-  },
-  ad_user_data_title: {
-    id: "consent.ad_user_data_title",
-    defaultMessage: [{
-      "type": 0,
-      "value": "User Ad Data"
-    }]
-  },
-  ad_user_data_description: {
-    id: "consent.ad_user_data_description",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cookies used for user-specific ad data."
-    }]
-  },
-  personalization_storage_title: {
-    id: "consent.personalization_storage_title",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Personalization Storage"
-    }]
-  },
-  personalization_storage_description: {
-    id: "consent.personalization_storage_description",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cookies used for personalizing user experience."
-    }]
-  },
-  security_storage_title: {
-    id: "consent.security_storage_title",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Security Storage"
-    }]
-  },
-  security_storage_description: {
-    id: "consent.security_storage_description",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Cookies used for security purposes."
-    }]
-  }
-});
-var consent = [{
-  id: 'functionality_storage',
-  label: messages.functionality_title,
-  description: messages.functionality_description,
-  value: true,
-  disabled: true
-}, {
-  id: 'security_storage',
-  label: messages.security_storage_title,
-  description: messages.security_storage_description,
-  value: true
-}, {
-  id: 'personalization_storage',
-  label: messages.personalization_storage_title,
-  description: messages.personalization_storage_description,
-  value: true
-}, {
-  id: 'analytics_storage',
-  label: messages.analytics_title,
-  description: messages.analytics_description,
-  value: true
-}, {
-  id: 'ad_storage',
-  label: messages.ad_storage_title,
-  description: messages.ad_storage_description,
-  value: true
-}, {
-  id: 'ad_personalization',
-  label: messages.ad_personalization_title,
-  description: messages.ad_personalization_description,
-  value: true
-}, {
-  id: 'ad_user_data',
-  label: messages.ad_user_data_title,
-  description: messages.ad_user_data_description,
-  value: true
-}];
-var useConsent = function useConsent(_ref) {
-  var _ref$consent = _ref.consent,
-    initialConsent = _ref$consent === void 0 ? null : _ref$consent,
-    _ref$onSubmit = _ref.onSubmit,
+var useConsentActions = function useConsentActions(_ref) {
+  var _ref$onSubmit = _ref.onSubmit,
     onSubmit = _ref$onSubmit === void 0 ? null : _ref$onSubmit,
     _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? null : _ref$onChange,
@@ -186,33 +47,12 @@ var useConsent = function useConsent(_ref) {
     onClose = _ref$onClose === void 0 ? null : _ref$onClose,
     _ref$autoClose = _ref.autoClose,
     autoClose = _ref$autoClose === void 0 ? true : _ref$autoClose;
-  var baseConsent = useMemo(function () {
-    return (initialConsent || consent).map(function (item) {
-      if (isString(item)) {
-        return consent.find(function (it) {
-          return it.id === item;
-        }) || null;
-      }
-      return item || null;
-    }).filter(function (it) {
-      return it !== null;
-    }).map(function (it) {
-      return _objectSpread(_objectSpread({}, it), {}, {
-        value:
-        // eslint-disable-next-line no-nested-ternary
-        JSCookie.get(it.id) === 'granted' ? true : JSCookie.get(it.id) === 'denied' ? false : it.value
-      });
-    });
-  }, [initialConsent]);
-  var _useState = useState(baseConsent),
-    _useState2 = _slicedToArray(_useState, 2),
-    choices = _useState2[0],
-    setChoices = _useState2[1];
-  var onSubmitForm = useCallback(function (values) {
-    JSCookie.set('popup_cookies', false, {
-      secure: true,
-      expires: 182
-    });
+  var _useConsent = useConsent(),
+    consent = _useConsent.consent,
+    setConsent = _useConsent.setConsent;
+  var onSubmitForm = useCallback(function () {
+    var values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    setConsent(values);
     if (onSubmit !== null) {
       onSubmit(values || []);
     }
@@ -221,7 +61,7 @@ var useConsent = function useConsent(_ref) {
     }
   }, [onSubmit, onClose, autoClose]);
   var onClickChoice = useCallback(function (id, newValue) {
-    var newChoices = (choices || []).reduce(function (acc, it) {
+    var newChoices = (consent || []).reduce(function (acc, it) {
       if (it.id === id) {
         return [].concat(_toConsumableArray(acc), [_objectSpread(_objectSpread({}, it), {}, {
           value: newValue
@@ -229,34 +69,32 @@ var useConsent = function useConsent(_ref) {
       }
       return [].concat(_toConsumableArray(acc), [it]);
     }, []);
-    setChoices(newChoices);
+    setConsent(newChoices);
     if (onChange !== null) {
       onChange(newChoices || []);
     }
-  }, [choices, setChoices]);
+  }, [consent, setConsent, onChange]);
   var onClickConfirm = useCallback(function () {
-    onSubmitForm(choices);
-  }, [choices, onSubmitForm]);
+    onSubmitForm(consent);
+  }, [consent, onSubmitForm]);
   var onClickAccept = useCallback(function () {
-    var items = baseConsent.map(function (it) {
+    var items = (consent || []).map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
         value: !it.disabled ? true : it.value
       });
     });
-    setChoices(items);
     onSubmitForm(items);
-  }, [baseConsent, setChoices, onSubmitForm]);
+  }, [onSubmitForm]);
   var onClickDeny = useCallback(function () {
-    var items = baseConsent.map(function (it) {
+    var items = (consent || []).map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
         value: !it.disabled ? false : it.value
       });
     });
-    setChoices(items);
     onSubmitForm(items);
-  }, [baseConsent, setChoices, onSubmitForm]);
+  }, [onSubmitForm]);
   return {
-    choices: choices,
+    consent: consent,
     onClickChoice: onClickChoice,
     onClickConfirm: onClickConfirm,
     onClickAccept: onClickAccept,
@@ -449,11 +287,10 @@ var LinkPartial = function LinkPartial(_ref) {
 LinkPartial.propTypes = propTypes$2;
 LinkPartial.defaultProps = defaultProps$2;
 
-var styles$1 = {"container":"micromag-consent-forms-cookies-container","title":"micromag-consent-forms-cookies-title","description":"micromag-consent-forms-cookies-description","button":"micromag-consent-forms-cookies-button"};
+var styles$1 = {"container":"micromag-consent-forms-cookies-container","title":"micromag-consent-forms-cookies-title","description":"micromag-consent-forms-cookies-description","label":"micromag-consent-forms-cookies-label","button":"micromag-consent-forms-cookies-button"};
 
-var _excluded = ["consent", "onChange", "onSubmit", "onClose", "onClickLink", "urls", "labels", "className"];
+var _excluded = ["onChange", "onSubmit", "onClose", "onClickLink", "urls", "labels", "className"];
 var propTypes$1 = {
-  consent: PropTypes.shape({}),
   urls: PropTypes.shape({
     privacy: PropTypes.string
   }),
@@ -469,7 +306,6 @@ var propTypes$1 = {
   className: PropTypes.string
 };
 var defaultProps$1 = {
-  consent: null,
   urls: null,
   labels: null,
   onChange: null,
@@ -479,8 +315,7 @@ var defaultProps$1 = {
   className: null
 };
 var Cookies = function Cookies(_ref) {
-  var consent = _ref.consent,
-    onChange = _ref.onChange,
+  var onChange = _ref.onChange,
     onSubmit = _ref.onSubmit,
     onClose = _ref.onClose,
     onClickLink = _ref.onClickLink,
@@ -488,13 +323,12 @@ var Cookies = function Cookies(_ref) {
     labels = _ref.labels,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  var _useConsent = useConsent({
-      consent: consent,
+  var _useConsent = useConsentActions({
       onChange: onChange,
       onSubmit: onSubmit,
       onClose: onClose
     }),
-    choices = _useConsent.choices,
+    choices = _useConsent.consent,
     onClickChoice = _useConsent.onClickChoice,
     onClickConfirm = _useConsent.onClickConfirm,
     onClickAccept = _useConsent.onClickAccept,
@@ -550,7 +384,7 @@ var Cookies = function Cookies(_ref) {
       "type": 0,
       "value": "We use cookies to improve your experience on our site and for marketing purposes. By accepting, you consent to the use of these cookies."
     }]
-  }))), showChoices ? choices.map(function (_ref5) {
+  }))), showChoices ? (choices || []).map(function (_ref5) {
     var _ref5$id = _ref5.id,
       id = _ref5$id === void 0 ? null : _ref5$id,
       _ref5$label = _ref5.label,
@@ -574,7 +408,7 @@ var Cookies = function Cookies(_ref) {
         return onClickChoice(id, !value);
       }
     })), /*#__PURE__*/React.createElement("p", {
-      className: styles$1.itemDescription
+      className: styles$1.label
     }, isString(choiceDescription) ? choiceDescription : /*#__PURE__*/React.createElement(FormattedMessage, choiceDescription)));
   }) : null, privacyUrl !== null ? /*#__PURE__*/React.createElement("div", {
     className: styles$1.more
@@ -656,7 +490,6 @@ Cookies.defaultProps = defaultProps$1;
 var styles = {"container":"micromag-consent-container","close":"micromag-consent-close"};
 
 var propTypes = {
-  consent: PropTypes.arrayOf(PropTypes.string),
   urls: PropTypes.shape({
     privacy: PropTypes.string,
     terms: PropTypes.string
@@ -675,7 +508,6 @@ var propTypes = {
   children: PropTypes.node
 };
 var defaultProps = {
-  consent: ['functionality_storage', 'analytics_storage', 'ad_storage', 'ad_personalization', 'ad_user_data'],
   urls: null,
   labels: null,
   onChange: null,
@@ -686,8 +518,7 @@ var defaultProps = {
   children: null
 };
 function Consent(_ref) {
-  var consent = _ref.consent,
-    urls = _ref.urls,
+  var urls = _ref.urls,
     labels = _ref.labels,
     onChange = _ref.onChange,
     onSubmit = _ref.onSubmit,
@@ -704,7 +535,6 @@ function Consent(_ref) {
     "aria-label": "Close consent form"
   }) : null, children, /*#__PURE__*/React.createElement(Cookies, {
     className: styles.form,
-    consent: consent,
     urls: urls,
     labels: labels,
     onChange: onChange,
@@ -715,4 +545,4 @@ function Consent(_ref) {
 Consent.propTypes = propTypes;
 Consent.defaultProps = defaultProps;
 
-export { Consent as default };
+export { Consent as default, useConsentActions as useConsent };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/consent",
-    "version": "0.3.705",
+    "version": "0.3.706",
     "private": false,
     "description": "",
     "keywords": [
@@ -63,11 +63,10 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.703",
-        "@micromag/data": "^0.3.703",
+        "@micromag/core": "^0.3.706",
+        "@micromag/data": "^0.3.706",
         "bootstrap": "^5.3.7",
         "classnames": "^2.2.6",
-        "js-cookie": "^3.0.5",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
         "react-intl": "^6.6.4",
@@ -77,5 +76,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "e60264096c29617d1ffcd78a4af8d7c55e2df6d2"
+    "gitHead": "1797e88940f701824f9b047784d8f5a872b6a790"
 }