feat(navigation-list): Color mode. - FRONT-4731

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

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 %}

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;
 

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;
 };

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),
 );

src/themes/eu/variables/_navigation-list.scss

@@ -8,4 +8,5 @@ $navigation-list: (
   shadow: var(--sh-1),
   border: 0,
   yellow-bar: true,
+  background: #fff,
 );