feat: Media container (#50)

* feat(media-container) - Adding component in the EC ecosystem

* feat(media-container) - Finalizing

* feat(media-container) - Using demo content from specs in test, various fixes

* feat(media-container) - Adding extra tests, removing dashes from control structures

* feat(media-container) - Fixing tests

* feat(media-container) - Adding adapter, updating test

* feat(media-container) - Adding adapter, for real

src/ec/.storybook/webpack.config.js

@@ -11,7 +11,7 @@ module.exports = {
         loader: 'twig-loader',
       },
       {
-        test: /\.svg$/,
+        test: /\.(svg|png|jpe?g|gif)$/,
         use: [
           {
             loader: 'file-loader',

src/ec/packages/ec-component-media-container/.npmignore

@@ -0,0 +1,5 @@
+__snapshots__
+docs
+*.story.js
+*.test.js
+**/*.md

src/ec/packages/ec-component-media-container/README.md

@@ -0,0 +1 @@
+# ECL Twig - EC Media Container component

src/ec/packages/ec-component-media-container/__snapshots__/media-container.test.js.snap

@@ -0,0 +1,93 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EC Media Container EC - Media container image Media container image renders correctly 1`] = `
+<figure
+  class="ecl-media-container"
+>
+  <img
+    alt="Jean Monnet banner."
+    class="ecl-media-container__media"
+    src="/example-image.jpg"
+  />
+  <figcaption
+    class="ecl-media-container__caption"
+  >
+    The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.
+  </figcaption>
+</figure>
+`;
+
+exports[`EC Media Container EC - Media container video Media container video renders correctly 1`] = `
+<figure
+  class="ecl-media-container"
+>
+  <video
+    alt="Jean Monnet banner."
+    class="ecl-media-container__media"
+    controls=""
+    poster="/example-image.jpg"
+  >
+    <source
+      src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
+      type="video/mp4"
+    />
+    <source
+      src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm"
+      type="video/webm"
+    />
+    <track
+      kind="captions"
+      label="English"
+      src="/captions/bunny-en.vtt"
+      srclang="en"
+    />
+    <track
+      kind="captions"
+      label="français"
+      src="/captions/bunny-fr.vtt"
+      srclang="fr"
+    />
+  </video>
+  <figcaption
+    class="ecl-media-container__caption"
+  >
+    The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.
+  </figcaption>
+</figure>
+`;
+
+exports[`EC Media Container Media Container generic tests Media container renders correctly with extra attributes 1`] = `
+<figure
+  class="ecl-media-container"
+  data-test="data-test-value"
+  data-test-1="data-test-value-1"
+>
+  <img
+    alt="Jean Monnet banner."
+    class="ecl-media-container__media"
+    src="/example-image.jpg"
+  />
+  <figcaption
+    class="ecl-media-container__caption"
+  >
+    The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.
+  </figcaption>
+</figure>
+`;
+
+exports[`EC Media Container Media Container generic tests renders correctly with extra class names 1`] = `
+<figure
+  class="ecl-media-container custom-media-container custom-media-container--test"
+>
+  <img
+    alt="Jean Monnet banner."
+    class="ecl-media-container__media"
+    src="/example-image.jpg"
+  />
+  <figcaption
+    class="ecl-media-container__caption"
+  >
+    The European Commission has put forward ambitious yet realistic proposals for a modern EU budget. It is time for an EU budget that reflects rapid developments in innovation, the economy, the environment and geopolitics, amongst others.
+  </figcaption>
+</figure>
+`;

src/ec/packages/ec-component-media-container/demo/data.js

@@ -0,0 +1,17 @@
+/* eslint-disable import/no-extraneous-dependencies, no-param-reassign */
+import specData from '@ecl/ec-specs-media-container/demo/data--video';
+
+const adapter = initialData => {
+  // Copy reference specification demo data.
+  const adaptedData = JSON.parse(JSON.stringify(initialData));
+  if (adaptedData.tracks && Array.isArray(adaptedData.tracks)) {
+    adaptedData.tracks.forEach(track => {
+      track.src_lang = track.srcLang;
+      delete track.srcLang;
+    });
+  }
+
+  return adaptedData;
+};
+
+export default adapter(specData);

src/ec/packages/ec-component-media-container/docs/media-container-image.md

@@ -0,0 +1,33 @@
+# ECL Twig - EC Media container component
+
+npm package: `@ecl-twig/ec-component-media-container`
+
+```shell
+npm install --save @ecl-twig/ec-component-media-container
+```
+
+## Media container
+
+### Parameters
+
+- "description" (string) (default: '') - A caption to be shown under the media,
+- "image" (string) (default: '') The path to the image,
+- "alt" (string) (default: '') The alternate text for the image,
+- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the component,
+- "extra_attributes" (optional) (array) (default: []) Extra attributes for the component.
+
+### Example:
+
+<!-- prettier-ignore -->
+```twig
+{% include 'path/to/media-container.html.twig' with { 
+  description: 'A description for this image', 
+  extra_classes: 'my-extra-class-1 my-extra-class-2', 
+  image: '/path/to/your/image', 
+  alt: 'An alternate text', 
+  extra_attributes: [ 
+    { name: 'data-test', value: 'data-test-value' },  
+    { name: 'data-test-1', value: 'data-test-value-1' }  
+  ] 
+} %}
+```

src/ec/packages/ec-component-media-container/docs/media-container-video.md

@@ -0,0 +1,54 @@
+# ECL Twig - EC Media container component
+
+npm package: `@ecl-twig/ec-component-media-container`
+
+```shell
+npm install --save @ecl-twig/ec-component-media-container
+```
+
+## Media container
+
+### Parameters
+
+- "description" (string) (default: '') This will be shown as a caption under the media,
+- "image" (string) (default: '') Path to the image,
+- "sources" (array) Define the video source, an array with the next keys
+  - "src" (string) (default: ''),
+  - "type" (string) (default: ''),
+- "tracks" (array) Define the video tracks, an array with the next keys
+  - "src" (string) (default: ''),
+  - "kind" (string) (default: ''),
+  - "src_lang" (string) (default: ''),
+  - "label" (string) (default: ''),
+- "alt" (string) (default: '') Alternate text for the image,
+- "extra_classes" (optional) (string) (default: '') Extra classes (space separated) for the component,
+- "extra_attributes" (optional) (array) (default: []) Extra attributes for the component.
+
+### Example:
+
+<!-- prettier-ignore -->
+```twig
+{% include 'path/to/media-container.html.twig' with { 
+  description: 'A description for this component', 
+  extra_classes: 'my-extra-class-1 my-extra-class-2', 
+  sources: [ 
+    { 
+      src: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4', 
+      type: 'video/mp4', 
+  	}, 
+  ], 
+  tracks": [ 
+	{ 
+      src: '/captions/bunny-en.vtt', 
+      kind: 'captions', 
+      src_lang: 'en', 
+      label: 'English', 
+    }, 
+  ], 
+  alt: 'An alternate text', 
+  extra_attributes: [ 
+    { name: 'data-test', value: 'data-test-value' },  
+    { name: 'data-test-1', value: 'data-test-value-1' }  
+  ] 
+} %}
+```

src/ec/packages/ec-component-media-container/media-container.html.twig

@@ -0,0 +1,91 @@
+{% spaceless %}
+{#
+  Parameters:
+  - "alt" (string) (default: ''),
+  - "image" (string) (default: ''),
+  - "extra_classes" (string) (default: ''),
+  - "sources" (array) (default: []): format: [
+      {
+        "src" (string) (default: ''),
+        "type" (string) (default: ''),
+      },
+      ...
+    ],
+  - "tracks" (array) (default: []): format: [
+      {
+        "src" (string) (default: ''),
+        "kind" (string) (default: ''),
+        "src_lang" (string) (default: ''),
+        "label" (string) (default: ''),
+      },
+      ...
+    ],
+  - "description" (string) (default: ''),
+  - "extra_attributes" (array) (default: []): format: [
+      {
+        "name" (string) (default: ''),
+        "value" (string) (default: '')
+      },
+      ...
+    ]
+#}
+
+{# Internal properties #}
+
+{% set _css_class = 'ecl-media-container' %}
+{% set _image = image|default('') %}
+{% set _description = description|default('') %}
+{% set _alt = alt|default('') %}
+{% set _extra_attributes = '' %}
+{% set _sources = sources|default({}) %}
+{% set _tracks = tracks|default({}) %}
+
+{# Internal logic - Process properties #}
+
+{% if extra_classes is defined and extra_classes is not empty %}
+  {% set _css_class = _css_class ~ ' ' ~ extra_classes %}
+{% endif %}
+
+{% if extra_attributes is defined and extra_attributes is not empty and extra_attributes is iterable %}
+  {% for attr in extra_attributes %}
+    {% set _extra_attributes = _extra_attributes ~ ' ' ~ attr.name ~ '="' ~ attr.value ~ '"' %}
+  {% endfor %}
+{% endif %} 
+
+{# Print the result #}
+
+<figure class="{{ _css_class }}"{{ _extra_attributes|raw }}>
+  {% if _sources is not empty and sources is iterable %}
+    <video
+      alt="{{ _alt }}"
+      class="ecl-media-container__media"
+      controls
+      poster="{{ _image }}"
+    >
+    {% for source in _sources %}
+      <source type="{{ source.type }}" src="{{ source.src }}" />
+    {% endfor %}
+    {% if tracks is not empty and tracks is iterable %}
+      {% for track in _tracks %}
+        <track
+          kind="{{ track.kind }}"
+          label="{{ track.label }}"
+          src="{{ track.src }}"
+          srclang="{{ track.src_lang }}"
+        />
+      {% endfor %}
+    {% endif %}
+    </video>
+  {% else %}
+    <img
+      alt="{{ _alt }}"
+      class="ecl-media-container__media"
+      src="{{ _image }}"
+    />
+  {% endif %}
+  <figcaption class="ecl-media-container__caption">
+    {{- _description -}}
+  </figcaption>
+</figure>
+
+{% endspaceless %}

src/ec/packages/ec-component-media-container/media-container.story.js

@@ -0,0 +1,41 @@
+import { storiesOf } from '@storybook/html';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import { withNotes } from '@ecl-twig/storybook-addon-notes';
+import withCode from '@ecl-twig/storybook-addon-code';
+import imgProps from '@ecl/ec-specs-media-container/demo/data--image';
+import demoVideo from './demo/data';
+import demoImg from '../../../../static/images/example-image.jpg';
+import imageDocs from './docs/media-container-image.md';
+import videoDocs from './docs/media-container-video.md';
+import mediaContainer from './media-container.html.twig';
+
+storiesOf('Components/Media container', module)
+  .addDecorator(withKnobs)
+  .addDecorator(withNotes)
+  .addDecorator(withCode)
+  .add(
+    'image',
+    () =>
+      mediaContainer({
+        description: text('Description', imgProps.description),
+        alt: text('Alternate text', imgProps.alt),
+        image: text('Image path', demoImg),
+      }),
+    {
+      notes: { markdown: imageDocs },
+    }
+  )
+  .add(
+    'video',
+    () =>
+      mediaContainer({
+        description: text('Description', demoVideo.description),
+        alt: text('Alternative text', demoVideo.alt),
+        image: text('Image path', demoImg),
+        sources: demoVideo.sources,
+        tracks: demoVideo.tracks,
+      }),
+    {
+      notes: { markdown: videoDocs },
+    }
+  );