@comicrelief/component-library 7.18.4 → 7.19.1

package/.github/workflows/main.yml

@@ -13,7 +13,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version-file: '.nvmrc'
 
       - name: Restore packages cache
         uses: actions/cache@v3
@@ -37,7 +37,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version-file: '.nvmrc'
 
       - name: Restore packages cache
         uses: actions/cache@v3
@@ -69,7 +69,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version-file: '.nvmrc'
 
       # see https://github.com/marketplace/actions/cypress-io
       - name: Run Cypress tests
@@ -110,7 +110,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version-file: '.nvmrc'
 
       - name: Restore packages cache
         uses: actions/cache@v3

package/.nvmrc

@@ -0,0 +1 @@
+v16.20.0

package/cypress/integration/components/Molecules/VideoBanner.spec.js

@@ -35,7 +35,7 @@ describe('Video Banner component', () => {
 
     describe('Video Banner section', () => {
         beforeEach(() => {
-            cy.get('[data-testid="VideoBanner-example-0"]')
+            cy.get('[data-testid="VideoBanner-example-1"]')
                 .as('container')
                 .find('[data-preview="VideoBanner"]')
                 .as('preview');

package/dist/components/Atoms/Select/Select.md

@@ -5,13 +5,12 @@
 <Select
   label="Label"
   description="Please choose an option"
+  // note: defaultValue is just using the built-in React defaultValue prop. It adds the HTML prop "selected" to one of the options elements. This is why defaultValue must be set to one of the existing options values:
+  defaultValue="Option four"
   errorMsg=""
   options={[
     { value: 'Option one', displayValue: 'The first option' },
-    {
-      value: 'Option two',
-      displayValue: 'The second option'
-    },
+    { value: 'Option two', displayValue: 'The second option' },
     { value: 'Option three', displayValue: 'The third option' },
     { value: 'Option four', displayValue: 'The fourth option' }
   ]}

package/dist/components/Molecules/VideoBanner/VideoBanner.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
@@ -17,10 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var Video = _styledComponents.default.video.attrs(function () {
   return {
-    autoPlay: true,
-    playsInline: true,
-    muted: true,
-    loop: false
+    playsInline: true
   };
 }).withConfig({
   displayName: "VideoBanner__Video",
@@ -29,22 +28,58 @@ var Video = _styledComponents.default.video.attrs(function () {
 
 var VideoBanner = function VideoBanner(_ref) {
   var video = _ref.video,
-      poster = _ref.poster;
+      poster = _ref.poster,
+      controls = _ref.controls,
+      autoPlay = _ref.autoPlay,
+      loop = _ref.loop,
+      muted = _ref.muted,
+      showPosterAfterPlaying = _ref.showPosterAfterPlaying;
+
+  // Use the prop as our default
+  var _useState = (0, _react.useState)(muted),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isMuted = _useState2[0],
+      setIsMuted = _useState2[1];
+
   var videoEl = (0, _react.useRef)(null);
 
-  var onPlay = function onPlay() {
+  var triggerPlay = function triggerPlay() {
     videoEl.current.play();
   };
 
   (0, _react.useEffect)(function () {
-    onPlay();
-  });
+    // Trigger onload autoplay based on prop:
+    if (autoPlay) {
+      // As it's a Chrome requirement to mute any autoplay videos,
+      // update accordingly; see https://developer.chrome.com/blog/autoplay/
+      setIsMuted(true);
+      triggerPlay();
+    } // And attach event listener based on prop:
+
+
+    if (!loop && showPosterAfterPlaying) {
+      videoEl.current.addEventListener('ended', function () {
+        // Reloads video, which re-shows poster
+        videoEl.current.load();
+      });
+    }
+  }, [autoPlay, loop, showPosterAfterPlaying]);
   return /*#__PURE__*/_react.default.createElement(Video, {
     poster: poster,
     src: video,
-    ref: videoEl
+    ref: videoEl,
+    controls: controls,
+    loop: loop,
+    muted: isMuted
   }, "Your browser does not support video.");
 };
 
+VideoBanner.defaultProps = {
+  showPosterAfterPlaying: true,
+  controls: false,
+  autoPlay: true,
+  loop: false,
+  muted: true
+};
 var _default = VideoBanner;
 exports.default = _default;

package/dist/components/Molecules/VideoBanner/VideoBanner.md

@@ -1,7 +1,26 @@
+Default Video Banner (autoplay, no loop, no poster re-show)
 ```js
-import poster from '../../../styleguide/assets/poster.png';
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 
 <VideoBanner poster={poster} video={src} />;
 ```
+Looping Video Banner With Controls (autoplay, loop)
+```js
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+const src =
+  'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+<VideoBanner poster={poster} video={src} loop={true} controls={true} autoPlay={true} muted={false}
+ />;
+```
+
+Non-autoplay Video Banner (reshows poster image after playing)
+```js
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+const src =
+  'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+<VideoBanner poster={poster} video={src} showPosterAfterPlaying={true} />;
+```

package/dist/components/Molecules/VideoBanner/VideoBanner.test.js

@@ -10,13 +10,13 @@ var _shallowWithTheme = _interopRequireDefault(require("../../../hoc/shallowWith
 
 var _VideoBanner = _interopRequireDefault(require("./VideoBanner"));
 
-var _poster = _interopRequireDefault(require("../../../styleguide/assets/poster.png"));
+var _VideoBannerPosterImage = _interopRequireDefault(require("../../../styleguide/assets/VideoBannerPosterImage.png"));
 
-it('renders correctly', function () {
-  var src = 'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+it("renders correctly", function () {
+  var src = "https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4";
   var tree = (0, _shallowWithTheme.default)( /*#__PURE__*/_react.default.createElement(_VideoBanner.default, {
-    poster: _poster.default,
+    poster: _VideoBannerPosterImage.default,
     video: src
   })).toJSON();
-  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      width: 100%;\n      height: 100%;\n    }\n\n    <video\n      autoPlay={true}\n      className=\"c0\"\n      loop={false}\n      muted={true}\n      playsInline={true}\n      poster=\"mock.asset\"\n      src=\"https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4\"\n    >\n      Your browser does not support video.\n    </video>\n  ");
+  expect(tree).toMatchInlineSnapshot("\n    .c0 {\n      width: 100%;\n      height: 100%;\n    }\n\n    <video\n      className=\"c0\"\n      controls={false}\n      loop={false}\n      muted={true}\n      playsInline={true}\n      poster=\"mock.asset\"\n      src=\"https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4\"\n    >\n      Your browser does not support video.\n    </video>\n  ");
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.18.4",
+  "version": "7.19.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Select/Select.md

@@ -5,13 +5,12 @@
 <Select
   label="Label"
   description="Please choose an option"
+  // note: defaultValue is just using the built-in React defaultValue prop. It adds the HTML prop "selected" to one of the options elements. This is why defaultValue must be set to one of the existing options values:
+  defaultValue="Option four"
   errorMsg=""
   options={[
     { value: 'Option one', displayValue: 'The first option' },
-    {
-      value: 'Option two',
-      displayValue: 'The second option'
-    },
+    { value: 'Option two', displayValue: 'The second option' },
     { value: 'Option three', displayValue: 'The third option' },
     { value: 'Option four', displayValue: 'The fourth option' }
   ]}

package/src/components/Molecules/VideoBanner/VideoBanner.js

@@ -1,38 +1,74 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
 const Video = styled.video.attrs(() => ({
-  autoPlay: true,
-  playsInline: true,
-  muted: true,
-  loop: false
+  playsInline: true
 }))`
   width: 100%;
   height: 100%;
 `;
 
-const VideoBanner = ({ video, poster }) => {
+const VideoBanner = ({
+  video, poster, controls, autoPlay, loop, muted, showPosterAfterPlaying
+}) => {
+  // Use the prop as our default
+  const [isMuted, setIsMuted] = useState(muted);
+
   const videoEl = useRef(null);
 
-  const onPlay = () => {
+  const triggerPlay = () => {
     videoEl.current.play();
   };
 
   useEffect(() => {
-    onPlay();
-  });
+    // Trigger onload autoplay based on prop:
+    if (autoPlay) {
+      // As it's a Chrome requirement to mute any autoplay videos,
+      // update accordingly; see https://developer.chrome.com/blog/autoplay/
+      setIsMuted(true);
+      triggerPlay();
+    }
+
+    // And attach event listener based on prop:
+    if (!loop && showPosterAfterPlaying) {
+      videoEl.current.addEventListener('ended', () => {
+        // Reloads video, which re-shows poster
+        videoEl.current.load();
+      });
+    }
+  }, [autoPlay, loop, showPosterAfterPlaying]);
 
   return (
-    <Video poster={poster} src={video} ref={videoEl}>
+    <Video
+      poster={poster}
+      src={video}
+      ref={videoEl}
+      controls={controls}
+      loop={loop}
+      muted={isMuted}
+    >
       Your browser does not support video.
     </Video>
   );
 };
 
+VideoBanner.defaultProps = {
+  showPosterAfterPlaying: true,
+  controls: false,
+  autoPlay: true,
+  loop: false,
+  muted: true
+};
+
 VideoBanner.propTypes = {
+  showPosterAfterPlaying: PropTypes.bool,
   video: PropTypes.string.isRequired,
-  poster: PropTypes.string.isRequired
+  poster: PropTypes.string.isRequired,
+  controls: PropTypes.bool,
+  autoPlay: PropTypes.bool,
+  loop: PropTypes.bool,
+  muted: PropTypes.bool
 };
 
 export default VideoBanner;

package/src/components/Molecules/VideoBanner/VideoBanner.md

@@ -1,7 +1,26 @@
+Default Video Banner (autoplay, no loop, no poster re-show)
 ```js
-import poster from '../../../styleguide/assets/poster.png';
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
 const src =
   'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
 
 <VideoBanner poster={poster} video={src} />;
 ```
+Looping Video Banner With Controls (autoplay, loop)
+```js
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+const src =
+  'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+<VideoBanner poster={poster} video={src} loop={true} controls={true} autoPlay={true} muted={false}
+ />;
+```
+
+Non-autoplay Video Banner (reshows poster image after playing)
+```js
+import poster from '../../../styleguide/assets/VideoBannerPosterImage.png';
+const src =
+  'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+
+<VideoBanner poster={poster} video={src} showPosterAfterPlaying={true} />;
+```

package/src/components/Molecules/VideoBanner/VideoBanner.test.js

@@ -1,12 +1,13 @@
-import React from 'react';
-import 'jest-styled-components';
+import React from "react";
+import "jest-styled-components";
 
-import renderWithTheme from '../../../hoc/shallowWithTheme';
-import VideoBanner from './VideoBanner';
-import poster from '../../../styleguide/assets/poster.png';
+import renderWithTheme from "../../../hoc/shallowWithTheme";
+import VideoBanner from "./VideoBanner";
+import poster from "../../../styleguide/assets/VideoBannerPosterImage.png";
 
-it('renders correctly', () => {
-  const src = 'https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4';
+it("renders correctly", () => {
+  const src =
+    "https://www.comicrelief.com/sites/default/files/downloads/Creativists_Logo_Web_small_V2_0.mp4";
 
   const tree = renderWithTheme(
     <VideoBanner poster={poster} video={src} />
@@ -19,8 +20,8 @@ it('renders correctly', () => {
     }
 
     <video
-      autoPlay={true}
       className="c0"
+      controls={false}
       loop={false}
       muted={true}
       playsInline={true}