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);
}