DIGG 478 Cookie settings link in footer

Author: Alessandro Gasperini

components/global/CookieBanner/index.tsx

@@ -22,11 +22,13 @@ export type CookieProperties = {
   accepted: boolean;
 };
 
-export const CookieBanner: FC = () => {
+export const CookieBanner: FC<{
+  settingsOpen: boolean;
+  setSettingsOpen: Function;
+}> = ({ settingsOpen, setSettingsOpen }) => {
   const { store, set } = useContext(LocalStoreContext);
   const { setActivation } = useContext(TrackingContext);
   const { t, lang } = useTranslation();
-  const [settingsOpen, setSettingsOpen] = useState(false);
 
   const initialCookieSetting: CookieSetting = {
     analytic: {

components/layout/Footer/index.tsx

@@ -8,9 +8,14 @@ import { CustomLink } from "@/components/global/CustomLink";
 type FooterProps = {
   openSideBar: boolean;
   setOpenSideBar: Function;
+  setSettingsOpen: Function;
 };
 
-export const Footer: FC<FooterProps> = ({ openSideBar, setOpenSideBar }) => {
+export const Footer: FC<FooterProps> = ({
+  openSideBar,
+  setOpenSideBar,
+  setSettingsOpen,
+}) => {
   const { t } = useTranslation();
   return (
     <footer className="mt-xl border-t-2 border-brown-600 bg-white py-xl">
@@ -20,7 +25,10 @@ export const Footer: FC<FooterProps> = ({ openSideBar, setOpenSideBar }) => {
         }`}
       >
         <Container className="space-y-xl md:space-y-2xl">
-          <FooterNav setOpenSideBar={setOpenSideBar} />
+          <FooterNav
+            setSettingsOpen={setSettingsOpen}
+            setOpenSideBar={setOpenSideBar}
+          />
           <div className="flex flex-col justify-between gap-xl align-top md:flex-row md:gap-none">
             <div className="mr-lg">
               <span className="font-strong">Sveriges dataportal </span>

components/navigation/FooterNav/index.tsx

@@ -4,11 +4,12 @@ import { Heading } from "@/components/global/Typography/Heading";
 import { footerNav } from "@/utilities/menuData";
 import Link from "next/link";
 import { SettingsContext } from "@/providers/SettingsProvider";
+import { LocalStoreContext } from "@/providers/LocalStoreProvider";
 
 interface FooterNavItem {
   title: string;
-  icon: any;
-  type?: "internal" | "external" | "email";
+  icon?: any;
+  type?: "internal" | "external" | "email" | "cookie";
   href?: string;
 }
 
@@ -19,11 +20,16 @@ interface FooterNavData {
 
 interface FooterNavProps {
   setOpenSideBar: Function;
+  setSettingsOpen: Function;
 }
 
-export const FooterNav: FC<FooterNavProps> = ({ setOpenSideBar }) => {
+export const FooterNav: FC<FooterNavProps> = ({
+  setOpenSideBar,
+  setSettingsOpen,
+}) => {
   const { t } = useTranslation();
   const { iconSize } = useContext(SettingsContext);
+  const { set } = useContext(LocalStoreContext);
 
   return (
     <nav
@@ -49,13 +55,25 @@ export const FooterNav: FC<FooterNavProps> = ({ setOpenSideBar }) => {
                     {link.type === "external"
                       ? t(`common|${link.title}`)
                       : link.title}
-                    <link.icon
-                      className="mb-[2px] ml-xs inline-block [&_path]:fill-green-600"
-                      width={iconSize}
-                      height={iconSize}
-                      viewBox="0 0 24 24"
-                    />
+                    {link.icon && (
+                      <link.icon
+                        className="mb-[2px] ml-xs inline-block [&_path]:fill-green-600"
+                        width={iconSize}
+                        height={iconSize}
+                        viewBox="0 0 24 24"
+                      />
+                    )}
                   </Link>
+                ) : link.type === "cookie" ? (
+                  <button
+                    onClick={() => {
+                      set({ cookieSettings: {} });
+                      setSettingsOpen(true);
+                    }}
+                    className="cursor-pointer underline underline-offset-4 hover:no-underline"
+                  >
+                    {t(`common|${link.title}`)}
+                  </button>
                 ) : (
                   <Link
                     href={`/${t(`routes|${link.title}$path`)}`}

locales/en/common.json

@@ -90,6 +90,7 @@
   "lang-path": "/en",
   "dataportal": "The Swedish dataportal",
   "github": "Open source on GitHub",
+  "cookie-settings": "Cookie settings",
   "feedback": "Feedback on dataportal.se",
   "toolbox-share-data": "Toolbox for sharing data",
   "documentation-services": "Documentation och services - Sweden's dataportal",

locales/sv/common.json

@@ -90,6 +90,7 @@
   "training": "Utbildning för chefer och ledare",
   "lang-path": "/sv",
   "github": "Öppen källkod på GitHub",
+  "cookie-settings": "Cookie-inställningar",
   "feedback": "Feedback på dataportal.se",
   "toolbox-share-data": "Verktygslåda för att dela data",
   "documentation-services": "Dokumentation och tjänster - Sveriges dataportal",

pages/_app.tsx

@@ -72,6 +72,7 @@ function Dataportal({ Component, pageProps }: DataportalenProps) {
   const { t, lang } = useTranslation();
   // Put shared props into state to persist between pages that doesn't use getStaticProps
   const [env, setEnv] = useState<EnvSettings>(SettingsUtil.create());
+  const [settingsOpen, setSettingsOpen] = useState(false);
   const [matomoActivated, setMatomoActivated] = useState<boolean>(true);
   const [openSideBar, setOpenSideBar] = useState(false);
   const { seo, heading, heroImage, preamble } = resolvePage(
@@ -140,7 +141,10 @@ function Dataportal({ Component, pageProps }: DataportalenProps) {
           >
             <MetaData seo={seo} />
             <div id="scriptsPlaceholder" />
-            <CookieBanner />
+            <CookieBanner
+              settingsOpen={settingsOpen}
+              setSettingsOpen={setSettingsOpen}
+            />
             <div
               id="top"
               className={`relative h-[100dvh] md:h-full ${
@@ -192,6 +196,7 @@ function Dataportal({ Component, pageProps }: DataportalenProps) {
                 </main>
               </div>
               <Footer
+                setSettingsOpen={setSettingsOpen}
                 setOpenSideBar={setOpenSideBar}
                 openSideBar={openSideBar}
               />

utilities/menuData.ts

@@ -35,8 +35,8 @@ interface NavTopData {
 
 interface NavFooterItem {
   title: string;
-  icon: any;
-  type?: "internal" | "external" | "email";
+  icon?: any;
+  type?: "internal" | "external" | "email" | "cookie";
   href?: string;
 }
 
@@ -187,6 +187,10 @@ const footerNav: NavFooterData[] = [
         type: "external",
         icon: externalLinkIcon,
       },
+      {
+        title: "cookie-settings",
+        type: "cookie",
+      },
       {
         title: "info@digg.se",
         href: "mailto:info@digg.se",