@comicrelief/component-library 5.3.0 → 5.6.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "5.3.0",
+  "version": "5.6.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -21,10 +21,10 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@babel/cli": "^7.13.14",
+    "@babel/cli": "^7.14.8",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
-    "jest-styled-components": "^7.0.2",
+    "jest-styled-components": "^7.0.5",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.1",
@@ -33,12 +33,12 @@
     "react-currency-format": "^1.0.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
-    "react-modal": "^3.14.2",
+    "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
-    "react-styleguidist": "^11.1.6",
+    "react-styleguidist": "^11.1.7",
     "react-test-renderer": "^17.0.2",
     "react-uid": "^2.2.0",
-    "styled-components": "^5.2.3",
+    "styled-components": "^5.3.1",
     "youtube-player": "^5.5.2",
     "yup": "^0.32.9",
     "yup-phone": "^1.2.19"
@@ -73,17 +73,17 @@
   "devDependencies": {
     "babel-eslint": "^10.0.2",
     "cross-env": "^7.0.3",
-    "cypress": "^7.0.1",
-    "eslint": "^7.23.0",
+    "cypress": "^8.3.0",
+    "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-import": "^2.24.2",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.0.5",
-    "husky": "^5.0.6",
+    "husky": "^7.0.2",
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
-    "semantic-release": "^17.4.2"
+    "prettier": "^2.3.2",
+    "semantic-release": "^17.4.6"
   }
 }

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

@@ -3,10 +3,7 @@ import PropTypes from 'prop-types';
 
 import StyledLink, { HelperText, IconWrapper } from './Link.style';
 import whiteListed from '../../../utils/whiteListed';
-
-const domainRegEx = new RegExp(
-  '(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]'
-);
+import { getDomain } from '../../../utils/internalLinkHelper';
 
 let window = '';
 
