Add container in params

NovaGaia · Sep 21, 2022 · a35a19e · a35a19e
1 parent d06dd56
commit a35a19e
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 36 deletions.
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -23,7 +23,9 @@ export const wrapRootElement = ({ element }, pluginOptions) => (
   <>
     {element}
     <div className="rgpd--container">
-      {pluginOptions?.useInternalComponent && <Banner automaticlyInclude />}
+      {pluginOptions?.useInternalComponent && (
+        <Banner automaticlyInclude asAContainer />
+      )}
     </div>
   </>
 )
diff --git 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 (
-    <div
-      className={`rgpd--banner${
-        automaticlyInclude ? ' automaticly-include' : ''
-      }`}
-    >
+    <div className={`rgpd--banner`}>
       <div className="rgpd--header">
-        <div className="rgpd--icon">{_icon}</div>
-        <div className="rgpd--title">{_titleBanner}</div>
+        <div className="rgpd--icon">{icon}</div>
+        <div className="rgpd--title">{titleBanner}</div>
       </div>
       <div className="rgpd--content">
         {displayCookiesList ? (
@@ -82,7 +61,7 @@ function Banner({
                       {mandatory && (
                         <span className="rgpd--cookie-mandatory">
                           {' '}
-                          ({_mandatoryLabel})
+                          ({mandatoryLabel})
                         </span>
                       )}
                     </div>
@@ -107,7 +86,7 @@ function Banner({
             })}
           </div>
         ) : (
-          <p dangerouslySetInnerHTML={{ __html: _descriptionBanner }}></p>
+          <p dangerouslySetInnerHTML={{ __html: descriptionBanner }}></p>
         )}
       </div>
       <div className="rgpd--footer">
@@ -118,7 +97,7 @@ function Banner({
               setDisplayCookiesList(!displayCookiesList)
             }}
           >
-            {_chooseLabel}
+            {chooseLabel}
           </button>
         )}
         <button
@@ -127,15 +106,15 @@ function Banner({
             acceptAllCookies(cookiesList)
           }}
         >
-          {_acceptAllLabel}
+          {acceptAllLabel}
         </button>
         <button
           className="rgpd--btn"
           onClick={() => {
             acceptNoCookies(cookiesList)
           }}
         >
-          {_rejectAllLabel}
+          {rejectAllLabel}
         </button>
         {displayCookiesList && (
           <button
@@ -144,12 +123,86 @@ function Banner({
               acceptSomeCookies(cookiesList, checked)
             }}
           >
-            {_saveLabel}
+            {saveLabel}
           </button>
         )}
       </div>
     </div>
   )
 }
 
+/**
+ *
+ * @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 (
+      <div className="rgpd--container">
+        <InternalBanner
+          icon={_icon}
+          titleBanner={_titleBanner}
+          descriptionBanner={_descriptionBanner}
+          acceptAllLabel={_acceptAllLabel}
+          chooseLabel={_chooseLabel}
+          rejectAllLabel={_rejectAllLabel}
+          saveLabel={_saveLabel}
+          mandatoryLabel={_mandatoryLabel}
+          cookiesList={cookiesList}
+        />
+      </div>
+    )
+  } else {
+    return (
+      <InternalBanner
+        icon={_icon}
+        titleBanner={_titleBanner}
+        descriptionBanner={_descriptionBanner}
+        acceptAllLabel={_acceptAllLabel}
+        chooseLabel={_chooseLabel}
+        rejectAllLabel={_rejectAllLabel}
+        saveLabel={_saveLabel}
+        mandatoryLabel={_mandatoryLabel}
+      />
+    )
+  }
+}
+
 export default Banner
diff --git 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);
 }