feat: Add typeform to whitelist, update name of said list (#586)

* feat: use 'allowlist' naming, add Typeform

* Use less problematic naming for list

* Rename files themselves, dingus

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_
 

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,25 +22,25 @@ 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
     const currentDomain = getDomain(documentHost);
     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 '#')
      * OR has the same domain as the current page, don't open
      * 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';
   }

src/components/Organisms/Footer/Footer.js

@@ -52,15 +52,15 @@ Footer.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape),
   footerCopy: PropTypes.string,
   campaign: PropTypes.string,
-  overrideWhiteList: PropTypes.bool,
+  overrideallowList: PropTypes.bool,
   additionalLegalLine: PropTypes.string
 };
 
 Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
   campaign: 'Comic Relief',
-  overrideWhiteList: false,
+  overrideallowList: false,
   additionalLegalLine: ''
 };
 

src/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>

src/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"

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

@@ -177,14 +177,14 @@ export default {
           }
         },
         {
-          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'

src/components/Organisms/Header/Nav/Nav.js

@@ -6,7 +6,7 @@ import BurgerMenu from '../Burger/BurgerMenu';
 import { sizes } from '../../../../theme/shared/breakpoint';
 import NavHelper from '../../../../utils/navHelper';
 import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
-import whiteListed from '../../../../utils/whiteListed';
+import allowListed from '../../../../utils/allowListed';
 import chevronDown from './chevron-down.svg';
 
 import {
@@ -77,7 +77,7 @@ const MainNav = ({ navItems }) => {
 
             /* Determine which field represents our url path */
             let thisUrl = NavHelper(thisFirstChild);
-            const relNoopener = !whiteListed(thisUrl) && 'noopener';
+            const relNoopener = !allowListed(thisUrl) && 'noopener';
             const hasSubMenu = group.links && group.links.length > 1;
             const hasPopUp = hasSubMenu ? 'true' : null;
             thisUrl = InternalLinkHelper(thisUrl);

src/components/Organisms/Header/data/data.js

@@ -151,14 +151,14 @@ export default {
       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'

src/index.js

@@ -6,7 +6,7 @@ export { default as ThemeProvider } from './theme/ThemeProvider';
 /* Utils */
 export { default as hideVisually } from './theme/shared/hideVisually';
 export { default as zIndex } from './theme/shared/zIndex';
-export { default as whiteListed } from './utils/whiteListed';
+export { default as allowListed } from './utils/allowListed';
 export { default as spacing } from './theme/shared/spacing';
 export { default as breakpoint } from './theme/shared/breakpoint';
 export { media, screen, container } from './theme/shared/size';

src/utils/whiteListed.js → src/utils/allowListed.js

@@ -1,21 +1,22 @@
-const whiteList = [
+const 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'
+  'stories.comicrelief.com',
+  'https://form.typeform.com'
 ];
 
-const whiteListed = url => {
+const allowListed = url => {
   if (
     url !== undefined
     && url !== null
-    && whiteList.some(v => url.indexOf(v) >= 0)
+    && allowList.some(v => url.indexOf(v) >= 0)
   ) {
     return true;
   }
   return false;
 };
 
-export default whiteListed;
+export default allowListed;

src/utils/allowListed.test.js

@@ -0,0 +1,9 @@
+import allowListed from './allowListed';
+
+it('link is allowListed', () => {
+  expect(allowListed('https://www.comicrelief.com/home')).toBe(true);
+});
+
+it('link is not allowListed', () => {
+  expect(allowListed('https://www.google.co.uk/')).toBe(false);
+});