From 8e6d25100da1404fe3e6fa0609ec2ab46cba4337 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Thu, 19 Dec 2024 12:24:16 +0100
Subject: [PATCH] Let Footer set its own background colour

This allows us to remove the blue option from Spotlight, which should not be used.
---
 packages/css/src/components/footer/README.md             | 8 ++++----
 packages/css/src/components/footer/footer.scss           | 8 ++++++++
 packages/css/src/components/index.scss                   | 1 +
 packages/react/src/Footer/FooterTop.tsx                  | 5 ++---
 proprietary/tokens/src/components/ams/footer.tokens.json | 9 +++++++++
 5 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 packages/css/src/components/footer/footer.scss
 create mode 100644 proprietary/tokens/src/components/ams/footer.tokens.json

diff --git a/packages/css/src/components/footer/README.md b/packages/css/src/components/footer/README.md
index 48972e7fe1..39f922c7a9 100644
--- a/packages/css/src/components/footer/README.md
+++ b/packages/css/src/components/footer/README.md
@@ -6,17 +6,17 @@ Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The Footer consists of a dark blue [Spotlight](/docs/components-containers-spotlight--docs) and a [Page Menu](/docs/components-navigation-page-menu--docs).
+- The Footer consists of two sections: a full-width blue area and a [Page Menu](/docs/components-navigation-page-menu--docs) below it.
   It must be used on all websites for the City of Amsterdam.
-- For applications, only the Page Menu can be sufficient.
 - The Footer is the same on every page of the application.
+- For applications, only the Page Menu can be sufficient.
 
-The Spotlight offers space for various practical links:
+The top section offers space for various practical links:
 
 - The first column focuses on contact information.
   The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
 - The second column contains links to relevant (online) sites or sources.
 - The third column refers to newsletters, social media, etc.
 
-The menu at the very bottom is intended for links to privacy policies, cookie statements, information about the website itself, etc.
+The menu in the bottom section is for links to privacy policies, cookie statements, information about the website itself, etc.
 Contact details should not go here.
diff --git a/packages/css/src/components/footer/footer.scss b/packages/css/src/components/footer/footer.scss
new file mode 100644
index 0000000000..26af54fcb4
--- /dev/null
+++ b/packages/css/src/components/footer/footer.scss
@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-footer__top {
+  background-color: var(--ams-footer-top-background-color);
+}
diff --git a/packages/css/src/components/index.scss b/packages/css/src/components/index.scss
index f8417eaa30..4c99465388 100644
--- a/packages/css/src/components/index.scss
+++ b/packages/css/src/components/index.scss
@@ -4,6 +4,7 @@
  */
 
 /* Append here */
+@use "footer/footer";
 @use "file-list/file-list";
 @use "action-group/action-group";
 @use "breakout/breakout";
diff --git a/packages/react/src/Footer/FooterTop.tsx b/packages/react/src/Footer/FooterTop.tsx
index d7dcf052e1..4541e1c531 100644
--- a/packages/react/src/Footer/FooterTop.tsx
+++ b/packages/react/src/Footer/FooterTop.tsx
@@ -6,15 +6,14 @@
 import clsx from 'clsx'
 import { forwardRef } from 'react'
 import type { ForwardedRef, HTMLAttributes, PropsWithChildren } from 'react'
-import { Spotlight } from '../Spotlight/Spotlight'
 
 export type FooterTopProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>
 
 export const FooterTop = forwardRef(
   ({ children, className, ...restProps }: FooterTopProps, ref: ForwardedRef<HTMLDivElement>) => (
-    <Spotlight {...restProps} color="blue" ref={ref} className={clsx('ams-footer__top', className)}>
+    <div {...restProps} ref={ref} className={clsx('ams-footer__top', className)}>
       {children}
-    </Spotlight>
+    </div>
   ),
 )
 
diff --git a/proprietary/tokens/src/components/ams/footer.tokens.json b/proprietary/tokens/src/components/ams/footer.tokens.json
new file mode 100644
index 0000000000..f65d5aa863
--- /dev/null
+++ b/proprietary/tokens/src/components/ams/footer.tokens.json
@@ -0,0 +1,9 @@
+{
+  "ams": {
+    "footer": {
+      "top": {
+        "background-color": { "value": "{ams.brand.color.blue.60}" }
+      }
+    }
+  }
+}