feat(blockquote): use picture tag - FRONT-3873

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

@@ -11,22 +11,48 @@ npm install --save @ecl/twig-component-blockquote
 - **"citation"** (string) (default: '')
 - **"author"** (string) (default: '')
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
-- **"image"** (optional) (object) (default: {}) Blockquote image
-  - "path" (string) Image src, eg. 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg'
-  - "alt" (string) Image alt, eg: 'blockquote-image'
+- **"picture"** (associative array) (default: {}): Image for the blockquote, following ECL Picture structure
+- **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
   - "name" (string) Attribute name, eg. 'data-test'
   - "value" (string) Attribute value, eg: 'data-test-1'
 
+Deprecated
+
+- **"image"** (optional) (object) (default: {}) Blockquote image
+  - "path" (string) Image src
+  - "alt" (string) Image alt
+
 ## Example:
 
 <!-- prettier-ignore -->
 ```twig
 {% include '@ecl/blockquote/blockquote.html.twig' with { 
   citation: 'Twenty years from now you will be more disappointed by the things that you didn’t do than by the ones you did do.', 
   author: 'Mark Twain',
-  image: {
-    path: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg",
+  picture: {
+    img: {
+      src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
+      alt: 'Image alternative text',
+    },
+    sources: [
+      {
+        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image5.jpg',
+        media: 'xl',
+      },
+      {
+        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image4.jpg',
+        media: 'l',
+      },
+      {
+        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image3.jpg',
+        media: 'm',
+      },
+      {
+        src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
+        media: 's',
+      },
+    ],
   },
 } %}
 ```

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

@@ -1,5 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Blockquote Default backward compatibility 1`] = `
+<jest>
+  <figure
+    class="ecl-blockquote"
+  >
+    <div
+      class="ecl-blockquote__body"
+    >
+      <blockquote
+        class="ecl-blockquote__quote"
+      >
+        <p
+          class="ecl-blockquote__citation"
+        >
+          An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.
+        </p>
+      </blockquote>
+      <footer
+        class="ecl-blockquote__attribution"
+      >
+        <cite
+          class="ecl-blockquote__author"
+        >
+          President Juncker
+        </cite>
+      </footer>
+    </div>
+    <picture
+      class="ecl-picture ecl-blockquote__picture"
+    >
+      <img
+        alt="Image alternative text"
+        class="ecl-blockquote__image"
+        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg"
+      />
+    </picture>
+  </figure>
+</jest>
+`;
+
 exports[`Blockquote Default renders correctly 1`] = `
 <jest>
   <figure
@@ -27,11 +67,15 @@ exports[`Blockquote Default renders correctly 1`] = `
         </cite>
       </footer>
     </div>
-    <img
-      alt="Image alternative text"
-      class="ecl-blockquote__image"
-      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg"
-    />
+    <picture
+      class="ecl-picture ecl-blockquote__picture"
+    >
+      <img
+        alt="Image alternative text"
+        class="ecl-blockquote__image"
+        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+      />
+    </picture>
   </figure>
 </jest>
 `;
@@ -65,11 +109,15 @@ exports[`Blockquote Default renders correctly with extra attributes 1`] = `
         </cite>
       </footer>
     </div>
-    <img
-      alt="Image alternative text"
-      class="ecl-blockquote__image"
-      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg"
-    />
+    <picture
+      class="ecl-picture ecl-blockquote__picture"
+    >
+      <img
+        alt="Image alternative text"
+        class="ecl-blockquote__image"
+        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+      />
+    </picture>
   </figure>
 </jest>
 `;
@@ -101,11 +149,15 @@ exports[`Blockquote Default renders correctly with extra class names 1`] = `
         </cite>
       </footer>
     </div>
-    <img
-      alt="Image alternative text"
-      class="ecl-blockquote__image"
-      src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg"
-    />
+    <picture
+      class="ecl-picture ecl-blockquote__picture"
+    >
+      <img
+        alt="Image alternative text"
+        class="ecl-blockquote__image"
+        src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
+      />
+    </picture>
   </figure>
 </jest>
 `;

src/implementations/twig/components/blockquote/blockquote.html.twig

@@ -5,16 +5,20 @@
     - "citation" (string) (default: '')
     - "author" (string) (default: '')
     - "extra_classes" (string) (default: '')
