@comicrelief/component-library 7.19.0 → 7.19.2

package/cypress/integration/components/molecules/singleMessageDs.spec.js

@@ -0,0 +1,248 @@
+describe('Single Message Ds component', () => {
+  before(() => {
+    // go to single message Ds component
+    cy.visit('/#singlemessageds');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-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('SingleMessageDs-example-1: Image align left and CTA are clickable', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-1"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders image align left and CTA are clickable', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h4')
+        .contains('Heading Line 1 Heading Line 2');
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+      cy.get('@container')
+        .find('a')
+        .contains('Check out')
+        .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();
+    });
+  });
+
+  describe('SingleMessageDs-example-3: Image align right and CTA are clickable', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-3"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders image align right and CTA are clickable', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h4')
+        .contains('Heading Line 1 Heading Line 2');
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+      cy.get('@container')
+        .find('a')
+        .contains('Check out');
+    });
+
+    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();
+    });
+  });
+
+  describe('SingleMessageDs-example-5: SingleMessageDs-example-5', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-5"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders SingleMessageDs-example-5', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h4')
+        .contains('Heading Line 1 Heading Line 2')
+        .should('exist');
+      cy.get('@container')
+        .find('p')
+        .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();
+    });
+  });
+
+  describe('SingleMessageDs-example-7: Using the linkIcon prop', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-7"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Using the linkIcon prop', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h1')
+        .should('not.exist');
+      cy.get('@container')
+        .find('p')
+        .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();
+    });
+  });
+
+  describe('SingleMessageDs-example-9: Video with no CTA', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SingleMessageDs-example-9"]')
+        .as('container')
+        .find('[data-preview="SingleMessageDs"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders single message vertical height preview', () => {
+      cy.get('@container')
+        .find('img')
+        .should('exist');
+      cy.get('@container')
+        .find('h1')
+        .should('not.exist');
+      cy.get('@container')
+        .find('p')
+        .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();
+    });
+  });
+});

package/cypress/integration/components/molecules/videoBanner.spec.js

@@ -0,0 +1,140 @@
+describe('Video Banner component', () => {
+  before(() => {
+    // go to video banner component
+    cy.visit('/#videobanner');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-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('VideoBanner-example-1: Default Video Banner', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-example-1"]')
+        .as('container')
+        .find('[data-preview="VideoBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders video banner preview', () => {
+      cy.get('@container')
+        .find('video')
+        .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();
+    });
+  });
+
+  describe('VideoBanner-example-3: Looping Video Banner With Controls', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-example-3"]')
+        .as('container')
+        .find('[data-preview="VideoBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders looping Video Banner With Controls preview', () => {
+      cy.get('@container')
+        .find('video')
+        .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();
+    });
+  });
+
+  describe('VideoBanner-example-5: Non-autoplay Video Banner', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="VideoBanner-example-5"]')
+          .as('container')
+          .find('[data-preview="VideoBanner"]')
+          .as('preview');
+
+      cy.get('@container')
+          .find('button')
+          .contains('View Code')
+          .as('viewCodeBtn');
+    });
+
+    it('renders Non-autoplay Video Banner preview', () => {
+      cy.get('@container')
+          .find('video')
+          .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();
+    });
+  });
+});

package/cypress/integration/components/organisms/cookieBanner.spec.js

@@ -0,0 +1,82 @@
+describe('Cookie Banner component', () => {
+  before(() => {
+    // go to cookie banner component
+    cy.visit('/#cookiebanner');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CookieBanner-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('Cookie Banner section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="CookieBanner-example-1"]')
+        .as('container')
+        .find('[data-preview="CookieBanner"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders cookie banner preview', () => {
+      cy.get('@container')
+        .find('p')
+        .contains('Hello! Comic Relief uses cookies to help make this website better and improve our services. You can learn more about');
+      cy.get('@container')
+        .find('a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/cookies-policy')
+        .contains('our use of cookies');
+      cy.get('@container')
+        .find('p:nth-child(2) > a:nth-child(1)')
+        .contains('Accept')
+        .click();
+      cy.get('@container')
+        .find('p:nth-child(2) > a:nth-child(2)')
+        .should('exist')
+        .contains('here');
+    });
+
+    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();
+    });
+  });
+});

