@comicrelief/component-library 6.10.0 → 7.0.1

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')
@@ -114,17 +114,17 @@ 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(' ');
@@ -132,7 +132,7 @@ describe('Donate component', () => {
         .find('p:nth-child(5)')
         .contains('Please enter an amount between £1 and £20000 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)')
@@ -179,11 +179,11 @@ 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')
@@ -193,7 +193,7 @@ describe('Donate component', () => {
         .find('p:nth-child(5)')
         .contains('Please enter an amount between £1 and £20000 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)')
@@ -240,10 +240,10 @@ 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')
@@ -252,7 +252,7 @@ describe('Donate component', () => {
         .find('p:nth-child(4)')
         .contains('Please enter an amount between £1 and £20000 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')

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

@@ -1,142 +1,57 @@
 describe('Email Sign Up component', () => {
-    before(() => {
-        // go to Email Sign Up component
-        cy.visit('/#emailsignup');
-        cy.wait(2500)
+  before(() => {
+    // go to Email Sign Up component
+    cy.visit('/#emailsignupform');
+    cy.wait(2500);
+  });
+
+  describe('Email Sign Up section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="EmailSignUpForm-example-1"]')
+        .as('container')
+        .find('[data-preview="EmailSignUpForm"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
     });
 
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="EmailSignUp-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('renders Email Sign Up preview', () => {
+      cy.get('@container')
+        .find('h2')
+        .should('exist')
+        .contains('Stay in the know!');
+      cy.get('@container')
+        .find('p')
+        .contains("Get regular email updates and info on what we're up to!");
+      cy.get('[data-test="subscribe-button"]').should('be.disabled');
+      cy.get('@container').find('input[id="first-name"]').type('Test');
+      cy.get('@container').find('input[id="last-name"]').type('User');
+      cy.get('@container')
+        .find('input[id="email"]')
+        .type('test@comicrelief.com')
+        .blur();
+      cy.get('[data-test="subscribe-button"]').should('not.be.disabled');
+      cy.get('[data-test="subscribe-button"]').click();
+
+      cy.get('@container').contains(
+        'Thanks! Your first email will be with you shortly'
+      );
     });
 
-    describe('Email Sign Up section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="EmailSignUp-example-1"]')
-                .as('container')
-                .find('[data-preview="EmailSignUp"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders Email Sign Up preview', () => {
-            cy.get('@container')
-                .find('h2')
-                .should('exist')
-                .contains('Stay in the know!');
-            cy.get('@container')
-                .find('p')
-                .contains('Get regular email updates and info on what we\'re up to!');
-            cy.get('[data-test="subscribe-button"]')
-                .click();
-            cy.get('[data-test="error-message"]')
-                .should('contain', 'invalid email!');
-            cy.get('@container')
-                .find('input[id="email"]')
-                .type('test@comicrelief.com');
-            cy.get('[data-test="subscribe-button"]')
-                .click();
-            cy.get('@container')
-                .contains('Thanks! Your first email will be with you shortly')
-        });
-
-        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('has view code button', () => {
+      cy.get('@viewCodeBtn').should('exist');
     });
 
-    describe('Email Sign Up Schools section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="EmailSignUp-example-3"]')
-                .as('container')
-                .find('[data-preview="EmailSignUp"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders Email Sign Up Schools preview', () => {
-            cy.get('@container')
-                .find('h2')
-                .should('exist')
-                .contains('Stay in the know!');
-            cy.get('@container')
-                .find('p')
-                .contains('Get regular email updates and info on what we\'re up to!');
-            cy.get('[data-test="subscribe-button-school"]')
-                .click();
-            cy.get('[data-test="error-message"]')
-                .should('contain', 'invalid email!');
-            cy.get('@container')
-                .find('input[id="email"]')
-                .type('test@comicrelief.com');
-            cy.get('[data-test="subscribe-button-school"]')
-                .click();
-            cy.get('@container')
-                .find('select')
-                .select('The first option')
-                .first();
-            cy.get('[data-test="subscribe-button-school"]')
-                .click();
-            cy.get('@container')
-                .contains('Thanks! Your first email will be with you shortly')
-        });
-
-        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('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('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, {

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;

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Label = exports.MoneyBox = exports.Wrapper = exports.Switch = void 0;
+
+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: "GivingSelectorstyle__Switch",
+  componentId: "sc-5ktn9c-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');
+});
+
+exports.Switch = Switch;
+
+var Wrapper = _styledComponents.default.div.withConfig({
+  displayName: "GivingSelectorstyle__Wrapper",
+  componentId: "sc-5ktn9c-1"
+})(["display:flex;margin:", " 0;"], (0, _spacing.default)('md'));
+
+exports.Wrapper = Wrapper;
+
+var MoneyBox = _styledComponents.default.div.withConfig({
+  displayName: "GivingSelectorstyle__MoneyBox",
+  componentId: "sc-5ktn9c-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');
+});
+
+exports.MoneyBox = MoneyBox;
+
+var Label = _styledComponents.default.label.withConfig({
+  displayName: "GivingSelectorstyle__Label",
+  componentId: "sc-5ktn9c-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:", ";border-radius:2rem;color:", ";&:active:focus{box-shadow:none;}&:focus{border:none;outline:none;box-shadow:inset 0 0 0 4px ", ";}"], 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 active = _ref7.active,
+      theme = _ref7.theme;
+  return active === true ? theme.color('white') : theme.color('black');
+}, function (_ref8) {
+  var theme = _ref8.theme;
+  return theme.color('blue');
+});
+
+exports.Label = Label;

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

@@ -367,7 +367,7 @@ exports[`Monthly donation renders correctly 1`] = `
   background: #BECCF9;
 }
 
-.c8 #give-monthly:checked ~ .c11 {
+.c8 .give-monthly:checked ~ .c11 {
   left: calc(50% - 2px);
 }
 
@@ -415,6 +415,8 @@ exports[`Monthly donation renders correctly 1`] = `
   transition: color 0.15s ease-out;
   z-index: 2;
   cursor: default;
+  border-radius: 2rem;
+  color: #FFFFFF;
 }
 
 .c9:active:focus {
@@ -427,16 +429,6 @@ exports[`Monthly donation renders correctly 1`] = `
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c9[for='give-once'] {
-  border-radius: 2rem;
-  color: #FFFFFF;
-}
-
-.c9[for='give-monthly'] {
-  border-radius: 2rem;
-  color: #FFFFFF;
-}
-
 .c10 {
   font-size: 1rem;
   font-family: 'Montserrat',Helvetica,Arial,sans-serif;
@@ -462,6 +454,8 @@ exports[`Monthly donation renders correctly 1`] = `
   transition: color 0.15s ease-out;
   z-index: 2;
   cursor: pointer;
+  border-radius: 2rem;
+  color: #000000;
 }
 
 .c10:active:focus {
@@ -474,16 +468,6 @@ exports[`Monthly donation renders correctly 1`] = `
   box-shadow: inset 0 0 0 4px #0565D1;
 }
 
-.c10[for='give-once'] {
-  border-radius: 2rem;
-  color: #000000;
-}
-
-.c10[for='give-monthly'] {
-  border-radius: 2rem;
-  color: #000000;
-}
-
 @media (min-width:740px) {
   .c5 {
     font-size: 1.25rem;
@@ -644,8 +628,9 @@ exports[`Monthly donation renders correctly 1`] = `
           <input
             aria-label="Single"
             checked={true}
+            className="give-once"
             errormsg=""
-            id="give-once"
+            id="give-once--mship-1"
             label=""
             onClick={[Function]}
             type="radio"
@@ -653,15 +638,16 @@ exports[`Monthly donation renders correctly 1`] = `
           />
           <label
             className="c9"
-            htmlFor="give-once"
+            htmlFor="give-once--mship-1"
           >
             Single
           </label>
           <input
             aria-label="Monthly"
             checked={false}
+            className="give-monthly"
             errormsg=""
-            id="give-monthly"
+            id="give-monthly--mship-1"
             label=""
             onClick={[Function]}
             type="radio"
@@ -669,7 +655,7 @@ exports[`Monthly donation renders correctly 1`] = `
           />
           <label
             className="c10"
-            htmlFor="give-monthly"
+            htmlFor="give-monthly--mship-1"
           >
             Monthly
           </label>