feat(eu/media-container): implement EU media container - INNO-1153

src/systems/ec/implementations/react/packages/media-container/MediaContainer.jsx

@@ -28,7 +28,7 @@ const MediaContainer = ({
           ))}
 
           {tracks.map(track => (
-            <track {...track} src={track.src} />
+            <track {...track} key={track.src} />
           ))}
         </video>
       ) : (

src/systems/ec/implementations/vanilla/packages/ec-component-media-container/ec-component-media-container.scss

@@ -3,7 +3,7 @@
  * @define media-container
  */
 
-// Import base and generic
+// Import base
 @import '@ecl/ec-base/ec-base';
 
 @mixin ecl-media-container() {
@@ -27,7 +27,7 @@
   }
 }
 
-// Use generic mixin
+// Use mixin
 @include exports('ec-component-media-container') {
   @include ecl-media-container();
 }

src/systems/ec/implementations/vanilla/packages/ec-component-media-container/package.json

@@ -3,8 +3,9 @@
   "author": "European Commission",
   "license": "EUPL-1.1",
   "version": "2.0.0-alpha.0",
-  "description": "ECL Media container",
+  "description": "ECL EC Media container",
   "style": "ec-component-media-container.scss",
+  "sass": "ec-component-media-container.scss",
   "dependencies": {
     "@ecl/ec-base": "^2.0.0-alpha.0"
   },
@@ -23,6 +24,5 @@
     "ecl",
     "europa-component-library",
     "design-system"
-  ],
-  "sass": "ec-component-media-container.scss"
+  ]
 }

src/systems/ec/specs/components/media-container/config.js

@@ -2,7 +2,6 @@ import code from './docs/code.mdx';
 import usage from './docs/usage.md';
 
 export default {
-  url: '/ec/components/media-container',
   title: 'Media container',
   section: 'Components/Media',
   status: 'ready',

src/systems/ec/specs/components/media-container/docs/code.mdx

@@ -4,7 +4,7 @@ import MediaContainer from '@ecl/ec-react-component-media-container/MediaContain
 import demoContentImage from '../demo/data--image';
 import demoContentVideo from '../demo/data--video';
 
-## Media container image
+## Image
 
 <Playground
   system="ec"
@@ -16,7 +16,7 @@ import demoContentVideo from '../demo/data--video';
 
 
 
-## MediaContainer video
+## Video
 
 <Playground
   system="ec"

src/systems/ec/specs/components/media-container/package.json

@@ -3,7 +3,7 @@
   "author": "European Commission",
   "license": "EUPL-1.1",
   "version": "2.0.0-alpha.0",
-  "description": "ECL Media container Specs",
+  "description": "ECL EC Media container Specs",
   "publishConfig": {
     "access": "public"
   },

src/systems/eu/implementations/react/packages/media-container/MediaContainer.jsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const MediaContainer = ({
+  image,
+  alt,
+  sources,
+  tracks,
+  description,
+  className,
+  ...props
+}) => {
+  const classNames = classnames(className, 'ecl-media-container');
+
+  return (
+    <figure {...props} className={classNames}>
+      {Array.isArray(sources) && sources.length !== 0 ? (
+        /* eslint-disable-next-line jsx-a11y/media-has-caption */
+        <video
+          className="ecl-media-container__media"
+          controls="controls"
+          poster={image}
+          alt={alt}
+        >
+          {sources.map(source => (
+            <source {...source} key={source.src} />
+          ))}
+
+          {tracks.map(track => (
+            <track {...track} key={track.src} />
+          ))}
+        </video>
+      ) : (
+        <img className="ecl-media-container__media" src={image} alt={alt} />
+      )}
+      {description && (
+        <figcaption className="ecl-media-container__caption">
+          {description}
+        </figcaption>
+      )}
+    </figure>
+  );
+};
+
+MediaContainer.propTypes = {
+  alt: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.string,
+  sources: PropTypes.arrayOf(
+    PropTypes.shape({
+      src: PropTypes.string,
+      type: PropTypes.string,
+    })
+  ),
+  tracks: PropTypes.arrayOf(
+    PropTypes.shape({
+      src: PropTypes.string,
+      kind: PropTypes.string,
+      srcLang: PropTypes.string,
+      label: PropTypes.string,
+    })
+  ),
+  className: PropTypes.string,
+};
+
+MediaContainer.defaultProps = {
+  alt: '',
+  description: '',
+  image: '',
+  className: '',
+  sources: [],
+  tracks: [],
+};
+
+export default MediaContainer;

src/systems/eu/implementations/react/packages/media-container/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@ecl/eu-react-component-media-container",
+  "author": "European Commission",
+  "license": "EUPL-1.1",
+  "version": "2.0.0-alpha.0",
+  "description": "ECL EU React Media container",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ec-europa/europa-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ec-europa/europa-component-library/issues"
+  },
+  "homepage": "https://github.com/ec-europa/europa-component-library",
+  "keywords": [
+    "ecl",
+    "europa-component-library",
+    "design-system",
+    "react"
+  ],
+  "devDependencies": {
+    "@ecl/eu-specs-media-container": "^2.0.0-alpha.0"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.6",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "prop-types": "^15.6.2"
+  }
+}

