@comicrelief/component-library 7.19.2 → 7.21.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/SimpleSchoolLookup/SimpleSchoolLookup.js

@@ -19,7 +19,7 @@ var _axios = _interopRequireDefault(require("axios"));
 
 var _Lookup = _interopRequireDefault(require("../Lookup/Lookup"));
 
-var _excluded = ["onSelect"];
+var _excluded = ["onSelect", "noResultsMessage"];
 
 var schoolFetcher = /*#__PURE__*/function () {
   var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(query) {
@@ -94,6 +94,7 @@ var schoolToString = function schoolToString(school) {
 
 var SimpleSchoolLookup = function SimpleSchoolLookup(_ref2) {
   var onSelect = _ref2.onSelect,
+      noResultsMessage = _ref2.noResultsMessage,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return /*#__PURE__*/_react.default.createElement(_Lookup.default, Object.assign({
     name: "school_lookup",
@@ -101,12 +102,15 @@ var SimpleSchoolLookup = function SimpleSchoolLookup(_ref2) {
     placeholder: "Enter name or postcode...",
     buttonText: "Find school",
     dropdownInstruction: "Please select an organisation from the list below",
-    noResultsMessage: "Sorry, could not find anything matching your search",
+    noResultsMessage: noResultsMessage,
     lookupHandler: schoolFetcher,
     mapOptionToString: schoolToString,
     onSelect: onSelect
   }, rest));
 };
 
+SimpleSchoolLookup.defaultProps = {
+  noResultsMessage: 'Sorry, we could not find anything matching your search; please use the manual entry option.'
+};
 var _default = SimpleSchoolLookup;
 exports.default = _default;

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

@@ -58,7 +58,7 @@ Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
   campaign: 'Comic Relief',
-  overrideWhiteList: false,
+  overrideallowList: false,
   additionalLegalLine: ''
 };
 var _default = Footer;

package/dist/components/Organisms/Footer/Footer.md

@@ -8,12 +8,12 @@ import footerCopy from './data/footerCopy';
     <p>Standard footer</p>
     <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief"  />
 
-    <p>Overrides whitelist functionality for external usage</p>
+    <p>Overrides allowList functionality for external usage</p>
     <Footer 
       navItems={data} 
       footerCopy={footerCopy.copy} 
       campaign="Comic Relief" 
-      overrideWhiteList 
+      overrideallowList 
     />
     
     <p>Adding a additionalLegalLine to the top of the footer</p>

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

@@ -1206,7 +1206,7 @@ exports[`renders correctly 1`] = `
                     color="white"
                     size="s"
                   >
-                    Test whitelisted external link
+                    Test allowListed external link
                   </span>
                 </a>
               </li>
@@ -1226,7 +1226,7 @@ exports[`renders correctly 1`] = `
                     color="white"
                     size="s"
                   >
-                    Test non-whitelisted external link
+                    Test non-allowListed external link
                   </span>
                   <span
                     className="c24"

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

@@ -151,13 +151,13 @@ var _default = {
         type: 'ContentfulComponentLink'
       }
     }, {
-      title: 'Test whitelisted external link',
+      title: 'Test allowListed external link',
       url: 'https://www.sportrelief.com',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
-      title: 'Test non-whitelisted external link',
+      title: 'Test non-allowListed external link',
       url: 'https://bing.com',
       internal: {
         type: 'ContentfulComponentLink'

package/dist/components/Organisms/Header/Nav/Nav.js

@@ -23,7 +23,7 @@ var _navHelper = _interopRequireDefault(require("../../../../utils/navHelper"));
 
 var _internalLinkHelper = require("../../../../utils/internalLinkHelper");
 
-var _whiteListed = _interopRequireDefault(require("../../../../utils/whiteListed"));
+var _allowListed = _interopRequireDefault(require("../../../../utils/allowListed"));
 
 var _chevronDown = _interopRequireDefault(require("./chevron-down.svg"));
 
@@ -103,7 +103,7 @@ var MainNav = function MainNav(_ref) {
     /* Determine which field represents our url path */
 
     var thisUrl = (0, _navHelper.default)(thisFirstChild);
-    var relNoopener = !(0, _whiteListed.default)(thisUrl) && 'noopener';
+    var relNoopener = !(0, _allowListed.default)(thisUrl) && 'noopener';
     var hasSubMenu = group.links && group.links.length > 1;
     var hasPopUp = hasSubMenu ? 'true' : null;
     thisUrl = (0, _internalLinkHelper.InternalLinkHelper)(thisUrl);

package/dist/components/Organisms/Header/data/data.js

@@ -126,13 +126,13 @@ var _default = {
     title: 'External Links (menu group)',
     id: 'eaec5191-bbb3-5e8d-b966-c53fff34998a',
     links: [{
-      title: 'Test whitelisted external link',
+      title: 'Test allowListed external link',
       url: 'https://www.sportrelief.com',
       internal: {
         type: 'ContentfulComponentLink'
       }
     }, {
-      title: 'Test non-whitelisted external link',
+      title: 'Test non-allowListed external link',
       url: 'https://bing.com',
       internal: {
         type: 'ContentfulComponentLink'

package/dist/index.js

@@ -35,10 +35,10 @@ Object.defineProperty(exports, "zIndex", {
     return _zIndex.default;
   }
 });
-Object.defineProperty(exports, "whiteListed", {
+Object.defineProperty(exports, "allowListed", {
   enumerable: true,
   get: function get() {
-    return _whiteListed.default;
+    return _allowListed.default;
   }
 });
 Object.defineProperty(exports, "spacing", {
@@ -406,7 +406,7 @@ var _hideVisually = _interopRequireDefault(require("./theme/shared/hideVisually"
 
 var _zIndex = _interopRequireDefault(require("./theme/shared/zIndex"));
 
-var _whiteListed = _interopRequireDefault(require("./utils/whiteListed"));
+var _allowListed = _interopRequireDefault(require("./utils/allowListed"));
 
 var _spacing = _interopRequireDefault(require("./theme/shared/spacing"));
 

package/dist/utils/{whiteListed.js → allowListed.js}

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var whiteList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com'];
+var allowList = ['https://giftaid.comicrelief.com', 'https://donation.comicrelief.com', 'https://www.comicrelief.com', 'https://www.sportrelief.com', 'https://app.beapplied.com/org/comic-relief', 'stories.comicrelief.com', 'https://form.typeform.com'];
 
-var whiteListed = function whiteListed(url) {
-  if (url !== undefined && url !== null && whiteList.some(function (v) {
+var allowListed = function allowListed(url) {
+  if (url !== undefined && url !== null && allowList.some(function (v) {
     return url.indexOf(v) >= 0;
   })) {
     return true;
@@ -16,5 +16,5 @@ var whiteListed = function whiteListed(url) {
   return false;
 };
 
-var _default = whiteListed;
+var _default = allowListed;
 exports.default = _default;

package/dist/utils/allowListed.test.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _allowListed = _interopRequireDefault(require("./allowListed"));
+
+it('link is allowListed', function () {
+  expect((0, _allowListed.default)('https://www.comicrelief.com/home')).toBe(true);
+});
+it('link is not allowListed', function () {
+  expect((0, _allowListed.default)('https://www.google.co.uk/')).toBe(false);
+});

package/docs/utils.md

@@ -5,13 +5,13 @@ _Hide Visually_
 how to use in your styled component
 `export const Component = styled.span'${hideVisually};';`
 
-_whiteListed_
+_allowListed_
 
-`import { whiteListed } from '@comicrelief/component-library';`
+`import { allowListed } from '@comicrelief/component-library';`
 
-`whiteListed(url)`
+`allowListed(url)`
 
-Check if a url is whiteListed. Used to check links and change link target.
+Check if a url is allowListed. Used to check links and change link target.
 
 _Z Index_
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.19.2",
+  "version": "7.21.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -75,7 +75,7 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "cypress": "^8.3.0",
+    "cypress": "13.2.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.27.5",

package/src/components/Atoms/Link/Link.js

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import StyledLink, { HelperText, IconWrapper } from './Link.style';
-import whiteListed from '../../../utils/whiteListed';
+import allowListed from '../../../utils/allowListed';
 import { getDomain } from '../../../utils/internalLinkHelper';
 
 let window = '';
@@ -22,7 +22,7 @@ const Link = ({
   const [documentHost, setDocumentHost] = useState('');
   /**
    * 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
    */
   if (target === null) {
     // Use our helper function to determine the raw domains to compare
@@ -30,7 +30,7 @@ const Link = ({
     const linkDomain = getDomain(href);
 
     // Additional check for applications that need more control
-    const isWhiteListOverridden = rest.overrideWhiteList === true;
+    const isallowListOverridden = rest.overrideallowList === true;
 
     /**
      * If the link has no domain supplied (likely '/' or '#')
@@ -38,9 +38,9 @@ const Link = ({
      * in a new tab
      */
     const isExternalLink = linkDomain !== '' && (currentDomain !== linkDomain);
-    const isWhiteListed = whiteListed(href);
+    const isallowListed = allowListed(href);
 
-    window = isExternalLink && (isWhiteListOverridden || !isWhiteListed) ? '_blank' : '_self';
+    window = isExternalLink && (isallowListOverridden || !isallowListed) ? '_blank' : '_self';
   } else {
     window = target === 'blank' ? '_blank' : '_self';
   }