@comicrelief/component-library 7.24.0 → 7.24.2

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/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');
-    });
-  });
-});

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

@@ -1,157 +0,0 @@
-describe('Input component', () => {
-  before(() => {
-    // go to input component
-    cy.visit('/#input');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#input');
-      cy.get('[data-testid="Input-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('Input preview section: required with label and hint', () => {
-    beforeEach(() => {
-      cy.visit('/#input');
-      cy.get('[data-testid="Input-example-0"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders Input field required with label and hint', () => {
-      cy.get('[data-testid="Input-examples"]')
-        .should('exist');
-
-      // Input required with label and hint
-      cy.get('@container')
-        .find('h4')
-        .contains('Input required with label and hint')
-        .should('exist');
-      cy.get('[data-testid="Input-example-0"] [data-preview="Input"] input')
-        .type('test input field');
-    });
-
-    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('Input preview section: with error message', () => {
-    beforeEach(() => {
-      cy.visit('/#input');
-      cy.get('[data-testid="Input-example-1"]')
-        .as('container')
-        .find('[data-preview="Input"]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders Input field with error message', () => {
-      // Input with error message
-      cy.get('[data-testid="Input-example-1"] div > h4')
-        .contains('Input with error message')
-        .should('exist');
-      cy.get('[data-testid="Input-example-1"] [data-preview="Input"] input')
-        .type('test error input field');
-    });
-
-    it('shows error message', () => {
-      cy.get('@container')
-        .find('[data-test="error-message"]')
-        .should('exist');
-    });
-
-    it('has view code button', () => {
-      cy.get('@viewCodeBtn').should('exist');
-    });
-
-    it('does not show code initially', () => {
-      cy.get('@container')
-        .find('textarea')
-        .should('not.exist');
-    });
-
-    it('shows code on click', () => {
-      cy.get('@viewCodeBtn').click();
-      cy.get('@container')
-        .find('textarea')
-        .should('exist');
-    });
-  });
-
-  describe('Input preview section: with simple input(optional)', () => {
-    beforeEach(() => {
-      cy.visit('/#input');
-      cy.get('[data-testid="Input-example-2"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders Input field with simple input', () => {
-      // Input with simple input
-      cy.get('[data-testid="Input-example-2"] div > h4')
-        .contains('Simple input (optional)')
-        .should('exist');
-      cy.get('[data-testid="Input-example-2"] [data-preview="Input"] input')
-        .type('test simple input field');
-    });
-
-    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/label.cy.js

@@ -1,93 +0,0 @@
-describe('Label component', () => {
-  before(() => {
-    // go to label component
-    cy.visit('/#label');
-  });
-
-  describe('props and methods section', () => {
-    beforeEach(() => {
-      cy.visit('/#label');
-      cy.get('[data-testid="Label-container"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('label should exist', () => {
-      cy.get('[data-testid="Label-examples"]')
-        .find('label')
-        .should('exist');
-    });
-  });
-
-  describe('Wrapping a basic text input: Label-example-0', () => {
-    beforeEach(() => {
-      cy.visit('/#label');
-      cy.get('[data-testid="Label-example-0"')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders label Wrapping a basic text input', () => {
-      cy.get('[data-testid="Label-example-0"]')
-        .find('label')
-        .contains('Wrapping a basic text input')
-        .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('Wrapping a styled input: Label-example-1', () => {
-    beforeEach(() => {
-      cy.visit('/#label');
-      cy.get('[data-testid="Label-example-1"]')
-        .as('container')
-        .find('[class^=rsg--preview]')
-        .as('preview');
-
-      cy.get('@container')
-        .find('button')
-        .contains('View Code')
-        .as('viewCodeBtn');
-    });
-
-    it('renders label wrapping a styled input', () => {
-      cy.get('[data-testid="Label-example-1"]')
-        .find('label')
-        .contains('Wrapping a styled input')
-        .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');
-    });
-  });
-});