src/systems/eu/implementations/react/packages/media-container/stories/Index.jsx

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+
+import demoContentImage from '@ecl/eu-specs-media-container/demo/data--image';
+import demoContentVideo from '@ecl/eu-specs-media-container/demo/data--video';
+
+import MediaContainer from '../MediaContainer';
+
+storiesOf('MediaContainer', module)
+  .addDecorator(withKnobs)
+  .add('video', () => (
+    <MediaContainer
+      description={text('Description', demoContentVideo.description)}
+      image={text('Image', demoContentVideo.image)}
+      sources={demoContentVideo.sources}
+      tracks={demoContentVideo.tracks}
+      alt={text('Alt', demoContentVideo.alt)}
+    />
+  ))
+  .add('image', () => (
+    <MediaContainer
+      description={text('Description', demoContentImage.description)}
+      image={text('Image', demoContentImage.image)}
+      alt={text('Alt', demoContentImage.alt)}
+    />
+  ));

src/systems/eu/implementations/vanilla/packages/eu-component-media-container/README.md

@@ -0,0 +1 @@
+# Media container

src/systems/eu/implementations/vanilla/packages/eu-component-media-container/eu-component-media-container.scss

@@ -0,0 +1,33 @@
+/**
+ * Media container component
+ * @define media-container
+ */
+
+// Import base
+@import '@ecl/eu-base/eu-base';
+
+@mixin ecl-media-container() {
+  .ecl-media-container {
+    background-color: $ecl-color-grey-10;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+  }
+
+  .ecl-media-container__media {
+    display: block;
+    height: auto;
+    object-fit: cover;
+    width: 100%;
+  }
+
+  .ecl-media-container__caption {
+    font: $ecl-font-prolonged-m;
+    padding: $ecl-spacing-s;
+  }
+}
+
+// Use mixin
+@include exports('eu-component-media-container') {
+  @include ecl-media-container();
+}

src/systems/eu/implementations/vanilla/packages/eu-component-media-container/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@ecl/eu-component-media-container",
+  "author": "European Commission",
+  "license": "EUPL-1.1",
+  "version": "2.0.0-alpha.0",
+  "description": "ECL EU Media container",
+  "style": "eu-component-media-container.scss",
+  "sass": "eu-component-media-container.scss",
+  "dependencies": {
+    "@ecl/eu-base": "^2.0.0-alpha.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/ec-europa/europa-component-library.git"
+  },
+  "bugs": {
+    "url": "https://github.com/ec-europa/europa-component-library/issues"
+  },
+  "homepage": "https://github.com/ec-europa/europa-component-library",
+  "keywords": [
+    "ecl",
+    "europa-component-library",
+    "design-system"
+  ]
+}