@@ -27,9 +24,22 @@ const Link = ({
    * this is an internal link OR on our whitelist before making it a '_self' link
    */
   if (target === null) {
-    const isExternalLink = domainRegEx.test(href);
+    // Use our helper function to determine the raw domains to compare
+    const currentDomain = getDomain(document.location.host);
+    const linkDomain = getDomain(href);
+
+    // Additional check for applications that need more control
+    const isWhiteListOverridden = rest.overrideWhiteList === 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);
-    window = !isExternalLink || isWhiteListed ? '_self' : '_blank';
+
+    window = isExternalLink && (isWhiteListOverridden || !isWhiteListed) ? '_blank' : '_self';
   } else {
     window = target === 'blank' ? '_blank' : '_self';
   }
@@ -46,7 +56,7 @@ const Link = ({
       underline={underline}
     >
       {children}
-      {target === 'blank' && <HelperText>(opens in new window)</HelperText>}
+      {window === '_blank' && <HelperText>(opens in new window)</HelperText>}
       {hasIcon && <IconWrapper type={type}>{icon}</IconWrapper>}
     </StyledLink>
   );

package/src/components/Molecules/SingleMessage/SingleMessage.js

@@ -15,7 +15,7 @@ import {
 
 const allPlayers = {};
 
-/** Single Message is our main component usually to build landing pages */
+/* Single Message is our main component usually to build landing pages */
 const SingleMessage = ({
   backgroundColor,
   copyFirst,

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -55,17 +55,29 @@ const SingleMessageDs = ({
           imageLeft={imageLeft}
           aria-hidden="true"
           tabIndex="-1"
-          href={youTubeId ? '#' : link}
+          href={link}
+          target={target}
+          {...rest}
+        >
+          {Media}
+        </MediaLink>
+      );
+    }
+    if (imageLow && youTubeId) {
+      return (
+        <MediaLink
+          imageLeft={imageLeft}
+          aria-hidden="true"
+          tabIndex="-1"
+          href={youTubeId}
           target={target}
           {...rest}
           onClick={e => { setIsOpen(true); e.preventDefault(); }}
         >
-          {youTubeId ? (
-            <PlayHolder>
-              <PlayImage src={playImage} alt="" />
-              {Media}
-            </PlayHolder>
-          ) : Media}
+          <PlayHolder>
+            <PlayImage src={playImage} alt="" />
+            {Media}
+          </PlayHolder>
         </MediaLink>
       );
     }

package/src/components/Molecules/SingleMessageDS/SingleMessageDs.md

@@ -156,11 +156,38 @@ import Download from '../../Atoms/Icons/Download';
       linkLabel='Download this'
       linkIcon={<Download />}
       imageLow={data.image}
+      imageLeft={true}
       images={data.images}
     >
       <Text tag='p'>
-        Some text and stuff.
+        Whatever you’ve got planned, the Sport Relief shop has everything you need
+        to get you looking your best while you’re raising some cash. Also
+        available in Sainsbury’s stores and online and in selected Argos stores.
       </Text>
     </SingleMessageDs>
 </div>;
 ```
+
+## Video with no CTA
+
+```js
+const data = require('../../../styleguide/data/data').default;
+import Text from '../../Atoms/Text/Text';
+import Link from '../../Atoms/Link/Link';
+import styled from 'styled-components';
+import spacing from '../../../theme/shared/spacing';
+import Download from '../../Atoms/Icons/Download';
+
+<div>
+    <SingleMessageDs
+      imageLow={data.image}
+      images={data.images}
+      youTubeId="faz0JeBB41M"
+      imageLeft={true}
+    >
+      <Text tag='p'>
+        Some text and stuff.
+      </Text>
+    </SingleMessageDs>
+</div>;
+```

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -234,7 +234,6 @@ exports[`renders correctly 1`] = `
     aria-hidden="true"
     className="c1"
     href="/home"
-    onClick={[Function]}
     tabIndex="-1"
     target="_blank"
     title="Heading Line 1 Heading Line 2"

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

@@ -31,7 +31,7 @@ const Footer = ({
               <Logo sizeSm="48px" sizeMd="72px" rotate={false} campaign={campaign} />
             </Brand>
           </FooterBranding>
-          <FooterNav navItems={navItems} />
+          <FooterNav navItems={navItems} {...rest} />
           <FooterCopyright>
             <Text tag="p" color="grey">
               {footerCopy}
@@ -46,13 +46,15 @@ const Footer = ({
 Footer.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape),
   footerCopy: PropTypes.string,
-  campaign: PropTypes.string
+  campaign: PropTypes.string,
+  overrideWhiteList: PropTypes.bool
 };
 
 Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
-  campaign: 'Comic Relief'
+  campaign: 'Comic Relief',
+  overrideWhiteList: false
 };
 
 export default Footer;

package/src/components/Organisms/Footer/Footer.md

@@ -4,5 +4,12 @@
 import data from './data/data';
 import footerCopy from './data/footerCopy';
 
-<Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief" />;
+<>
+    <p>Standard footer</p>
+    <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief"  />
+
+    <p>Overrides whitelist functionality for external usage</p>
+    <Footer navItems={data} footerCopy={footerCopy.copy} campaign="Comic Relief" overrideWhiteList />
+</>
+
 ```

package/src/components/Organisms/Footer/Nav/Nav.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import Text from '../../../Atoms/Text/Text';
 import { sizes } from '../../../../theme/shared/breakpoint';
 import NavHelper from '../../../../utils/navHelper';
-import InternalLinkHelper from '../../../../utils/internalLinkHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 
 import {
   Nav,
@@ -16,7 +16,7 @@ import {
   SubNavLink
 } from './Nav.style';
 
-const FooterNav = ({ navItems }) => {
+const FooterNav = ({ navItems, ...rest }) => {
   const { menuGroups } = navItems;
   const [isExpandable] = useState(false);
   const [isSubMenuOpen, setIsSubMenuOpen] = useState({});
@@ -78,6 +78,7 @@ const FooterNav = ({ navItems }) => {
                 aria-haspopup="true"
                 role="button"
                 onClick={toggleSubMenu(group.id)}
+                {...rest}
               >
                 <Text color="white">{group.title}</Text>
               </NavLink>
@@ -103,7 +104,7 @@ const FooterNav = ({ navItems }) => {
                         group.links.length % 2 === 0 && group.links.length > 2
                       }
                     >
-                      <SubNavLink href={thisUrl} inline role="menuitem">
+                      <SubNavLink href={thisUrl} inline role="menuitem" {...rest}>
                         <Text color="white">{child.title}</Text>
                       </SubNavLink>
                     </SubNavItem>

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

@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
 }
 
-.c25 {
+.c26 {
   color: #969598;
   font-size: 1rem;
   line-height: 1rem;
@@ -69,6 +69,21 @@ exports[`renders correctly 1`] = `
   border-bottom: 2px solid #000000;
 }
 
+.c24 {
+  border: 0;
+  -webkit-clip: rect(0 0 0 0);
+  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(50%);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
 .c5 {
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -313,7 +328,7 @@ exports[`renders correctly 1`] = `
   align-items: center;
 }
 
-.c24 {
+.c25 {
   display: block;
   width: 100%;
   height: 100%;
@@ -321,7 +336,7 @@ exports[`renders correctly 1`] = `
   margin-top: 3rem;
 }
 
-.c24 p {
+.c25 p {
   font-size: 15px;
   line-height: 24px;
   margin-bottom: 5px;
@@ -528,7 +543,7 @@ exports[`renders correctly 1`] = `
 }
 
 @media (min-width:1024px) {
-  .c24 p {
+  .c25 p {
     font-size: 16px;
     line-height: 27px;
   }
@@ -1166,6 +1181,11 @@ exports[`renders correctly 1`] = `
                   >
                     Link comp with only URL
                   </span>
+                  <span
+                    className="c24"
+                  >
+                    (opens in new window)
+                  </span>
                 </a>
               </li>
               <li
@@ -1206,6 +1226,11 @@ exports[`renders correctly 1`] = `
                   >
                     Test non-whitelisted external link
                   </span>
+                  <span
+                    className="c24"
+                  >
+                    (opens in new window)
+                  </span>
                 </a>
               </li>
             </ul>
@@ -1213,10 +1238,10 @@ exports[`renders correctly 1`] = `
         </ul>
       </nav>
       <div
-        className="c24"
+        className="c25"
       >
         <p
-          className="c25"
+          className="c26"
           color="grey"
           size="s"
         >

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

@@ -5,7 +5,7 @@ import Text from '../../../Atoms/Text/Text';
 import BurgerMenu from '../Burger/BurgerMenu';
 import { sizes } from '../../../../theme/shared/breakpoint';
 import NavHelper from '../../../../utils/navHelper';
-import InternalLinkHelper from '../../../../utils/internalLinkHelper';
+import { InternalLinkHelper } from '../../../../utils/internalLinkHelper';
 import whiteListed from '../../../../utils/whiteListed';
 
 import {

package/src/utils/internalLinkHelper.js

@@ -1,14 +1,32 @@
-const InternalLinkHelper = link => {
-  const domainRegEx = new RegExp(
-    '(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]'
-  );
+const domainRegEx = new RegExp(
+  '(?:[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?\\.)+[a-z0-9][a-z0-9-]{0,61}[a-z0-9]'
+);
 
+const InternalLinkHelper = link => {
   // Check our URL for a domain pattern, if so return it
   if (domainRegEx.test(link)) {
     return link;
   }
+
   // If domain-free and internal, prefix it with slash if it doesn't already have one
   return link.substring(0, 1) === '/' ? link : `/${link}`;
 };
 
-export default InternalLinkHelper;
+const getDomain = url => {
+  let thisURL = url;
+
+  // Strip out protocol
+  thisURL = url.replace(/(https?:\/\/)?(www.)?/i, '');
+
+  // Strip out subdirectory/path
+  if (thisURL.indexOf('/') !== -1) {
+    const [splitURL] = thisURL.split('/');
+    thisURL = splitURL;
+  }
+
+  return thisURL;
+};
+
+export {
+  InternalLinkHelper, getDomain
+};