@comicrelief/component-library 7.24.1 → 7.25.0

package/src/components/Molecules/Logos/Logos.js

@@ -1,17 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import styled from 'styled-components';
 
 import Logo from '../../Atoms/Logo/Logo';
 
+const TitleLabel = styled.span`
+  line-height: 0; 
+  font-size: 0;
+  color: transparent; 
+`;
+
 const Logos = ({ campaign }) => {
   if (campaign === 'Sport Relief Gameon') {
     return (
       <>
         <a href="/" title="Go to Comic Relief homepage">
-          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" />
+          <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" title="Go to Comic Relief homepage" />
+          <TitleLabel>Go to Comic Relief homepage</TitleLabel>
         </a>
         <a href="/sportrelief/" title="Go to Sport Relief homepage">
-          <Logo sizeSm="100px" sizeMd="120px" campaign="Sport Relief Gameon" />
+          <Logo sizeSm="100px" sizeMd="120px" campaign="Sport Relief Gameon" title="Go to Sport Relief homepage" />
+          <TitleLabel>Go to Sport Relief homepage</TitleLabel>
         </a>
       </>
     );
@@ -19,8 +28,9 @@ const Logos = ({ campaign }) => {
 
   if (campaign === 'Sport Relief') {
     return (
-      <a href="/sportrelief" title="Sport Relief in homepage">
-        <Logo rotate={false} campaign="Sport Relief" />
+      <a href="/sportrelief" title="Go to Sport Relief homepage">
+        <Logo rotate={false} campaign="Sport Relief" title="Sport Relief in homepage" />
+        <TitleLabel>Go to Sport Relief homepage</TitleLabel>
       </a>
     );
   }
@@ -28,14 +38,16 @@ const Logos = ({ campaign }) => {
   if (campaign === 'Pride') {
     return (
       <a href="/" title="Go to Comic Relief homepage">
-        <Logo rotate={false} campaign="Pride" />
+        <Logo rotate={false} campaign="Pride" title="Go to Comic Relief homepage" />
+        <TitleLabel>Go to Comic Relief homepage</TitleLabel>
       </a>
     );
   }
 
   return (
     <a href="/" title="Go to Comic Relief homepage">
-      <Logo rotate={false} campaign="Comic Relief" />
+      <Logo rotate={false} campaign="Comic Relief" title="Go to Comic Relief homepage" />
+      <TitleLabel>Go to Comic Relief homepage</TitleLabel>
     </a>
   );
 };

package/src/components/Molecules/Logos/Logos.md

@@ -0,0 +1,5 @@
+# Comic Relief Logo
+
+```js
+<Logos rotate={false} sizeSm="50px" sizeMd="60px" />
+```

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

@@ -40,7 +40,9 @@ const Donate = ({
   PopUpText,
   chooseAmountText,
   isDesktopOverride,
-  otherAmountValue
+  otherAmountValue,
+  additionalSingleCopy,
+  additionalMonthlyCopy
 }) => {
   let isDesktop = useMediaQuery({ query: `(min-width: ${screen.medium})` });
 
@@ -127,6 +129,8 @@ const Donate = ({
           chooseAmountText={chooseAmountText}
           submitButtonColor={submitButtonColor}
           otherAmountValue={otherAmountValue}
+          additionalSingleCopy={additionalSingleCopy}
+          additionalMonthlyCopy={additionalMonthlyCopy}
         />
       </Wrapper>
     </Container>
@@ -159,7 +163,9 @@ Donate.propTypes = {
   PopUpText: PropTypes.string,
   chooseAmountText: PropTypes.string,
   isDesktopOverride: PropTypes.bool,
-  otherAmountValue: PropTypes.number
+  otherAmountValue: PropTypes.number,
+  additionalSingleCopy: PropTypes.string,
+  additionalMonthlyCopy: PropTypes.string
 };
 
 Donate.defaultProps = {
@@ -186,7 +192,9 @@ Donate.defaultProps = {
   chooseAmountText: '',
   isDesktopOverride: null,
   otherAmountValue: null,
-  title: null
+  title: null,
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null
 };
 
 export default Donate;

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

@@ -354,3 +354,88 @@ const desktopPictures = require('../../../styleguide/data/data').defaultData;
   isDesktopOverride={false}
 />;
 ```
+
+## Additional copy for BOTH giving types
+
+```js
+import data from './dev-data/data';
+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-11"
+  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."
+  additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for monthly only
+
+```js
+import data from './dev-data/data';
+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-12"
+  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."
+  additionalMonthlyCopy="Some additional regular giving copy! - Quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos."
+/>;
+```
+
+## Additional copy for single only
+
+```js
+import data from './dev-data/data';
+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-13"
+  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."
+  additionalSingleCopy="Some additional single giving copy - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa."
+/>;
+```

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

@@ -38,6 +38,8 @@ const Signup = ({
   chooseAmountText,
   submitButtonColor,
   otherAmountValue,
+  additionalSingleCopy,
+  additionalMonthlyCopy,
   ...rest
 }) => {
   const [givingType, setGivingType] = useState('single');
@@ -191,6 +193,10 @@ const Signup = ({
     return `Donate £${amountDonate} monthly`;
   };
 
+  const showAdditionalSingleCopy = givingType === 'single' && additionalSingleCopy;
+  const showAdditionalMonthlyCopy = givingType === 'monthly' && additionalMonthlyCopy;
+  const additionalCopy = showAdditionalSingleCopy || showAdditionalMonthlyCopy;
+
   return (
     <FormWrapper>
       {showGivingSelector && (
@@ -276,6 +282,14 @@ const Signup = ({
           </Error>
           )}
 
+          {additionalCopy && (
+          <p className="additional-copy">
+            <strong>
+              {additionalCopy}
+            </strong>
+          </p>
+          )}
+
           {noMoneyBuys ? (
             <Button
               type="submit"
@@ -313,13 +327,17 @@ Signup.propTypes = {
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
   submitButtonColor: PropTypes.string.isRequired,
-  otherAmountValue: PropTypes.number
+  otherAmountValue: PropTypes.number,
+  additionalSingleCopy: PropTypes.string,
+  additionalMonthlyCopy: PropTypes.string
 };
 
 Signup.defaultProps = {
   noMoneyBuys: false,
   otherAmountValue: null,
-  data: {}
+  data: {},
+  additionalSingleCopy: null,
+  additionalMonthlyCopy: null
 };
 
 export default Signup;

package/src/components/Organisms/ImpactSlider/_ImpactMoneybuys.js

@@ -8,12 +8,11 @@ import {
 const Moneybuys = ({ items, currentAmount, opacityAnimation }) => (
   <MoneybuyWrapper>
     {items.map((item, index) => {
-      const roundedPerPound = Math.floor(item.poundsPerItem);
-      const thisAmount = Math.floor(currentAmount / roundedPerPound);
-      const isInactive = !(!opacityAnimation || currentAmount >= roundedPerPound);
+      const thisAmount = Math.floor(currentAmount / item.poundsPerItem);
+      const isInactive = !(!opacityAnimation || currentAmount >= item.poundsPerItem);
 
       return (
-        <Fragment key={roundedPerPound}>
+        <Fragment key={item.poundsPerItem}>
           <Moneybuy isInactive={isInactive} data-testid={`impact-slider--moneybuy-${index + 1}`}>
             <MoneybuyImage imageURL={item.imageURL} />
             <MoneybuyAmount tag="p" family="Anton" uppercase weight="normal" size="xl" data-testid="moneybuy-amount">{thisAmount}</MoneybuyAmount>

package/src/components/Organisms/Membership/Membership.test.js

@@ -227,7 +227,7 @@ it("renders correctly", () => {
       border: none;
     }
 
-    .c10 >:not(:last-child):not(legend) {
+    .c10 > :not(:last-child):not(legend) {
       margin-bottom: 2rem;
     }
 

package/cypress/e2e/components/atoms/button.cy.js

@@ -1,102 +0,0 @@
-describe('Button component', () => {
-  before(() => {
-    // go to button component
-    cy.visit('/#button');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#button');
-      cy.get('[data-testid="Button-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');
-    });
-  });
-
-  describe('Plain Button: Button-example-0', () => {
-    beforeEach(() => {
-      cy.visit('/#button');
-      cy.get('[data-testid="Button-example-0"')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders button as a span', () => {
-      //verify button as a span
-      cy.get('[data-testid="Button-example-0"]')
-        .contains('My button')
-        .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');
-    });
-  });
-
-  describe('Button as a span: Button-example-1', () => {
-    beforeEach(() => {
-      cy.visit('/#button');
-      cy.get('[data-testid="Button-example-1"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders button as a span', () => {
-        // verify button as a span
-      cy.get('[data-testid="Button-example-1"]')
-        .contains('My button as a span')
-        .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');
-    });
-  });
-});

package/cypress/e2e/components/atoms/buttonWithStates.cy.js

@@ -1,47 +0,0 @@
-describe('Button With States component', () => {
-  before(() => {
-    // go to Button With States component
-    cy.visit('/#button');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#button');
-      cy.get('[data-testid="ButtonWithStates-container"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    // button with Disabled and loading
-    it('renders button with states', () => {
-      cy.get('[data-testid="ButtonWithStates-examples"]')
-        .find('h2')
-        .contains('Disabled and loading')
-        .should('exist');
-    });
-
-    it('renders button as disabled', () => {
-      // verify button as a span
-      cy.get('[data-testid="ButtonWithStates-example-1"]')
-        .contains('Loading')
-        .should('be.disabled');
-    });
-
-    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');
-    });
-  });
-});

package/cypress/e2e/components/atoms/checkbox.cy.js

@@ -1,70 +0,0 @@
-describe('Checkbox component', () => {
-  before(() => {
-    // go to checkbox component
-    cy.visit('/#checkbox');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#checkbox');
-      cy.get('[data-testid="Checkbox-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');
-    });
-  });
-
-  describe('Checkbox section', () => {
-    beforeEach(() => {
-      cy.visit('/#checkbox');
-      cy.get('[data-preview="Checkbox"]')
-        .as('preview');
-    });
-
-    it('should click checkboxes', () => {
-      cy.get('[data-preview="Checkbox"] p').contains('List of checkboxes');
-      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(2)')
-        .contains('Tennis')
-        .click();
-      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(3)')
-        .contains('Basketball')
-        .click();
-      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(4)')
-        .contains('Cycling')
-        .click();
-      cy.get('[data-testid="Checkbox-example-1"] div > label:nth-child(5)')
-        .contains('Football')
-        .click();
-    });
-
-    it('has view code button', () => {
-      cy.get('[data-testid="Checkbox-examples"] [name="rsg-code-editor"]').should('exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('[data-testid="Checkbox-examples"] [name="rsg-code-editor"]').contains('View Code')
-        .click();
-      cy.get('[data-testid="Checkbox-examples"] div > textarea').should('be.visible');
-    });
-  });
-});

package/cypress/e2e/components/atoms/confetti.cy.js

@@ -1,46 +0,0 @@
-describe('Confetti component', () => {
-  before(() => {
-    // go to confetti component
-    cy.visit('/#confetti');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#confetti');
-      cy.get('[data-testid="Confetti-container"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders button with states', () => {
-      cy.get('[data-testid="Confetti-examples"]')
-        .find('h1')
-        .contains('Confetti')
-        .should('exist');
-    });
-
-    it('renders confetti when "trigger confetti" is clicked', () => {
-      // verify button as a span
-      cy.get('[data-testid="Confetti-example-1"]')
-        .contains('trigger confetti')
-        .click()
-    });
-
-    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');
-    });
-  });
-});

package/cypress/e2e/components/atoms/errorText.cy.js

@@ -1,45 +0,0 @@
-describe('ErrorText component', () => {
-  before(() => {
-    // go to errortext component
-    cy.visit('/#errortext');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#errortext');
-      cy.get('[data-testid="ErrorText-container"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('error message should exist', () => {
-      cy.get('[data-testid="ErrorText-examples"]')
-        .find('h1')
-        .contains('ErrorText')
-        .should('exist');
-    });
-
-    it('displays error message', () => {
-      cy.get('[data-testid="ErrorText-example-1"] span')
-        .contains('This is an error')
-        .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');
-    });
-  });
-});