src/systems/eu/implementations/vanilla/packages/eu-preset-full/_imports.scss

@@ -60,6 +60,7 @@
 @import '@ecl/eu-component-card/eu-component-card';
 @import '@ecl/eu-component-footer/eu-component-footer';
 @import '@ecl/eu-component-language-list/eu-component-language-list';
+@import '@ecl/eu-component-media-container/eu-component-media-container';
 // @import '@ecl/eu-component-list-item/eu-component-list-item';
 // @import '@ecl/eu-component-inpage-navigation/eu-component-inpage-navigation';
 // @import '@ecl/eu-component-pager/eu-component-pager';

src/systems/eu/implementations/vanilla/packages/eu-preset-full/package.json

@@ -37,6 +37,7 @@
     "@ecl/eu-component-language-list": "^2.0.0-alpha.0",
     "@ecl/eu-component-link": "^2.0.0-alpha.0",
     "@ecl/eu-component-logo": "^2.0.0-alpha.0",
+    "@ecl/eu-component-media-container": "^2.0.0-alpha.0",
     "@ecl/eu-component-page-header": "^2.0.0-alpha.0",
     "@ecl/eu-component-search-form": "^2.0.0-alpha.0",
     "@ecl/eu-component-site-header": "^2.0.0-alpha.0",

src/systems/eu/specs/components/media-container/config.js

@@ -0,0 +1,21 @@
+import code from './docs/code.mdx';
+import usage from './docs/usage.md';
+
+export default {
+  title: 'Media container',
+  section: 'Components/Media',
+  status: 'ready',
+  tabs: [
+    {
+      name: 'Usage',
+      component: usage,
+      url: 'usage',
+    },
+    {
+      name: 'Showcase',
+      component: code,
+      url: 'showcase',
+    },
+  ],
+  defaultTab: 'usage',
+};

src/systems/eu/specs/components/media-container/demo/data--image.js

@@ -0,0 +1,8 @@
+// Simple content for demo
+module.exports = {
+  alt: 'Jean Monnet banner.',
+  image:
+    'https://ec.europa.eu/education/sites/education/files/jean-monnet-gs-banner.jpg',
+  description:
+    '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.',
+};

src/systems/eu/specs/components/media-container/demo/data--video.js

@@ -0,0 +1,32 @@
+// Simple content for demo
+module.exports = {
+  alt: 'Jean Monnet banner.',
+  image:
+    'https://ec.europa.eu/education/sites/education/files/jean-monnet-gs-banner.jpg',
+  description:
+    '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.',
+  sources: [
+    {
+      src: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4',
+      type: 'video/mp4',
+    },
+    {
+      src: 'https://clips.vorwaerts-gmbh.de/big_buck_bunny.webm',
+      type: 'video/webm',
+    },
+  ],
+  tracks: [
+    {
+      src: '/captions/bunny-en.vtt',
+      kind: 'captions',
+      srcLang: 'en',
+      label: 'English',
+    },
+    {
+      src: '/captions/bunny-fr.vtt',
+      kind: 'captions',
+      srcLang: 'fr',
+      label: 'français',
+    },
+  ],
+};

src/systems/eu/specs/components/media-container/docs/code.mdx

@@ -0,0 +1,27 @@
+import Playground from '@ecl/website-components/Playground'
+import MediaContainer from '@ecl/eu-react-component-media-container/MediaContainer'
+
+import demoContentImage from '../demo/data--image';
+import demoContentVideo from '../demo/data--video';
+
+## Image
+
+<Playground
+  system="eu"
+  selectedKind="MediaContainer"
+  selectedStory="image"
+>
+  <MediaContainer {...demoContentImage} />
+</Playground>
+
+
+
+## Video
+
+<Playground
+  system="eu"
+  selectedKind="MediaContainer"
+  selectedStory="video"
+>
+  <MediaContainer {...demoContentVideo} />
+</Playground>

src/systems/eu/specs/components/media-container/docs/usage.md

@@ -0,0 +1 @@
+Do's and don'ts