feat(list with illustration fact and figures): update styles - FRONT-4468

src/implementations/twig/components/fact-figures/README.md

@@ -10,13 +10,14 @@ npm install --save @ecl/twig-component-fact-figures
 
 - **"column"** (integer) (default: 3): Number of columns (1 to 4)
 - **"centered"** (boolean) (default: false)
+- **"font_size"** (string) (default: 'l') Size of the value (can be 'm', 'l')
 - **"items"** (array) (default: []):
   - "icon" (associate array) (default: { size: 'm' })
   - "value" (string) (default: '')
   - "title" (string) (default: '')
   - "description" (string) (default:'')
 - **"view_all"** (optional) (associative array) (default: {})
-  - "link" (associative array) {
+  - "link" (associative array)
     - "label" (string) (default: ''),
     - "path" (string) (default: '')
   - "visible" (boolean) (default: true)

src/implementations/twig/components/fact-figures/__snapshots__/fact-figures.test.js.snap

@@ -831,7 +831,7 @@ exports[`Fact and figures 4 cols renders correctly 1`] = `
           focusable="false"
         >
           <use
-            xlink:href="/icons.svg#video"
+            xlink:href="/icons.svg#presentation"
           />
         </svg>
         <div

src/implementations/twig/components/fact-figures/fact-figures.html.twig

@@ -4,6 +4,7 @@
   Parameters:
   - "column" (integer) (default: 3): Number of columns (1 to 4)
   - "centered" (boolean) (default: false)
+  - "font_size" (string) (default: 'l') Size of the value (can be 'm', 'l')
   - "items" (array) (default: []):
     - "icon" (associate array) (default: { size: 'm' })
     - "value" (string) (default: '')
@@ -29,6 +30,7 @@
 {% set _css_class = 'ecl-fact-figures' %}
 {% set _extra_attributes = '' %}
 {% set _columns = column|default(3) %}
+{% set _font_size = font_size|default('l') %}
 {% set _extra_classes = extra_classes|default('') %}
 {% set _icon_size = icon_size|default('l') %}
 {% set _display_icons = display_icons ?? true %}
@@ -42,6 +44,10 @@
   {% set _css_class = _css_class ~ ' ecl-fact-figures--centered' %} 
 {% endif %}
 
+{% if _font_size != 'l' %}
+  {% set _css_class = _css_class ~ ' ecl-fact-figures--font-' ~ _font_size %}
+{% endif %}
+
 {% if extra_classes is defined and extra_classes is not empty %}
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}

src/implementations/twig/components/fact-figures/fact-figures.story.js

@@ -18,6 +18,7 @@ const getArgs = (data) => ({
   show_view_all: true,
   show_icons: true,
   column: 3,
+  font_size: 'l',
   icon: data.items[0].icon.name,
   icon_size: 'medium',
   value: data.items[0].value,
@@ -64,6 +65,27 @@ const getArgTypes = () => ({
       category: 'Layout',
     },
   },
+  font_size: {
+    name: 'font size',
+    type: 'select',
+    description: 'Change font size',
+    options: ['m', 'l'],
+    control: {
+      labels: {
+        m: 'medium',
+        l: 'large',
+      },
+    },
+    mapping: {
+      medium: 'm',
+      large: 'l',
+    },
+    table: {
+      type: 'string',
+      defaultValue: { summary: 'l' },
+      category: 'Display',
+    },
+  },
   icon: {
     description: 'Name of the icon',
     type: 'select',
@@ -133,12 +155,9 @@ const prepareData = (data, args) => {
 
   // Column display
   clone.column = args.column;
-  clone.items =
-    args.column < 3
-      ? clone.items.slice(0, args.column)
-      : clone.items.slice(0, args.column * 2);
 
   // Other controls
+  clone.font_size = args.font_size;
   clone.items[0].value = args.value;
   clone.items[0].title = args.title;
   clone.items[0].description = args.description;

src/implementations/twig/components/list-illustration/README.md

@@ -19,6 +19,7 @@ npm install --save @ecl/twig-component-list-illustration
 - **"column"** (number) (default: 1): number of columns (1 column means vertical display)
 - **"zebra"** (optional) (boolean) (default: false) use alternate background display for vertical list
 - **"centered"** (bool) (default: false) Define if the items should be centered
+- **"font_size"** (string) (default: 'l') Size of the value (can be 'm', 'l')
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'

src/implementations/twig/components/list-illustration/list-illustration.html.twig

@@ -6,6 +6,7 @@
     - "column" (number) (default: 1): number of columns (1 column means vertical display)
     - "zebra" (boolean) (default: true): use alternate background display for vertical list
     - "centered" (bool) (default: false) Define if the items should be centered
+    - "font_size" (string) (default: 'l') Size of the value (can be 'm', 'l')
     - "extra_classes" (string) (default: '')
     - "extra_attributes" (array) (default: []): format: [
         {
@@ -20,6 +21,7 @@
 {% set _items = items|default([]) %}
 {% set _zebra = zebra|default(false) %}
 {% set _centered = centered|default(false) %}
+{% set _font_size = font_size|default('l') %}
 {% set _column = column|default(1) %}
 {% set _css_class = 'ecl-list-illustration' %}
 {% set _extra_attributes = '' %}
@@ -34,6 +36,10 @@
   {% set _css_class = _css_class ~ ' ecl-list-illustration--centered' %}
 {% endif %}
 
+{% if _font_size != 'l' %}
+  {% set _css_class = _css_class ~ ' ecl-list-illustration--font-' ~ _font_size %}
+{% endif %}
+
 {% if _column and _column > 1 and _column < 5 %}
   {% set _css_class = _css_class ~ ' ' ~ 'ecl-list-illustration--col-' ~ _column %}
 {% endif %}

src/implementations/twig/components/list-illustration/list-illustration.story.js

@@ -32,6 +32,7 @@ const getArgs = (data, variant) => {
   const args = {
     show_description: true,
     show_value: true,
+    font_size: 'l',
   };
   if (variant.includes('image')) {
     args.show_image = true;
@@ -160,6 +161,28 @@ const getArgTypes = (data, variant) => {
     };
   }
 
+  argTypes.font_size = {
+    name: 'font size',
+    type: 'select',
+    description: 'Change font size',
+    options: ['m', 'l'],
+    control: {
+      labels: {
+        m: 'medium',
+        l: 'large',
+      },
+    },
+    mapping: {
+      medium: 'm',
+      large: 'l',
+    },
+    table: {
+      type: 'string',
+      defaultValue: { summary: 'l' },
+      category: 'Display',
+    },
+  };
+
   argTypes.value = {
     name: 'value',
     type: { name: 'string' },
@@ -344,6 +367,7 @@ const prepareDataItem = (data, args) => {
 };
 
 const prepareDataList = (data, args) => {
+  data.font_size = args.font_size;
   data.items[0] = prepareDataItem(data.items[0], args);
   if (args.show_image) {
     for (let i = 1; i < data.items.length; i += 1) {

src/implementations/vanilla/components/fact-figures/fact-figures-print.scss

@@ -29,9 +29,13 @@ $fact-figures: null !default;
 }
 
 .ecl-fact-figures__value {
-  font: map.get($theme, 'font-print', '4xl');
+  font: map.get($theme, 'font-print', '3xl');
   font-family: var(--ecl-font-family-print-alt);
-  font-weight: map.get($theme, 'font-weight', 'bold');
+
+  .ecl-fact-figures--font-m & {
+    font: map.get($theme, 'font-print', '2xl');
+    font-family: var(--ecl-font-family-print-alt);
+  }
 }
 
 .ecl-fact-figures__title {

src/implementations/vanilla/components/fact-figures/fact-figures.scss

@@ -12,8 +12,6 @@ $fact-figures: null !default;
 
 .ecl-fact-figures {
   background-color: map.get($fact-figures, 'background');
-  box-shadow: map.get($fact-figures, 'shadow');
-  border: map.get($fact-figures, 'border');
   border-radius: map.get($fact-figures, 'border-radius');
   margin: 0;
   padding: map.get($fact-figures, 'padding-mobile');
@@ -51,18 +49,24 @@ $fact-figures: null !default;
 }
 
 .ecl-fact-figures__value {
-  font: map.get($fact-figures, 'value-font-mobile');
+  font: map.get($fact-figures, 'value-font-mobile-l');
+
+  .ecl-fact-figures--font-m & {
+    font: map.get($fact-figures, 'value-font-mobile-m');
+  }
 }
 
 .ecl-fact-figures__title {
   font: map.get($fact-figures, 'title-font');
   font-weight: map.get($fact-figures, 'title-font-weight');
   margin-top: map.get($fact-figures, 'title-margin');
+  max-width: var(--max-w);
 }
 
 .ecl-fact-figures__description {
   font: map.get($fact-figures, 'description-font');
   margin-top: map.get($fact-figures, 'description-margin');
+  max-width: var(--max-w);
 }
 
 .ecl-fact-figures__view-all {
@@ -102,7 +106,11 @@ $fact-figures: null !default;
   }
 
   .ecl-fact-figures__value {
-    font: map.get($fact-figures, 'value-font-desktop');
+    font: map.get($fact-figures, 'value-font-desktop-l');
+
+    .ecl-fact-figures--font-m & {
+      font: map.get($fact-figures, 'value-font-desktop-m');
+    }
   }
 
   .ecl-fact-figures__view-all {

src/implementations/vanilla/components/list-illustration/list-illustration-print.scss

@@ -58,9 +58,12 @@ $list-illustration-print: null !default;
 
 .ecl-list-illustration__value {
   color: map.get($list-illustration, 'title-color');
-  font: map.get($list-illustration-print, 'value-font-mobile');
-  font-weight: map.get($list-illustration-print, 'value-font-weight-mobile');
+  font: map.get($list-illustration-print, 'value-font-desktop-l');
   margin-bottom: map.get($theme, 'spacing-print', 'xs');
+
+  .ecl-list-illustration--font-m & {
+    font: map.get($list-illustration-print, 'value-font-desktop-m');
+  }
 }
 
 .ecl-list-illustration__title {