feat(banner): Fixing styles for the text-overlay deprecated variant -…

… FRONT-4618 (#3628)

* feat(banner): Fixing styles for the text-overlay deprecated variant - FRONT-4618

* fix(banner): Fixing plain background - FRONT-4618

src/implementations/twig/components/banner/banner.story.js

@@ -27,6 +27,7 @@ const getArgs = (data) => {
     vertical: 'center',
     full_width: true,
     gridContent: false,
+    oldVariants: '',
   };
   if (data.picture) {
     args.image = data.picture.img.src || '';
@@ -283,6 +284,35 @@ const getArgTypes = (data) => {
         type: 'boolean',
       },
     },
+    oldVariants: {
+      name: 'Test the old variants',
+      type: { name: 'select' },
+      description: 'Test the layout with deprecated markup',
+      table: {
+        category: 'Backward compatibility',
+      },
+      options: [
+        '',
+        'ecl-banner--plain-background',
+        'ecl-banner--text-box',
+        'ecl-banner--text-overlay',
+      ],
+      mapping: {
+        none: '',
+        'plain background': 'ecl-banner--plain-background',
+        'text overlay': 'ecl-banner--text-overlay',
+        'text box': 'ecl-banner--text-box',
+      },
+      control: {
+        labels: {
+          '': 'none',
+          'ecl-banner--plain-background': 'plain background',
+          'ecl-banner--text-box': 'text box',
+          'ecl-banner--text-overlay': 'text overlay',
+        },
+        type: 'select',
+      },
+    },
   };
 
   if (data.picture) {
@@ -338,6 +368,19 @@ const prepareData = (data, args) => {
     clone.picture.img.src = args.image;
   }
 
+  if (args.oldVariants !== '') {
+    clone.extra_classes = args.oldVariants;
+    if (args.oldVariants === 'ecl-banner--plain-background') {
+      if (clone.picture) {
+        clone.picture.img = {};
+      } else {
+        clone.video = {};
+      }
+    }
+  } else {
+    clone.extra_classes = '';
+  }
+
   return clone;
 };
 

src/implementations/vanilla/components/banner/banner.scss

@@ -398,7 +398,7 @@ $banner: null !default;
   background: map.get($banner, 'background', 'plain-background');
 
   .ecl-banner__info {
-    background: map.get($banner, 'background', 'plain-background');
+    background: transparent;
   }
 
   .ecl-banner__title,
@@ -497,13 +497,10 @@ $banner: null !default;
   }
 
   .ecl-banner__title,
-  .ecl-banner__title-link {
-    color: map.get($banner, 'text-color', 'inverted');
-  }
-
+  .ecl-banner__title-link,
   .ecl-banner__description,
   .ecl-banner__description-link {
-    color: map.get($banner, 'text-color', 'inverted');
+    color: var(--c-d);
   }
 }
 
@@ -535,6 +532,13 @@ $banner: null !default;
       width: 100%;
     }
 
+    .ecl-banner__title,
+    .ecl-banner__title-link,
+    .ecl-banner__description,
+    .ecl-banner__description-link {
+      color: map.get($theme, 'color', 'white');
+    }
+
     .ecl-banner__description {
       padding-top: 0;
     }