cookies component

index.d.ts

@@ -48,12 +48,14 @@ export function Card(props: CardProps): JSX.Element;
 interface Icookies {
   location?: string,
   buttonText?: string,
+  declineButtonText?: String,
   cookieName?: string,
   expires?: number,
-  styles: any,
-  buttonStyles: any
+  styles: {},
+  buttonStyles: {},
+  declineButtonStyle: {}
 }
-export function Cookies(props: Icookies): JSX.Element;
+export function CookiesComponent(props: Icookies): JSX.Element;
 
 interface BadgeProps {
   children?: React.ReactNode;

index.js

@@ -31,4 +31,4 @@ export { default as Menu } from "./src/components/core/Menu";
 // Menu components
 export { default as MenuMobile } from "./src/components/core/MenuMobile";
 // Cookies components
-export { default as Cookies } from "./src/components/core/Cookies";
+export { default as CookiesComponent } from "./src/components/core/CookiesComponent";

src/components/core/Cookies.tsx → src/components/core/CookiesComponent.tsx

 import React from "react";
 // import {CookieNotice} from "gatsby-cookie-notice";
-import CookieConsent from "react-cookie-consent";
+import CookieConsent, { Cookies } from "react-cookie-consent";
 
 interface Icookies {
     location?: string,
     buttonText?: string,
+    declineButtonText: String,
     cookieName?: string,
     expires?: number,
-    styles: any,
-    buttonStyles: any
+    styles: {},
+    buttonStyles: {},
+    declineButtonStyle: {}
 }
 
-const Cookies = (props: Icookies) => {
-  const {location="bottom",buttonText="Accept", buttonStyles, cookieName="gatsby-gdpr-google-analytics", expires=365, styles} = props;
+const CookiesComponent = (props: Icookies) => {
+  const {
+    location="bottom",
+    buttonText="Accept",
+    declineButtonText="Decline", 
+    buttonStyles, 
+    cookieName="gatsby-gdpr-google-analytics", 
+    expires=365, 
+    styles,
+    declineButtonStyle
+  } = props;
   return (
     <CookieConsent
       location={location}
       buttonText={buttonText}
-      declineButtonText="Decline"
+      declineButtonText={declineButtonText}
       cookieName={cookieName}
       style={styles}
       buttonStyle={buttonStyles}
+      declineButtonStyle={declineButtonStyle}
       expires={expires}
+      enableDeclineButton
+      onDecline={() => {
+        alert("remove cookie here!");
+        Cookies.remove("tagManagerCookieName")
+      }}
     >
-      Notre site utilise des cookies pour garantir son bon fonctionnement et optimiser ses performances techniques, ...
+      Nous nous soucions de vos données personnelles et utilisons des cookies afin d’améliorer votre expérience.
     </CookieConsent>
   );
 };
 
-export default Cookies;
+export default CookiesComponent;

src/pages-doc/doc/core/cookies.tsx

 import React from 'react'
 import { Content } from "@onegeo/gatsby-theme-onegeo";
-import { Cookies } from "@onegeo/gatsby-theme-onegeo";
+import { CookiesComponent } from "@onegeo/gatsby-theme-onegeo";
 import { Link } from "gatsby";
 
 
@@ -30,7 +30,7 @@ const cookies = () => {
       <h2>Example</h2>
     </div>
     <div className="flex gap-6 m-4">
-        <Cookies buttonStyles={ {color: "#4e503b", fontSize: "13px"} } styles={{ background: "#2B373B" }}/>
+        <CookiesComponent declineButtonStyle={{color: "#4e503b", fontSize: "13px"}} buttonStyles={ {color: "#4e503b", fontSize: "13px"} } styles={{ background: "#2B373B" }}/>
     </div>
   </Content>
   )