@comicrelief/component-library 7.47.0 → 7.48.1

package/babel.config.js

@@ -3,7 +3,10 @@ module.exports = function (api) {
     api.cache(true);
 
     const presets = [ ["react-app", { "absoluteRuntime": false }] ];
-    const plugins = [ ["babel-plugin-styled-components"] ];
+    const plugins = [
+        ["babel-plugin-styled-components"],
+        ["import", { "libraryName": "lodash", "libraryDirectory": "", "camel2DashComponentName": false }]
+    ];
 
     return {
         presets,

package/dist/components/Atoms/Pagination/Utils/PaginationCalculator.js

@@ -1,10 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getPages = exports.calculatePagesToTheRight = exports.calculatePagesToTheLeft = exports.calculateDisplayedPages = void 0;
-var _lodash = require("lodash");
+var _range2 = _interopRequireDefault(require("lodash/range"));
 /**
  * Determines the number of displayed pages
  * @param  {Integer} maxPages
@@ -63,12 +64,12 @@ const getPages = (currentPage, maxPages, totalPages) => {
   const displayedPages = calculateDisplayedPages(maxPages, totalPages);
   // If all pages are allowed, return the entire page range
   if (displayedPages === totalPages) {
-    return (0, _lodash.range)(1, totalPages + 1);
+    return (0, _range2.default)(1, totalPages + 1);
   }
   const pagesToTheLeft = calculatePagesToTheLeft(currentPage, displayedPages, totalPages);
   const pagesToTheRight = calculatePagesToTheRight(currentPage, displayedPages, totalPages);
   const first = currentPage - pagesToTheLeft;
   const last = currentPage + pagesToTheRight;
-  return (0, _lodash.range)(first, last + 1);
+  return (0, _range2.default)(first, last + 1);
 };
 exports.getPages = getPages;

package/dist/components/Molecules/Card/Card.js

@@ -21,8 +21,6 @@ const Card = _ref => {
     squaredCorners,
     smallBreakpointRowLayout,
     mediumBreakpointRowLayout,
-    rowTextColor,
-    columnTextColor,
     ...rest
   } = _ref;
   return /*#__PURE__*/_react.default.createElement(_Card.Container, Object.assign({
@@ -42,9 +40,7 @@ const Card = _ref => {
     mediumBreakpointRowLayout: mediumBreakpointRowLayout
   })) : null, children ? /*#__PURE__*/_react.default.createElement(_Card.Copy, {
     smallBreakpointRowLayout: smallBreakpointRowLayout,
-    mediumBreakpointRowLayout: mediumBreakpointRowLayout,
-    rowTextColor: rowTextColor,
-    columnTextColor: columnTextColor
+    mediumBreakpointRowLayout: mediumBreakpointRowLayout
   }, children) : null);
 };
 Card.defaultProps = {
@@ -58,8 +54,6 @@ Card.defaultProps = {
   height: '100%',
   squaredCorners: false,
   smallBreakpointRowLayout: null,
-  mediumBreakpointRowLayout: null,
-  rowTextColor: 'black',
-  columnTextColor: 'black'
+  mediumBreakpointRowLayout: null
 };
 var _default = exports.default = Card;

package/dist/components/Molecules/Card/Card.md

@@ -9,8 +9,6 @@ import Link from '../../Atoms/Link/Link';
       images={defaultData.images}
       backgroundColor="blue"
       height="auto"
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title
@@ -35,8 +33,6 @@ import Link from '../../Atoms/Link/Link';
       height="auto"
       smallBreakpointRowLayout={true}
       mediumBreakpointRowLayout={false}
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title
@@ -61,8 +57,6 @@ import Link from '../../Atoms/Link/Link';
       height="auto"
       smallBreakpointRowLayout={false}
       mediumBreakpointRowLayout={true}
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title
@@ -87,8 +81,6 @@ import Link from '../../Atoms/Link/Link';
       height="auto"
       smallBreakpointRowLayout={true}
       mediumBreakpointRowLayout={true}
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title

package/dist/components/Molecules/Card/Card.style.js

@@ -60,7 +60,7 @@ const Wrapper = exports.Wrapper = _styledComponents.default.div.withConfig({
 const Copy = exports.Copy = _styledComponents.default.div.withConfig({
   displayName: "Cardstyle__Copy",
   componentId: "sc-cxn4co-2"
-})(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}@media ", "{color:", ";@media ", "{color:", ";}@media ", "{color:", ";}"], (0, _spacing.default)('l'), _ref8 => {
+})(["display:flex;flex-direction:column;padding:", ";", " ", " @media ", "{padding:", ";h1{font-size:2rem;}}"], (0, _spacing.default)('l'), _ref8 => {
   let {
     smallBreakpointRowLayout
   } = _ref8;
@@ -90,19 +90,4 @@ const Copy = exports.Copy = _styledComponents.default.div.withConfig({
     theme
   } = _ref13;
   return theme.allBreakpoints('L');
-}, (0, _spacing.default)('l'), _ref14 => {
-  let {
-    theme
-  } = _ref14;
-  return theme.allBreakpoints('S');
-}, props => props.smallBreakpointRowLayout === true ? "".concat(props.rowTextColor) : "".concat(props.columnTextColor), _ref15 => {
-  let {
-    theme
-  } = _ref15;
-  return theme.allBreakpoints('M');
-}, props => props.mediumBreakpointRowLayout === true ? "".concat(props.rowTextColor) : "".concat(props.columnTextColor), _ref16 => {
-  let {
-    theme
-  } = _ref16;
-  return theme.allBreakpoints('L');
-}, props => props.columnTextColor);
+}, (0, _spacing.default)('l'));

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

@@ -63,12 +63,6 @@ exports[`renders correctly 1`] = `
   }
 }
 
-@media (min-width:0px) {
-  .c1 {
-    color: black;
-  }
-}
-
 <div
   className="c0"
 >
@@ -148,12 +142,6 @@ exports[`renders correctly 2`] = `
   }
 }
 
