@comicrelief/component-library 7.5.0 → 7.7.0

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

@@ -31,9 +31,9 @@ var Donate = function Donate(_ref) {
   var alt = _ref.alt,
       cartID = _ref.cartID,
       clientID = _ref.clientID,
-      overlayColor = _ref.overlayColor,
-      backgroundColor = _ref.backgroundColor,
-      buttonColor = _ref.buttonColor,
+      desktopOverlayColor = _ref.desktopOverlayColor,
+      mobileBackgroundColor = _ref.mobileBackgroundColor,
+      submitButtonColor = _ref.submitButtonColor,
       textColor = _ref.textColor,
       donateLink = _ref.donateLink,
       data = _ref.data,
@@ -70,12 +70,12 @@ var Donate = function Donate(_ref) {
 
   isDesktop = overrideValue !== null ? overrideValue : isDesktop;
   return /*#__PURE__*/_react.default.createElement(_Donate.Container, {
-    backgroundColor: backgroundColor,
-    overlayColor: overlayColor,
+    mobileBackgroundColor: mobileBackgroundColor,
+    desktopOverlayColor: desktopOverlayColor,
     id: mbshipID,
     key: overrideValue
   }, !isDesktop && mobileImages ? /*#__PURE__*/_react.default.createElement(_Picture.default, {
-    backgroundColor: backgroundColor,
+    backgroundColor: mobileBackgroundColor,
     image: mobileImage,
     images: mobileImages,
     imageLow: mobileImageLow,
@@ -84,7 +84,7 @@ var Donate = function Donate(_ref) {
     height: "100%",
     alt: mobileAlt
   }) : null, isDesktop && images ? /*#__PURE__*/_react.default.createElement(_Donate.BgImage, {
-    backgroundColor: overlayColor,
+    backgroundColor: desktopOverlayColor,
     image: image,
     images: images,
     imageLow: imageLow,
@@ -119,7 +119,7 @@ var Donate = function Donate(_ref) {
     noMoneyBuys: noMoneyBuys,
     PopUpText: PopUpText,
     chooseAmountText: chooseAmountText,
-    buttonColor: buttonColor
+    submitButtonColor: submitButtonColor
   })));
 };
 
@@ -134,9 +134,9 @@ Donate.defaultProps = {
   mobileImage: null,
   mobileImages: null,
   mobileAlt: '',
-  overlayColor: 'transparent',
-  backgroundColor: 'blue_dark',
-  buttonColor: 'red',
+  desktopOverlayColor: 'transparent',
+  mobileBackgroundColor: 'blue_dark',
+  submitButtonColor: 'red',
   textColor: 'white',
   mbshipID: null,
   otherAmountText: 'will help us fund amazing projects in the UK and around the world.',

package/dist/components/Organisms/Donate/Donate.md

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red desktop overlay and purple mobile background colour
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
 
 ```js
 import data from './dev-data/data';
@@ -9,8 +9,9 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="deep_violet_dark"
-  overlayColor="red"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+	submitButtonColor="blue_dark"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -34,8 +35,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
-  overlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -60,8 +61,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
-  overlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -85,8 +86,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
-  overlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -112,8 +113,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="transparent"
-  overlayColor="transparent"
+  mobileBackgroundColor="transparent"
+  desktopOverlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -137,7 +138,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="transparent"
+  mobileBackgroundColor="transparent"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -161,7 +162,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -185,7 +186,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -208,8 +209,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 import data from './dev-data/data-single';
 
 <Donate
-  overlayColor="blue_dark"
-  backgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
   mbshipID="mship-9"
@@ -232,8 +233,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
-  overlayColor="red"
+  mobileBackgroundColor="red"
+  desktopOverlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}

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

@@ -27,12 +27,12 @@ var Container = _styledComponents.default.div.withConfig({
   componentId: "sc-8rjm3t-0"
 })(["position:relative;display:flex;flex-direction:column;justify-content:center;height:auto;background-color:", ";", "{flex-direction:row;align-items:center;justify-content:inherit;background-color:", ";}"], function (_ref) {
   var theme = _ref.theme,
-      backgroundColor = _ref.backgroundColor;
-  return theme.color(backgroundColor);
+      mobileBackgroundColor = _ref.mobileBackgroundColor;
+  return theme.color(mobileBackgroundColor);
 }, (0, _size.media)('medium'), function (_ref2) {
   var theme = _ref2.theme,
-      overlayColor = _ref2.overlayColor;
-  return theme.color(overlayColor);
+      desktopOverlayColor = _ref2.desktopOverlayColor;
+  return theme.color(desktopOverlayColor);
 });
 
 exports.Container = Container;
@@ -173,8 +173,8 @@ var Button = _styledComponents.default.button.withConfig({
   return theme.fontSize('s');
 }, function (_ref15) {
   var theme = _ref15.theme,
-      buttonColor = _ref15.buttonColor;
-  return theme.color(buttonColor);
+      color = _ref15.color;
+  return theme.color(color);
 }, function (_ref16) {
   var theme = _ref16.theme;
   return theme.color('coral_dark');

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

@@ -25,7 +25,7 @@ var _Donate = require("../Donate.style");
 
 var _GivingSelector = _interopRequireDefault(require("../GivingSelector/GivingSelector"));
 
-var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "buttonColor"];
+var _excluded = ["data", "donateLink", "otherAmountText", "clientID", "cartID", "mbshipID", "noMoneyBuys", "PopUpText", "chooseAmountText", "submitButtonColor"];
 
 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); }
 
@@ -43,7 +43,7 @@ var Signup = function Signup(_ref) {
       noMoneyBuys = _ref.noMoneyBuys,
       PopUpText = _ref.PopUpText,
       chooseAmountText = _ref.chooseAmountText,
-      buttonColor = _ref.buttonColor,
+      submitButtonColor = _ref.submitButtonColor,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useState = (0, _react.useState)('single'),
@@ -186,12 +186,12 @@ var Signup = function Signup(_ref) {
     type: "submit",
     as: "input",
     value: "Donate",
-    buttonColor: buttonColor
+    color: submitButtonColor
   }) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     as: "input",
     value: givingType === 'single' ? 'Donate now' : 'Donate monthly',
-    buttonColor: buttonColor
+    color: submitButtonColor
   }))));
 };
 

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

@@ -835,6 +835,7 @@ exports[`Monthly donation renders correctly 1`] = `
           </div>
           <input
             className="c28"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -1546,6 +1547,7 @@ exports[`Single donation renders correctly 1`] = `
           </p>
           <input
             className="c24"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -2004,6 +2006,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
           </div>
           <input
             className="c18"
+            color="red"
             type="submit"
             value="Donate"
           />

package/dist/components/Organisms/Footer/Footer.js

@@ -21,18 +21,22 @@ var _SocialIcons = _interopRequireDefault(require("../../Atoms/SocialIcons/Socia
 
 var _Footer = require("./Footer.style");
 
-var _excluded = ["navItems", "footerCopy", "campaign"];
+var _excluded = ["navItems", "footerCopy", "campaign", "additionalLegalLine"];
 
 var Footer = function Footer(_ref) {
   var navItems = _ref.navItems,
       footerCopy = _ref.footerCopy,
       campaign = _ref.campaign,
+      additionalLegalLine = _ref.additionalLegalLine,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Remove white space between words
   var campaignName = campaign.replace(/\s/g, '').toLowerCase();
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Footer.FooterWrapper, Object.assign({
     navItems: true
-  }, rest), /*#__PURE__*/_react.default.createElement(_Footer.InnerWrapper, null, /*#__PURE__*/_react.default.createElement(_Footer.FooterBranding, null, /*#__PURE__*/_react.default.createElement(_Footer.SocialIconWrapper, null, /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
+  }, rest), /*#__PURE__*/_react.default.createElement(_Footer.InnerWrapper, null, additionalLegalLine && /*#__PURE__*/_react.default.createElement(_Footer.FooterLegalLine, {
+    tag: "p",
+    color: "grey"
+  }, additionalLegalLine), /*#__PURE__*/_react.default.createElement(_Footer.FooterBranding, null, /*#__PURE__*/_react.default.createElement(_Footer.SocialIconWrapper, null, /*#__PURE__*/_react.default.createElement(_SocialIcons.default, {
     campaign: campaignName
   })), /*#__PURE__*/_react.default.createElement(_Footer.Brand, {
     href: "/",
@@ -54,7 +58,8 @@ Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
   campaign: 'Comic Relief',
-  overrideWhiteList: false
+  overrideWhiteList: false,
+  additionalLegalLine: ''
 };
 var _default = Footer;
 exports.default = _default;

package/dist/components/Organisms/Footer/Footer.md

@@ -9,7 +9,19 @@ import footerCopy from './data/footerCopy';
     <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 />
+    <Footer 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+      overrideWhiteList 
+    />
+    
+    <p>Adding a additionalLegalLine to the top of the footer</p>
+    <Footer 
+      additionalLegalLine="MR. MEN ™ LITTLE MISS ™ © 2022 THOIP (a SANRIO Company). All rights reserved." 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+    />
 </>
-
 ```

package/dist/components/Organisms/Footer/Footer.style.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Brand = exports.SocialIconWrapper = exports.FooterBranding = exports.FooterCopyright = exports.InnerWrapper = exports.Angle = exports.FooterWrapper = void 0;
+exports.Brand = exports.SocialIconWrapper = exports.FooterBranding = exports.FooterCopyright = exports.FooterLegalLine = exports.InnerWrapper = exports.Angle = exports.FooterWrapper = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
@@ -13,6 +13,8 @@ var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
 
 var _Link = _interopRequireDefault(require("../../Atoms/Link/Link"));
 
+var _Text = _interopRequireDefault(require("../../Atoms/Text/Text"));
+
 var FooterWrapper = _styledComponents.default.footer.attrs(function () {
   return {
     role: 'banner'
@@ -46,17 +48,22 @@ var InnerWrapper = _styledComponents.default.div.withConfig({
 }, (0, _spacing.default)('md'), (0, _spacing.default)('xl'));
 
 exports.InnerWrapper = InnerWrapper;
+var FooterLegalLine = (0, _styledComponents.default)(_Text.default).withConfig({
+  displayName: "Footerstyle__FooterLegalLine",
+  componentId: "sc-167xaf5-3"
+})(["text-align:left;margin-top:1rem;"]);
+exports.FooterLegalLine = FooterLegalLine;
 
 var FooterBranding = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__FooterBranding",
-  componentId: "sc-167xaf5-3"
+  componentId: "sc-167xaf5-4"
 })(["display:flex;margin:", " 0 5rem;justify-content:space-between;align-items:center;"], (0, _spacing.default)('lg'));
 
 exports.FooterBranding = FooterBranding;
 
 var FooterCopyright = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__FooterCopyright",
-  componentId: "sc-167xaf5-4"
+  componentId: "sc-167xaf5-5"
 })(["display:block;width:100%;height:100%;text-align:left;margin-top:", ";p{font-size:15px;line-height:24px;margin-bottom:5px;@media ", "{font-size:16px;line-height:27px;}}"], (0, _spacing.default)('lg'), function (_ref4) {
   var theme = _ref4.theme;
   return theme.breakpoint('medium');
@@ -65,13 +72,13 @@ var FooterCopyright = _styledComponents.default.div.withConfig({
 exports.FooterCopyright = FooterCopyright;
 var Brand = (0, _styledComponents.default)(_Link.default).withConfig({
   displayName: "Footerstyle__Brand",
-  componentId: "sc-167xaf5-5"
+  componentId: "sc-167xaf5-6"
 })(["color:transparent;border:0;:hover{border:0;}"]);
 exports.Brand = Brand;
 
 var SocialIconWrapper = _styledComponents.default.div.withConfig({
   displayName: "Footerstyle__SocialIconWrapper",
-  componentId: "sc-167xaf5-6"
+  componentId: "sc-167xaf5-7"
 })([""]);
 
 exports.SocialIconWrapper = SocialIconWrapper;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.5.0",
+  "version": "7.7.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {

package/src/components/Atoms/Text/Text.js

@@ -47,22 +47,17 @@ export const BaseText = styled.span`
 const Text = ({
   tag, children, height, weight, family, ...rest
 }) => (
-  <BaseText {...rest} as={tag} height={height} weight={weight} family={family}>
+  <BaseText
+    {...rest}
+    as={tag}
+    height={height}
+    weight={weight}
+    family={family}
+  >
     {children}
   </BaseText>
 );
 
-Text.defaultProps = {
-  family: null,
-  tag: 'span',
-  weight: undefined,
-  height: undefined,
-  uppercase: false,
-  size: 's',
-  color: 'inherit',
-  children: undefined
-};
-
 Text.propTypes = {
   /** Font family */
   family: PropTypes.string,
@@ -85,4 +80,15 @@ Text.propTypes = {
   ])
 };
 
+Text.defaultProps = {
+  family: null,
+  tag: 'span',
+  weight: undefined,
+  height: undefined,
+  uppercase: false,
+  size: 's',
+  color: 'inherit',
+  children: undefined
+};
+
 export default Text;

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

@@ -18,9 +18,9 @@ const Donate = ({
   alt,
   cartID,
   clientID,
-  overlayColor,
-  backgroundColor,
-  buttonColor,
+  desktopOverlayColor,
+  mobileBackgroundColor,
+  submitButtonColor,
   textColor,
   donateLink,
   data,
@@ -56,14 +56,14 @@ const Donate = ({
 
   return (
     <Container
-      backgroundColor={backgroundColor}
-      overlayColor={overlayColor}
+      mobileBackgroundColor={mobileBackgroundColor}
+      desktopOverlayColor={desktopOverlayColor}
       id={mbshipID}
       key={overrideValue}
     >
       {!isDesktop && mobileImages ? (
         <Picture
-          backgroundColor={backgroundColor}
+          backgroundColor={mobileBackgroundColor}
           image={mobileImage}
           images={mobileImages}
           imageLow={mobileImageLow}
@@ -76,7 +76,7 @@ const Donate = ({
 
       {isDesktop && images ? (
         <BgImage
-          backgroundColor={overlayColor}
+          backgroundColor={desktopOverlayColor}
           image={image}
           images={images}
           imageLow={imageLow}
@@ -121,7 +121,7 @@ const Donate = ({
           noMoneyBuys={noMoneyBuys}
           PopUpText={PopUpText}
           chooseAmountText={chooseAmountText}
-          buttonColor={buttonColor}
+          submitButtonColor={submitButtonColor}
         />
       </Wrapper>
     </Container>
@@ -145,9 +145,9 @@ Donate.propTypes = {
   mobileImage: PropTypes.string,
   mobileImages: PropTypes.string,
   mobileAlt: PropTypes.string,
-  backgroundColor: PropTypes.string,
-  overlayColor: PropTypes.string,
-  buttonColor: PropTypes.string,
+  mobileBackgroundColor: PropTypes.string,
+  desktopOverlayColor: PropTypes.string,
+  submitButtonColor: PropTypes.string,
   textColor: PropTypes.string,
   mbshipID: PropTypes.string,
   noMoneyBuys: PropTypes.bool,
@@ -167,9 +167,9 @@ Donate.defaultProps = {
   mobileImage: null,
   mobileImages: null,
   mobileAlt: '',
-  overlayColor: 'transparent',
-  backgroundColor: 'blue_dark',
-  buttonColor: 'red',
+  desktopOverlayColor: 'transparent',
+  mobileBackgroundColor: 'blue_dark',
+  submitButtonColor: 'red',
   textColor: 'white',
   mbshipID: null,
   otherAmountText:

package/src/components/Organisms/Donate/Donate.md

@@ -1,6 +1,6 @@
 # Donate
 
-## Form align right, with red desktop overlay and purple mobile background colour
+## Form align right, with red desktop overlay and purple mobile background colour, with a blue submit button
 
 ```js
 import data from './dev-data/data';
@@ -9,8 +9,9 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="deep_violet_dark"
-  overlayColor="red"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+	submitButtonColor="blue_dark"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -34,8 +35,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
-  overlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -60,8 +61,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
-  overlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -85,8 +86,8 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
-  overlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -112,8 +113,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="transparent"
-  overlayColor="transparent"
+  mobileBackgroundColor="transparent"
+  desktopOverlayColor="transparent"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -137,7 +138,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="transparent"
+  mobileBackgroundColor="transparent"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -161,7 +162,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -185,7 +186,7 @@ const mobilePictures = require('../../../styleguide/data/data').mobileImages;
 const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
-  backgroundColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}
@@ -208,8 +209,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 import data from './dev-data/data-single';
 
 <Donate
-  overlayColor="blue_dark"
-  backgroundColor="blue_dark"
+  desktopOverlayColor="blue_dark"
+  mobileBackgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
   mbshipID="mship-9"
@@ -232,8 +233,8 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
 
 <Donate
   alt="Background image"
-  backgroundColor="red"
-  overlayColor="red"
+  mobileBackgroundColor="red"
+  desktopOverlayColor="red"
   formAlignRight={true}
   imageLow={desktopPictures.imageLow}
   images={desktopPictures.images}

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

@@ -14,12 +14,12 @@ const Container = styled.div`
   flex-direction: column;
   justify-content: center;
   height: auto;
-  background-color: ${({ theme, backgroundColor }) => theme.color(backgroundColor)};
+  background-color: ${({ theme, mobileBackgroundColor }) => theme.color(mobileBackgroundColor)};
   ${media('medium')} {
     flex-direction: row;
     align-items: center;
     justify-content: inherit;
-    background-color: ${({ theme, overlayColor }) => theme.color(overlayColor)};
+    background-color: ${({ theme, desktopOverlayColor }) => theme.color(desktopOverlayColor)};
   }
 `;
 
@@ -215,7 +215,7 @@ const Button = styled.button`
   font-weight: bold;
   cursor: pointer;
   min-height: 48px;
-  background: ${({ theme, buttonColor }) => theme.color(buttonColor)};
+  background: ${({ theme, color }) => theme.color(color)};
   text-decoration: none;
   border-radius: 2rem;
   border: none;

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

@@ -33,7 +33,7 @@ const Signup = ({
   noMoneyBuys,
   PopUpText,
   chooseAmountText,
-  buttonColor,
+  submitButtonColor,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -212,13 +212,13 @@ const Signup = ({
           )}
 
           {noMoneyBuys ? (
-            <Button type="submit" as="input" value="Donate" buttonColor={buttonColor} />
+            <Button type="submit" as="input" value="Donate" color={submitButtonColor} />
           ) : (
             <Button
               type="submit"
               as="input"
               value={givingType === 'single' ? 'Donate now' : 'Donate monthly'}
-              buttonColor={buttonColor}
+              color={submitButtonColor}
             />
           )}
 
@@ -238,7 +238,7 @@ Signup.propTypes = {
   data: PropTypes.objectOf(PropTypes.shape),
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
-  buttonColor: PropTypes.string.isRequired
+  submitButtonColor: PropTypes.string.isRequired
 };
 
 Signup.defaultProps = {

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

@@ -835,6 +835,7 @@ exports[`Monthly donation renders correctly 1`] = `
           </div>
           <input
             className="c28"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -1546,6 +1547,7 @@ exports[`Single donation renders correctly 1`] = `
           </p>
           <input
             className="c24"
+            color="red"
             type="submit"
             value="Donate now"
           />
@@ -2004,6 +2006,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
           </div>
           <input
             className="c18"
+            color="red"
             type="submit"
             value="Donate"
           />

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

@@ -8,6 +8,7 @@ import SocialIcons from '../../Atoms/SocialIcons/SocialIcons';
 import {
   FooterWrapper,
   InnerWrapper,
+  FooterLegalLine,
   FooterBranding,
   FooterCopyright,
   SocialIconWrapper,
@@ -15,14 +16,18 @@ import {
 } from './Footer.style';
 
 const Footer = ({
-  navItems, footerCopy, campaign, ...rest
+  navItems, footerCopy, campaign, additionalLegalLine, ...rest
 }) => {
   // Remove white space between words
   const campaignName = campaign.replace(/\s/g, '').toLowerCase();
+
   return (
     <div>
       <FooterWrapper navItems {...rest}>
         <InnerWrapper>
+          {additionalLegalLine
+            && <FooterLegalLine tag="p" color="grey">{additionalLegalLine}</FooterLegalLine>
+          }
           <FooterBranding>
             <SocialIconWrapper>
               <SocialIcons campaign={campaignName} />
@@ -47,14 +52,16 @@ Footer.propTypes = {
   navItems: PropTypes.objectOf(PropTypes.shape),
   footerCopy: PropTypes.string,
   campaign: PropTypes.string,
-  overrideWhiteList: PropTypes.bool
+  overrideWhiteList: PropTypes.bool,
+  additionalLegalLine: PropTypes.string
 };
 
 Footer.defaultProps = {
   navItems: {},
   footerCopy: '',
   campaign: 'Comic Relief',
-  overrideWhiteList: false
+  overrideWhiteList: false,
+  additionalLegalLine: ''
 };
 
 export default Footer;

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

@@ -9,7 +9,19 @@ import footerCopy from './data/footerCopy';
     <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 />
+    <Footer 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+      overrideWhiteList 
+    />
+    
+    <p>Adding a additionalLegalLine to the top of the footer</p>
+    <Footer 
+      additionalLegalLine="MR. MEN ™ LITTLE MISS ™ © 2022 THOIP (a SANRIO Company). All rights reserved." 
+      navItems={data} 
+      footerCopy={footerCopy.copy} 
+      campaign="Comic Relief" 
+    />
 </>
-
 ```

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

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import spacing from '../../../theme/shared/spacing';
 import Link from '../../Atoms/Link/Link';
+import Text from '../../Atoms/Text/Text';
 
 const FooterWrapper = styled.footer.attrs(() => ({
   role: 'banner'
@@ -41,6 +42,11 @@ const InnerWrapper = styled.div`
   }
 `;
 
+const FooterLegalLine = styled(Text)`
+  text-align: left;
+  margin-top: 1rem;
+`;
+
 const FooterBranding = styled.div`
   display: flex;
   margin: ${spacing('lg')} 0 5rem;
@@ -81,6 +87,7 @@ export {
   FooterWrapper,
   Angle,
   InnerWrapper,
+  FooterLegalLine,
   FooterCopyright,
   FooterBranding,
   SocialIconWrapper,

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

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