MP fix test

package.json

@@ -21,30 +21,30 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@babel/cli": "^7.10.4",
+    "@babel/cli": "^7.13.14",
     "@hookform/resolvers": "^1.3.4",
-    "axios": "^0.19.2",
+    "axios": "^0.21.1",
     "jest-styled-components": "^7.0.2",
-    "lazysizes": "^5.1.0",
+    "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.1",
     "prop-types": "^15.7.2",
-    "react": "^16.8.6",
+    "react": "^17.0.2",
     "react-currency-format": "^1.0.0",
-    "react-dom": "^16.8.6",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
-    "react-scripts": "3.4.1",
-    "react-styleguidist": "^11.0.8",
-    "react-test-renderer": "^16.8.6",
+    "react-scripts": "4.0.3",
+    "react-styleguidist": "^11.1.6",
+    "react-test-renderer": "^17.0.2",
     "react-uid": "^2.2.0",
-    "styled-components": "^5.1.1",
+    "styled-components": "^5.2.3",
     "youtube-player": "^5.5.2",
     "yup": "^0.32.9",
     "yup-phone": "^1.2.19"
   },
   "scripts": {
     "test": "yarn run jest",
-    "styleguide": "styleguidist server",
+    "styleguide": "cross-env FAST_REFRESH=false styleguidist server",
     "styleguide:build": "styleguidist build",
     "postinstall": "yarn run build",
     "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
@@ -68,12 +68,13 @@
   },
   "devDependencies": {
     "babel-eslint": "^10.0.2",
-    "cypress": "^4.9.0",
-    "eslint": "^7.4.0",
+    "cross-env": "^7.0.3",
+    "cypress": "^7.0.1",
+    "eslint": "^7.23.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react": "^7.23.1",
     "eslint-plugin-react-hooks": "^4.0.5",
     "husky": "^5.0.6",
     "jest": "^26.1.0",

src/components/Atoms/TextArea/TextArea.md

@@ -6,15 +6,15 @@
   name="description"
   placeholder="This is a placeholder"
   label="Label"
-  rows="4"
+  rows={4}
   id="textarea-test"
 />
 
 <h4>Long copy/Message field</h4>
 <TextArea
   name="description"
   label="Label"
-  rows="6"
+  rows={6}
   errorMsg="This is an error message"
   id="textarea-test-2"
 />

src/components/Atoms/TextArea/TextArea.test.js

@@ -9,8 +9,7 @@ it('renders correctly', () => {
       name="description"
       placeholder="This is text area"
       label="Label"
-      rows="5"
-      cols="5"
+      rows={5}
       errorMsg=""
       id="Please leave your comment here"
     />
@@ -99,10 +98,9 @@ it('renders correctly', () => {
       <textarea
         aria-describedby="Please leave your comment here"
         className="c3"
-        cols="5"
         name="description"
         placeholder="This is text area"
-        rows="5"
+        rows={5}
       />
 
     </label>

src/components/Molecules/CardDs/CardDs.js

@@ -139,7 +139,7 @@ const CardDs = ({
     return null;
   };
 
-  const external = target === 'blank' ? 'noopener noreferrer' : null;
+  const external = target === 'blank' ? 'noopener' : null;
 
   return (
     <Container {...rest}>

src/components/Molecules/HeaderEsuWithIcon/__snapshots__/HeaderEsuWithIcon.test.js.snap

@@ -174,7 +174,6 @@ exports[`renders correctly with error message 1`] = `
 
 .c19 input {
   text-align: center;
-  border-color: #2C0230;
   width: 100%;
   font-size: 1rem;
 }
@@ -668,7 +667,6 @@ exports[`renders correctly with modal open 1`] = `
 
 .c17 input {
   text-align: center;
-  border-color: #2C0230;
   width: 100%;
   font-size: 1rem;
 }

src/components/Molecules/SingleMessageDS/SingleMessageDs.js

@@ -63,7 +63,7 @@ const SingleMessageDs = ({
 
   const icon = linkIcon || (target === 'blank' ? <External /> : <Internal />);
 
-  const external = target === 'blank' ? 'noopener noreferrer' : null;
+  const external = target === 'blank' ? 'noopener' : null;
 
   return (
     <Container {...rest} imageLeft={imageLeft}>

src/components/Organisms/EmailSignUp/EmailSignUp.js

@@ -75,7 +75,7 @@ const EmailSignUp = ({
             value={value}
             onChange={event => setValue(event.target.value)}
           />
-          <ButtonWrapper backgroundColor={backgroundColor}>
+          <ButtonWrapper>
             <Button
               as="input"
               type="submit"
@@ -90,7 +90,7 @@ const EmailSignUp = ({
       {next && (
         <>
           {schoolsSelect}
-          <ButtonWrapper backgroundColor={backgroundColor}>
+          <ButtonWrapper>
             <Button
               as="input"
               type="submit"
@@ -122,7 +122,7 @@ const EmailSignUp = ({
         value={value}
         onChange={event => setValue(event.target.value)}
       />
-      <ButtonWrapper backgroundColor={backgroundColor}>
+      <ButtonWrapper>
         <Button
           as="input"
           data-test="subscribe-button"

src/components/Organisms/EmailSignUp/EmailSignUp.style.js

@@ -21,7 +21,6 @@ const ButtonWrapper = styled.div`
   margin-top: ${spacing('md')};
   input {
     text-align: center;
-    border-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
     width: 100%;
     font-size: ${({ theme }) => theme.fontSize('s')};
     @media ${({ theme }) => theme.breakpoint('small')} {

src/components/Organisms/EmailSignUp/__snapshots__/EmailSignUp.test.js.snap

@@ -110,7 +110,6 @@ exports[`renders ESU School correctly 1`] = `
 
 .c9 input {
   text-align: center;
-  border-color: #2C0230;
   width: 100%;
   font-size: 1rem;
 }
@@ -411,7 +410,6 @@ exports[`renders correctly 1`] = `
 
 .c12 input {
   text-align: center;
-  border-color: #2C0230;
   width: 100%;
   font-size: 1rem;
 }

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

@@ -75,11 +75,10 @@ const MainNav = ({ navItems }) => {
 
             /* Determine which field represents our url path */
             let thisUrl = NavHelper(thisFirstChild);
-            const relNoopener = !whiteListed(thisUrl) && 'noopener noreferrer';
+            const relNoopener = !whiteListed(thisUrl) && 'noopener';
             const hasSubMenu = group.links && group.links.length > 1;
             const hasPopUp = hasSubMenu ? 'true' : null;
             thisUrl = InternalLinkHelper(thisUrl);
-
             return (
               <NavItem
                 role="none"
@@ -91,6 +90,7 @@ const MainNav = ({ navItems }) => {
                   <NavLink
                     href={hasPopUp ? '#' : thisUrl}
                     inline
+                    rel={relNoopener}
                     aria-expanded={!!isSubMenuOpen[group.id]}
                     aria-haspopup={hasPopUp}
                     onClick={hasPopUp ? e => toggleSubMenu(e, group.id) : null}

src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDSForm.js

@@ -70,6 +70,7 @@ const MarketingPreferencesDSForm = () => {
           <MarketingPreferencesDS
             mpValidationOptions={mpValidationOptions}
             id="default"
+            formContext={formMethods}
           />
           <input type="submit" />
         </form>
@@ -83,6 +84,7 @@ const MarketingPreferencesDSForm = () => {
           <MarketingPreferencesDS
             mpValidationOptions={mpValidationOptionsCustom}
             id="custom"
+            formContext={formMethodsCustom}
           />
           <input type="submit" />
         </form>

src/components/Organisms/MarketingPreferencesDS/_CheckAnswer.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useFormContext } from 'react-hook-form';
 import AssociatedFields from './_AssociatedFields';
 
 import {
@@ -9,10 +8,10 @@ import {
   CheckInput
 } from './MarketingPreferencesDS.style';
 
-const CheckAnswer = ({ name, mpValidationOptions, userSelection }) => {
-  const {
-    register, setValue, clearErrors
-  } = useFormContext();
+const CheckAnswer = ({
+  name, mpValidationOptions, userSelection, formContext
+}) => {
+  const { setValue, clearErrors, register } = formContext;
 
   const onChange = e => {
     let newVal;
@@ -68,15 +67,17 @@ const CheckAnswer = ({ name, mpValidationOptions, userSelection }) => {
 };
 
 CheckAnswer.defaultProps = {
-  userSelection: null
+  userSelection: null,
+  formContext: null
 };
 
 CheckAnswer.propTypes = {
   name: PropTypes.string.isRequired,
   /* These options are created in _MarketingPrefsConfig.js, passed to react-hook-form
   in the parent to set-up the validation, but also required here for additional functionality */
   mpValidationOptions: PropTypes.objectOf(PropTypes.shape).isRequired,
-  userSelection: PropTypes.string
+  userSelection: PropTypes.string,
+  formContext: PropTypes.shape()
 };
 
 export default CheckAnswer;