package/cypress/integration/components/organisms/footer.spec.js

@@ -0,0 +1,166 @@
+describe('Footer component', () => {
+  before(() => {
+    // go to footer component
+    cy.visit('/#footer');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Footer-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('Footer section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Footer-example-1"]')
+        .as('container')
+        .find('[data-preview="Footer"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders footer preview', () => {
+      //Hear from us
+      cy.get('@container')
+        .find('ul > li:nth-child(1) > span')
+        .contains('Hear from us');
+      cy.get('@container')
+        .find('ul > li:nth-child(1) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/#')
+        .contains('Get the newsletter');
+      cy.get('@container')
+        .find('ul > li:nth-child(1) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/update-your-preferences')
+        .contains('How we contact you');
+
+      //Get in touch
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > span')
+        .contains('Get in touch');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', '/contact-us')
+        .contains('Contact us');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://giftaid.comicrelief.com/update')
+        .contains('Your Gift Aid');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(3) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/frequently-asked-questions')
+        .contains('FAQs');
+      cy.get('@container')
+        .find('ul > li:nth-child(2) > ul > li:nth-child(4) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/red-nose-days-frequently-asked-questions')
+        .contains('Red Nose Day 2019 FAQs');
+
+      //About us
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > span')
+        .contains('About us');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief')
+        .contains('Mission');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief/history')
+        .contains('Our history');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(3) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief/finances')
+        .contains('Finances');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(4) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/working-with-us')
+        .contains('Partners');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(5) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/about-comic-relief/meet-the-team')
+        .contains('Meet the team');
+      cy.get('@container')
+        .find('ul > li:nth-child(3) > ul > li:nth-child(6) > a')
+        .should('have.attr', 'href', 'https://www.sportrelief.com/')
+        .contains('Sport Relief');
+
+      //Careers
+      cy.get('@container')
+        .find('ul > li:nth-child(4) > span')
+        .contains('Careers');
+      cy.get('@container')
+        .find('ul > li:nth-child(4) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/careers')
+        .contains('Working at Comic Relief');
+      cy.get('@container')
+        .find('ul > li:nth-child(4) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://app.beapplied.com/org/comic-relief')
+        .contains('Open roles');
+
+      //News
+      cy.get('@container')
+        .find('ul > li:nth-child(5) > span')
+        .contains('News');
+      cy.get('@container')
+        .find('ul > li:nth-child(5) > ul > li:nth-child(1) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/news')
+        .contains('News');
+      cy.get('@container')
+        .find('ul > li:nth-child(5) > ul > li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/press-releases')
+        .contains('Press area');
+
+      //Legal
+      cy.get('@container')
+        .find('ul > li:nth-child(6) > span')
+        .contains('Legal');
+
+      //copyright
+      cy.get('@container')
+        .find('p')
+        .should('exist');
+
+      //logo
+      cy.get('@container')
+        .find('a[title="Go to Comic Relief homepage"]')
+        .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');
+    });
+  });
+});

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"));
@@ -32,6 +34,13 @@ var VideoBanner = function VideoBanner(_ref) {
       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 triggerPlay = function triggerPlay() {
@@ -41,6 +50,9 @@ var VideoBanner = function VideoBanner(_ref) {
   (0, _react.useEffect)(function () {
     // 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:
 
@@ -51,14 +63,14 @@ var VideoBanner = function VideoBanner(_ref) {
         videoEl.current.load();
       });
     }
-  });
+  }, [autoPlay, loop, showPosterAfterPlaying]);
   return /*#__PURE__*/_react.default.createElement(Video, {
     poster: poster,
     src: video,
     ref: videoEl,
     controls: controls,
     loop: loop,
-    muted: muted
+    muted: isMuted
   }, "Your browser does not support video.");
 };
 

package/dist/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}
  />;
 ```