@comicrelief/component-library 7.0.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/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>

package/package.json

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

package/src/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/src/components/Organisms/Donate/Form/Form.js

@@ -125,6 +125,7 @@ const Signup = ({
           givingType={givingType}
           changeGivingType={data => setGivingType(data)}
           setPopOpen={setPopOpen}
+          mbshipID={mbshipID}
         />
       )}
 

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

@@ -1,91 +1,19 @@
 import React from 'react';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-
-import { media } from '../../../../theme/shared/size';
-import spacing from '../../../../theme/shared/spacing';
-import zIndex from '../../../../theme/shared/zIndex';
-import hideVisually from '../../../../theme/shared/hideVisually';
-
-const Switch = styled.span`
-  width: 50%;
-  height: 48px;
-  border-radius: 2rem;
-  ${zIndex('low')};
-  display: block;
-  position: absolute;
-  transition: left 0.15s ease-out;
-  background-color: ${({ theme }) => theme.color('blue')};
-  left: 2px;
-  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
-`;
 
-const Wrapper = styled.div`
-  display: flex;
-  margin: ${spacing('md')} 0;
-`;
-
-const MoneyBox = styled.div`
-  width: 100%;
-  padding: 2px;
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  margin: ${spacing('md')} 0;
-  border-radius: 2rem;
-  background: ${({ theme }) => theme.color('blue_light')};
-  ${media('small')} {
-    width: 450px;
-    margin: 0 auto;
-  }
-  #give-monthly:checked ~ ${Switch} {
-    left: calc(50% - 2px);
-  }
-  input {
-    ${hideVisually}
-  }
-  input:focus:not(:checked) + label {
-    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
-  }
-`;
-
-const Label = styled.label`
-  font-size: ${({ theme }) => theme.fontSize('s')};
-  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
-  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;
-  ${zIndex('medium')};
-  cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
-  &:active:focus {
-    box-shadow: none;
-  }
-  &:focus {
-    border: none;
-    outline: none;
-    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
-  }
-  &[for='give-once'] {
-    border-radius: 2rem;
-    color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
-  }
-  &[for='give-monthly'] {
-    border-radius: 2rem;
-    color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
-  }
-`;
+import PropTypes from 'prop-types';
+import {
+  Switch, Wrapper, MoneyBox, Label
+} from './GivingSelector.style';
 
-const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
+const GivingSelector = ({
+  givingType, changeGivingType, setPopOpen, mbshipID
+}) => (
   <Wrapper>
     <MoneyBox>
       <input
+        className="give-once"
         aria-label="Single"
-        id="give-once"
+        id={`give-once--${mbshipID}`}
         value="Single"
         type="radio"
         label=""
@@ -96,12 +24,13 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
           setPopOpen(true);
         }}
       />
-      <Label active={givingType === 'single'} htmlFor="give-once">
+      <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
         Single
       </Label>
       <input
+        className="give-monthly"
         aria-label="Monthly"
-        id="give-monthly"
+        id={`give-monthly--${mbshipID}`}
         value="Monthly"
         type="radio"
         label=""
@@ -112,7 +41,7 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
           setPopOpen(false);
         }}
       />
-      <Label active={givingType === 'monthly'} htmlFor="give-monthly">
+      <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
         Monthly
       </Label>
       <Switch />
@@ -123,7 +52,8 @@ const GivingSelector = ({ givingType, changeGivingType, setPopOpen }) => (
 GivingSelector.propTypes = {
   givingType: PropTypes.string.isRequired,
   changeGivingType: PropTypes.func.isRequired,
-  setPopOpen: PropTypes.func.isRequired
+  setPopOpen: PropTypes.func.isRequired,
+  mbshipID: PropTypes.string.isRequired
 };
 
 export default GivingSelector;

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

@@ -0,0 +1,78 @@
+import styled from 'styled-components';
+
+import { media } from '../../../../theme/shared/size';
+import spacing from '../../../../theme/shared/spacing';
+import zIndex from '../../../../theme/shared/zIndex';
+import hideVisually from '../../../../theme/shared/hideVisually';
+
+const Switch = styled.span`
+  width: 50%;
+  height: 48px;
+  border-radius: 2rem;
+  ${zIndex('low')};
+  display: block;
+  position: absolute;
+  transition: left 0.15s ease-out;
+  background-color: ${({ theme }) => theme.color('blue')};
+  left: 2px;
+  box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  margin: ${spacing('md')} 0;
+`;
+
+const MoneyBox = styled.div`
+  width: 100%;
+  padding: 2px;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  margin: ${spacing('md')} 0;
+  border-radius: 2rem;
+  background: ${({ theme }) => theme.color('blue_light')};
+  ${media('small')} {
+    width: 450px;
+    margin: 0 auto;
+  }
+  .give-monthly:checked ~ ${Switch} {
+    left: calc(50% - 2px);
+  }
+  input {
+    ${hideVisually}
+  }
+  input:focus:not(:checked) + label {
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+  }
+`;
+
+const Label = styled.label`
+  font-size: ${({ theme }) => theme.fontSize('s')};
+  font-family: ${({ theme }) => theme.fontFamilies('Montserrat')};
+  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;
+  ${zIndex('medium')};
+  cursor: ${({ active }) => (active === true ? 'default' : 'pointer')};
+  border-radius: 2rem;
+  color: ${({ active, theme }) => (active === true ? theme.color('white') : theme.color('black'))};
+
+  &:active:focus {
+    box-shadow: none;
+  }
+  &:focus {
+    border: none;
+    outline: none;
+    box-shadow: inset 0 0 0 4px ${({ theme }) => theme.color('blue')};
+  }
+`;
+
+export {
+  Switch, Wrapper, MoneyBox, Label
+};

package/src/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>