diff --git a/gatsby-browser.js b/gatsby-browser.js index f675c3f..3e832ab 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -23,7 +23,9 @@ export const wrapRootElement = ({ element }, pluginOptions) => ( <> {element}
- {pluginOptions?.useInternalComponent && } + {pluginOptions?.useInternalComponent && ( + + )}
) diff --git a/src/components/Banner.js b/src/components/Banner.js index 127924b..a3b538d 100644 --- a/src/components/Banner.js +++ b/src/components/Banner.js @@ -7,7 +7,7 @@ import { } from '../utils/ls' import { graphql, useStaticQuery } from 'gatsby' -function Banner({ +function InternalBanner({ icon, titleBanner, descriptionBanner, @@ -16,26 +16,9 @@ function Banner({ rejectAllLabel, saveLabel, mandatoryLabel, - automaticlyInclude = false, + cookiesList, + automaticlyInclude, }) { - const data = useStaticQuery(graphql` - query { - sitePlugin(name: { eq: "gatsby-plugin-rgpd-acceptance" }) { - pluginOptions - } - } - `) - const { labels: confLabels, cookiesList } = data.sitePlugin.pluginOptions - - const _icon = icon || confLabels.icon - const _titleBanner = titleBanner || confLabels.titleBanner - const _descriptionBanner = descriptionBanner || confLabels.descriptionBanner - const _acceptAllLabel = acceptAllLabel || confLabels.acceptAllLabel - const _chooseLabel = chooseLabel || confLabels.chooseLabel - const _rejectAllLabel = rejectAllLabel || confLabels.rejectAllLabel - const _saveLabel = saveLabel || confLabels.saveLabel - const _mandatoryLabel = mandatoryLabel || confLabels.mandatoryLabel - function tempChecked() { const output = {} cookiesList?.forEach(cookie => { @@ -58,14 +41,10 @@ function Banner({ } return ( -
+
-
{_icon}
-
{_titleBanner}
+
{icon}
+
{titleBanner}
{displayCookiesList ? ( @@ -82,7 +61,7 @@ function Banner({ {mandatory && ( {' '} - ({_mandatoryLabel}) + ({mandatoryLabel}) )}
@@ -107,7 +86,7 @@ function Banner({ })}
) : ( -

+

)}
@@ -118,7 +97,7 @@ function Banner({ setDisplayCookiesList(!displayCookiesList) }} > - {_chooseLabel} + {chooseLabel} )} {displayCookiesList && ( )}
@@ -152,4 +131,78 @@ function Banner({ ) } +/** + * + * @param {*} icon `String` Emoji Override plugin or config label (eg. for i18n). + * @param {*} titleBanner `String` Override plugin or config label (eg. for i18n). + * @param {*} descriptionBanner `String` Override plugin or config label (eg. for i18n). + * @param {*} acceptAllLabel `String` Override plugin or config label (eg. for i18n). + * @param {*} chooseLabel `String` Override plugin or config label (eg. for i18n). + * @param {*} rejectAllLabel `String` Override plugin or config label (eg. for i18n). + * @param {*} saveLabel `String` Override plugin or config label (eg. for i18n). + * @param {*} mandatoryLabel `String` Override plugin or config label (eg. for i18n). + * @param {*} asAContainer `Boolean` Add a container with `rgpd--container` classname. + * @returns + */ +function Banner({ + icon, + titleBanner, + descriptionBanner, + acceptAllLabel, + chooseLabel, + rejectAllLabel, + saveLabel, + mandatoryLabel, + asAContainer = false, +}) { + const data = useStaticQuery(graphql` + query { + sitePlugin(name: { eq: "gatsby-plugin-rgpd-acceptance" }) { + pluginOptions + } + } + `) + const { labels: confLabels, cookiesList } = data.sitePlugin.pluginOptions + + const _icon = icon || confLabels.icon + const _titleBanner = titleBanner || confLabels.titleBanner + const _descriptionBanner = descriptionBanner || confLabels.descriptionBanner + const _acceptAllLabel = acceptAllLabel || confLabels.acceptAllLabel + const _chooseLabel = chooseLabel || confLabels.chooseLabel + const _rejectAllLabel = rejectAllLabel || confLabels.rejectAllLabel + const _saveLabel = saveLabel || confLabels.saveLabel + const _mandatoryLabel = mandatoryLabel || confLabels.mandatoryLabel + + if (asAContainer) { + return ( +
+ +
+ ) + } else { + return ( + + ) + } +} + export default Banner diff --git a/src/styles/rgpd-acceptance.css b/src/styles/rgpd-acceptance.css index a7f56ca..f2801e1 100644 --- a/src/styles/rgpd-acceptance.css +++ b/src/styles/rgpd-acceptance.css @@ -11,6 +11,7 @@ } .rgpd-acceptance-theme .rgpd--banner { + visibility: visible; padding: 1rem; display: flex; flex-direction: column; @@ -23,8 +24,7 @@ -moz-box-shadow: 0px 13px 11px -5px rgba(0, 0, 0, 0.75); } -.rgpd-acceptance-theme .rgpd--banner.automaticly-include { - visibility: visible; +.rgpd-acceptance-theme .rgpd--container .rgpd--banner { margin-left: var(--decol); }