@comicrelief/component-library 7.20.0 → 7.22.0

package/cypress/{integration/components/organisms/footer.spec.js → e2e/components/organisms/footer.cy.js}

@@ -6,6 +6,7 @@ describe('Footer component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#footer');
       cy.get('[data-testid="Footer-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Footer component', () => {
 
   describe('Footer section', () => {
     beforeEach(() => {
+      cy.visit('/#footer');
       cy.get('[data-testid="Footer-example-1"]')
         .as('container')
         .find('[data-preview="Footer"]')

package/cypress/{integration/components/organisms/header.spec.js → e2e/components/organisms/header.cy.js}

@@ -6,6 +6,7 @@ describe('Header component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#header');
       cy.get('[data-testid="Header-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Header component', () => {
 
   describe('CR Header section', () => {
     beforeEach(() => {
+      cy.visit('/#header');
       cy.get('[data-testid="Header-example-1"]')
         .as('container')
         .find('[data-preview="Header"]')
@@ -76,14 +78,11 @@ describe('Header component', () => {
         .find('textarea')
         .should('exist');
     });
-
-    it('closes code on click', () => {
-      cy.get('@viewCodeBtn').click();
-    });
   });
 
   describe('CR Header with search and ESU section', () => {
     beforeEach(() => {
+      cy.visit('/#header');
       cy.get('[data-testid="Header-example-7"]')
         .as('container')
         .find('[data-preview="Header"]')
@@ -135,9 +134,5 @@ describe('Header component', () => {
         .find('textarea')
         .should('exist');
     });
-
-    it('closes code on click', () => {
-      cy.get('@viewCodeBtn').click();
-    });
   });
 });

package/cypress/{integration/components/organisms/marketingPreferencesDSForm.spec.js → e2e/components/organisms/marketingPreferencesDSForm.cy.js}

@@ -4,6 +4,7 @@ describe('MarketingPreferencesDSForm component', () => {
   });
 
   beforeEach(() => {
+    cy.visit('/#!/MarketingPreferencesDSForm/1');
     cy.window().then(win => {
       cy.spy(win.console, 'log').as('consoleLog');
     });
@@ -95,21 +96,21 @@ describe('MarketingPreferencesDSForm component', () => {
       cy.get('@default')
         .find('#mp_permissionEmail-yes').click();
       cy.get('@default')
-        .find(' #mp_email')
+        .find('#mp_email')
         .type('@an-invalid@email.com');
 
       // Fill SMS field with an invalid value
       cy.get('@default')
         .find('#mp_permissionSMS-yes').click();
       cy.get('@default')
-        .find(' #mp_mobile')
+        .find('#mp_mobile')
         .type('07777');
 
       // Fill Phone field with an invalid value
       cy.get('@default')
         .find('#mp_permissionPhone-yes').click();
       cy.get('@default')
-        .find(' #mp_phone')
+        .find('#mp_phone')
         .type('0208');
 
       // Fill Post fields with invalid values
@@ -117,11 +118,11 @@ describe('MarketingPreferencesDSForm component', () => {
         .find('#mp_permissionPost-yes').click();
       // Address 1
       cy.get('@default')
-        .find(' #mp_address1')
+        .find('#mp_address1')
         .type('@');
       // Address 2
       cy.get('@default')
-        .find(' #mp_address2')
+        .find('#mp_address2')
         .type('@');
       // Address 3
       cy.get('@default')
@@ -188,50 +189,21 @@ describe('MarketingPreferencesDSForm component', () => {
     });
 
     it('check Default example with empty values', () => {
-      // Clear email field
-      cy.get('@default')
-        .find('#mp_email')
-        .clear();
-
-      // Clear SMS field
-      cy.get('@default')
-        .find('#mp_mobile')
-        .clear();
-
-      // Clear Phone field
-      cy.get('@default')
-        .find(' #mp_phone')
-        .clear();
-
-      // Clear Post fields
-      // Address 1
-      cy.get('@default')
-        .find(' #mp_address1')
-        .clear();
-      // Address 2
+      // Show email field
       cy.get('@default')
-        .find(' #mp_address2')
-        .clear();
-
-      // Address 3
-      cy.get('@default')
-        .find('#mp_address3')
-        .clear();
+        .find('#mp_permissionEmail-yes').click();
 
-      // Town
+      // Show SMS field
       cy.get('@default')
-        .find('#mp_town')
-        .clear();
+        .find('#mp_permissionSMS-yes').click();
 
-      // Postcode
+      // Show Phone field
       cy.get('@default')
-        .find('#mp_postcode')
-        .clear();
+        .find('#mp_permissionPhone-yes').click();
 
-      // Country
+      // Show Post fields
       cy.get('@default')
-        .find('#mp_country')
-        .clear();
+        .find('#mp_permissionPost-yes').click();
 
       // Submit
       cy.get('@default-submit').click();
@@ -293,27 +265,35 @@ describe('MarketingPreferencesDSForm component', () => {
     it('Check Default example with valid values', () => {
       // Fill email field with an valid value
       cy.get('@default')
-        .find(' #mp_email')
+      .find('#mp_permissionEmail-yes').click();
+      cy.get('@default')
+      .find('#mp_email')
         .type('a-valid@email.com');
 
       // Fill SMS field with a valid value
       cy.get('@default')
-        .find(' #mp_mobile')
+      .find('#mp_permissionSMS-yes').click();
+      cy.get('@default')
+      .find('#mp_mobile')
         .type('07777 123123');
 
       // Fill Phone field with a valid value
       cy.get('@default')
-        .find(' #mp_phone')
+      .find('#mp_permissionPhone-yes').click();
+      cy.get('@default')
+      .find('#mp_phone')
         .type('020 7820 2000');
 
       // Fill Post fields with valid values
       // Address 1
       cy.get('@default')
-        .find(' #mp_address1')
+        .find('#mp_permissionPost-yes').click();
+      cy.get('@default')
+      .find('#mp_address1')
         .type('10 King Road');
       // Address 2
       cy.get('@default')
-        .find(' #mp_address2')
+        .find('#mp_address2')
         .type('Some Area');
       // Address 3
       cy.get('@default')
@@ -385,7 +365,7 @@ describe('MarketingPreferencesDSForm component', () => {
       cy.get('@customised')
         .find('#mp_permissionPhone-yes').click();
       cy.get('@customised')
-        .find(' #mp_phone')
+        .find('#mp_phone')
         .type('0208');
 
       // Fill Post fields with invalid values
@@ -393,11 +373,11 @@ describe('MarketingPreferencesDSForm component', () => {
         .find('#mp_permissionPost-yes').click();
       // Address 1
       cy.get('@customised')
-        .find(' #mp_address1')
+        .find('#mp_address1')
         .type('@');
       // Address 2
       cy.get('@customised')
-        .find(' #mp_address2')
+        .find('#mp_address2')
         .type('@');
       // Address 3
       cy.get('@customised')
@@ -454,17 +434,21 @@ describe('MarketingPreferencesDSForm component', () => {
     it('check Customised example with empty values', () => {
       // Clear Phone field
       cy.get('@customised')
-        .find(' #mp_phone')
+        .find('#mp_permissionPhone-yes').click();
+      cy.get('@customised')
+        .find('#mp_phone')
         .clear();
 
       // Clear Post fields
       // Address 1
       cy.get('@customised')
-        .find(' #mp_address1')
+        .find('#mp_permissionPost-yes').click();
+      cy.get('@customised')
+        .find('#mp_address1')
         .clear();
       // Address 2
       cy.get('@customised')
-        .find(' #mp_address2')
+        .find('#mp_address2')
         .clear();
 
       // Address 3
@@ -535,17 +519,21 @@ describe('MarketingPreferencesDSForm component', () => {
     it('Check Customised example with valid values', () => {
       // Fill Phone field with a valid value
       cy.get('@customised')
-        .find(' #mp_phone')
+        .find('#mp_permissionPhone-yes').click();
+      cy.get('@customised')
+      .find('#mp_phone')
         .type('020 7820 2000');
 
       // Fill Post fields with valid values
       // Address 1
       cy.get('@customised')
-        .find(' #mp_address1')
+        .find('#mp_permissionPost-yes').click();
+      cy.get('@customised')
+      .find('#mp_address1')
         .type('10 King Road');
       // Address 2
       cy.get('@customised')
-        .find(' #mp_address2')
+        .find('#mp_address2')
         .type('Some Area');
       // Address 3
       cy.get('@customised')

package/cypress/{integration/components/organisms/membership.spec.js → e2e/components/organisms/membership.cy.js}

@@ -6,6 +6,7 @@ describe('Membership component', () => {
 
   describe('props and methods section', () => {
     beforeEach(() => {
+      cy.visit('/#membership');
       cy.get('[data-testid="Membership-container"] button[name="rsg-usage"]')
         .contains('Props & methods')
         .as('propsBtn');
@@ -35,6 +36,7 @@ describe('Membership component', () => {
 
   describe('Membership form align right section', () => {
     beforeEach(() => {
+      cy.visit('/#membership');
       cy.get('[data-testid="Membership-example-1"]')
         .as('container')
         .find('[data-preview="Membership"]')
@@ -73,14 +75,11 @@ describe('Membership component', () => {
         .find('textarea')
         .should('exist');
     });
-
-    it('closes code on click', () => {
-      cy.get('@viewCodeBtn').click();
-    });
   });
 
   describe('Membership form align left section', () => {
     beforeEach(() => {
+      cy.visit('/#membership');
       cy.get('[data-testid="Membership-example-3"]')
         .as('container')
         .find('[data-preview="Membership"]')
@@ -119,9 +118,5 @@ describe('Membership component', () => {
         .find('textarea')
         .should('exist');
     });
-
-    it('closes code on click', () => {
-      cy.get('@viewCodeBtn').click();
-    });
   });
 });

package/cypress.config.js

@@ -0,0 +1,15 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  chromeWebSecurity: false,
+  viewportWidth: 1000,
+  viewportHeight: 1000,
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return require('./cypress/plugins/index.js')(on, config)
+    },
+    baseUrl: 'http://localhost:6060',
+  },
+})

package/dist/components/Atoms/Link/Link.js

@@ -15,7 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Link = _interopRequireWildcard(require("./Link.style"));
 
-var _whiteListed = _interopRequireDefault(require("../../../utils/whiteListed"));
+var _allowListed = _interopRequireDefault(require("../../../utils/allowListed"));
 
 var _internalLinkHelper = require("../../../utils/internalLinkHelper");
 
@@ -45,7 +45,7 @@ var Link = function Link(_ref) {
       setDocumentHost = _useState2[1];
   /**
    * If we haven't specifically set the target via props, check if
-   * this is an internal link OR on our whitelist before making it a '_self' link
+   * this is an internal link OR on our allowList before making it a '_self' link
    */
 
 
@@ -54,7 +54,7 @@ var Link = function Link(_ref) {
     var currentDomain = (0, _internalLinkHelper.getDomain)(documentHost);
     var linkDomain = (0, _internalLinkHelper.getDomain)(href); // Additional check for applications that need more control
 
-    var isWhiteListOverridden = rest.overrideWhiteList === true;
+    var isallowListOverridden = rest.overrideallowList === true;
     /**
      * If the link has no domain supplied (likely '/' or '#')
      * OR has the same domain as the current page, don't open
@@ -62,8 +62,8 @@ var Link = function Link(_ref) {
      */
 
     var isExternalLink = linkDomain !== '' && currentDomain !== linkDomain;
-    var isWhiteListed = (0, _whiteListed.default)(href);
-    window = isExternalLink && (isWhiteListOverridden || !isWhiteListed) ? '_blank' : '_self';
+    var isallowListed = (0, _allowListed.default)(href);
+    window = isExternalLink && (isallowListOverridden || !isallowListed) ? '_blank' : '_self';
   } else {
     window = target === 'blank' ? '_blank' : '_self';
   }

package/dist/components/Molecules/Promo/Promo.js

@@ -7,28 +7,85 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _PromoVideo = _interopRequireDefault(require("./_PromoVideo"));
+
+var _breakpoint = require("../../../theme/shared/breakpoint");
 
 var _Picture = _interopRequireDefault(require("../../Atoms/Picture/Picture"));
 
 var _Promo = require("./Promo.style");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var Promo = function Promo(_ref) {
-  var copyFirst = _ref.copyFirst,
+  var copyLeft = _ref.copyLeft,
       backgroundColor = _ref.backgroundColor,
       imageLow = _ref.imageLow,
       imageSet = _ref.imageSet,
       image = _ref.image,
       imageAltText = _ref.imageAltText,
       children = _ref.children,
-      position = _ref.position;
-  var hasImage = imageSet || false;
+      position = _ref.position,
+      autoPlay = _ref.autoPlay,
+      loop = _ref.loop,
+      poster = _ref.poster,
+      mobilePoster = _ref.mobilePoster,
+      showPosterAfterPlaying = _ref.showPosterAfterPlaying,
+      videoSrc = _ref.videoSrc,
+      mobileVideoSrc = _ref.mobileVideoSrc,
+      lightColouredVideo = _ref.lightColouredVideo;
+
+  // Store the appropriate prop in state, dependent on the breakpoint
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      thisVideoSrc = _useState2[0],
+      setThisVideoSrc = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      thisPoster = _useState4[0],
+      setThisPoster = _useState4[1]; // Let either field define this, just in case
+
+
+  var hasVideo = Boolean(videoSrc || mobileVideoSrc); // A 'video-y' Promo will override and ignore any 'non-Video' images;
+  // none of these fields are required so we have to handle them accordingly:
+
+  var hasImage = Boolean(imageSet && !hasVideo); // Runs on initial load:
+
+  (0, _react.useEffect)(function () {
+    if (hasVideo) {
+      // Checks size on load ONLY; don't want to mess about with listeners:
+      var isDesktop = window.innerWidth >= _breakpoint.sizes.nav; // 1024+ px
+
+      var currentPoster;
+      var currentSrc; // If we've got both desktop AND mobile videos, let the
+      // *current* screen width define which video src to use:
+
+      if (videoSrc && mobileVideoSrc) {
+        currentSrc = isDesktop ? videoSrc : mobileVideoSrc;
+        currentPoster = isDesktop ? poster : mobilePoster;
+      } else {
+        // Else, pick whatever we DO actually have:
+        currentSrc = videoSrc || mobileVideoSrc;
+        currentPoster = poster || mobilePoster;
+      }
+
+      setThisVideoSrc(currentSrc);
+      setThisPoster(currentPoster);
+    }
+  }, [hasVideo, videoSrc, mobileVideoSrc, mobilePoster, poster]);
   return /*#__PURE__*/_react.default.createElement(_Promo.Container, {
     backgroundColor: backgroundColor,
     position: position
-  }, hasImage && /*#__PURE__*/_react.default.createElement(_Promo.Media, {
-    imageRight: copyFirst
-  }, /*#__PURE__*/_react.default.createElement(_Picture.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Promo.Media, {
+    imageRight: copyLeft
+  }, hasImage && !hasVideo && /*#__PURE__*/_react.default.createElement(_Picture.default, {
     alt: imageAltText,
     imageLow: imageLow,
     images: imageSet,
@@ -36,22 +93,40 @@ var Promo = function Promo(_ref) {
     objectFit: "cover",
     width: "100%",
     height: "100%"
-  })), /*#__PURE__*/_react.default.createElement(_Promo.Wrapper, {
-    copyFirst: copyFirst
+  }), hasVideo && thisVideoSrc && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_PromoVideo.default, {
+    copyLeft: copyLeft,
+    lightColouredVideo: lightColouredVideo,
+    thisVideoSrc: thisVideoSrc,
+    thisPoster: thisPoster,
+    showPosterAfterPlaying: showPosterAfterPlaying,
+    autoPlay: autoPlay,
+    loop: loop
+  }))), /*#__PURE__*/_react.default.createElement(_Promo.Wrapper, {
+    copyLeft: copyLeft
   }, /*#__PURE__*/_react.default.createElement(_Promo.Copy, {
-    position: position
+    position: position,
+    hasVideo: hasVideo,
+    lightColouredVideo: lightColouredVideo
   }, children)));
 };
 
 Promo.defaultProps = {
   backgroundColor: 'white',
-  copyFirst: false,
+  copyLeft: false,
   imageSet: null,
   imageLow: null,
   image: null,
   imageAltText: '',
   children: null,
-  position: 'none'
+  position: 'none',
+  autoPlay: true,
+  loop: true,
+  poster: null,
+  mobilePoster: null,
+  videoSrc: null,
+  mobileVideoSrc: null,
+  showPosterAfterPlaying: true,
+  lightColouredVideo: false
 };
 var _default = Promo;
 exports.default = _default;