feat(banner): Rename variants - FRONT-3845 (#2747)

src/implementations/twig/components/banner/README.md

@@ -8,7 +8,8 @@ npm install --save @ecl/twig-component-banner
 
 ### Parameters
 
-- **"variant"** (string) (default: 'primary') Variant of banner (can be 'primary', 'image','image-shade','image-gradient')
+- **"variant"** (string) (default: 'plain-background') Variant of banner
+  (can be 'plain-background', 'text-box', 'text-highlight', 'image-overlay')
 - **"size"** (string) (default: 'm') Size of the banner (can be 's', 'm', 'l')
 - **"title"** (string) (default: '') Title of banner
 - **"image"** (string) (default: '') Image for banner (required for image banner type)

src/implementations/twig/components/banner/__snapshots__/banner.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Banner Primary renders correctly 1`] = `
+exports[`Banner Plain background renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--primary ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--plain-background ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-container"
@@ -63,10 +63,10 @@ exports[`Banner Primary renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Banner Primary renders correctly with extra attributes 1`] = `
+exports[`Banner Plain background renders correctly with extra attributes 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--primary ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--plain-background ecl-banner--m ecl-banner--centered"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
   >
@@ -128,10 +128,10 @@ exports[`Banner Primary renders correctly with extra attributes 1`] = `
 </jest>
 `;
 
-exports[`Banner Primary renders correctly with extra class names 1`] = `
+exports[`Banner Plain background renders correctly with extra class names 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--primary ecl-banner--m ecl-banner--centered custom-class custom-class--test"
+    class="ecl-banner ecl-banner--plain-background ecl-banner--m ecl-banner--centered custom-class custom-class--test"
   >
     <div
       class="ecl-container"
@@ -191,10 +191,10 @@ exports[`Banner Primary renders correctly with extra class names 1`] = `
 </jest>
 `;
 
-exports[`Banner image - gradient renders correctly 1`] = `
+exports[`Banner image - image overlay renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image-gradient ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--image-overlay ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-banner__image"
@@ -263,10 +263,10 @@ exports[`Banner image - gradient renders correctly 1`] = `
 </jest>
 `;
 
-exports[`Banner image - shade renders correctly 1`] = `
+exports[`Banner image - text highlight renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image-shade ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--text-highlight ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-banner__image"
@@ -338,7 +338,7 @@ exports[`Banner image - shade renders correctly 1`] = `
 exports[`Banner image - text-box renders correctly 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--centered"
   >
     <div
       class="ecl-banner__image"
@@ -410,7 +410,7 @@ exports[`Banner image - text-box renders correctly 1`] = `
 exports[`Banner image renders correctly with extra attributes 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image ecl-banner--m ecl-banner--centered"
+    class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--centered"
     data-test="data-test-value"
     data-test-1="data-test-value-1"
   >
@@ -484,7 +484,7 @@ exports[`Banner image renders correctly with extra attributes 1`] = `
 exports[`Banner image renders correctly with extra class names 1`] = `
 <jest>
   <section
-    class="ecl-banner ecl-banner--image ecl-banner--m ecl-banner--centered custom-class custom-class--test"
+    class="ecl-banner ecl-banner--text-box ecl-banner--m ecl-banner--centered custom-class custom-class--test"
   >
     <div
       class="ecl-banner__image"

src/implementations/twig/components/banner/banner.html.twig

@@ -2,7 +2,8 @@
 
 {#
   Parameters:
-  - "variant" (string) (default: 'primary') Variant of banner (can be 'primary', 'image', 'image-shade', 'image-gradient')
+  - "variant" (string) (default: 'primary') Variant of banner
+    (can be 'plain-background', 'text-block', 'text-highlight', 'image-overlay')
   - "size" (string) (default: 'm') Size of the banner (can be 's', 'm', 'l')
   - "title" (string) (default: '') Title of banner
   - "image" (string) (default: '') Image for banner (required for image banner variant)
@@ -21,7 +22,7 @@
 
 {% set _css_class = 'ecl-banner' %}
 {% set _extra_attributes = '' %}
-{% set _variant = variant|default('primary') %}
+{% set _variant = variant|default('plain-background') %}
 {% set _size = size|default('m') %}
 {% set _centered = centered ?? true %}
 {% set _full_width = full_width|default(false) %}
@@ -66,10 +67,10 @@
 {# Print the result #}
 
 <section class="{{ _css_class }}"{{ _extra_attributes|raw }}>
-{% if _image is not empty and _variant in ['image', 'image-shade', 'image-gradient'] %}
+{% if _image is not empty and _variant != 'plain-background'  %}
   <div class="ecl-banner__image" style="background-image:url({{ _image }})"></div>
 {% endif %}
-{% if _credit is not empty and _variant in ['image', 'image-shade', 'image-gradient'] %}
+{% if _credit is not empty and _variant != 'plain-background' %}
   <div class="ecl-banner__credit">{{ _credit }}</div>
 {% endif %}
   <div class="ecl-container">

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

@@ -3,14 +3,14 @@ import withCode from '@ecl/storybook-addon-code';
 import { correctPaths } from '@ecl/story-utils';
 
 // Import data for demos
-import bannerDataPrimary from '@ecl/specs-component-banner/demo/data--primary';
-import bannerDataImage from '@ecl/specs-component-banner/demo/data--image-box';
-import bannerDataImageShade from '@ecl/specs-component-banner/demo/data--image-shade';
-import bannerDataImageGradient from '@ecl/specs-component-banner/demo/data--image-gradient';
+import bannerDataPlainBackground from '@ecl/specs-component-banner/demo/data--plain-background';
+import bannerDataTextBox from '@ecl/specs-component-banner/demo/data--text-box';
+import bannerDataImageOverlay from '@ecl/specs-component-banner/demo/data--image-overlay';
+import bannerDataTextHighlight from '@ecl/specs-component-banner/demo/data--text-highlight';
 import banner from './banner.html.twig';
 import notes from './README.md';
 
-const cta = { ...bannerDataPrimary.link };
+const cta = { ...bannerDataPlainBackground.link };
 const getArgs = (data) => {
   const args = {
     show_title: true,
@@ -230,37 +230,38 @@ export default {
   parameters: { layout: 'fullscreen' },
 };
 
-export const Primary = (args) => renderStory(bannerDataPrimary, args);
+export const PlainBackground = (args) =>
+  renderStory(bannerDataPlainBackground, args);
 
-Primary.storyName = 'primary';
-Primary.args = getArgs(bannerDataPrimary);
-Primary.argTypes = getArgTypes(bannerDataPrimary);
-Primary.parameters = {
-  notes: { markdown: notes, json: bannerDataPrimary },
+PlainBackground.storyName = 'plain background';
+PlainBackground.args = getArgs(bannerDataPlainBackground);
+PlainBackground.argTypes = getArgTypes(bannerDataPlainBackground);
+PlainBackground.parameters = {
+  notes: { markdown: notes, json: bannerDataPlainBackground },
 };
 
-export const Image = (args) => renderStory(bannerDataImage, args);
+export const TextBox = (args) => renderStory(bannerDataTextBox, args);
 
-Image.storyName = 'image - text-block';
-Image.args = getArgs(bannerDataImage);
-Image.argTypes = getArgTypes(bannerDataImage);
-Image.parameters = { notes: { markdown: notes, json: bannerDataImage } };
+TextBox.storyName = 'text box';
+TextBox.args = getArgs(bannerDataTextBox);
+TextBox.argTypes = getArgTypes(bannerDataTextBox);
+TextBox.parameters = { notes: { markdown: notes, json: bannerDataTextBox } };
 
-export const ImageGradient = (args) =>
-  renderStory(bannerDataImageGradient, args);
+export const TextHighlight = (args) =>
+  renderStory(bannerDataTextHighlight, args);
 
-ImageGradient.storyName = 'image - gradient';
-ImageGradient.args = getArgs(bannerDataImageGradient);
-ImageGradient.argTypes = getArgTypes(bannerDataImageGradient);
-ImageGradient.parameters = {
-  notes: { markdown: notes, json: bannerDataImageGradient },
+TextHighlight.storyName = 'text highlight';
+TextHighlight.args = getArgs(bannerDataTextHighlight);
+TextHighlight.argTypes = getArgTypes(bannerDataTextHighlight);
+TextHighlight.parameters = {
+  notes: { markdown: notes, json: bannerDataTextHighlight },
 };
 
-export const ImageShade = (args) => renderStory(bannerDataImageShade, args);
+export const ImageOverlay = (args) => renderStory(bannerDataImageOverlay, args);
 
-ImageShade.storyName = 'image - shade';
-ImageShade.args = getArgs(bannerDataImageShade);
-ImageShade.argTypes = getArgTypes(bannerDataImageShade);
-ImageShade.parameters = {
-  notes: { markdown: notes, json: bannerDataImageShade },
+ImageOverlay.storyName = 'image overlay';
+ImageOverlay.args = getArgs(bannerDataImageOverlay);
+ImageOverlay.argTypes = getArgTypes(bannerDataImageOverlay);
+ImageOverlay.parameters = {
+  notes: { markdown: notes, json: bannerDataImageOverlay },
 };

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

@@ -5,19 +5,19 @@ import {
 } from '@ecl/test-utils';
 import { axe, toHaveNoViolations } from 'jest-axe';
 
-import bannerDataPrimary from '@ecl/specs-component-banner/demo/data--primary';
-import bannerDataImage from '@ecl/specs-component-banner/demo/data--image-box';
-import bannerDataImageShade from '@ecl/specs-component-banner/demo/data--image-shade';
-import bannerDataImageGradient from '@ecl/specs-component-banner/demo/data--image-gradient';
+import bannerDataPlainBackground from '@ecl/specs-component-banner/demo/data--plain-background';
+import bannerDataTextBox from '@ecl/specs-component-banner/demo/data--text-box';
+import bannerDataImageOverlay from '@ecl/specs-component-banner/demo/data--image-overlay';
+import bannerDataTextHighlight from '@ecl/specs-component-banner/demo/data--text-highlight';
 
 expect.extend(toHaveNoViolations);
 
 describe('Banner', () => {
   const template = '@ecl/banner/banner.html.twig';
   const render = (params) => renderTwigFileAsNode(template, params);
 
-  describe('Primary', () => {
-    const data = bannerDataPrimary;
+  describe('Plain background', () => {
+    const data = bannerDataPlainBackground;
 
     test(`renders correctly`, () => {
       expect.assertions(1);
@@ -59,25 +59,25 @@ describe('Banner', () => {
     test(`- text-box renders correctly`, () => {
       expect.assertions(1);
 
-      return expect(render(bannerDataImage)).resolves.toMatchSnapshot();
+      return expect(render(bannerDataTextBox)).resolves.toMatchSnapshot();
     });
 
-    test(`- gradient renders correctly`, () => {
+    test(`- text highlight renders correctly`, () => {
       expect.assertions(1);
 
-      return expect(render(bannerDataImageGradient)).resolves.toMatchSnapshot();
+      return expect(render(bannerDataTextHighlight)).resolves.toMatchSnapshot();
     });
 
-    test(`- shade renders correctly`, () => {
+    test(`- image overlay renders correctly`, () => {
       expect.assertions(1);
 
-      return expect(render(bannerDataImageShade)).resolves.toMatchSnapshot();
+      return expect(render(bannerDataImageOverlay)).resolves.toMatchSnapshot();
     });
 
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 
-      const withExtraClasses = merge(bannerDataImage, {
+      const withExtraClasses = merge(bannerDataTextBox, {
         extra_classes: 'custom-class custom-class--test',
       });
 
@@ -87,7 +87,7 @@ describe('Banner', () => {
     test('renders correctly with extra attributes', () => {
       expect.assertions(1);
 
-      const withExtraAttributes = merge(bannerDataImage, {
+      const withExtraAttributes = merge(bannerDataTextBox, {
         extra_attributes: [
           { name: 'data-test', value: 'data-test-value' },
           { name: 'data-test-1', value: 'data-test-value-1' },
@@ -99,7 +99,7 @@ describe('Banner', () => {
 
     test(`passes the accessibility tests`, async () => {
       expect(
-        await axe(renderTwigFileAsHtml(template, bannerDataImage, true))
+        await axe(renderTwigFileAsHtml(template, bannerDataTextBox, true))
       ).toHaveNoViolations();
     });
   });

src/implementations/twig/components/carousel/README.md

@@ -8,7 +8,7 @@ npm install --save @ecl/twig-component-carousel
 
 ### Parameters
 
-- **"items"** (array) (default: []): List of page-banner compatible with EC page-banner component structure
+- **"items"** (array) (default: []): List of page-banner compatible with EC banner component structure
 - **"counter_label"** (string) (default: 'of')
 - **"sr_previous"** (string) (default: 'Previous slides') screen reader label for previous button
 - **"sr_next"** (string) (default: 'Next slides') screen reader label for next button

src/implementations/twig/components/carousel/__snapshots__/carousel.test.js.snap

@@ -19,7 +19,7 @@ exports[`Carousel Default renders correctly 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image ecl-banner--m"
+            class="ecl-banner ecl-banner--text-box ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -92,7 +92,7 @@ exports[`Carousel Default renders correctly 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-gradient ecl-banner--m"
+            class="ecl-banner ecl-banner--text-highlight ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -165,7 +165,7 @@ exports[`Carousel Default renders correctly 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-shade ecl-banner--m"
+            class="ecl-banner ecl-banner--image-overlay ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -407,7 +407,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image ecl-banner--m"
+            class="ecl-banner ecl-banner--text-box ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -480,7 +480,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-gradient ecl-banner--m"
+            class="ecl-banner ecl-banner--text-highlight ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -553,7 +553,7 @@ exports[`Carousel Default renders correctly with extra attributes 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-shade ecl-banner--m"
+            class="ecl-banner ecl-banner--image-overlay ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -793,7 +793,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image ecl-banner--m"
+            class="ecl-banner ecl-banner--text-box ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -866,7 +866,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-gradient ecl-banner--m"
+            class="ecl-banner ecl-banner--text-highlight ecl-banner--m"
           >
             <div
               class="ecl-banner__image"
@@ -939,7 +939,7 @@ exports[`Carousel Default renders correctly with extra class names 1`] = `
           role="group"
         >
           <section
-            class="ecl-banner ecl-banner--image-shade ecl-banner--m"
+            class="ecl-banner ecl-banner--image-overlay ecl-banner--m"
           >
             <div
               class="ecl-banner__image"