diff --git a/gatsby-node.js b/gatsby-node.js index 1a74cc0..e27cf58 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -58,8 +58,18 @@ exports.pluginOptionsSchema = ({ Joi }) => { .default('Enregistrer'), mandatoryLabel: Joi.string() .optional() - .description('mandatoryLabel alert') + .description('mandatoryLabel alert.') .default('obligatoire'), + blockerWarnLabel: Joi.string() + .optional() + .description('Valid acceptance label button in RGPDBlocker Component.') + .default('Accepter'), + blockerWarnMessage: Joi.string() + .optional() + .description('Warning message in RGPDBlocker Component.') + .default( + `Vous n'avez pas accepté les cookies globalement ou celui-ci précisement.
Pour afficher ce contenu, vous devez accepter.` + ), }), cookiesList: Joi.array() .items( diff --git a/index.js b/index.js index 172f1ae..b4af688 100644 --- a/index.js +++ b/index.js @@ -1 +1,5 @@ -// noop +import Banner from './src/components/Banner' +import RGPDBlocker from './src/components/RGPDBlocker' +import { resetAll } from './src/utils/ls' + +export { Banner as RGPDCookieBanner, resetAll, RGPDBlocker } diff --git a/package.json b/package.json index aafe24b..22ff568 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,20 @@ "scripts": { "release": "release-it" }, + "repository": { + "type": "git", + "url": "git+https://github.com/NovaGaia/gatsby-plugin-rgpd-acceptance.git" + }, "keywords": [ "gatsby", - "gatsby-plugin" + "gatsby-plugin","RGPD" ], "author": "Renaud Héluin / NovaGaïa ", "license": "MIT", + "bugs": { + "url": "https://github.com/NovaGaia/gatsby-plugin-rgpd-acceptance/issues" + }, + "homepage": "https://github.com/NovaGaia/gatsby-plugin-rgpd-acceptance#readme", "devDependencies": { "auto-changelog": "^2.4.0", "release-it": "^15.4.2" diff --git a/src/components/Banner.js b/src/components/Banner.js index ed2862c..3fd7a2f 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.js @@ -41,13 +41,12 @@ function InternalBanner({ setChecked({ ...checked, ...updatedValue }) } - console.log('showMiniBanner', showMiniBanner) if (showMiniBanner) { return (
{icon}
-
- {publicDescription} -
+

  • {type}
  • @@ -103,13 +103,13 @@ function InternalBanner({ })} ) : ( -

    +

    )}

    {!displayCookiesList && ( )} {displayCookiesList && ( +
    + ) + } else { + return <>{children} + } +} + +export default RGPDBlocker diff --git a/src/styles/rgpd-acceptance.css b/src/styles/rgpd-acceptance.css index 368ec13..0c69ad1 100644 --- a/src/styles/rgpd-acceptance.css +++ b/src/styles/rgpd-acceptance.css @@ -44,6 +44,8 @@ .rgpd-acceptance-theme .rgpd--icon { font-size: xx-large; + line-height: 2rem; + text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5); } .rgpd-acceptance-theme .rgpd--title { @@ -102,9 +104,86 @@ } .rgpd-acceptance-theme .rgpd--btn { - border: 1px solid red; + border: 2px solid red; border-radius: 0.3rem; font-weight: 500; background-color: white; padding: 0rem 0.4rem; + color: black; +} +.rgpd-acceptance-theme .rgpd--btn:hover { + box-shadow: 0px 10px 5px -6px rgba(0, 0, 0, 0.75); + -webkit-box-shadow: 0px 10px 5px -6px rgba(0, 0, 0, 0.75); + -moz-box-shadow: 0px 10px 5px -6px rgba(0, 0, 0, 0.75); +} + +.rgpd-acceptance-theme .rgpd--btn.all { + background-color: red; + color: white; +} + +.rgpd-acceptance-theme .rgpd--btn.some { + background-color: orange; +} + +.rgpd-acceptance-theme .rgpd--btn.none { + background-color: aqua; + border: 2px solid black; +} + +.rgpd-acceptance-theme .rgpd--btn.choose { + background-color: yellow; + border: 2px solid black; +} + +.rgpd-acceptance-theme .rgpd--btn.save { + background-color: greenyellow; + border: 2px solid black; +} + +.rgpd-acceptance-theme .rgpd--link { + font-weight: 500; + text-decoration: underline; +} + +.rgpd-acceptance-theme .rgpd--link:hover { + text-decoration: none; +} + +.rgpd-acceptance-theme .rgpd--blocker--container { + background-color: gray; + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-around; + padding: 1rem; + gap: 0.5rem; + border-radius: 1rem; + position: relative; +} + +.rgpd-acceptance-theme .rgpd--blocker--container .rgpd--icon { + position: absolute; + top: 1rem; + left: 1rem; +} + +.rgpd-acceptance-theme .rgpd--blocker--title { + color: white; + font-size: x-large; + font-weight: 600; +} + +.rgpd-acceptance-theme .rgpd--blocker--warn-message, +.rgpd-acceptance-theme .rgpd--blocker--cookie-description { + color: white; + text-align: center; +} + +.rgpd-acceptance-theme .rgpd--blocker--cookie-description { + font-weight: 500; +} + +.rgpd-acceptance-theme .rgpd--blocker--warn-message { + font-size: smaller; } diff --git a/src/utils/ls.js b/src/utils/ls.js index f0f3c9b..8be2c17 100644 --- a/src/utils/ls.js +++ b/src/utils/ls.js @@ -77,6 +77,10 @@ function _setItemInLS(key, consent, mandatory) { // Externals functions +/** + * Get acceptance status. + * @returns Boolean + */ function hasValidatedAcceptance() { const dt = _getAcceptanceDate() return dt !== null @@ -162,7 +166,9 @@ function resetAllAcceptanceByDate(cookiesList, cookieDuration) { if (acceptanceDate === 0) return const diff = now - acceptanceDate if (diff > cookieDuration) { - console.info(`Cookies are perimed, reset to ask consent again.`) + console.info( + `The cookies have expired, they have been reset to ask for consent again.` + ) resetAll(cookiesList) } } @@ -205,6 +211,21 @@ function readCookieAcceptance(cookiesList, key) { return output } +/** + * Accept one cookie + * @param {*} key + */ +function simplyAcceptOneCookie(key) { + localStorage.setItem(`rgpd-acceptance_${key}_consent`, true) + _setAcceptanceDate() + _reload() +} +function simplyReadOneCookie(key, mandatory) { + return localStorage.getItem( + `rgpd-acceptance_${key}_${mandatory ? 'mandatory' : 'consent'}` + ) +} + export { acceptAllCookies, acceptNoCookies, @@ -213,4 +234,6 @@ export { resetAllAcceptanceByDate, resetAll, hasValidatedAcceptance, + simplyAcceptOneCookie, + simplyReadOneCookie, }