From bbd65b78289c1ae7245adb18faab761c9f3311e2 Mon Sep 17 00:00:00 2001
From: Romain Emery <emery.romain@gmail.com>
Date: Thu, 18 Jul 2024 09:04:03 +0200
Subject: [PATCH] feat(social media follow): update icons size and spacing -
 FRONT-4523 (#3492)

---
 .../social-media-follow.test.js.snap          | 72 +++++++++----------
 .../social-media-follow.html.twig             |  1 +
 .../social-media-follow-print.scss            | 42 +++++++----
 .../social-media-follow.scss                  | 34 +++------
 src/presets/ec/src/ec-print.scss              |  3 +-
 src/presets/eu/src/eu-print.scss              |  3 +-
 .../social-media-follow/demo/data--color.js   |  6 --
 .../demo/data--monochrome.js                  |  6 --
 .../ec/variables/_social-media-follow.scss    | 19 +----
 .../eu/variables/_social-media-follow.scss    | 19 +----
 10 files changed, 77 insertions(+), 128 deletions(-)

diff --git a/src/implementations/twig/components/social-media-follow/__snapshots__/social-media-follow.test.js.snap b/src/implementations/twig/components/social-media-follow/__snapshots__/social-media-follow.test.js.snap
index dfbb9fe66f6..ba3ef7aa138 100644
--- a/src/implementations/twig/components/social-media-follow/__snapshots__/social-media-follow.test.js.snap
+++ b/src/implementations/twig/components/social-media-follow/__snapshots__/social-media-follow.test.js.snap
@@ -22,7 +22,7 @@ exports[`Social Media Follow Align right renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -45,7 +45,7 @@ exports[`Social Media Follow Align right renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -68,7 +68,7 @@ exports[`Social Media Follow Align right renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -91,7 +91,7 @@ exports[`Social Media Follow Align right renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -114,7 +114,7 @@ exports[`Social Media Follow Align right renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -137,7 +137,7 @@ exports[`Social Media Follow Align right renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -178,7 +178,7 @@ exports[`Social Media Follow Colored renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -201,7 +201,7 @@ exports[`Social Media Follow Colored renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -224,7 +224,7 @@ exports[`Social Media Follow Colored renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -247,7 +247,7 @@ exports[`Social Media Follow Colored renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -270,7 +270,7 @@ exports[`Social Media Follow Colored renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -293,7 +293,7 @@ exports[`Social Media Follow Colored renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -336,7 +336,7 @@ exports[`Social Media Follow Default renders correctly with extra attributes 1`]
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -359,7 +359,7 @@ exports[`Social Media Follow Default renders correctly with extra attributes 1`]
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -382,7 +382,7 @@ exports[`Social Media Follow Default renders correctly with extra attributes 1`]
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -405,7 +405,7 @@ exports[`Social Media Follow Default renders correctly with extra attributes 1`]
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -428,7 +428,7 @@ exports[`Social Media Follow Default renders correctly with extra attributes 1`]
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -451,7 +451,7 @@ exports[`Social Media Follow Default renders correctly with extra attributes 1`]
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -492,7 +492,7 @@ exports[`Social Media Follow Default renders correctly with extra class names 1`
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -515,7 +515,7 @@ exports[`Social Media Follow Default renders correctly with extra class names 1`
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -538,7 +538,7 @@ exports[`Social Media Follow Default renders correctly with extra class names 1`
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -561,7 +561,7 @@ exports[`Social Media Follow Default renders correctly with extra class names 1`
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -584,7 +584,7 @@ exports[`Social Media Follow Default renders correctly with extra class names 1`
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -607,7 +607,7 @@ exports[`Social Media Follow Default renders correctly with extra class names 1`
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -648,7 +648,7 @@ exports[`Social Media Follow Horizontal renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -671,7 +671,7 @@ exports[`Social Media Follow Horizontal renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -694,7 +694,7 @@ exports[`Social Media Follow Horizontal renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -717,7 +717,7 @@ exports[`Social Media Follow Horizontal renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -740,7 +740,7 @@ exports[`Social Media Follow Horizontal renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -763,7 +763,7 @@ exports[`Social Media Follow Horizontal renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -804,7 +804,7 @@ exports[`Social Media Follow Vertical renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -827,7 +827,7 @@ exports[`Social Media Follow Vertical renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -850,7 +850,7 @@ exports[`Social Media Follow Vertical renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -873,7 +873,7 @@ exports[`Social Media Follow Vertical renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -896,7 +896,7 @@ exports[`Social Media Follow Vertical renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
@@ -919,7 +919,7 @@ exports[`Social Media Follow Vertical renders correctly 1`] = `
         >
           <svg
             aria-hidden="true"
-            class="ecl-icon ecl-icon--xs ecl-link__icon ecl-social-media-follow__icon"
+            class="ecl-icon ecl-icon--m ecl-link__icon ecl-social-media-follow__icon"
             focusable="false"
           >
             <use
diff --git a/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig b/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig
index e2381f82fa7..eafe074cd54 100644
--- a/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig
+++ b/src/implementations/twig/components/social-media-follow/social-media-follow.html.twig
@@ -70,6 +70,7 @@
             no_visited: true,
           }),
           icon: link.icon|default({})|merge({
+            size: 'm',
             extra_classes: _icon_extra_classes,
           }),
           extra_classes: _link_extra_classes,
diff --git a/src/implementations/vanilla/components/social-media-follow/social-media-follow-print.scss b/src/implementations/vanilla/components/social-media-follow/social-media-follow-print.scss
index af5f02ff63e..7eb68695c85 100644
--- a/src/implementations/vanilla/components/social-media-follow/social-media-follow-print.scss
+++ b/src/implementations/vanilla/components/social-media-follow/social-media-follow-print.scss
@@ -8,7 +8,6 @@
 // Exposed variables
 $theme: null !default;
 $social-media-follow: null !default;
-$social-media-follow-print: null !default;
 
 .ecl-social-media-follow {
   display: flex;
@@ -21,31 +20,30 @@ $social-media-follow-print: null !default;
 }
 
 .ecl-social-media-follow__description {
-  color: map.get($social-media-follow, 'description', 'color');
-  font: map.get($social-media-follow-print, 'description', 'font');
+  color: var(--c-d);
+  font: map.get($theme, 'font-print', 'm');
   font-weight: map.get($theme, 'font-weight-print', 'bold');
-  margin: 0;
+  margin-bottom: map.get($theme, 'spacing-print', 'xs');
+  margin-top: 0;
 }
 
 .ecl-social-media-follow__list {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   list-style: none;
-  margin-top: map.get($theme, 'spacing-print', 'xs');
+  margin-top: calc(-1 * #{map.get($theme, 'spacing-print', '2xs')});
   padding-left: 0;
 }
 
 .ecl-social-media-follow__item {
   color: var(--c-d);
-  font: map.get($social-media-follow-print, 'item', 'font');
-  margin-top: map.get($theme, 'spacing-print', 's');
+  font: map.get($theme, 'font-print', 'm');
+  margin-top: map.get($theme, 'spacing-print', '2xs');
+  margin-inline-end: map.get($theme, 'spacing-print', 'l');
 
-  &:first-of-type {
-    margin-top: 0;
-  }
-
-  &:last-of-type a:not(.ecl-link--icon) {
-    display: none;
+  &:last-of-type {
+    margin-inline-end: 0;
   }
 }
 
@@ -55,10 +53,26 @@ $social-media-follow-print: null !default;
 }
 
 .ecl-social-media-follow__icon {
+  color: var(--c-d);
   display: block;
   margin-right: map.get($theme, 'spacing-print', 's');
 }
 
+// Vertical
+.ecl-social-media-follow--vertical {
+  .ecl-social-media-follow__list {
+    align-items: flex-start;
+    flex-direction: column;
+    margin-top: 0;
+  }
+
+  .ecl-social-media-follow__item {
+    margin-inline-end: 0;
+    padding-bottom: map.get($theme, 'spacing-print', '2xs');
+    padding-top: map.get($theme, 'spacing-print', '2xs');
+  }
+}
+
 // Position
 .ecl-social-media-follow--right {
   align-items: flex-end;
diff --git a/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss b/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss
index cc043ccff6c..21c67234301 100644
--- a/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss
+++ b/src/implementations/vanilla/components/social-media-follow/social-media-follow.scss
@@ -18,14 +18,10 @@ $social-media-follow: null !default;
 }
 
 .ecl-social-media-follow__description {
-  color: map.get($social-media-follow, 'description', 'color');
-  font: map.get($social-media-follow, 'description', 'font');
+  color: var(--c-d);
+  font: var(--f-m);
   font-weight: map.get($theme, 'font-weight', 'bold');
-  margin-bottom: map.get(
-    $social-media-follow,
-    'description',
-    'margin-horizontal'
-  );
+  margin-bottom: var(--s-xs);
   margin-top: 0;
 }
 
@@ -35,15 +31,14 @@ $social-media-follow: null !default;
   flex-wrap: wrap;
   list-style: none;
   margin-bottom: 0;
-  margin-top: calc(-1 * var(--s-xs));
+  margin-top: calc(-1 * var(--s-2xs));
   padding-inline-start: 0;
 }
 
 .ecl-social-media-follow__item {
   display: flex;
-  margin-inline-end: map.get($social-media-follow, 'item', 'margin');
-  margin-top: var(--s-xs);
-  min-height: map.get($theme, 'line-height', 'm');
+  margin-inline-end: map.get($social-media-follow, 'item-margin');
+  padding-top: var(--s-2xs);
 
   &:last-child {
     margin-inline-end: 0;
@@ -53,7 +48,6 @@ $social-media-follow: null !default;
 .ecl-social-media-follow__link {
   align-items: center;
   display: flex;
-  font: map.get($social-media-follow, 'item', 'font');
   overflow: hidden; /* Improve rendering on IE */
 }
 
@@ -65,14 +59,6 @@ $social-media-follow: null !default;
 }
 
 @mixin ecl-social-media-follow-vertical {
-  .ecl-social-media-follow__description {
-    margin-bottom: map.get(
-      $social-media-follow,
-      'description',
-      'margin-vertical'
-    );
-  }
-
   .ecl-social-media-follow__list {
     align-items: flex-start;
     flex-direction: column;
@@ -80,13 +66,9 @@ $social-media-follow: null !default;
   }
 
   .ecl-social-media-follow__item {
-    margin-bottom: var(--s-xs);
     margin-inline-end: 0;
-
-    &:last-child {
-      margin-bottom: 0;
-      margin-inline-end: 0;
-    }
+    padding-bottom: var(--s-2xs);
+    padding-top: var(--s-2xs);
   }
 }
 
diff --git a/src/presets/ec/src/ec-print.scss b/src/presets/ec/src/ec-print.scss
index 83caab7c092..6a3e6e2fe40 100644
--- a/src/presets/ec/src/ec-print.scss
+++ b/src/presets/ec/src/ec-print.scss
@@ -128,8 +128,7 @@
 @use '@ecl/vanilla-component-search-form/search-form-print';
 @use '@ecl/vanilla-component-social-media-follow/social-media-follow-print' with (
   $theme: theme.$theme,
-  $social-media-follow: var.$social-media-follow,
-  $social-media-follow-print: var.$social-media-follow-print
+  $social-media-follow: var.$social-media-follow
 );
 @use '@ecl/vanilla-component-social-media-share/social-media-share-print';
 @use '@ecl/vanilla-component-timeline/timeline-print' with (
diff --git a/src/presets/eu/src/eu-print.scss b/src/presets/eu/src/eu-print.scss
index 792a136826a..653e9b7d680 100644
--- a/src/presets/eu/src/eu-print.scss
+++ b/src/presets/eu/src/eu-print.scss
@@ -128,8 +128,7 @@
 @use '@ecl/vanilla-component-search-form/search-form-print';
 @use '@ecl/vanilla-component-social-media-follow/social-media-follow-print' with (
   $theme: theme.$theme,
-  $social-media-follow: var.$social-media-follow,
-  $social-media-follow-print: var.$social-media-follow-print
+  $social-media-follow: var.$social-media-follow
 );
 @use '@ecl/vanilla-component-social-media-share/social-media-share-print';
 @use '@ecl/vanilla-component-timeline/timeline-print' with (
diff --git a/src/specs/components/social-media-follow/demo/data--color.js b/src/specs/components/social-media-follow/demo/data--color.js
index a36c3dc12e7..42aebe9ba34 100644
--- a/src/specs/components/social-media-follow/demo/data--color.js
+++ b/src/specs/components/social-media-follow/demo/data--color.js
@@ -13,7 +13,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'facebook-color',
-        size: 'xs',
       },
     },
     {
@@ -25,7 +24,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'instagram-color',
-        size: 'xs',
       },
     },
     {
@@ -37,7 +35,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'mastodon-color',
-        size: 'xs',
       },
     },
     {
@@ -49,7 +46,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'linkedin-color',
-        size: 'xs',
       },
     },
     {
@@ -61,7 +57,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'telegram-color',
-        size: 'xs',
       },
     },
     {
@@ -73,7 +68,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'chain',
-        size: 'xs',
       },
     },
   ],
diff --git a/src/specs/components/social-media-follow/demo/data--monochrome.js b/src/specs/components/social-media-follow/demo/data--monochrome.js
index d5583b240cf..3b4575d4075 100644
--- a/src/specs/components/social-media-follow/demo/data--monochrome.js
+++ b/src/specs/components/social-media-follow/demo/data--monochrome.js
@@ -13,7 +13,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'facebook',
-        size: 'xs',
       },
     },
     {
@@ -25,7 +24,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'instagram',
-        size: 'xs',
       },
     },
     {
@@ -37,7 +35,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'mastodon',
-        size: 'xs',
       },
     },
     {
@@ -49,7 +46,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'linkedin',
-        size: 'xs',
       },
     },
     {
@@ -61,7 +57,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'telegram',
-        size: 'xs',
       },
     },
     {
@@ -73,7 +68,6 @@ module.exports = {
       icon: {
         path: '/icon-social-media.svg',
         name: 'chain',
-        size: 'xs',
       },
     },
   ],
diff --git a/src/themes/ec/variables/_social-media-follow.scss b/src/themes/ec/variables/_social-media-follow.scss
index 64ed1fe0da4..649ab74a0db 100644
--- a/src/themes/ec/variables/_social-media-follow.scss
+++ b/src/themes/ec/variables/_social-media-follow.scss
@@ -2,22 +2,5 @@
 @use '../index' as *;
 
 $social-media-follow: (
-  description: (
-    color: var(--c-d),
-    font: var(--f-m),
-    margin-horizontal: var(--s-2xs),
-    margin-vertical: var(--s-2xs),
-  ),
-  item: (
-    font: var(--f-m),
-    margin: var(--s-xl),
-  ),
-);
-$social-media-follow-print: (
-  description: (
-    font: map.get($font-print, 'm'),
-  ),
-  item: (
-    font: map.get($font-print, 'm'),
-  ),
+  item-margin: var(--s-xl),
 );
diff --git a/src/themes/eu/variables/_social-media-follow.scss b/src/themes/eu/variables/_social-media-follow.scss
index a3fc89012f9..c9b73ed6483 100644
--- a/src/themes/eu/variables/_social-media-follow.scss
+++ b/src/themes/eu/variables/_social-media-follow.scss
@@ -2,22 +2,5 @@
 @use '../index' as *;
 
 $social-media-follow: (
-  description: (
-    color: var(--c-d-140),
-    font: var(--f-p-m),
-    margin-horizontal: var(--s-xs),
-    margin-vertical: 0,
-  ),
-  item: (
-    font: var(--f-s),
-    margin: var(--s-l),
-  ),
-);
-$social-media-follow-print: (
-  description: (
-    font: map.get($font-prolonged-print, 'm'),
-  ),
-  item: (
-    font: map.get($font-prolonged-print, 'm'),
-  ),
+  item-margin: var(--s-l),
 );