From 75f01bf5ca5f83304e1e2ee32b1be88e559a3d53 Mon Sep 17 00:00:00 2001
From: Lucy Chyzhova <lucy.chyzhova@lime.tech>
Date: Thu, 30 Jan 2025 11:32:35 +0100
Subject: [PATCH] feat(header): properly support the `Icon` interface

Now the consumer can specify `color` and `backgroundColor` directly
on the `icon`. The styles code are however backwards compatible,
and still support the old custom CSS props of `--header-icon-color`
and `--header-icon-background-color`. In case any consumer has
specified the CSS props, they will get the same result as before.
But we removed the props from the documentations, since we
want the consumers to use the `Icon` interface instead of adding
styles.
---
 src/components/header/examples/header-colors.scss |  1 -
 src/components/header/examples/header-colors.tsx  |  5 ++++-
 src/components/header/examples/header-narrow.scss |  1 -
 src/components/header/examples/header-narrow.tsx  |  5 ++++-
 src/components/header/header.scss                 | 12 ++++++++----
 src/components/header/header.tsx                  | 15 ++++++++++++++-
 6 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/src/components/header/examples/header-colors.scss b/src/components/header/examples/header-colors.scss
index f38a1003b9..ff93814eaa 100644
--- a/src/components/header/examples/header-colors.scss
+++ b/src/components/header/examples/header-colors.scss
@@ -1,6 +1,5 @@
 :host(limel-example-header-colors) {
     --header-background-color: rgb(var(--color-yellow-dark));
-    --header-icon-color: rgb(var(--color-white));
     --header-heading-color: rgb(var(--color-brown-default));
     --header-subheading-color: rgb(var(--color-brown-darker));
 }
diff --git a/src/components/header/examples/header-colors.tsx b/src/components/header/examples/header-colors.tsx
index 3857618f59..e355a0bf30 100644
--- a/src/components/header/examples/header-colors.tsx
+++ b/src/components/header/examples/header-colors.tsx
@@ -25,7 +25,10 @@ export class HeaderExample {
     public render() {
         return (
             <limel-header
-                icon="create_new"
+                icon={{
+                    name: 'create_new',
+                    color: 'rgb(var(--color-white))',
+                }}
                 heading="Edit note"
                 subheading="Created: 17 Jan 2023"
             >
diff --git a/src/components/header/examples/header-narrow.scss b/src/components/header/examples/header-narrow.scss
index 77ee4e0cfa..e89e0d7efa 100644
--- a/src/components/header/examples/header-narrow.scss
+++ b/src/components/header/examples/header-narrow.scss
@@ -1,4 +1,3 @@
 :host(limel-example-header-narrow) {
-    --header-icon-color: rgb(var(--color-blue-default));
     --header-top-right-left-border-radius: 0;
 }
diff --git a/src/components/header/examples/header-narrow.tsx b/src/components/header/examples/header-narrow.tsx
index 4a82733949..be55ed8313 100644
--- a/src/components/header/examples/header-narrow.tsx
+++ b/src/components/header/examples/header-narrow.tsx
@@ -26,7 +26,10 @@ export class HeaderExample {
         return (
             <limel-header
                 class="is-narrow"
-                icon="ok"
+                icon={{
+                    name: 'ok',
+                    color: 'rgb(var(--color-blue-default))',
+                }}
                 heading="This is a narrow header"
             />
         );
diff --git a/src/components/header/header.scss b/src/components/header/header.scss
index 7defa1bd70..aac91f7008 100644
--- a/src/components/header/header.scss
+++ b/src/components/header/header.scss
@@ -6,8 +6,6 @@
  * @prop --header-heading-color: Color of heading text, defaults to `--contrast-1100`.
  * @prop --header-subheading-color: Color of subheading text, defaults to `--contrast-900`.
  * @prop --header-supporting-text-color: Color of supporting text in subheading, defaults to `--header-subheading-color`.
- * @prop --header-icon-color: Color of header icon, defaults to `--contrast-1100`.
- * @prop --header-icon-background-color: Background color of header icon, defaults to `transparent`.
  * @prop --header-top-right-left-border-radius: Top-left and top-right border radius of header, defaults to `0.75rem`.
  * @prop --header-responsive-breakpoint: Defines the minimum allowed `width` of both information and actions areas in the header, defaults to `22rem`.
  */
@@ -36,8 +34,14 @@
 .icon {
     --limel-icon-svg-margin: 0.25rem;
     flex-shrink: 0;
-    color: var(--header-icon-color, rgb(var(--contrast-1100)));
-    background-color: var(--header-icon-background-color, transparent);
+    color: var(
+        --limel-header-icon-color,
+        var(--header-icon-color, rgb(var(--contrast-1100)))
+    );
+    background-color: var(
+        --limel-header-icon-background-color,
+        var(--header-icon-background-color, transparent)
+    );
     width: 2.25rem;
     border-radius: 0.56rem;
 }
diff --git a/src/components/header/header.tsx b/src/components/header/header.tsx
index 633b1dc11b..b0b8919f6e 100644
--- a/src/components/header/header.tsx
+++ b/src/components/header/header.tsx
@@ -118,7 +118,20 @@ export class Header {
             return;
         }
 
-        return <limel-icon class="icon" badge={true} name={icon} />;
+        return (
+            <limel-icon
+                class="icon"
+                badge={true}
+                name={icon}
+                style={{
+                    '--limel-header-icon-color': `${(this.icon as Icon)?.color ?? ''}`,
+                    '--limel-header-icon-background-color': `${
+                        (this.icon as Icon)?.backgroundColor ?? ''
+                    }`,
+                    title: `${(this.icon as Icon)?.title}`,
+                }}
+            />
+        );
     }
 
     private renderSupportingText() {