@comicrelief/component-library 7.15.0 → 7.17.0

package/dist/components/Atoms/Input/Input.js

@@ -114,7 +114,7 @@ Input.propTypes = {
 
   /** text, email, number, date, search, tel, url, password */
   type: _propTypes.default.string.isRequired,
-  labelProps: _propTypes.default.objectOf(_propTypes.default.any),
+  labelProps: _propTypes.default.objectOf(_propTypes.default.string),
   // className is needed so that styled(`Input`) will work
   // (as `rest` is not spread on the outermost component)
   className: _propTypes.default.string,

package/dist/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -21,7 +21,7 @@ var _Text = _interopRequireDefault(require("../Text/Text"));
 
 var _TextInputWithDropdown = require("./TextInputWithDropdown.style");
 
-var _excluded = ["value", "options", "onChange", "onSelect", "id", "name", "label", "dropdownInstruction", "className"],
+var _excluded = ["options", "onChange", "onSelect", "id", "name", "label", "dropdownInstruction", "className"],
     _excluded2 = ["options", "dropdownInstruction", "onSelect", "activeOption", "resetActiveOption"];
 
 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); }
@@ -37,14 +37,13 @@ var KEY_CODE_ESCAPE = 27;
  * This component deals with the visual aspect of a text input with typeahead-style functionality
  *
  * API querying and state management (aside from that related to keyboard usage/accessibility) are
- *  handled by the parent component (via the value, options, onChange and onSelect props)
+ *  handled by the parent component (options, onChange and onSelect props)
  *
  * See the Typeahead and SchoolLookup molecules for the full implementation
  */
 
 var TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-      options = _ref.options,
+  var options = _ref.options,
       onChange = _ref.onChange,
       onSelect = _ref.onSelect,
       id = _ref.id,
@@ -97,7 +96,6 @@ var TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef(function (_re
   };
 
   var inputProps = (0, _objectSpread2.default)({
-    value: value,
     onChange: onChange,
     id: id,
     name: name,

package/dist/components/Molecules/CardDs/CardDs.js

@@ -126,7 +126,8 @@ var CardDs = function CardDs(_ref14) {
         "aria-hidden": "true",
         tabIndex: "-1",
         href: link,
-        target: target
+        target: target,
+        "data-cta-copy": linkLabel
       }, rest), Media);
     }
 

package/dist/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -189,6 +189,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Find out more"
     href="/home"
     tabIndex="-1"
     target="_blank"

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

@@ -53,8 +53,7 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isOpen = _useState2[0],
-      setIsOpen = _useState2[1]; // const openModal = () => setIsOpen(true);
-
+      setIsOpen = _useState2[1];
 
   var closeModal = function closeModal() {
     return setIsOpen(false);
@@ -77,7 +76,8 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
         "aria-hidden": "true",
         tabIndex: "-1",
         href: link,
-        target: target
+        target: target,
+        "data-cta-copy": linkLabel
       }, rest), Media);
     }
 