-    - "image" (object) (default: {}): format: {
-        "path" (string) (default: '')
-        "alt" (string) (default: '')
-    }
+    - "picture" (associative array) (default: {}): Image for the blockquote, following ECL Picture structure
+    - "extra_classes" (optional) (string) (default: '') Extra classes (space separated)
     - "extra_attributes" (array) (default: []): format: [
         {
           "name" (string) (default: ''),
           "value" (optional) (string)
         ...
       ]
+
+  Deprecated:
+    - "image" (object) (default: {}): format: {
+        "path" (string) (default: '')
+        "alt" (string) (default: '')
+    }
 #}
 
 {# Internal properties #}
@@ -23,7 +27,19 @@
 {% set _extra_attributes = '' %}
 {% set _citation = citation|default('') %}
 {% set _author = author|default('') %}
-{% set _image = image|default({}) %}
+{% set _image = image|default({}) %} {# DEPRECATED #}
+{% set _picture = picture|default({}) %}
+
+{# Backward compatibility #}
+
+{% if _picture is empty and _image is not empty %}
+  {% set _picture = {
+    'img': {
+      'src': _image.path|default(''),
+      'alt': _image.alt|default('')
+    }
+  } %}
+{% endif %}
 
 {# Internal logic - Process properties #}
 
@@ -48,16 +64,12 @@
     <blockquote class="ecl-blockquote__quote"><p class="ecl-blockquote__citation">{{ _citation }}</p></blockquote>
     <footer class="ecl-blockquote__attribution"><cite class="ecl-blockquote__author">{{ _author }}</cite></footer>
   </div>
-  {% if image is defined and image is not empty %}
-    <img
-      {% if image.path is not empty %}
-        src="{{ image.path }}"
-      {% endif %}
-      {% if image.alt is not empty %}
-        alt="{{ image.alt }}"
-      {% endif %}
-        class="ecl-blockquote__image"
-    />
+  {% if _picture is not empty and _picture.img is not empty %}
+    {% include '@ecl/picture/picture.html.twig' with {
+      picture: _picture,
+      extra_classes: "ecl-blockquote__picture",
+      extra_image_classes: "ecl-blockquote__image",
+    } only %}
   {% endif %}
 </figure>
 

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

@@ -5,8 +5,6 @@ import defaultData from '@ecl/specs-component-blockquote/demo/data';
 import blockquote from './blockquote.html.twig';
 import notes from './README.md';
 
-const demoImage = { ...defaultData.image };
-
 const getArgs = (data) => ({
   show_image: false,
   citation: data.citation,
@@ -49,8 +47,13 @@ const getArgTypes = () => ({
 });
 
 const prepareData = (data, args) => {
-  data.image = args.show_image ? demoImage : null;
-  return Object.assign(data, args);
+  const clone = JSON.parse(JSON.stringify(data));
+
+  if (!args.show_image) {
+    delete clone.picture;
+  }
+
+  return Object.assign(clone, args);
 };
 
 export default {

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

@@ -7,6 +7,16 @@ import { axe, toHaveNoViolations } from 'jest-axe';
 
 import data from '@ecl/specs-component-blockquote/demo/data';
 
+const dataPrevious = {
+  citation:
+    'An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.',
+  author: 'President Juncker',
+  image: {
+    path: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg',
+    alt: 'Image alternative text',
+  },
+};
+
 expect.extend(toHaveNoViolations);
 
 describe('Blockquote', () => {
@@ -20,6 +30,12 @@ describe('Blockquote', () => {
       return expect(render(data)).resolves.toMatchSnapshot();
     });
 
+    test('backward compatibility', () => {
+      expect.assertions(1);
+
+      return expect(render(dataPrevious)).resolves.toMatchSnapshot();
+    });
+
     test('renders correctly with extra class names', () => {
       expect.assertions(1);
 

src/implementations/twig/components/blockquote/package.json

@@ -7,6 +7,9 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@ecl/twig-component-picture": "3.7.1"
+  },
   "devDependencies": {
     "@ecl/specs-component-blockquote": "3.7.1",
     "@ecl/vanilla-component-blockquote": "3.7.1"

src/implementations/vanilla/components/blockquote/_blockquote-print.scss

@@ -17,11 +17,22 @@ $_author-color: null !default;
 
 .ecl-blockquote,
 %ecl-blockquote {
-  border-left: $_border-width solid $_border-color;
-  border-radius: $_border-radius;
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: start;
   margin: 0;
   padding-bottom: map.get(theme.$spacing-print, 'm');
-  padding-left: map.get(theme.$spacing-print, 'l');
+  padding-inline-start: map.get(theme.$spacing-print, 'l');
+  padding-top: map.get(theme.$spacing-print, 'm');
+}
+
+.ecl-blockquote__body,
+%ecl-blockquote {
+  border-inline-start: $_border-width solid $_border-color;
+  border-radius: $_border-radius;
+  display: inline-block;
+  padding-bottom: map.get(theme.$spacing-print, 'm');
+  padding-inline-start: map.get(theme.$spacing-print, 'l');
   padding-top: map.get(theme.$spacing-print, 'm');
 }
 
@@ -58,3 +69,12 @@ $_author-color: null !default;
   font: map.get(theme.$font-prolonged-print, 'l');
   font-weight: $_author-font-weight;
 }
+
+.ecl-blockquote__image,
+%ecl-blockquote__image {
+  aspect-ratio: 1/1;
+  height: 120px;
+  margin-inline-end: map.get(theme.$spacing-print, 'l');
+  object-fit: cover;
+  width: 120px;
+}

src/implementations/vanilla/components/blockquote/_blockquote.scss

@@ -72,8 +72,10 @@ $_text-max-width: 65ch; // Approximately 80 characters with the current font
 
 .ecl-blockquote__image,
 %ecl-blockquote__image {
+  aspect-ratio: 1/1;
   height: 120px;
   margin-top: map.get(theme.$spacing, 's');
+  object-fit: cover;
   width: 120px;
 }
 

src/specs/components/blockquote/demo/data.js

@@ -3,8 +3,10 @@ module.exports = {
   citation:
     'An interconnected grid will help deliver the ultimate goal of the Energy Union, to make sure affordable, secure and sustainable energy, and also growth across the EU.',
   author: 'President Juncker',
-  image: {
-    path: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image-square.jpg',
-    alt: 'Image alternative text',
+  picture: {
+    img: {
+      src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg',
+      alt: 'Image alternative text',
+    },
   },
 };