@comicrelief/component-library 7.0.0 → 7.0.2

package/cypress/integration/components/Organisms/Donate.spec.js

@@ -49,10 +49,10 @@ describe('Donate component', () => {
     it('renders donate form align right preview', () => {
       // monthly
       cy.get('@container')
-        .find('label[for="give-once"]')
+        .find('label[for="give-once--mship-1"]')
         .contains('Single');
       cy.get('@container')
-        .find('label[for="give-monthly"]')
+        .find('label[for="give-monthly--mship-1"]')
         .contains('Monthly')
         .click();
       cy.get('@container')
@@ -67,14 +67,14 @@ describe('Donate component', () => {
         .clear()
         .type(' ');
       cy.get('@container')
-        .find('p:nth-child(5)')
-        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .find('p.error--amount')
+        .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
         .find('[id="mship-1--MoneyBuy-userInput"]')
         .type('15.999');
       cy.get('@container')
-        .find('p:nth-child(5)')
-        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .find('p.error--amount')
+        .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
         .find('form > fieldset > input')
         .contains('Donate monthly');
@@ -114,29 +114,29 @@ describe('Donate component', () => {
 
     it('renders donate form align left preview', () => {
       cy.get('@container')
-        .find('label[for="give-once"]')
+        .find('label[for="give-once--mship-2"]')
         .contains('Single');
       cy.get('@container')
-        .find('label[for="give-monthly"]')
+        .find('label[for="give-monthly--mship-2"]')
         .contains('Monthly');
       cy.get('@container')
-        .find('#mship-1--moneyBuy-box2')
+        .find('#mship-2--moneyBuy-box2')
         .should('exist')
         .click();
       cy.get('@container')
-        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .find('[id="mship-2--MoneyBuy-userInput"]')
         .should('have.value', '20')
         .clear()
         .type(' ');
       cy.get('@container')
-        .find('p:nth-child(5)')
-        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .find('p.error--amount')
+        .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
-        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .find('[id="mship-2--MoneyBuy-userInput"]')
         .type('10.999');
       cy.get('@container')
-        .find('p:nth-child(5)')
-        .should('contain', 'Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .find('p.error--amount')
+        .should('contain', 'Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
         .find('form > fieldset > input')
         .contains('Donate now');
@@ -179,25 +179,25 @@ describe('Donate component', () => {
         .find('label[for="give-once"]')
         .should('not.exist');
       cy.get('@container')
-        .find('#mship-1--moneyBuy-box3')
+        .find('#mship-3--moneyBuy-box3')
         .should('exist')
         .click();
       cy.get('@container')
-        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .find('[id="mship-3--MoneyBuy-userInput"]')
         .should('have.value', '30')
         .clear()
         .type('10.99')
         .clear()
         .type(' ');
       cy.get('@container')
-        .find('p:nth-child(5)')
-        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .find('p.error--amount')
+        .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
-        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .find('[id="mship-3--MoneyBuy-userInput"]')
         .type('10.999');
       cy.get('@container')
-        .find('p:nth-child(5)')
-        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .find('p.error--amount')
+        .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
         .find('form > fieldset > input')
         .contains('Donate now');
@@ -240,23 +240,23 @@ describe('Donate component', () => {
         .find('label[for="give-once"]')
         .should('not.exist');
       cy.get('@container')
-        .find('#mship-1--moneyBuy-box1')
+        .find('#mship-4--moneyBuy-box1')
         .should('not.exist');
       cy.get('@container')
-        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .find('[id="mship-4--MoneyBuy-userInput"]')
         .should('exist')
         .clear()
         .type('5')
         .clear();
       cy.get('@container')
-        .find('p:nth-child(4)')
-        .contains('Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .find('p.error--amount')
+        .contains('Please enter an amount between £1 and £25000 and up to 2 decimal places');
       cy.get('@container')
-        .find('[id="mship-1--MoneyBuy-userInput"]')
+        .find('[id="mship-4--MoneyBuy-userInput"]')
         .type('10.999')
         .clear()
         .type('5')
-        .should('not.have', 'Please enter an amount between £1 and £20000 and up to 2 decimal places');
+        .should('not.have', 'Please enter an amount between £1 and £250000 and up to 2 decimal places');
       cy.get('@container')
         .find('form > fieldset > input')
         .contains('Donate');

package/cypress/integration/components/Organisms/Membership.spec.js

@@ -1,129 +1,127 @@
 describe('Membership component', () => {
-    before(() => {
-        // go to membership component
-        cy.visit('/#membership');
+  before(() => {
+    // go to membership component
+    cy.visit('/#membership');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Membership-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
+
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
     });
 
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Membership-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
+    it('is present', () => {
+      cy.get('@propsBtn').should('exist');
     });
 
-    describe('Membership form align right section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Membership-example-1"]')
-                .as('container')
-                .find('[data-preview="Membership"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders Membership form align right preview', () => {
-
-            cy.get('@container')
-                .find('input[id="mship-1--moneyBuy-box1"]')
-                .should('exist');
-            cy.get('@container')
-                .find('input[id="mship-1--MoneyBuy-userInput"]')
-                .type('20001');
-            cy.get('@container')
-                .find('p')
-                .contains('Please enter a number between 1 and 20000, and up to 2 decimal places')
-            cy.get('@container')
-                .find('input[id="mship-1--MoneyBuy-userInput"]')
-                .type('1')
-                .get('input[type="submit"]')
-                .should('exist')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('does not show table initially', () => {
+      cy.get('@container')
+        .find('table')
+        .should('not.exist');
     });
 
-    describe('Membership form align left section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Membership-example-3"]')
-                .as('container')
-                .find('[data-preview="Membership"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders Membership form align left preview', () => {
-
-            cy.get('@container')
-                .find('input[id="mship-1--moneyBuy-box3"]')
-                .should('exist');
-            cy.get('@container')
-                .find('input[id="mship-1--MoneyBuy-userInput"]')
-                .type('20001');
-            cy.get('@container')
-                .find('p')
-                .contains('Please enter a number between 1 and 20000, and up to 2 decimal places');
-            cy.get('@container')
-                .find('input[id="mship-1--MoneyBuy-userInput"]')
-                .type('1')
-                .get('input[type="submit"]')
-                .should('exist')
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('shows the table on button click', () => {
+      cy.get('@propsBtn').click();
+      cy.get('@container')
+        .find('table')
+        .should('contain', 'Prop name');
     });
+  });
+
+  describe('Membership form align right section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Membership-example-1"]')
+        .as('container')
+        .find('[data-preview="Membership"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Membership form align right preview', () => {
+      cy.get('@container')
+        .find('input[id="mship-1--moneyBuy-box1"]')
+        .should('exist');
+      cy.get('@container')
+        .find('input[id="mship-1--MoneyBuy-userInput"]')
+        .type('25001');
+      cy.get('@container')
+        .find('p.error--amount')
+        .contains('Please enter a number between 1 and 25000, and up to 2 decimal places');
+      cy.get('@container')
+        .find('input[id="mship-1--MoneyBuy-userInput"]')
+        .type('1')
+        .get('input[type="submit"]')
+        .should('exist');
+    });
+
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
+
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
+
+  describe('Membership form align left section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Membership-example-3"]')
+        .as('container')
+        .find('[data-preview="Membership"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders Membership form align left preview', () => {
+      cy.get('@container')
+        .find('input[id="mship-1--moneyBuy-box3"]')
+        .should('exist');
+      cy.get('@container')
+        .find('input[id="mship-1--MoneyBuy-userInput"]')
+        .type('25001');
+      cy.get('@container')
+        .find('p.error--amount')
+        .contains('Please enter a number between 1 and 25000, and up to 2 decimal places');
+      cy.get('@container')
+        .find('input[id="mship-1--MoneyBuy-userInput"]')
+        .type('1')
+        .get('input[type="submit"]')
+        .should('exist');
+    });
+
+    it('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
+    });
+
+    it('shows code on click', () => {
+      cy.get('@viewCodeBtn').click();
+      cy.get('@container')
+        .find('textarea')
+        .should('exist');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
 });

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

@@ -41,7 +41,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-2"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -66,7 +66,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-3"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -91,7 +91,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-4"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -118,7 +118,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-5"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -143,7 +143,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-6"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -168,7 +168,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-7"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -193,7 +193,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-8"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -213,7 +213,7 @@ import data from './dev-data/data-single';
   backgroundColor="blue_dark"
   formAlignRight={false}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-9"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"
@@ -241,7 +241,7 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   mobileImageLow={mobilePictures.imageLow}
   mobileImages={mobilePictures.images}
   data={data}
-  mbshipID="mship-1"
+  mbshipID="mship-10"
   donateLink="https://donation.comicrelief.com/"
   clientID="donate"
   cartID="default-comicrelief"

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

@@ -118,7 +118,8 @@ var Signup = function Signup(_ref) {
     changeGivingType: function changeGivingType(data) {
       return setGivingType(data);
     },
-    setPopOpen: setPopOpen
+    setPopOpen: setPopOpen,
+    mbshipID: mbshipID
   }), popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
     PopUpText: PopUpText
   }), /*#__PURE__*/_react.default.createElement(_Donate.Form, {
@@ -155,7 +156,7 @@ var Signup = function Signup(_ref) {
     id: "".concat(mbshipID, "--MoneyBuy-userInput"),
     showLabel: true
   }, rest, {
-    max: "20000",
+    max: "25000",
     min: "1",
     value: amountDonate,
     pattern: "[^[0-9]+([,.][0-9]+)?$]",
@@ -166,7 +167,10 @@ var Signup = function Signup(_ref) {
     "aria-label": "Input a different amount"
   }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
     as: "p"
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate.toFixed(2), " ")), moneyBuyCopy), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate.toFixed(2), " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
+    className: "error--amount",
+    tag: "p"
+  }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     as: "input",
     value: "Donate"
@@ -174,9 +178,7 @@ var Signup = function Signup(_ref) {
     type: "submit",
     as: "input",
     value: givingType === 'single' ? 'Donate now' : 'Donate monthly'
-  }), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
-    tag: "p"
-  }, "Please enter an amount between \xA31 and \xA320000 and up to 2 decimal places"))));
+  }))));
 };
 
 Signup.defaultProps = {

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

@@ -9,72 +9,17 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _size = require("../../../../theme/shared/size");
-
-var _spacing = _interopRequireDefault(require("../../../../theme/shared/spacing"));
-
-var _zIndex = _interopRequireDefault(require("../../../../theme/shared/zIndex"));
-
-var _hideVisually = _interopRequireDefault(require("../../../../theme/shared/hideVisually"));
-
-var Switch = _styledComponents.default.span.withConfig({
-  displayName: "GivingSelector__Switch",
-  componentId: "sc-haox9c-0"
-})(["width:50%;height:48px;border-radius:2rem;", ";display:block;position:absolute;transition:left 0.15s ease-out;background-color:", ";left:2px;box-shadow:0px 0px 16px rgba(0,0,0,0.3);"], (0, _zIndex.default)('low'), function (_ref) {
-  var theme = _ref.theme;
-  return theme.color('blue');
-});
-
-var Wrapper = _styledComponents.default.div.withConfig({
-  displayName: "GivingSelector__Wrapper",
-  componentId: "sc-haox9c-1"
-})(["display:flex;margin:", " 0;"], (0, _spacing.default)('md'));
-
-var MoneyBox = _styledComponents.default.div.withConfig({
-  displayName: "GivingSelector__MoneyBox",
-  componentId: "sc-haox9c-2"
-})(["width:100%;padding:2px;position:relative;display:flex;flex-direction:row;margin:", " 0;border-radius:2rem;background:", ";", "{width:450px;margin:0 auto;}#give-monthly:checked ~ ", "{left:calc(50% - 2px);}input{", "}input:focus:not(:checked) + label{box-shadow:inset 0 0 0 4px ", ";}"], (0, _spacing.default)('md'), function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.color('blue_light');
-}, (0, _size.media)('small'), Switch, _hideVisually.default, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.color('blue');
-});
-
-var Label = _styledComponents.default.label.withConfig({
-  displayName: "GivingSelector__Label",
-  componentId: "sc-haox9c-3"
-})(["font-size:", ";font-family:", ";font-weight:bold;min-height:48px;align-items:center;justify-content:center;display:flex;flex-basis:50%;border:none;transition:color 0.15s ease-out;", ";cursor:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}&[for='give-once']{border-radius:2rem;color:", ";}&[for='give-monthly']{border-radius:2rem;color:", ";}"], function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.fontSize('s');
-}, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.fontFamilies('Montserrat');
-}, (0, _zIndex.default)('medium'), function (_ref6) {
-  var active = _ref6.active;
-  return active === true ? 'default' : 'pointer';
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.color('blue');
-}, function (_ref8) {
-  var active = _ref8.active,
-      theme = _ref8.theme;
-  return active === true ? theme.color('white') : theme.color('black');
-}, function (_ref9) {
-  var active = _ref9.active,
-      theme = _ref9.theme;
-  return active === true ? theme.color('white') : theme.color('black');
-});
-
-var GivingSelector = function GivingSelector(_ref10) {
-  var givingType = _ref10.givingType,
-      changeGivingType = _ref10.changeGivingType,
-      setPopOpen = _ref10.setPopOpen;
-  return /*#__PURE__*/_react.default.createElement(Wrapper, null, /*#__PURE__*/_react.default.createElement(MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {
+var _GivingSelector = require("./GivingSelector.style");
+
+var GivingSelector = function GivingSelector(_ref) {
+  var givingType = _ref.givingType,
+      changeGivingType = _ref.changeGivingType,
+      setPopOpen = _ref.setPopOpen,
+      mbshipID = _ref.mbshipID;
+  return /*#__PURE__*/_react.default.createElement(_GivingSelector.Wrapper, null, /*#__PURE__*/_react.default.createElement(_GivingSelector.MoneyBox, null, /*#__PURE__*/_react.default.createElement("input", {
+    className: "give-once",
     "aria-label": "Single",
-    id: "give-once",
+    id: "give-once--".concat(mbshipID),
     value: "Single",
     type: "radio",
     label: "",
@@ -84,12 +29,13 @@ var GivingSelector = function GivingSelector(_ref10) {
       changeGivingType('single');
       setPopOpen(true);
     }
-  }), /*#__PURE__*/_react.default.createElement(Label, {
+  }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
-    htmlFor: "give-once"
+    htmlFor: "give-once--".concat(mbshipID)
   }, "Single"), /*#__PURE__*/_react.default.createElement("input", {
+    className: "give-monthly",
     "aria-label": "Monthly",
-    id: "give-monthly",
+    id: "give-monthly--".concat(mbshipID),
     value: "Monthly",
     type: "radio",
     label: "",
@@ -99,10 +45,10 @@ var GivingSelector = function GivingSelector(_ref10) {
       changeGivingType('monthly');
       setPopOpen(false);
     }
-  }), /*#__PURE__*/_react.default.createElement(Label, {
+  }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',
-    htmlFor: "give-monthly"
-  }, "Monthly"), /*#__PURE__*/_react.default.createElement(Switch, null)));
+    htmlFor: "give-monthly--".concat(mbshipID)
+  }, "Monthly"), /*#__PURE__*/_react.default.createElement(_GivingSelector.Switch, null)));
 };
 
 var _default = GivingSelector;