feat(media-container): add expandable - FRONT-4017

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

@@ -196,7 +196,8 @@ const prepareData = (data, args) => {
   data.title = args.title;
   data.description = args.description;
   data.centered = args.centered;
-  data.full_width = args.width === 'inside';
+  data.full_width =
+    args.width === 'inside the grid container, with fullwidth class';
 
   if (data.image) {
     data.image = args.image;
@@ -223,7 +224,10 @@ const prepareData = (data, args) => {
 
 const renderStory = (data, args) => {
   let story = banner(prepareData(data, args));
-  if (args.width === 'container' || args.width === 'inside') {
+  if (
+    args.width === 'inside the grid container' ||
+    args.width === 'inside the grid container, with fullwidth class'
+  ) {
     story = `<div class="ecl-container">${story}</div>`;
   }
   if (args.gridContent) {

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

@@ -8,7 +8,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ecl/twig-component-link": "3.8.4"
+    "@ecl/twig-component-link": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/specs-component-banner": "3.8.4",

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

@@ -8,7 +8,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ecl/twig-component-content-block": "3.8.4"
+    "@ecl/twig-component-content-block": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/specs-component-card": "3.8.4",

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

@@ -10,7 +10,8 @@
   "dependencies": {
     "@ecl/twig-component-button": "3.8.4",
     "@ecl/twig-component-icon": "3.8.4",
-    "@ecl/twig-component-link": "3.8.4"
+    "@ecl/twig-component-link": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/specs-component-file": "3.8.4",

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

@@ -10,7 +10,8 @@
   "dependencies": {
     "@ecl/twig-component-button": "3.8.4",
     "@ecl/twig-component-icon": "3.8.4",
-    "@ecl/twig-component-link": "3.8.4"
+    "@ecl/twig-component-link": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/specs-component-gallery": "3.8.4",

src/implementations/twig/components/list-illustration/package.json

@@ -8,7 +8,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ecl/twig-component-icon": "3.8.4"
+    "@ecl/twig-component-icon": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/specs-component-list-illustration": "3.8.4",

src/implementations/twig/components/media-container/README.md

@@ -22,6 +22,7 @@ npm install --save @ecl/twig-component-media-container
   - "description" (string) (default: ''),
 - **"image"**: (string) (default: '') Path or url to the image used as the video placeholder
 - **"ratio"** (string) ('') Ratio of the embedded media, if empty the ratio will be set by the js
+- **"expandable"** (associative array) (default: {}): Optional expandable block, following ECL Expandable structure
 - **"extra_classes"** (optional) (string) (default: '') Extra classes (space separated)
 - **"extra_attributes"** (optional) (array) (default: []) Extra attributes
 

src/implementations/twig/components/media-container/__snapshots__/media-container.test.js.snap

@@ -94,6 +94,81 @@ exports[`Media Container image renders correctly with old data 1`] = `
 </jest>
 `;
 
+exports[`Media Container infography renders correctly 1`] = `
+<jest>
+  <div
+    class="ecl-media-container__container"
+  >
+    <figure
+      aria-describedby="expandable-example-content"
+      class="ecl-media-container"
+    >
+      <picture
+        class="ecl-picture ecl-media-container__picture"
+      >
+        <img
+          alt="Infography alt text"
+          class="ecl-media-container__media"
+          src="https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg"
+        />
+      </picture>
+      <figcaption
+        class="ecl-media-container__caption"
+      >
+        Infography title and copyright
+      </figcaption>
+    </figure>
+    <div
+      class="ecl-expandable ecl-media-container__expandable"
+      data-ecl-auto-init="Expandable"
+      data-ecl-expandable="true"
+    >
+      <button
+        aria-controls="expandable-example-content"
+        aria-expanded="false"
+        class="ecl-button ecl-button--secondary ecl-expandable__toggle"
+        data-ecl-expandable-toggle=""
+        data-ecl-label-collapsed="Collapsed"
+        data-ecl-label-expanded="Expanded"
+        type="button"
+      >
+        <span
+          class="ecl-button__container"
+        >
+          <span
+            class="ecl-button__label"
+            data-ecl-label="true"
+          >
+            Collapsed
+          </span>
+          <svg
+            aria-hidden="true"
+            class="ecl-icon ecl-icon--fluid ecl-icon--rotate-180 ecl-button__icon ecl-button__icon--after"
+            data-ecl-icon=""
+            focusable="false"
+          >
+            <use
+              xlink:href="/icons.svg#corner-arrow"
+            />
+          </svg>
+        </span>
+      </button>
+      <div
+        class="ecl-expandable__content"
+        hidden=""
+        id="expandable-example-content"
+      >
+        <p
+          class="ecl-u-type-paragraph-m"
+        >
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et varius est. Sed elementum rutrum libero, at vulputate nisl posuere et. Morbi dui sem, rhoncus non fermentum eget, finibus non purus.
+        </p>
+      </div>
+    </div>
+  </div>
+</jest>
+`;
+
 exports[`Media Container video renders correctly 1`] = `
 <jest>
   <figure

src/implementations/twig/components/media-container/media-container.html.twig

@@ -3,7 +3,6 @@
   Parameters:
   - "picture" (associative array) (default: {}): Image for media container, following ECL Picture structure
   - "full_width": (bool) (default: false) Full width media container (inside the grid container)
-  - "extra_classes" (string) (default: ''),
   - "sources" (array) (default: []): format: [
       {
         "src" (string) (default: ''),
@@ -22,14 +21,16 @@
     ],
   - "image" (string) (default: ''): Image to be used as the video placeholder 
   - "description" (string) (default: ''),
+  - "ratio" (string) ('')
+  - "expandable" (associative array) (default: {}): Optional expandable block, following ECL Expandable structure
+  - "extra_classes" (string) (default: ''),
   - "extra_attributes" (array) (default: []): format: [
       {
         "name" (string) (default: ''),
         "value" (string) (default: '')
       },
       ...
     ]
-  - "ratio" (string) ('')
 
   Blocks:
     - "embedded_media"
@@ -54,6 +55,7 @@
 {% set _ratio = ratio|default('') %}
 {% set _sources = sources|default({}) %}
 {% set _tracks = tracks|default({}) %}
+{% set _expandable = expandable|default({}) %}
 
 {# Internal logic - Process properties #}
 
@@ -81,6 +83,10 @@
   {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
 {% endif %}
 
+{% if _expandable is not empty and _expandable.id is defined %}
+  {% set _extra_attributes = _extra_attributes ~ ' aria-describedby="' ~ _expandable.id ~ '-content"' %}
+{% endif %}
+
 {% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
   {% for attr in extra_attributes %}
     {% if attr.value is defined %}
@@ -93,6 +99,10 @@
 
 {# Print the result #}
 
+{% if _expandable is not empty %}
+<div class="ecl-media-container__container">
+{% endif %}
+
 <figure class="{{ _css_class }}"{{ _extra_attributes|raw }}>
 {% if _embedded_media is not empty %}
   {% set _embed_class = _ratio ? "ecl-media-container__media ecl-media-container__media--ratio-" ~ _ratio : "ecl-media-container__media" %}
@@ -133,4 +143,11 @@
 {% endif %}
 </figure>
 
+{% if _expandable is not empty %}
+  {% include '@ecl/expandable/expandable.html.twig' with _expandable|merge({
+    extra_classes: 'ecl-media-container__expandable',
+  }) only %}
+</div>
+{% endif %}
+
 {% endapply %}

src/implementations/twig/components/media-container/media-container.story.js

@@ -1,9 +1,11 @@
 import { withNotes } from '@ecl/storybook-addon-notes';
 import withCode from '@ecl/storybook-addon-code';
+import { correctPaths } from '@ecl/story-utils';
 
 import dataImg from '@ecl/specs-component-media-container/demo/data--image';
 import dataVideo from '@ecl/specs-component-media-container/demo/data--video';
 import dataEmbed from '@ecl/specs-component-media-container/demo/data--embed-video';
+import dataInfography from '@ecl/specs-component-media-container/demo/data--infography';
 import mediaContainer from './media-container.html.twig';
 import notes from './README.md';
 
@@ -83,7 +85,9 @@ const getArgTypes = (data) => {
 };
 
 const prepareData = (data, args) => {
-  data.full_width = args.width === 'inside';
+  correctPaths(data);
+  data.full_width =
+    args.width === 'inside the ecl-container, with fullwidth class';
 
   if (!args.show_description) {
     args.description = '';
@@ -94,7 +98,10 @@ const prepareData = (data, args) => {
 
 const renderStory = (data, args) => {
   let story = mediaContainer(prepareData(data, args));
-  if (args.width === 'container' || args.width === 'inside') {
+  if (
+    args.width === 'inside the ecl-container' ||
+    args.width === 'inside the ecl-container, with fullwidth class'
+  ) {
     story = `<div class="ecl-container">${story}</div>`;
   }
 
@@ -167,3 +174,12 @@ EmbeddedVideo.parameters = {
     },
   },
 };
+
+export const Infography = (args) => renderStory(dataInfography, args);
+
+Infography.storyName = 'infography';
+Infography.args = getArgs(dataInfography);
+Infography.argTypes = getArgTypes(dataInfography);
+Infography.parameters = {
+  notes: { markdown: notes, json: dataInfography },
+};

src/implementations/twig/components/media-container/media-container.test.js

@@ -8,6 +8,7 @@ import { axe, toHaveNoViolations } from 'jest-axe';
 import demoContentImg from '@ecl/specs-component-media-container/demo/data--image';
 import demoContentVideo from '@ecl/specs-component-media-container/demo/data--video';
 import demoContentEmbed from '@ecl/specs-component-media-container/demo/data--embed-video';
+import demoContentInfography from '@ecl/specs-component-media-container/demo/data--infography';
 
 expect.extend(toHaveNoViolations);
 
@@ -77,4 +78,11 @@ describe('Media Container', () => {
       return expect(render(demoContentEmbed)).resolves.toMatchSnapshot();
     });
   });
+
+  describe('infography', () => {
+    test('renders correctly', () => {
+      expect.assertions(1);
+      return expect(render(demoContentInfography)).resolves.toMatchSnapshot();
+    });
+  });
 });

src/implementations/twig/components/media-container/package.json

@@ -7,6 +7,10 @@
   "publishConfig": {
     "access": "public"
   },
+  "dependencies": {
+    "@ecl/twig-component-expandable": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
+  },
   "devDependencies": {
     "@ecl/specs-component-media-container": "3.8.4",
     "@ecl/vanilla-component-media-container": "3.8.4"

src/implementations/twig/components/page-header/package.json

@@ -8,7 +8,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ecl/twig-component-breadcrumb-standardised": "3.8.4"
+    "@ecl/twig-component-breadcrumb-standardised": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/specs-component-page-header": "3.8.4",

src/implementations/twig/components/site-footer/package.json

@@ -8,7 +8,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@ecl/twig-component-link": "3.8.4"
+    "@ecl/twig-component-link": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/specs-component-site-footer": "3.8.4",

src/implementations/twig/components/site-header/package.json

@@ -12,7 +12,8 @@
     "@ecl/twig-component-link": "3.8.4",
     "@ecl/twig-component-menu": "3.8.4",
     "@ecl/twig-component-message": "3.8.4",
-    "@ecl/twig-component-search-form": "3.8.4"
+    "@ecl/twig-component-search-form": "3.8.4",
+    "@ecl/twig-component-picture": "3.8.4"
   },
   "devDependencies": {
     "@ecl/resources-ec-logo": "3.8.4",

src/implementations/vanilla/components/media-container/_media-container.scss

@@ -48,6 +48,10 @@ $_scrollbar-width: 16px; // average scrollbar width; used in full screen calculu
   position: relative;
 }
 
+.ecl-media-container__expandable {
+  margin-top: map.get(theme.$spacing, 'xs');
+}
+
 // Manual ratio
 .ecl-media-container__media--ratio-16-9 {
   @include uMedia.aspect-ratio(16, 9);

src/specs/components/media-container/demo/data--infography.js

@@ -0,0 +1,26 @@
+module.exports = {
+  picture: {
+    img: {
+      src: 'https://inno-ecl.s3.amazonaws.com/media/examples/example-image2.jpg',
+      alt: 'Infography alt text',
+    },
+  },
+  description: 'Infography title and copyright',
+  expandable: {
+    id: 'expandable-example',
+    button: {
+      label: 'Collapsed',
+      variant: 'secondary',
+      icon: {
+        name: 'corner-arrow',
+        transform: 'rotate-180',
+        size: 'fluid',
+        path: '/icons.svg',
+      },
+    },
+    label_expanded: 'Expanded',
+    label_collapsed: 'Collapsed',
+    content:
+      '<p class="ecl-u-type-paragraph-m">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et varius est. Sed elementum rutrum libero, at vulputate nisl posuere et. Morbi dui sem, rhoncus non fermentum eget, finibus non purus.</p>',
+  },
+};

src/website/src/pages/ec/components/media/media-container/demo/index.js

@@ -1,8 +1,10 @@
 import demoContentImg from '@ecl/specs-component-media-container/demo/data--image';
 import demoContentVideo from '@ecl/specs-component-media-container/demo/data--video';
 import demoContentEmbed from '@ecl/specs-component-media-container/demo/data--embed-video';
+import demoContentInfography from '@ecl/specs-component-media-container/demo/data--infography';
 import template from '@ecl/twig-component-media-container/media-container.html.twig';
 
 export const mediaContainerImg = template(demoContentImg);
 export const mediaContainerVideo = template(demoContentVideo);
 export const mediaContainerEmbed = template(demoContentEmbed);
+export const mediaContainerInfography = template(demoContentInfography);