@comicrelief/component-library 7.19.0 → 7.19.2

package/dist/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -1247,7 +1247,7 @@ exports[`renders correctly 1`] = `
           color="grey"
           size="s"
         >
-          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.
+          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
         </p>
       </div>
     </div>

package/dist/components/Organisms/Footer/data/footerCopy.js

@@ -5,6 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _default = {
-  copy: 'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.'
+  copy: 'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.'
 };
 exports.default = _default;

package/package.json

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

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 
@@ -12,6 +12,9 @@ const Video = styled.video.attrs(() => ({
 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 triggerPlay = () => {
@@ -21,6 +24,9 @@ const VideoBanner = ({
   useEffect(() => {
     // 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();
     }
 
@@ -31,7 +37,7 @@ const VideoBanner = ({
         videoEl.current.load();
       });
     }
-  });
+  }, [autoPlay, loop, showPosterAfterPlaying]);
 
   return (
     <Video
@@ -40,7 +46,7 @@ const VideoBanner = ({
       ref={videoEl}
       controls={controls}
       loop={loop}
-      muted={muted}
+      muted={isMuted}
     >
       Your browser does not support video.
     </Video>

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

@@ -12,7 +12,7 @@ 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}
+<VideoBanner poster={poster} video={src} loop={true} controls={true} autoPlay={true} muted={false}
  />;
 ```
 

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -1247,7 +1247,7 @@ exports[`renders correctly 1`] = `
           color="grey"
           size="s"
         >
-          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.
+          Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.
         </p>
       </div>
     </div>

package/src/components/Organisms/Footer/data/footerCopy.js

@@ -1,4 +1,4 @@
 export default {
   copy:
-    'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 1st Floor, 89 Albert Embankment, London, SE1 7TP.'
+    'Comic Relief is the trading name of Charity Projects, a registered charity in England and Wales (326568) and Scotland (SC039730), which is a company limited by guarantee registered in England and Wales (01806414). Registered address: 6th Floor, The White Chapel Building, 10 Whitechapel High Street, London, E1 8QS.'
 };

package/cypress/integration/components/Atoms/Checkbox.spec.js

@@ -1,69 +0,0 @@
-describe('Checkbox component', () => {
-    before(() => {
-        // go to checkbox component
-        cy.visit('/#checkbox');
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Checkbox-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
-
-    });
-
-    describe('Checkbox section', () => {
-        beforeEach(() => {
-            cy.get('[data-preview="Checkbox"]')
-                .as('preview');
-        });
-
-        it('should click checkboxes', () => {
-            cy.get('[data-preview="Checkbox"] p').contains('List of checkboxes');
-            cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(2)')
-                .contains('Tennis')
-                .click();
-            cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(3)')
-                .contains('Basketball')
-                .click();
-            cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(4)')
-                .contains('Cycling')
-                .click();
-            cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')
-                .contains('Football')
-                .click();
-        });
-
-        it('has view code button', () => {
-            cy.get('[data-testid="Checkbox-examples"] [name="rsg-code-editor"]').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('[data-testid="Checkbox-examples"] [name="rsg-code-editor"]').contains('View Code')
-                .click();
-            cy.get('[data-testid="Checkbox-examples"] div > textarea').should('be.visible');
-        });
-    });
-});

package/cypress/integration/components/Atoms/Link.spec.js

@@ -1,217 +0,0 @@
-describe('Link component', () => {
-    before(() => {
-        // go to link component
-        cy.visit('/#link');
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Link-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
-
-    });
-
-    describe('Link standard preview section', () => {
-
-        beforeEach(() => {
-            cy.get('[data-testid="Link-example-0"]')
-                .as('container')
-                .find('[data-preview="Link"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders link standard section', () => {
-            cy.get('[data-testid="Link-example-0"]')
-                .should('exist');
-
-            cy.get('[data-testid="Link-example-0"]')
-                .first()
-                .contains('Link standard')
-                .should('exist');
-            cy.get('[data-testid="Link-example-0"] div > div:nth-child(2) > a')
-                .contains('Link standard icon')
-                .should('exist');
-            cy.get('[data-testid="Link-example-0"] div > div:nth-child(2) > a > span > svg')
-                .should('exist');
-            cy.get('[data-testid="Link-example-0"] div > div:nth-child(3) > a')
-                .contains('Link standard white')
-                .should('exist')
-
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-
-    });
-
-    describe('Iconography section', () => {
-
-        beforeEach(() => {
-            cy.get('[data-testid="Link-example-2"]')
-                .as('container')
-                .find('[data-preview="Link"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders link Iconography section', () => {
-            cy.get('[data-testid="Link-example-2"]')
-                .should('exist');
-
-            cy.get('[data-testid="Link-example-2"]')
-                .first()
-                .contains('Internal link')
-                .should('exist');
-            cy.get('[data-testid="Link-example-2"] div > div:nth-child(2) > a')
-                .contains('External link')
-                .should('exist');
-            //check icon exist
-            cy.get('[data-testid="Link-example-2"] div > div:nth-child(2) > a > span > svg')
-                .should('exist');
-            cy.get('[data-testid="Link-example-2"] div > div:nth-child(3) > a')
-                .contains('Download link')
-                .should('exist');
-            //check icon exist
-            cy.get('[data-testid="Link-example-2"] div > div:nth-child(3) > a > span > svg')
-                .should('exist');
-            cy.get('[data-testid="Link-example-2"] div > div:nth-child(4) > a')
-                .contains('Favourite link')
-                .should('exist');
-            //check icon exist
-            cy.get('[data-testid="Link-example-2"] div > div:nth-child(4) > a > span > svg')
-                .should('exist');
-
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-
-    });
-
-    describe('Link as button section', () => {
-
-        beforeEach(() => {
-            cy.get('[data-testid="Link-example-3"]')
-                .as('container')
-                .find('[data-preview="Link"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders link as buttons section', () => {
-            cy.get('[data-testid="Link-example-3"]')
-                .should('exist');
-
-            //verify all button colors
-            cy.get('[data-testid="Link-example-3"] div > div:nth-child(1) > a[color="black"]')
-                .contains('Link as button')
-                .should('exist');
-            cy.get('[data-testid="Link-example-3"] div > div:nth-child(2) > a[color="red"]')
-                .contains('Link as button')
-                .and('exist');
-            cy.get('[data-testid="Link-example-3"] div > div:nth-child(3) > a[color="yellow"]')
-                .should('exist');
-            cy.get('[data-testid="Link-example-3"] div > div:nth-child(4) > a[color="yellow_light"]')
-                .contains('Link as button')
-                .should('exist');
-            cy.get('[data-testid="Link-example-3"] div > div:nth-child(5) > a[color="yellow_dark"]')
-                .contains('Link as button')
-                .should('exist');
-            cy.get('[data-testid="Link-example-3"] div:nth-child(6) > div:nth-child(1) > a[color="grey"] ')
-                .contains('Link as button')
-                .should('exist');
-            cy.get('[data-testid="Link-example-3"] div > div > div:nth-child(6) > a[color="transparent"]')
-                .contains('Link as transparent button')
-                .should('exist');
-            cy.get('[data-testid="Link-example-3"]  div:nth-child(3) > a[color="white"]')
-                .contains('White button')
-                .should('exist');
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-    });
-});

package/cypress/integration/components/Atoms/Logo.spec.js

@@ -1,155 +0,0 @@
-describe('Logo component', () => {
-    before(() => {
-        // go to logo component
-        cy.visit('/#logo');
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
-    });
-
-    describe('CR logo section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-example-1"]')
-                .as('container')
-                .find('[data-preview="Logo"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check CR logo', () => {
-            cy.get('[data-testid="Logo-examples"] h1[id="comic-relief-logo"]')
-                .should('exist')
-                .contains('Comic Relief Logo')
-
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-
-    });
-
-    describe('SR logo section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-example-3"]')
-                .as('container')
-                .find('[data-preview="Logo"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check SR logo', () => {
-            cy.get('[data-testid="Logo-examples"] h1[id="sport-relief-logo"]')
-                .should('exist')
-                .contains('Sport Relief Logo')
-
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-
-    });
-
-    describe('SR game on logo section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Logo-example-5"]')
-                .as('container')
-                .find('[data-preview="Logo"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('should check SR game on logo', () => {
-            cy.get('[data-testid="Logo-examples"] h1[id="sport-relief-game-on-logo"]')
-                .should('exist')
-                .contains('Sport Relief Game On Logo');
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-
-    });
-
-});