-@media (min-width:0px) {
-  .c1 {
-    color: black;
-  }
-}
-
 <div
   className="c0"
 >

package/dist/components/Molecules/Typeahead/Typeahead.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _debounce2 = _interopRequireDefault(require("lodash/debounce"));
 var _react = _interopRequireWildcard(require("react"));
-var _lodash = require("lodash");
 var _TextInputWithDropdown = _interopRequireDefault(require("../../Atoms/TextInputWithDropdown/TextInputWithDropdown"));
 // These just felt about right to me but could be changed.
 const DELAY_DURATION = 300;
@@ -52,7 +52,7 @@ const Typeahead = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   // useCallback is needed so that the debounced function is not recreated on each render.
   // (Dependency array needs to be empty to ensure that this is the case).
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const debouncedHandleChange = (0, _react.useCallback)((0, _lodash.debounce)(handleChange, DELAY_DURATION), []);
+  const debouncedHandleChange = (0, _react.useCallback)((0, _debounce2.default)(handleChange, DELAY_DURATION), []);
   return /*#__PURE__*/_react.default.createElement(_TextInputWithDropdown.default, Object.assign({
     defaultValue: "",
     options: optionParser ? options.map(optionParser) : options,

package/dist/components/Organisms/EmailSignUp/_EmailSignUpConfig.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.buildEsuValidationSchema = exports.ESU_FIELDS = void 0;
-var _lodash = require("lodash");
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
 var yup = _interopRequireWildcard(require("yup"));
 /**
  * ESU_FIELDS
@@ -35,6 +36,6 @@ const buildEsuValidationSchema = overrides => {
     [ESU_FIELDS.LAST_NAME]: yup.string().required('Please enter your last name').matches(/^[A-Za-z][A-Za-z' -]*$/, "This field only accepts letters and ' - and must start with a letter").max(50, 'Your first name must be between 1 and 50 characters'),
     [ESU_FIELDS.EMAIL]: yup.string().required('Please enter your email address').email('Please enter a valid email address').max(100, 'Your email address must be between 1 and 100 characters long')
   });
-  return (0, _lodash.merge)(defaultSchema, overrides);
+  return (0, _merge2.default)(defaultSchema, overrides);
 };
 exports.buildEsuValidationSchema = buildEsuValidationSchema;

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

@@ -17,10 +17,10 @@ Object.defineProperty(exports, "setInitialValues", {
     return _MarketingPrefsConfig.setInitialValues;
   }
 });
+var _isEmpty2 = _interopRequireDefault(require("lodash/isEmpty"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactHookForm = require("react-hook-form");
-var _lodash = _interopRequireDefault(require("lodash"));
 var _CheckAnswer = _interopRequireDefault(require("./_CheckAnswer"));
 var _DefaultCopy = require("./_DefaultCopy");
 var _MarketingPreferencesDS = require("./MarketingPreferencesDS.style");
@@ -75,7 +75,7 @@ const MarketingPreferencesDS = _ref => {
 
   // Required to track multiple errors to determine whether to show/hide the fieldset
   const isAddressErroring = () => {
-    if (_lodash.default.isEmpty(errors)) {
+    if ((0, _isEmpty2.default)(errors)) {
       return null;
     }
     return errors.mp_address1 || errors.mp_address2 || errors.mp_address3 || errors.mp_town || errors.mp_country || errors.mp_postcode;

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

@@ -1,12 +1,13 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.setInitialValues = exports.buildValidationSchema = void 0;
+var _merge2 = _interopRequireDefault(require("lodash/merge"));
 var yup = _interopRequireWildcard(require("yup"));
-var _lodash = require("lodash");
 const setInitialValues = overrideValues => {
   const defaultValues = {
     mp_email: '',
@@ -25,7 +26,7 @@ const setInitialValues = overrideValues => {
   };
 
   // Override with any custom options supplied
-  const updatedValues = (0, _lodash.merge)(defaultValues, overrideValues);
+  const updatedValues = (0, _merge2.default)(defaultValues, overrideValues);
   return updatedValues;
 };
 exports.setInitialValues = setInitialValues;
@@ -63,7 +64,7 @@ const buildValidationSchema = overrideOptions => {
   };
 
   // Override with any custom options supplied
-  const mpValidationOptions = (0, _lodash.merge)(defaultOptions, overrideOptions);
+  const mpValidationOptions = (0, _merge2.default)(defaultOptions, overrideOptions);
   const phoneRegex = /^(((((\+44)|(0044))\s?\d{4}|\(?0\d{4}\)?)\s?\d{3}\s?\d{3})|((((\+44)|(0044))\s?\d{3}|\(?0\d{3}\)?)\s?\d{3}\s?\d{4})|((((\+44)|(0044))\s?\d{2}|\(?0\d{2}\)?)\s?\d{4}\s?\d{4}))(\s?\\#(\d{4}|\d{3}))?$/;
   const mpValidationSchema = yup.object({
     mp_email: yup.string().when('mp_permissionEmail', {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.47.0",
+  "version": "7.48.1",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -21,13 +21,8 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@babel/cli": "^7.21.5",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@hookform/resolvers": "^1.3.4",
-    "@playwright/test": "^1.38.1",
     "axios": "^0.21.1",
-    "ejs": "^3.1.9",
-    "jest-styled-components": "^7.1.1",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.4",
@@ -41,9 +36,7 @@
     "react-modal": "^3.16.1",
     "react-range-slider-input": "^3.0.7",
     "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.3.3",
     "styled-components": "^5.3.11",
@@ -54,12 +47,12 @@
     "react-scripts/workbox-webpack-plugin/workbox-build/@surma/rollup-plugin-off-main-thread/ejs": "3.1.6"
   },
   "scripts": {
+    "build": "rm -rf dist && NODE_ENV=production babel src --out-dir dist --copy-files --ignore __tests__,spec.js,test.js",
     "test:unit": "yarn run jest",
     "test:unit:update": "yarn jest -u",
     "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",
     "test:e2e": "playwright test --project=chromium",
     "test:e2e--h": "playwright test --project=chromium --headed",
     "test:e2e:ci": "NODE_ENV=development; start-server-and-test styleguide http://localhost:6060 test:e2e",
@@ -80,7 +73,12 @@
     ]
   },
   "devDependencies": {
+    "@babel/cli": "^7.21.5",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@playwright/test": "^1.38.1",
+    "babel-plugin-import": "^1.13.8",
     "cross-env": "^7.0.3",
+    "ejs": "^3.1.9",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.27.5",
@@ -88,8 +86,11 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^26.1.0",
+    "jest-styled-components": "^7.1.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
+    "react-scripts": "4.0.3",
+    "react-styleguidist": "^11.1.7",
     "semantic-release": "^17.4.6",
     "start-server-and-test": "^2.0.0"
   }

package/src/components/Molecules/Card/Card.js

@@ -15,8 +15,6 @@ const Card = ({
   squaredCorners,
   smallBreakpointRowLayout,
   mediumBreakpointRowLayout,
-  rowTextColor,
-  columnTextColor,
   ...rest
 }) => (
   <Container
@@ -46,8 +44,6 @@ const Card = ({
         <Copy
           smallBreakpointRowLayout={smallBreakpointRowLayout}
           mediumBreakpointRowLayout={mediumBreakpointRowLayout}
-          rowTextColor={rowTextColor}
-          columnTextColor={columnTextColor}
         >
           {children}
         </Copy>
@@ -66,9 +62,7 @@ Card.propTypes = {
   children: PropTypes.node,
   squaredCorners: PropTypes.bool,
   smallBreakpointRowLayout: PropTypes.bool,
-  mediumBreakpointRowLayout: PropTypes.bool,
-  rowTextColor: PropTypes.string,
-  columnTextColor: PropTypes.string
+  mediumBreakpointRowLayout: PropTypes.bool
 };
 
 Card.defaultProps = {
@@ -82,9 +76,7 @@ Card.defaultProps = {
   height: '100%',
   squaredCorners: false,
   smallBreakpointRowLayout: null,
-  mediumBreakpointRowLayout: null,
-  rowTextColor: 'black',
-  columnTextColor: 'black'
+  mediumBreakpointRowLayout: null
 };
 
 export default Card;

package/src/components/Molecules/Card/Card.md

@@ -9,8 +9,6 @@ import Link from '../../Atoms/Link/Link';
       images={defaultData.images}
       backgroundColor="blue"
       height="auto"
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title
@@ -35,8 +33,6 @@ import Link from '../../Atoms/Link/Link';
       height="auto"
       smallBreakpointRowLayout={true}
       mediumBreakpointRowLayout={false}
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title
@@ -61,8 +57,6 @@ import Link from '../../Atoms/Link/Link';
       height="auto"
       smallBreakpointRowLayout={false}
       mediumBreakpointRowLayout={true}
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title
@@ -87,8 +81,6 @@ import Link from '../../Atoms/Link/Link';
       height="auto"
       smallBreakpointRowLayout={true}
       mediumBreakpointRowLayout={true}
-      rowTextColor="purple"
-      columnTextColor="black"
     >
       <Text tag="h3" size="xl">
         Title

package/src/components/Molecules/Card/Card.style.js

@@ -74,22 +74,6 @@ const Copy = styled.div`
       font-size: 2rem;
     }
   }
-
-  /* Setting colors based on row (transparent background) vs column view */
-  @media ${({ theme }) => theme.allBreakpoints('S')} {
-    color: ${props => ((props.smallBreakpointRowLayout === true)
-    ? `${props.rowTextColor}`
-    : `${props.columnTextColor}`
-  )};
-  @media ${({ theme }) => theme.allBreakpoints('M')} {
-    color: ${props => ((props.mediumBreakpointRowLayout === true)
-    ? `${props.rowTextColor}`
-    : `${props.columnTextColor}`
-  )};
-  }
-  @media ${({ theme }) => theme.allBreakpoints('L')} {
-    color: ${props => props.columnTextColor};
-  }
 `;
 
 export { Container, Wrapper, Copy };

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

@@ -63,12 +63,6 @@ exports[`renders correctly 1`] = `
   }
 }
 
-@media (min-width:0px) {
-  .c1 {
-    color: black;
-  }
-}
-
 <div
   className="c0"
 >
@@ -148,12 +142,6 @@ exports[`renders correctly 2`] = `
   }
 }
 
-@media (min-width:0px) {
-  .c1 {
-    color: black;
-  }
-}
-
 <div
   className="c0"
 >