@comicrelief/component-library 7.26.0 → 7.27.0

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

@@ -493,4 +493,32 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
 />;
+```
+
+## Monthly ONLY, no moneybuys
+
+```js
+import data from './dev-data/data-monthly';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-15"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  noMoneyBuys
+/>;
 ```

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

@@ -213,10 +213,7 @@ const Signup = _ref => {
     tag: "p"
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), additionalCopy && /*#__PURE__*/_react.default.createElement("p", {
     className: "additional-copy"
-  }, /*#__PURE__*/_react.default.createElement("strong", null, additionalCopy)), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
-    type: "submit",
-    color: submitButtonColor
-  }, errorMsg ? 'Donate' : "Donate \xA3".concat(amountDonate)) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, additionalCopy)), /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor,
     ref: buttonRef

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

@@ -640,7 +640,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             color="red"
             type="submit"
           >
-            Donate £345.67
+            Donate £345.67 now
           </button>
         </fieldset>
       </form>
@@ -2456,7 +2456,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
             color="red"
             type="submit"
           >
-            Donate £10
+            Donate £10 monthly
           </button>
         </fieldset>
       </form>

package/dist/theme/crTheme/colors.js

@@ -48,6 +48,10 @@ const colors = {
   rnd_23_yellow: '#FFE300',
   rnd_23_pink: '#EDB4D3',
   rnd_23_black: '#2B3737',
+  rnd_24_red_dark: '#A11B22',
+  rnd_24_teal_dark: '#2B7C77',
+  rnd_24_pink_dark: '#A67E94',
+  rnd_24_blue: '#3367AF',
   teal: '#4ECDBE',
   teal_dark: '#13767C',
   teal_light: '#86E4E9',

package/package.json

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

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

@@ -493,4 +493,32 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   title="Donate Now"
   subtitle="Please help us fund life-changing projects in the UK and around the world."
 />;
+```
+
+## Monthly ONLY, no moneybuys
+
+```js
+import data from './dev-data/data-monthly';
+const mobilePictures = require('../../../styleguide/data/data').mobileImages;
+const desktopPictures = require('../../../styleguide/data/data').defaultData;
+
+<Donate
+  alt="Background image"
+  mobileBackgroundColor="deep_violet_dark"
+  desktopOverlayColor="red"
+  submitButtonColor="blue_dark"
+  formAlignRight={true}
+  imageLow={desktopPictures.imageLow}
+  images={desktopPictures.images}
+  mobileImageLow={mobilePictures.imageLow}
+  mobileImages={mobilePictures.images}
+  data={data}
+  mbshipID="mship-15"
+  donateLink="https://donation.comicrelief.com/"
+  clientID="donate"
+  cartID="default-comicrelief"
+  title="Donate Now"
+  subtitle="Please help us fund life-changing projects in the UK and around the world."
+  noMoneyBuys
+/>;
 ```

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

@@ -305,25 +305,13 @@ const Signup = ({
           </p>
           )}
 
-          {noMoneyBuys ? (
-            <Button
-              type="submit"
-              color={submitButtonColor}
-            >
-              {errorMsg
-                ? 'Donate'
-                : `Donate £${amountDonate}`}
-            </Button>
-          ) : (
-            <Button
-              type="submit"
-              color={submitButtonColor}
-              ref={buttonRef}
-            >
-              {renderButtonText()}
-            </Button>
-
-          )}
+          <Button
+            type="submit"
+            color={submitButtonColor}
+            ref={buttonRef}
+          >
+            {renderButtonText()}
+          </Button>
 
         </OuterFieldset>
       </Form>

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

@@ -640,7 +640,7 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             color="red"
             type="submit"
           >
-            Donate £345.67
+            Donate £345.67 now
           </button>
         </fieldset>
       </form>
@@ -2456,7 +2456,7 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
             color="red"
             type="submit"
           >
-            Donate £10
+            Donate £10 monthly
           </button>
         </fieldset>
       </form>

package/src/theme/crTheme/colors.js

@@ -42,6 +42,10 @@ const colors = {
   rnd_23_yellow: '#FFE300',
   rnd_23_pink: '#EDB4D3',
   rnd_23_black: '#2B3737',
+  rnd_24_red_dark: '#A11B22',
+  rnd_24_teal_dark: '#2B7C77',
+  rnd_24_pink_dark: '#A67E94',
+  rnd_24_blue: '#3367AF',
   teal: '#4ECDBE',
   teal_dark: '#13767C',
   teal_light: '#86E4E9',