From a09d058f329a9fcc87006d2cebc1032cd0a779cf Mon Sep 17 00:00:00 2001
From: Tiberiu Dumitru <tiberiu.dumitru23@gmail.com>
Date: Fri, 24 Jan 2025 10:59:19 +0200
Subject: [PATCH] feat(navigation-list): Color mode. - FRONT-4731

---
 src/components/navigation-list/README.md                 | 1 +
 src/components/navigation-list/navigation-list.html.twig | 5 +++++
 src/components/navigation-list/navigation-list.scss      | 4 ++--
 src/components/navigation-list/navigation-list.story.js  | 9 +++++++--
 src/themes/ec/variables/_navigation-list.scss            | 1 +
 src/themes/eu/variables/_navigation-list.scss            | 1 +
 6 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/navigation-list/README.md b/src/components/navigation-list/README.md
index 18b0d2c43df..8625012c523 100644
--- a/src/components/navigation-list/README.md
+++ b/src/components/navigation-list/README.md
@@ -8,6 +8,7 @@ npm install --save @ecl/navigation-list
 
 ### Parameters
 
+- **"color_mode"** (string) (default: '') Name of the color mode
 - **"items"** (array) (default: []): array of list_illustration_item
   - **"variant"** (string) (default: '') - Can be "illustration" or "image-as-illustration"
   - **"picture** (associative array) (default: {}): picture of the navigation list, following ECL Picture structure
diff --git a/src/components/navigation-list/navigation-list.html.twig b/src/components/navigation-list/navigation-list.html.twig
index f4978ad734c..408642239b2 100644
--- a/src/components/navigation-list/navigation-list.html.twig
+++ b/src/components/navigation-list/navigation-list.html.twig
@@ -2,6 +2,7 @@
 
 {#
   Parameters:
+    - "color_mode" (string) (default: '') Name of the color mode
     - "items" (array) (default: []): array of list_illustration_item
     - "column" (number) (default: 2): number of columns (2 or 3)
     - "extra_classes" (string) (default: '')
@@ -18,10 +19,14 @@
 {% set _items = items|default([]) %}
 {% set _column = column|default(2) %}
 {% set _css_class = 'ecl-navigation-list' %}
+{% set _color_mode = color_mode|default('') %}
 {% set _border = border ?? true %}
 {% set _extra_attributes = '' %}
 
 {# Internal logic - Process properties #}
+{% if _color_mode is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ 'ecl-color-mode--' ~ _color_mode %}
+{% endif %}
 
 {% if _column and _column > 1 and _column < 4 %}
   {% set _css_class = _css_class ~ ' ' ~ 'ecl-navigation-list--col-' ~ _column %}
diff --git a/src/components/navigation-list/navigation-list.scss b/src/components/navigation-list/navigation-list.scss
index edfeae64c50..d70aa790f9e 100644
--- a/src/components/navigation-list/navigation-list.scss
+++ b/src/components/navigation-list/navigation-list.scss
@@ -41,7 +41,7 @@ $navigation-list: null !default;
 // Navigation list items
 
 .ecl-navigation-list__item {
-  background-color: map.get($theme, 'color', 'white');
+  background-color: map.get($navigation-list, 'background');
   border: map.get($navigation-list, 'border');
   border-radius: map.get($navigation-list, 'border-radius');
   box-shadow: map.get($navigation-list, 'shadow');
@@ -121,7 +121,7 @@ $navigation-list: null !default;
     border-radius: 100px 0 100px 100px;
     top: var(--s-xs);
     right: var(--s-xs);
-    background: var(--c-n-60, #e0e5f5);
+    background: var(--cm-surface-lowest, #e0e5f5);
     height: 60px;
     width: 60px;
 
diff --git a/src/components/navigation-list/navigation-list.story.js b/src/components/navigation-list/navigation-list.story.js
index 15b15eb61d1..67112bf065c 100644
--- a/src/components/navigation-list/navigation-list.story.js
+++ b/src/components/navigation-list/navigation-list.story.js
@@ -1,6 +1,7 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
-import { correctPaths } from '@ecl/story-utils';
+import { getColorModeControls, correctPaths } from '@ecl/story-utils';
+import getSystem from '@ecl/builder/utils/getSystem';
 
 import dataDefault from './demo/data';
 import dataIllustration from './demo/data-illustration';
@@ -16,13 +17,16 @@ const getArgs = (data) => {
     args.show_border = true;
     args.show_links = true;
   }
+  if (getSystem() === 'ec') {
+    args.color_mode = 'default';
+  }
   args.column = 2;
 
   return args;
 };
 
 const getArgTypes = (data) => {
-  const argTypes = {};
+  const argTypes = getColorModeControls();
 
   // Optional elements
   argTypes.show_image = {
@@ -100,6 +104,7 @@ const prepareData = (data, args) => {
   // Other controls
   clone.border = 'show_border' in args ? args.show_border : true;
   clone.column = args.column;
+  clone.color_mode = args.color_mode;
 
   return clone;
 };
diff --git a/src/themes/ec/variables/_navigation-list.scss b/src/themes/ec/variables/_navigation-list.scss
index 2ad22b6a86e..f87e9824772 100644
--- a/src/themes/ec/variables/_navigation-list.scss
+++ b/src/themes/ec/variables/_navigation-list.scss
@@ -7,4 +7,5 @@ $navigation-list: (
   border-radius: map.get($border-radius, 's'),
   shadow: var(--sh-1),
   border: 1px solid var(--c-st),
+  background: var(--cm-surface-inverted),
 );
diff --git a/src/themes/eu/variables/_navigation-list.scss b/src/themes/eu/variables/_navigation-list.scss
index 4dbc5e4e600..930fb64f4c2 100644
--- a/src/themes/eu/variables/_navigation-list.scss
+++ b/src/themes/eu/variables/_navigation-list.scss
@@ -8,4 +8,5 @@ $navigation-list: (
   shadow: var(--sh-1),
   border: 0,
   yellow-bar: true,
+  background: #fff,
 );