@@ -87,7 +87,8 @@ var SingleMessageDs = function SingleMessageDs(_ref) {
         "aria-hidden": "true",
         tabIndex: "-1",
         href: youTubeId,
-        target: target
+        target: target,
+        "data-cta-copy": linkLabel
       }, rest, {
         onClick: function onClick(e) {
           setIsOpen(true);

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

@@ -234,6 +234,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Check out the shop"
     href="/home"
     tabIndex="-1"
     target="_blank"

package/dist/components/Organisms/Donate/Donate.js

@@ -98,7 +98,7 @@ var Donate = function Donate(_ref) {
     "aria-live": "polite"
   }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
     formAlignRight: formAlignRight
-  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, subtitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, Boolean(subtitle) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Boolean(title) && /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h2",
     color: textColor,
     size: "big",
@@ -146,7 +146,8 @@ Donate.defaultProps = {
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
   isDesktopOverride: null,
-  otherAmountValue: null
+  otherAmountValue: null,
+  title: null
 };
 var _default = Donate;
 exports.default = _default;

package/dist/components/Organisms/Donate/Form/Form.js

@@ -252,7 +252,8 @@ var Signup = function Signup(_ref) {
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {}
+  data: {},
+  otherAmountValue: null
 };
 var _default = Signup;
 exports.default = _default;

package/dist/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -32,7 +32,6 @@ var GivingSelector = function GivingSelector(_ref) {
     value: "Single",
     type: "radio",
     label: "",
-    errormsg: "",
     checked: givingType === 'single',
     onClick: function onClick() {
       return handleGivingTypeChange('single', givingType);
@@ -47,7 +46,6 @@ var GivingSelector = function GivingSelector(_ref) {
     value: "Monthly",
     type: "radio",
     label: "",
-    errormsg: "",
     checked: givingType === 'monthly',
     onClick: function onClick() {
       return handleGivingTypeChange('monthly', givingType);

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

@@ -543,7 +543,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-4"
             label=""
             onClick={[Function]}
@@ -560,7 +559,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-4"
             label=""
             onClick={[Function]}
@@ -1286,7 +1284,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-1"
             label=""
             onClick={[Function]}
@@ -1303,7 +1300,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-1"
             label=""
             onClick={[Function]}

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

@@ -397,7 +397,7 @@ exports[`renders correctly 1`] = `
             Subscribe
           </span>
           <div
-            className="ButtonWithStates__LoaderContainer-sc-7gb81g-1"
+            className=""
           />
         </button>
       </div>

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

@@ -563,7 +563,7 @@ exports[`renders correctly 1`] = `
         className="c2"
       >
         <div
-          className="Footerstyle__SocialIconWrapper-sc-167xaf5-7"
+          className=""
         >
           <ul
             className="c3"

package/dist/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -21,6 +21,8 @@ exports.MarketingPreferencesDS = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactHookForm = require("react-hook-form");
 
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -221,4 +223,12 @@ MarketingPreferencesDS.defaultProps = {
   copyBottom: _DefaultCopy.defaultCopyBottom,
   id: null,
   formContext: null
+};
+MaybeDisabled.propTypes = {
+  children: _propTypes.default.node,
+  disabled: _propTypes.default.bool
+};
+MaybeDisabled.defaultProps = {
+  children: null,
+  disabled: false
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.15.0",
+  "version": "7.17.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -21,28 +21,29 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@babel/cli": "^7.14.8",
+    "@babel/cli": "^7.21.5",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
-    "jest-styled-components": "^7.0.5",
+    "ejs": "^3.1.9",
+    "jest-styled-components": "^7.1.1",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
-    "moment": "^2.29.1",
-    "prop-types": "^15.7.2",
+    "moment": "^2.29.4",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
-    "react-canvas-confetti": "^1.3.0",
-    "react-currency-format": "^1.0.0",
+    "react-canvas-confetti": "^1.4.0",
+    "react-currency-format": "^1.1.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
-    "react-modal": "^3.14.3",
-    "react-responsive": "^9.0.0",
+    "react-modal": "^3.16.1",
+    "react-responsive": "^9.0.2",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",
     "react-test-renderer": "^17.0.2",
-    "react-uid": "^2.2.0",
-    "styled-components": "^5.3.1",
-    "youtube-player": "^5.5.2",
+    "react-uid": "^2.3.3",
+    "styled-components": "^5.3.11",
+    "youtube-player": "^5.6.0",
     "yup": "^0.32.9"
   },
   "resolutions": {
@@ -73,19 +74,17 @@
     ]
   },
   "devDependencies": {
-    "babel-eslint": "^10.0.2",
     "cross-env": "^7.0.3",
     "cypress": "^8.3.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.0.5",
-    "husky": "^7.0.2",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
+    "prettier": "^2.8.8",
     "semantic-release": "^17.4.6"
   }
 }

package/src/components/Atoms/Input/Input.js

@@ -23,7 +23,7 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
   border-color: ${error ? theme.color('red') : theme.color('grey_medium')};
   box-shadow: none;
   appearance: none;
-  color: ${theme.color('black')}; 
+  color: ${theme.color('black')};
   border-radius: ${spacing('sm')};
   font-size: inherit;
   z-index: 2;
@@ -119,7 +119,7 @@ Input.propTypes = {
   id: PropTypes.string.isRequired,
   /** text, email, number, date, search, tel, url, password */
   type: PropTypes.string.isRequired,
-  labelProps: PropTypes.objectOf(PropTypes.any),
+  labelProps: PropTypes.objectOf(PropTypes.string),
   // className is needed so that styled(`Input`) will work
   // (as `rest` is not spread on the outermost component)
   className: PropTypes.string,

package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -22,14 +22,13 @@ const KEY_CODE_ESCAPE = 27;
  * This component deals with the visual aspect of a text input with typeahead-style functionality
  *
  * API querying and state management (aside from that related to keyboard usage/accessibility) are
- *  handled by the parent component (via the value, options, onChange and onSelect props)
+ *  handled by the parent component (options, onChange and onSelect props)
  *
  * See the Typeahead and SchoolLookup molecules for the full implementation
  */
 const TextInputWithDropdown = React.forwardRef(
   (
     {
-      value,
       options,
       onChange,
       onSelect,
@@ -76,7 +75,6 @@ const TextInputWithDropdown = React.forwardRef(
     };
 
     const inputProps = {
-      value,
       onChange,
       id,
       name,
@@ -178,7 +176,6 @@ const Options = ({
 };
 
 TextInputWithDropdown.propTypes = {
-  value: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
   onChange: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,

package/src/components/Molecules/CardDs/CardDs.js

@@ -119,6 +119,7 @@ const CardDs = ({
           tabIndex="-1"
           href={link}
           target={target}
+          data-cta-copy={linkLabel}
           {...rest}
         >
           {Media}

package/src/components/Molecules/CardDs/__snapshots__/CardDs.test.js.snap

@@ -189,6 +189,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Find out more"
     href="/home"
     tabIndex="-1"
     target="_blank"

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

@@ -31,7 +31,6 @@ const SingleMessageDs = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
 
-  // const openModal = () => setIsOpen(true);
   const closeModal = () => setIsOpen(false);
 
   const Media = (
@@ -57,6 +56,7 @@ const SingleMessageDs = ({
           tabIndex="-1"
           href={link}
           target={target}
+          data-cta-copy={linkLabel}
           {...rest}
         >
           {Media}
@@ -71,6 +71,7 @@ const SingleMessageDs = ({
           tabIndex="-1"
           href={youTubeId}
           target={target}
+          data-cta-copy={linkLabel}
           {...rest}
           onClick={e => { setIsOpen(true); e.preventDefault(); }}
         >

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

@@ -234,6 +234,7 @@ exports[`renders correctly 1`] = `
   <a
     aria-hidden="true"
     className="c1"
+    data-cta-copy="Check out the shop"
     href="/home"
     tabIndex="-1"
     target="_blank"

package/src/components/Organisms/Donate/Donate.js

@@ -92,8 +92,9 @@ const Donate = ({
       <Wrapper formAlignRight={formAlignRight} aria-live="polite">
         <Header formAlignRight={formAlignRight}>
           <HeaderInner>
-            {subtitle && (
+            {Boolean(subtitle) && (
               <>
+                {Boolean(title) && (
                 <Text
                   tag="h2"
                   color={textColor}
@@ -104,6 +105,8 @@ const Donate = ({
                 >
                   {title}
                 </Text>
+                )}
+
                 <Text tag="p" color={textColor} size="m">
                   {subtitle}
                 </Text>
@@ -136,7 +139,7 @@ Donate.propTypes = {
   data: PropTypes.objectOf(PropTypes.shape),
   clientID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   otherAmountText: PropTypes.string,
   subtitle: PropTypes.string,
   formAlignRight: PropTypes.bool,
@@ -182,7 +185,8 @@ Donate.defaultProps = {
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
   isDesktopOverride: null,
-  otherAmountValue: null
+  otherAmountValue: null,
+  title: null
 };
 
 export default Donate;

package/src/components/Organisms/Donate/Form/Form.js

@@ -313,12 +313,13 @@ Signup.propTypes = {
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
   submitButtonColor: PropTypes.string.isRequired,
-  otherAmountValue: PropTypes.number.isRequired
+  otherAmountValue: PropTypes.number
 };
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {}
+  data: {},
+  otherAmountValue: null
 };
 
 export default Signup;

package/src/components/Organisms/Donate/GivingSelector/GivingSelector.js

@@ -26,7 +26,6 @@ const GivingSelector = ({
           value="Single"
           type="radio"
           label=""
-          errormsg=""
           checked={givingType === 'single'}
           onClick={() => handleGivingTypeChange('single', givingType)}
         />
@@ -40,7 +39,6 @@ const GivingSelector = ({
           value="Monthly"
           type="radio"
           label=""
-          errormsg=""
           checked={givingType === 'monthly'}
           onClick={() => handleGivingTypeChange('monthly', givingType)}
         />

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

@@ -543,7 +543,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-4"
             label=""
             onClick={[Function]}
@@ -560,7 +559,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-4"
             label=""
             onClick={[Function]}
@@ -1286,7 +1284,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-1"
             label=""
             onClick={[Function]}
@@ -1303,7 +1300,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-1"
             label=""
             onClick={[Function]}

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

@@ -397,7 +397,7 @@ exports[`renders correctly 1`] = `
             Subscribe
           </span>
           <div
-            className="ButtonWithStates__LoaderContainer-sc-7gb81g-1"
+            className=""
           />
         </button>
       </div>

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

@@ -563,7 +563,7 @@ exports[`renders correctly 1`] = `
         className="c2"
       >
         <div
-          className="Footerstyle__SocialIconWrapper-sc-167xaf5-7"
+          className=""
         >
           <ul
             className="c3"

package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -263,6 +263,16 @@ MarketingPreferencesDS.defaultProps = {
   formContext: null
 };
 
+MaybeDisabled.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool
+};
+
+MaybeDisabled.defaultProps = {
+  children: null,
+  disabled: false
+};
+
 export {
   MarketingPreferencesDS, setInitialValues, buildValidationSchema
 };