@comicrelief/component-library 7.1.1 → 7.3.0

package/cypress/integration/components/Atoms/SocialIcons.spec.js

@@ -1,179 +1,179 @@
 describe('SocialIcons component', () => {
-    before(() => {
-        // go to social icons component
-        cy.visit('/#socialicons');
-    });
-
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="SocialIcons-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('Comic Relief social icons section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="SocialIcons-example-1"]')
-                .as('container')
-                .find('[data-preview="SocialIcons"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('checks comic relief social icons', () => {
-            cy.get('@container')
-                .find('a')
-                .first()
-                .should('have.attr', 'href',  'https://www.facebook.com/comicrelief');
-            cy.get('@container')
-                .find('li:nth-child(2) > a')
-                .should('have.attr', 'href',  'https://twitter.com/comicrelief');
-            cy.get('@container')
-                .find('li:nth-child(3) > a')
-                .should('have.attr', 'href',  'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw');
-            cy.get('@container')
-                .find('li:nth-child(4) > a')
-                .should('have.attr', 'href',  'https://www.instagram.com/comicrelief');
-        });
-
-        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();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-    });
-
-    describe('Red Nose Day social icons section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="SocialIcons-example-3"]')
-                .as('container')
-                .find('[data-preview="SocialIcons"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('checks Red Nose Day social icons', () => {
-            cy.get('@container')
-                .find('a')
-                .first()
-                .should('have.attr', 'href',  'https://www.facebook.com/rednoseday');
-            cy.get('@container')
-                .find('li:nth-child(2) > a')
-                .should('have.attr', 'href',  'https://twitter.com/rednoseday');
-            cy.get('@container')
-                .find('li:nth-child(3) > a')
-                .should('have.attr', 'href',  'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw');
-            cy.get('@container')
-                .find('li:nth-child(4) > a')
-                .should('have.attr', 'href',  'https://www.instagram.com/rednoseday');
-        });
-
-        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();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
-    });
-
-    describe('Sport Relief social icons section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="SocialIcons-example-5"]')
-                .as('container')
-                .find('[data-preview="SocialIcons"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('checks Sport Relief social icons', () => {
-            cy.get('@container')
-                .find('a')
-                .first()
-                .should('have.attr', 'href',  'https://www.facebook.com/sportrelief');
-            cy.get('@container')
-                .find('li:nth-child(2) > a')
-                .should('have.attr', 'href',  'https://twitter.com/sportrelief');
-            cy.get('@container')
-                .find('li:nth-child(3) > a')
-                .should('have.attr', 'href',  'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw');
-            cy.get('@container')
-                .find('li:nth-child(4) > a')
-                .should('have.attr', 'href',  'https://www.instagram.com/sportrelief');
-        });
-
-        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();
-            cy.get('@container')
-                .find('textarea')
-                .should('not.exist');
-        });
+  before(() => {
+    // go to social icons component
+    cy.visit('/#socialicons');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SocialIcons-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('Comic Relief social icons section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SocialIcons-example-1"]')
+        .as('container')
+        .find('[data-preview="SocialIcons"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('checks comic relief social icons', () => {
+      cy.get('@container')
+        .find('a')
+        .first()
+        .should('have.attr', 'href', 'https://www.facebook.com/comicrelief');
+      cy.get('@container')
+        .find('li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.instagram.com/comicrelief');
+      cy.get('@container')
+        .find('li:nth-child(3) > a')
+        .should('have.attr', 'href', 'https://twitter.com/comicrelief');
+      cy.get('@container')
+        .find('li:nth-child(4) > a')
+        .should('have.attr', 'href', 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw');
+    });
+
+    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();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('Red Nose Day social icons section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SocialIcons-example-3"]')
+        .as('container')
+        .find('[data-preview="SocialIcons"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('checks Red Nose Day social icons', () => {
+      cy.get('@container')
+        .find('a')
+        .first()
+        .should('have.attr', 'href', 'https://www.facebook.com/rednoseday');
+      cy.get('@container')
+        .find('li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.instagram.com/rednoseday');
+      cy.get('@container')
+        .find('li:nth-child(3) > a')
+        .should('have.attr', 'href', 'https://twitter.com/rednoseday');
+      cy.get('@container')
+        .find('li:nth-child(4) > a')
+        .should('have.attr', 'href', 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw');
+    });
+
+    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();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
+
+  describe('Sport Relief social icons section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="SocialIcons-example-5"]')
+        .as('container')
+        .find('[data-preview="SocialIcons"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('checks Sport Relief social icons', () => {
+      cy.get('@container')
+        .find('a')
+        .first()
+        .should('have.attr', 'href', 'https://www.facebook.com/sportrelief');
+      cy.get('@container')
+        .find('li:nth-child(2) > a')
+        .should('have.attr', 'href', 'https://www.instagram.com/sportrelief');
+      cy.get('@container')
+        .find('li:nth-child(3) > a')
+        .should('have.attr', 'href', 'https://twitter.com/sportrelief');
+      cy.get('@container')
+        .find('li:nth-child(4) > a')
+        .should('have.attr', 'href', 'https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw');
+    });
+
+    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();
+      cy.get('@container')
+        .find('textarea')
+        .should('not.exist');
+    });
+  });
 });

package/dist/components/Atoms/SocialIcons/Utils/Icons.js

@@ -17,8 +17,8 @@ var _instagram = _interopRequireDefault(require("../assets/instagram.svg"));
 
 var _default = {
   facebook: _facebook.default,
+  instagram: _instagram.default,
   twitter: _twitter.default,
-  youtube: _youtube.default,
-  instagram: _instagram.default
+  youtube: _youtube.default
 };
 exports.default = _default;

package/dist/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -104,13 +104,13 @@ exports[`renders correctly with Comic Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://twitter.com/comicrelief"
+      href="https://www.instagram.com/comicrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Twitter account"
+      title="Check out our Instagram account"
     >
       <img
-        alt="twitter"
+        alt="instagram"
         className="c3"
         src="mock.asset"
       />
@@ -127,13 +127,13 @@ exports[`renders correctly with Comic Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+      href="https://twitter.com/comicrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our YouTube channel"
+      title="Check out our Twitter account"
     >
       <img
-        alt="youtube"
+        alt="twitter"
         className="c3"
         src="mock.asset"
       />
@@ -150,13 +150,13 @@ exports[`renders correctly with Comic Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.instagram.com/comicrelief"
+      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Instagram account"
+      title="Check out our YouTube channel"
     >
       <img
-        alt="instagram"
+        alt="youtube"
         className="c3"
         src="mock.asset"
       />
@@ -274,13 +274,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://twitter.com/rednoseday"
+      href="https://www.instagram.com/rednoseday"
       rel="noopener noreferrer"
       target="_self"
-      title="Check out our Twitter account"
+      title="Check out our Instagram account"
     >
       <img
-        alt="twitter"
+        alt="instagram"
         className="c3"
         src="mock.asset"
       />
@@ -297,13 +297,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+      href="https://twitter.com/rednoseday"
       rel="noopener noreferrer"
       target="_self"
-      title="Check out our YouTube channel"
+      title="Check out our Twitter account"
     >
       <img
-        alt="youtube"
+        alt="twitter"
         className="c3"
         src="mock.asset"
       />
@@ -320,13 +320,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.instagram.com/rednoseday"
+      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_self"
-      title="Check out our Instagram account"
+      title="Check out our YouTube channel"
     >
       <img
-        alt="instagram"
+        alt="youtube"
         className="c3"
         src="mock.asset"
       />
@@ -444,13 +444,13 @@ exports[`renders correctly with Sport Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://twitter.com/sportrelief"
+      href="https://www.instagram.com/sportrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Twitter account"
+      title="Check out our Instagram account"
     >
       <img
-        alt="twitter"
+        alt="instagram"
         className="c3"
         src="mock.asset"
       />
@@ -467,13 +467,13 @@ exports[`renders correctly with Sport Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+      href="https://twitter.com/sportrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our YouTube channel"
+      title="Check out our Twitter account"
     >
       <img
-        alt="youtube"
+        alt="twitter"
         className="c3"
         src="mock.asset"
       />
@@ -490,13 +490,13 @@ exports[`renders correctly with Sport Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.instagram.com/sportrelief"
+      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Instagram account"
+      title="Check out our YouTube channel"
     >
       <img
-        alt="instagram"
+        alt="youtube"
         className="c3"
         src="mock.asset"
       />

package/dist/components/Atoms/SocialIcons/assets/instagram.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 49.471c67.266 0 75.233.257 101.797 1.469 24.562 1.121 37.901 5.224 46.778 8.674 11.759 4.57 20.151 10.029 28.966 18.845 8.816 8.815 14.275 17.208 18.845 28.966 3.45 8.877 7.554 22.216 8.674 46.778 1.212 26.565 1.469 34.532 1.469 101.798s-.257 75.233-1.469 101.797c-1.121 24.562-5.225 37.901-8.674 46.778-4.57 11.759-10.029 20.151-18.845 28.966-8.816 8.816-17.208 14.275-28.966 18.845-8.877 3.45-22.216 7.554-46.778 8.674-26.56 1.212-34.527 1.469-101.797 1.469s-75.237-.257-101.797-1.469c-24.562-1.121-37.901-5.225-46.778-8.674-11.759-4.57-20.151-10.029-28.966-18.845-8.815-8.815-14.275-17.208-18.845-28.966-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.798s.257-75.233 1.469-101.797c1.121-24.562 5.224-37.901 8.674-46.778 4.57-11.759 10.029-20.151 18.845-28.966 8.815-8.815 17.208-14.275 28.966-18.845 8.877-3.45 22.216-7.554 46.778-8.674 26.564-1.213 34.531-1.469 101.797-1.469m0-45.392c-68.418 0-76.997.29-103.866 1.516-26.815 1.224-45.127 5.482-61.151 11.71-16.566 6.438-30.615 15.052-44.62 29.057-14.005 14.005-22.619 28.055-29.057 44.62-6.228 16.025-10.486 34.337-11.71 61.151C4.369 179.003 4.079 187.582 4.079 256s.29 76.997 1.516 103.866c1.224 26.815 5.482 45.127 11.71 61.151 6.438 16.566 15.052 30.615 29.057 44.62 14.005 14.005 28.055 22.619 44.62 29.057 16.025 6.228 34.337 10.486 61.151 11.71 26.87 1.226 35.449 1.516 103.866 1.516s76.997-.29 103.866-1.516c26.815-1.224 45.127-5.482 61.151-11.71 16.566-6.438 30.615-15.052 44.62-29.057 14.005-14.005 22.619-28.055 29.057-44.62 6.228-16.025 10.486-34.337 11.71-61.151 1.226-26.87 1.516-35.449 1.516-103.866s-.29-76.997-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151-6.438-16.566-15.052-30.615-29.057-44.62-14.005-14.005-28.055-22.619-44.62-29.057-16.025-6.228-34.337-10.486-61.151-11.71C332.997 4.369 324.418 4.079 256 4.079zm0 122.556c-71.446 0-129.365 57.918-129.365 129.365S184.554 385.365 256 385.365 385.365 327.446 385.365 256 327.446 126.635 256 126.635zm0 213.338c-46.377 0-83.974-37.596-83.974-83.973s37.596-83.974 83.974-83.974c46.377 0 83.974 37.596 83.974 83.974S302.377 339.973 256 339.973zM390.476 91.294c-16.696 0-30.23 13.535-30.23 30.23s13.535 30.23 30.23 30.23c16.696 0 30.23-13.535 30.23-30.23s-13.534-30.23-30.23-30.23z" fill="#fff"/></svg>
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2549 48 24C48 10.7451 37.2548 0 24 0C10.7452 0 0 10.7451 0 24C0 37.2549 10.7452 48 24 48ZM12.8354 7.91736C13.9153 7.49304 15.1505 7.20435 16.9593 7.11902C18.7725 7.03064 19.3505 7.01086 23.9673 7.00208C28.5842 6.99329 29.1666 7.01331 30.9761 7.09155C32.7856 7.16968 34.0215 7.45496 35.1034 7.87354C36.223 8.30457 37.1723 8.88428 38.1182 9.82788C39.064 10.7714 39.6472 11.7175 40.084 12.8351C40.5081 13.916 40.796 15.1471 40.882 16.96C40.9681 18.7728 40.9888 19.3516 40.9976 23.9674C41.0065 28.5833 40.9878 29.1626 40.9086 30.9772C40.83 32.7853 40.5454 34.0219 40.1265 35.103C39.6944 36.223 39.1144 37.1716 38.1722 38.1182C37.2301 39.0648 36.2825 39.6476 35.1649 40.0847C34.0844 40.5071 32.856 40.7968 31.0428 40.8827C29.2296 40.9688 28.6485 40.9891 24.0333 40.998C19.4182 41.0068 18.8358 40.9885 17.0262 40.9093C15.2168 40.8301 13.9802 40.5452 12.899 40.1273C11.777 39.6941 10.8298 39.1151 9.88354 38.1722C8.93732 37.2295 8.35352 36.2826 7.9173 35.1649C7.49298 34.0848 7.20532 32.8499 7.11902 31.0415C7.03125 29.2279 7.01086 28.6492 7.00201 24.0327C6.99316 19.4161 7.01086 18.8345 7.09076 17.0247C7.17065 15.2148 7.45422 13.9785 7.87274 12.8964C8.30524 11.7771 8.88562 10.8291 9.82812 9.8833C10.7706 8.93738 11.7178 8.35291 12.8354 7.91736ZM14.0006 37.2729C14.6003 37.5035 15.5003 37.7789 17.1578 37.851C18.951 37.9285 19.4865 37.9469 24.0262 37.937C28.5659 37.9271 29.1031 37.9094 30.8959 37.8251C32.5513 37.7462 33.4514 37.4674 34.0497 37.2339C34.8433 36.9238 35.4087 36.5559 36.0023 35.9589C36.596 35.3618 36.9649 34.7958 37.2709 34.0018C37.5018 33.4014 37.7765 32.5011 37.8489 30.8435C37.9274 29.0521 37.9434 28.5132 37.9352 23.9756C37.9271 19.4379 37.9077 18.9004 37.8224 17.1075C37.7441 15.4497 37.4661 14.5511 37.2318 13.9537C36.9217 13.1588 36.5535 12.5947 35.9561 12.0004C35.3587 11.4061 34.7933 11.0386 33.9987 10.7325C33.4 10.501 32.4987 10.2267 30.8425 10.1545C29.049 10.0757 28.5104 10.0587 23.9725 10.0686C19.4344 10.0784 18.8973 10.0955 17.1044 10.1804C15.4476 10.2593 14.5486 10.5374 13.9496 10.7714C13.1564 11.0814 12.5903 11.4493 11.9969 12.0466C11.4037 12.644 11.0351 13.2087 10.7291 14.004C10.4989 14.6035 10.2218 15.5045 10.1511 17.1606C10.0726 18.9528 10.0552 19.49 10.0651 24.0286C10.075 28.5673 10.0927 29.1051 10.1769 30.8966C10.2545 32.5541 10.535 33.4531 10.7679 34.0529C11.0779 34.8453 11.4451 35.4132 12.0428 36.0051C12.6406 36.597 13.2064 36.9669 14.0006 37.2729ZM31.3623 16.0471C31.1376 15.7119 31.0173 15.3177 31.0166 14.9142C31.0157 14.3733 31.2297 13.8541 31.6115 13.4709C31.9932 13.0878 32.5116 12.8719 33.0525 12.8708C33.456 12.87 33.8507 12.9889 34.1866 13.2124C34.5226 13.4359 34.7847 13.754 34.9398 14.1266C35.0949 14.499 35.1361 14.9092 35.0581 15.3051C34.9802 15.7009 34.7865 16.0648 34.5017 16.3507C34.2169 16.6365 33.8538 16.8314 33.4581 16.9109C33.0626 16.9904 32.6523 16.9507 32.2792 16.7969C31.9061 16.6432 31.5871 16.3822 31.3623 16.0471ZM24.0163 32.7285C19.1962 32.7377 15.2807 28.8383 15.2712 24.0171C15.262 19.1965 19.1621 15.2804 23.983 15.2709C28.8039 15.2614 32.7203 19.1619 32.7295 23.983C32.7387 28.8042 28.8365 32.7194 24.0163 32.7285ZM19.282 20.8607C18.6612 21.7938 18.331 22.8901 18.3332 24.0109C18.3346 24.7551 18.4825 25.4917 18.7687 26.1787C19.0548 26.8657 19.4734 27.4896 20.0007 28.0149C20.528 28.54 21.1536 28.9562 21.8417 29.2396C22.5298 29.5229 23.267 29.6681 24.0112 29.6665C25.132 29.6643 26.2269 29.3297 27.1576 28.7052C28.0883 28.0807 28.8129 27.1942 29.2397 26.158C29.6666 25.1216 29.7765 23.9819 29.5557 22.8832C29.3348 21.7844 28.7932 20.7758 27.9991 19.9847C27.205 19.1938 26.1942 18.6561 25.0945 18.4397C23.9948 18.2231 22.8557 18.3376 21.821 18.7686C20.7864 19.1996 19.9028 19.9276 19.282 20.8607Z" fill="white"/>
+</svg>

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

@@ -65,6 +65,17 @@ var Signup = function Signup(_ref) {
       moneyBuyCopy = _useState8[0],
       setMoneyBuyCopy = _useState8[1];
 
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      popOpen = _useState10[0],
+      setPopOpen = _useState10[1]; // In order to keep track of whether the user has ever been shown the popup
+
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      popUpShown = _useState12[0],
+      setPopUpShown = _useState12[1];
+
   (0, _react.useEffect)(function () {
     var givingData = givingType === 'single' ? singleGiving : regularGiving; // Check the 2nd moneybuy exists before using it;
     // 'philantrophy' carts have been set up to use a single moneybuy.
@@ -91,13 +102,18 @@ var Signup = function Signup(_ref) {
       if (errorMsg) setErrorMsg(false);
       setMoneyBuyCopy(moneyBuyNewDescription);
     }
-  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherDescription]);
+  }, [errorMsg, moneyBuyCopy, singleGiving, regularGiving, givingType, amountDonate, otherDescription]); // Updates our flag that differentiates between the popup
+  // being *currently* open and it *ever* having been shown to user
+
+  (0, _react.useEffect)(function () {
+    if (popOpen && !popUpShown) setPopUpShown(true);
+  }, [popOpen, popUpShown]);
 
   var submitDonation = function submitDonation(event, amount, clientId, cartId, mbshipId, donateURL) {
     event.preventDefault();
 
     if ((0, _Membership.isAmountValid)(amount) && !errorMsg) {
-      (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL, givingType);
+      (0, _Membership.handleDonateSubmission)(amount, clientId, cartId, mbshipId, donateURL, givingType, popUpShown);
     } else {
       setErrorMsg(true);
       setMoneyBuyCopy(false);
@@ -107,12 +123,6 @@ var Signup = function Signup(_ref) {
 
   var givingData = givingType === 'single' ? singleGiving : regularGiving;
   var showGivingSelector = singleGiving !== null && regularGiving !== null;
-
-  var _useState9 = (0, _react.useState)(false),
-      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      popOpen = _useState10[0],
-      setPopOpen = _useState10[1];
-
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
     givingType: givingType,
     changeGivingType: function changeGivingType(data) {
@@ -121,7 +131,8 @@ var Signup = function Signup(_ref) {
     setPopOpen: setPopOpen,
     mbshipID: mbshipID
   }), popOpen && /*#__PURE__*/_react.default.createElement(_PopUpComponent.default, {
-    PopUpText: PopUpText
+    PopUpText: PopUpText,
+    setPopOpen: setPopOpen
   }), /*#__PURE__*/_react.default.createElement(_Donate.Form, {
     onSubmit: function onSubmit(e) {
       return submitDonation(e, amountDonate, clientID, cartID, mbshipID, donateLink);

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

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/* eslint-disable */
+var closeDuration = 0.6;
 var fadeClose = (0, _styledComponents.keyframes)(["0%{opacity:1;max-height:350px;}100%{opacity:0;max-height:0px;display:none;margin-top:-16px;}"]);
 var fadeOpen = (0, _styledComponents.keyframes)(["0%{opacity:0;max-height:0px;display:none;margin-top:-16px;}100%{opacity:1;max-height:350px;}"]);
 
@@ -31,7 +31,7 @@ var StyledPopUp = _styledComponents.default.div.withConfig({
   displayName: "PopUpComponent__StyledPopUp",
   componentId: "sc-1d7imlo-0"
 })(["display:grid;overflow:hidden;max-height:350px;opacity:1;animation:0.4s ", " ease;", " background-color:", ";box-shadow:0px 0px 16px rgba(0,0,0,0.15);border-radius:10px;", "{width:450px;margin-right:auto;margin-left:auto;}"], fadeOpen, function (props) {
-  return props.isClosed && (0, _styledComponents.css)(["animation:0.6s ", " ease forwards;"], fadeClose);
+  return props.isClosed && (0, _styledComponents.css)(["animation:", "s ", " ease forwards;"], closeDuration, fadeClose);
 }, function (_ref) {
   var theme = _ref.theme;
   return theme.color('blue_light');
@@ -51,18 +51,28 @@ var Button = _styledComponents.default.button.withConfig({
 });
 
 var PopUpComponent = function PopUpComponent(_ref3) {
-  var PopUpText = _ref3.PopUpText;
+  var PopUpText = _ref3.PopUpText,
+      setPopOpen = _ref3.setPopOpen;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       isClosed = _useState2[0],
-      setIsClosed = _useState2[1];
+      setIsClosed = _useState2[1]; // Only update centralised state - which renders
+  // this component - once the closing animation is complete
+
+
+  var handleCloser = function handleCloser() {
+    setIsClosed(true);
+    setTimeout(function () {
+      setPopOpen(false);
+    }, closeDuration * 1000);
+  };
 
   return /*#__PURE__*/_react.default.createElement(StyledPopUp, {
     isClosed: isClosed
   }, /*#__PURE__*/_react.default.createElement(Button, {
     onClick: function onClick() {
-      return setIsClosed(true);
+      return handleCloser();
     },
     "aria-label": "Close"
   }, /*#__PURE__*/_react.default.createElement("img", {

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

@@ -16,6 +16,15 @@ var GivingSelector = function GivingSelector(_ref) {
       changeGivingType = _ref.changeGivingType,
       setPopOpen = _ref.setPopOpen,
       mbshipID = _ref.mbshipID;
+
+  // Only updates giving type and popup status when appropriate
+  var handleGivingTypeChange = function handleGivingTypeChange(thisButtonType, currentGivingType) {
+    if (currentGivingType !== thisButtonType) {
+      changeGivingType(thisButtonType);
+      setPopOpen(thisButtonType === 'single');
+    }
+  };
+
   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",
@@ -26,8 +35,7 @@ var GivingSelector = function GivingSelector(_ref) {
     errormsg: "",
     checked: givingType === 'single',
     onClick: function onClick() {
-      changeGivingType('single');
-      setPopOpen(true);
+      return handleGivingTypeChange('single', givingType);
     }
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'single',
@@ -42,8 +50,7 @@ var GivingSelector = function GivingSelector(_ref) {
     errormsg: "",
     checked: givingType === 'monthly',
     onClick: function onClick() {
-      changeGivingType('monthly');
-      setPopOpen(false);
+      return handleGivingTypeChange('monthly', givingType);
     }
   }), /*#__PURE__*/_react.default.createElement(_GivingSelector.Label, {
     active: givingType === 'monthly',

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

@@ -596,13 +596,13 @@ exports[`renders correctly 1`] = `
               <a
                 className="c5"
                 data-test="header-esu-icon"
-                href="https://twitter.com/comicrelief"
+                href="https://www.instagram.com/comicrelief"
                 rel="noopener noreferrer"
                 target="_blank"
-                title="Check out our Twitter account"
+                title="Check out our Instagram account"
               >
                 <img
-                  alt="twitter"
+                  alt="instagram"
                   className="c6"
                   src="mock.asset"
                 />
@@ -619,13 +619,13 @@ exports[`renders correctly 1`] = `
               <a
                 className="c5"
                 data-test="header-esu-icon"
-                href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+                href="https://twitter.com/comicrelief"
                 rel="noopener noreferrer"
                 target="_blank"
-                title="Check out our YouTube channel"
+                title="Check out our Twitter account"
               >
                 <img
-                  alt="youtube"
+                  alt="twitter"
                   className="c6"
                   src="mock.asset"
                 />
@@ -642,13 +642,13 @@ exports[`renders correctly 1`] = `
               <a
                 className="c5"
                 data-test="header-esu-icon"
-                href="https://www.instagram.com/comicrelief"
+                href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
                 rel="noopener noreferrer"
                 target="_blank"
-                title="Check out our Instagram account"
+                title="Check out our YouTube channel"
               >
                 <img
-                  alt="instagram"
+                  alt="youtube"
                   className="c6"
                   src="mock.asset"
                 />

package/dist/utils/Membership.js

@@ -42,6 +42,7 @@ exports.isInputMatchBoxValue = isInputMatchBoxValue;
 
 var handleDonateSubmission = function handleDonateSubmission(amount, clientID, cartID, mbshipID, donateLink) {
   var givingType = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 'monthly';
+  var popUpShown = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : null;
   var currentpageUrl = window.location.href;
   var affiliateValue = getUrlParameter(currentpageUrl);
   var reg = /[#?|[\]\\]/g;
@@ -52,7 +53,7 @@ var handleDonateSubmission = function handleDonateSubmission(amount, clientID, c
   }
 
   var givingTypeUrl = givingType === 'single' ? 'single' : 'monthly';
-  window.location.href = "".concat(donateLink, "?clientOverride=").concat(clientID, "&amount=").concat(amount, "&currency=GBP&givingType=").concat(givingTypeUrl, "&cartId=").concat(cartID, "&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(mbshipID);
+  window.location.href = "".concat(donateLink, "?clientOverride=").concat(clientID, "&amount=").concat(amount, "&currency=GBP&givingType=").concat(givingTypeUrl, "&cartId=").concat(cartID, "&affiliate=").concat(affiliateValue, "&siteurl=").concat(currentpageUrl, "&rowID=").concat(mbshipID, "&popUpShown=").concat(popUpShown);
 };
 
 exports.handleDonateSubmission = handleDonateSubmission;

package/package.json

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

package/src/components/Atoms/SocialIcons/Utils/Icons.js

@@ -5,7 +5,7 @@ import instagram from '../assets/instagram.svg';
 
 export default {
   facebook,
+  instagram,
   twitter,
-  youtube,
-  instagram
+  youtube
 };

package/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -104,13 +104,13 @@ exports[`renders correctly with Comic Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://twitter.com/comicrelief"
+      href="https://www.instagram.com/comicrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Twitter account"
+      title="Check out our Instagram account"
     >
       <img
-        alt="twitter"
+        alt="instagram"
         className="c3"
         src="mock.asset"
       />
@@ -127,13 +127,13 @@ exports[`renders correctly with Comic Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+      href="https://twitter.com/comicrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our YouTube channel"
+      title="Check out our Twitter account"
     >
       <img
-        alt="youtube"
+        alt="twitter"
         className="c3"
         src="mock.asset"
       />
@@ -150,13 +150,13 @@ exports[`renders correctly with Comic Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.instagram.com/comicrelief"
+      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Instagram account"
+      title="Check out our YouTube channel"
     >
       <img
-        alt="instagram"
+        alt="youtube"
         className="c3"
         src="mock.asset"
       />
@@ -274,13 +274,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://twitter.com/rednoseday"
+      href="https://www.instagram.com/rednoseday"
       rel="noopener noreferrer"
       target="_self"
-      title="Check out our Twitter account"
+      title="Check out our Instagram account"
     >
       <img
-        alt="twitter"
+        alt="instagram"
         className="c3"
         src="mock.asset"
       />
@@ -297,13 +297,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+      href="https://twitter.com/rednoseday"
       rel="noopener noreferrer"
       target="_self"
-      title="Check out our YouTube channel"
+      title="Check out our Twitter account"
     >
       <img
-        alt="youtube"
+        alt="twitter"
         className="c3"
         src="mock.asset"
       />
@@ -320,13 +320,13 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.instagram.com/rednoseday"
+      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_self"
-      title="Check out our Instagram account"
+      title="Check out our YouTube channel"
     >
       <img
-        alt="instagram"
+        alt="youtube"
         className="c3"
         src="mock.asset"
       />
@@ -444,13 +444,13 @@ exports[`renders correctly with Sport Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://twitter.com/sportrelief"
+      href="https://www.instagram.com/sportrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Twitter account"
+      title="Check out our Instagram account"
     >
       <img
-        alt="twitter"
+        alt="instagram"
         className="c3"
         src="mock.asset"
       />
@@ -467,13 +467,13 @@ exports[`renders correctly with Sport Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+      href="https://twitter.com/sportrelief"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our YouTube channel"
+      title="Check out our Twitter account"
     >
       <img
-        alt="youtube"
+        alt="twitter"
         className="c3"
         src="mock.asset"
       />
@@ -490,13 +490,13 @@ exports[`renders correctly with Sport Relief links 1`] = `
     <a
       className="c2"
       data-test="header-esu-icon"
-      href="https://www.instagram.com/sportrelief"
+      href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
       rel="noopener noreferrer"
       target="_blank"
-      title="Check out our Instagram account"
+      title="Check out our YouTube channel"
     >
       <img
-        alt="instagram"
+        alt="youtube"
         className="c3"
         src="mock.asset"
       />

package/src/components/Atoms/SocialIcons/assets/instagram.svg

@@ -1 +1,3 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 49.471c67.266 0 75.233.257 101.797 1.469 24.562 1.121 37.901 5.224 46.778 8.674 11.759 4.57 20.151 10.029 28.966 18.845 8.816 8.815 14.275 17.208 18.845 28.966 3.45 8.877 7.554 22.216 8.674 46.778 1.212 26.565 1.469 34.532 1.469 101.798s-.257 75.233-1.469 101.797c-1.121 24.562-5.225 37.901-8.674 46.778-4.57 11.759-10.029 20.151-18.845 28.966-8.816 8.816-17.208 14.275-28.966 18.845-8.877 3.45-22.216 7.554-46.778 8.674-26.56 1.212-34.527 1.469-101.797 1.469s-75.237-.257-101.797-1.469c-24.562-1.121-37.901-5.225-46.778-8.674-11.759-4.57-20.151-10.029-28.966-18.845-8.815-8.815-14.275-17.208-18.845-28.966-3.45-8.877-7.554-22.216-8.674-46.778-1.212-26.564-1.469-34.532-1.469-101.798s.257-75.233 1.469-101.797c1.121-24.562 5.224-37.901 8.674-46.778 4.57-11.759 10.029-20.151 18.845-28.966 8.815-8.815 17.208-14.275 28.966-18.845 8.877-3.45 22.216-7.554 46.778-8.674 26.564-1.213 34.531-1.469 101.797-1.469m0-45.392c-68.418 0-76.997.29-103.866 1.516-26.815 1.224-45.127 5.482-61.151 11.71-16.566 6.438-30.615 15.052-44.62 29.057-14.005 14.005-22.619 28.055-29.057 44.62-6.228 16.025-10.486 34.337-11.71 61.151C4.369 179.003 4.079 187.582 4.079 256s.29 76.997 1.516 103.866c1.224 26.815 5.482 45.127 11.71 61.151 6.438 16.566 15.052 30.615 29.057 44.62 14.005 14.005 28.055 22.619 44.62 29.057 16.025 6.228 34.337 10.486 61.151 11.71 26.87 1.226 35.449 1.516 103.866 1.516s76.997-.29 103.866-1.516c26.815-1.224 45.127-5.482 61.151-11.71 16.566-6.438 30.615-15.052 44.62-29.057 14.005-14.005 22.619-28.055 29.057-44.62 6.228-16.025 10.486-34.337 11.71-61.151 1.226-26.87 1.516-35.449 1.516-103.866s-.29-76.997-1.516-103.866c-1.224-26.815-5.482-45.127-11.71-61.151-6.438-16.566-15.052-30.615-29.057-44.62-14.005-14.005-28.055-22.619-44.62-29.057-16.025-6.228-34.337-10.486-61.151-11.71C332.997 4.369 324.418 4.079 256 4.079zm0 122.556c-71.446 0-129.365 57.918-129.365 129.365S184.554 385.365 256 385.365 385.365 327.446 385.365 256 327.446 126.635 256 126.635zm0 213.338c-46.377 0-83.974-37.596-83.974-83.973s37.596-83.974 83.974-83.974c46.377 0 83.974 37.596 83.974 83.974S302.377 339.973 256 339.973zM390.476 91.294c-16.696 0-30.23 13.535-30.23 30.23s13.535 30.23 30.23 30.23c16.696 0 30.23-13.535 30.23-30.23s-13.534-30.23-30.23-30.23z" fill="#fff"/></svg>
+<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24 48C37.2548 48 48 37.2549 48 24C48 10.7451 37.2548 0 24 0C10.7452 0 0 10.7451 0 24C0 37.2549 10.7452 48 24 48ZM12.8354 7.91736C13.9153 7.49304 15.1505 7.20435 16.9593 7.11902C18.7725 7.03064 19.3505 7.01086 23.9673 7.00208C28.5842 6.99329 29.1666 7.01331 30.9761 7.09155C32.7856 7.16968 34.0215 7.45496 35.1034 7.87354C36.223 8.30457 37.1723 8.88428 38.1182 9.82788C39.064 10.7714 39.6472 11.7175 40.084 12.8351C40.5081 13.916 40.796 15.1471 40.882 16.96C40.9681 18.7728 40.9888 19.3516 40.9976 23.9674C41.0065 28.5833 40.9878 29.1626 40.9086 30.9772C40.83 32.7853 40.5454 34.0219 40.1265 35.103C39.6944 36.223 39.1144 37.1716 38.1722 38.1182C37.2301 39.0648 36.2825 39.6476 35.1649 40.0847C34.0844 40.5071 32.856 40.7968 31.0428 40.8827C29.2296 40.9688 28.6485 40.9891 24.0333 40.998C19.4182 41.0068 18.8358 40.9885 17.0262 40.9093C15.2168 40.8301 13.9802 40.5452 12.899 40.1273C11.777 39.6941 10.8298 39.1151 9.88354 38.1722C8.93732 37.2295 8.35352 36.2826 7.9173 35.1649C7.49298 34.0848 7.20532 32.8499 7.11902 31.0415C7.03125 29.2279 7.01086 28.6492 7.00201 24.0327C6.99316 19.4161 7.01086 18.8345 7.09076 17.0247C7.17065 15.2148 7.45422 13.9785 7.87274 12.8964C8.30524 11.7771 8.88562 10.8291 9.82812 9.8833C10.7706 8.93738 11.7178 8.35291 12.8354 7.91736ZM14.0006 37.2729C14.6003 37.5035 15.5003 37.7789 17.1578 37.851C18.951 37.9285 19.4865 37.9469 24.0262 37.937C28.5659 37.9271 29.1031 37.9094 30.8959 37.8251C32.5513 37.7462 33.4514 37.4674 34.0497 37.2339C34.8433 36.9238 35.4087 36.5559 36.0023 35.9589C36.596 35.3618 36.9649 34.7958 37.2709 34.0018C37.5018 33.4014 37.7765 32.5011 37.8489 30.8435C37.9274 29.0521 37.9434 28.5132 37.9352 23.9756C37.9271 19.4379 37.9077 18.9004 37.8224 17.1075C37.7441 15.4497 37.4661 14.5511 37.2318 13.9537C36.9217 13.1588 36.5535 12.5947 35.9561 12.0004C35.3587 11.4061 34.7933 11.0386 33.9987 10.7325C33.4 10.501 32.4987 10.2267 30.8425 10.1545C29.049 10.0757 28.5104 10.0587 23.9725 10.0686C19.4344 10.0784 18.8973 10.0955 17.1044 10.1804C15.4476 10.2593 14.5486 10.5374 13.9496 10.7714C13.1564 11.0814 12.5903 11.4493 11.9969 12.0466C11.4037 12.644 11.0351 13.2087 10.7291 14.004C10.4989 14.6035 10.2218 15.5045 10.1511 17.1606C10.0726 18.9528 10.0552 19.49 10.0651 24.0286C10.075 28.5673 10.0927 29.1051 10.1769 30.8966C10.2545 32.5541 10.535 33.4531 10.7679 34.0529C11.0779 34.8453 11.4451 35.4132 12.0428 36.0051C12.6406 36.597 13.2064 36.9669 14.0006 37.2729ZM31.3623 16.0471C31.1376 15.7119 31.0173 15.3177 31.0166 14.9142C31.0157 14.3733 31.2297 13.8541 31.6115 13.4709C31.9932 13.0878 32.5116 12.8719 33.0525 12.8708C33.456 12.87 33.8507 12.9889 34.1866 13.2124C34.5226 13.4359 34.7847 13.754 34.9398 14.1266C35.0949 14.499 35.1361 14.9092 35.0581 15.3051C34.9802 15.7009 34.7865 16.0648 34.5017 16.3507C34.2169 16.6365 33.8538 16.8314 33.4581 16.9109C33.0626 16.9904 32.6523 16.9507 32.2792 16.7969C31.9061 16.6432 31.5871 16.3822 31.3623 16.0471ZM24.0163 32.7285C19.1962 32.7377 15.2807 28.8383 15.2712 24.0171C15.262 19.1965 19.1621 15.2804 23.983 15.2709C28.8039 15.2614 32.7203 19.1619 32.7295 23.983C32.7387 28.8042 28.8365 32.7194 24.0163 32.7285ZM19.282 20.8607C18.6612 21.7938 18.331 22.8901 18.3332 24.0109C18.3346 24.7551 18.4825 25.4917 18.7687 26.1787C19.0548 26.8657 19.4734 27.4896 20.0007 28.0149C20.528 28.54 21.1536 28.9562 21.8417 29.2396C22.5298 29.5229 23.267 29.6681 24.0112 29.6665C25.132 29.6643 26.2269 29.3297 27.1576 28.7052C28.0883 28.0807 28.8129 27.1942 29.2397 26.158C29.6666 25.1216 29.7765 23.9819 29.5557 22.8832C29.3348 21.7844 28.7932 20.7758 27.9991 19.9847C27.205 19.1938 26.1942 18.6561 25.0945 18.4397C23.9948 18.2231 22.8557 18.3376 21.821 18.7686C20.7864 19.1996 19.9028 19.9276 19.282 20.8607Z" fill="white"/>
+</svg>

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

@@ -39,6 +39,9 @@ const Signup = ({
   const [errorMsg, setErrorMsg] = useState(false);
   const [amountDonate, setAmountDonate] = useState(' ');
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
+  const [popOpen, setPopOpen] = useState(false);
+  // In order to keep track of whether the user has ever been shown the popup
+  const [popUpShown, setPopUpShown] = useState(false);
 
   useEffect(() => {
     const givingData = givingType === 'single' ? singleGiving : regularGiving;
@@ -88,6 +91,12 @@ const Signup = ({
     otherDescription
   ]);
 
+  // Updates our flag that differentiates between the popup
+  // being *currently* open and it *ever* having been shown to user
+  useEffect(() => {
+    if (popOpen && !popUpShown) setPopUpShown(true);
+  }, [popOpen, popUpShown]);
+
   const submitDonation = (
     event,
     amount,
@@ -104,7 +113,8 @@ const Signup = ({
         cartId,
         mbshipId,
         donateURL,
-        givingType
+        givingType,
+        popUpShown
       );
     } else {
       setErrorMsg(true);
@@ -116,8 +126,6 @@ const Signup = ({
   const givingData = givingType === 'single' ? singleGiving : regularGiving;
   const showGivingSelector = singleGiving !== null && regularGiving !== null;
 
-  const [popOpen, setPopOpen] = useState(false);
-
   return (
     <FormWrapper>
       {showGivingSelector && (
@@ -129,7 +137,7 @@ const Signup = ({
         />
       )}
 
-      { popOpen && <PopUpComponent PopUpText={PopUpText} /> }
+      { popOpen && <PopUpComponent PopUpText={PopUpText} setPopOpen={setPopOpen} /> }
 
       <Form
         onSubmit={e => submitDonation(

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

@@ -1,11 +1,12 @@
-/* eslint-disable */ 
 import React, { useState } from 'react';
 import styled, { css, keyframes } from 'styled-components';
+import PropTypes from 'prop-types';
 import Text from '../../../Atoms/Text/Text';
 import { media } from '../../../../theme/shared/size';
-import PropTypes from 'prop-types';
 import CloseCross from '../assets/close.svg';
 
+const closeDuration = 0.6;
+
 const fadeClose = keyframes`
   0% {
     opacity: 1;
@@ -39,7 +40,7 @@ const StyledPopUp = styled.div`
   opacity: 1;
   animation: 0.4s ${fadeOpen} ease;
   ${props => props.isClosed && css`
-    animation: 0.6s ${fadeClose} ease forwards;
+    animation: ${closeDuration}s ${fadeClose} ease forwards;
   `}
   background-color: ${({ theme }) => theme.color('blue_light')};
   box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.15);
@@ -78,23 +79,33 @@ const Button = styled.button`
   }
 `;
 
-const PopUpComponent = ({ PopUpText }) => {
+const PopUpComponent = ({ PopUpText, setPopOpen }) => {
   const [isClosed, setIsClosed] = useState(false);
 
+  // Only update centralised state - which renders
+  // this component - once the closing animation is complete
+  const handleCloser = () => {
+    setIsClosed(true);
+    setTimeout(() => {
+      setPopOpen(false);
+    }, closeDuration * 1000);
+  };
+
   return (
     <StyledPopUp isClosed={isClosed}>
-      <Button onClick={() => setIsClosed(true)} aria-label="Close">
-        <img src={CloseCross} alt="Close cross icon"/>
+      <Button onClick={() => handleCloser()} aria-label="Close">
+        <img src={CloseCross} alt="Close cross icon" />
       </Button>
       <TextWrapper>
         <Text>{ PopUpText }</Text>
       </TextWrapper>
     </StyledPopUp>
-  )
+  );
 };
 
 PopUpComponent.propTypes = {
-  PopUpText: PropTypes.string.isRequired
+  PopUpText: PropTypes.string.isRequired,
+  setPopOpen: PropTypes.func.isRequired
 };
 
 export default PopUpComponent;

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

@@ -7,47 +7,51 @@ import {
 
 const GivingSelector = ({
   givingType, changeGivingType, setPopOpen, mbshipID
-}) => (
-  <Wrapper>
-    <MoneyBox>
-      <input
-        className="give-once"
-        aria-label="Single"
-        id={`give-once--${mbshipID}`}
-        value="Single"
-        type="radio"
-        label=""
-        errormsg=""
-        checked={givingType === 'single'}
-        onClick={() => {
-          changeGivingType('single');
-          setPopOpen(true);
-        }}
-      />
-      <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
-        Single
-      </Label>
-      <input
-        className="give-monthly"
-        aria-label="Monthly"
-        id={`give-monthly--${mbshipID}`}
-        value="Monthly"
-        type="radio"
-        label=""
-        errormsg=""
-        checked={givingType === 'monthly'}
-        onClick={() => {
-          changeGivingType('monthly');
-          setPopOpen(false);
-        }}
-      />
-      <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
-        Monthly
-      </Label>
-      <Switch />
-    </MoneyBox>
-  </Wrapper>
-);
+}) => {
+  // Only updates giving type and popup status when appropriate
+  const handleGivingTypeChange = (thisButtonType, currentGivingType) => {
+    if (currentGivingType !== thisButtonType) {
+      changeGivingType(thisButtonType);
+      setPopOpen(thisButtonType === 'single');
+    }
+  };
+
+  return (
+    <Wrapper>
+      <MoneyBox>
+        <input
+          className="give-once"
+          aria-label="Single"
+          id={`give-once--${mbshipID}`}
+          value="Single"
+          type="radio"
+          label=""
+          errormsg=""
+          checked={givingType === 'single'}
+          onClick={() => handleGivingTypeChange('single', givingType)}
+        />
+        <Label active={givingType === 'single'} htmlFor={`give-once--${mbshipID}`}>
+          Single
+        </Label>
+        <input
+          className="give-monthly"
+          aria-label="Monthly"
+          id={`give-monthly--${mbshipID}`}
+          value="Monthly"
+          type="radio"
+          label=""
+          errormsg=""
+          checked={givingType === 'monthly'}
+          onClick={() => handleGivingTypeChange('monthly', givingType)}
+        />
+        <Label active={givingType === 'monthly'} htmlFor={`give-monthly--${mbshipID}`}>
+          Monthly
+        </Label>
+        <Switch />
+      </MoneyBox>
+    </Wrapper>
+  );
+};
 
 GivingSelector.propTypes = {
   givingType: PropTypes.string.isRequired,

package/src/components/Organisms/Footer/__snapshots__/Footer.test.js.snap

@@ -596,13 +596,13 @@ exports[`renders correctly 1`] = `
               <a
                 className="c5"
                 data-test="header-esu-icon"
-                href="https://twitter.com/comicrelief"
+                href="https://www.instagram.com/comicrelief"
                 rel="noopener noreferrer"
                 target="_blank"
-                title="Check out our Twitter account"
+                title="Check out our Instagram account"
               >
                 <img
-                  alt="twitter"
+                  alt="instagram"
                   className="c6"
                   src="mock.asset"
                 />
@@ -619,13 +619,13 @@ exports[`renders correctly 1`] = `
               <a
                 className="c5"
                 data-test="header-esu-icon"
-                href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
+                href="https://twitter.com/comicrelief"
                 rel="noopener noreferrer"
                 target="_blank"
-                title="Check out our YouTube channel"
+                title="Check out our Twitter account"
               >
                 <img
-                  alt="youtube"
+                  alt="twitter"
                   className="c6"
                   src="mock.asset"
                 />
@@ -642,13 +642,13 @@ exports[`renders correctly 1`] = `
               <a
                 className="c5"
                 data-test="header-esu-icon"
-                href="https://www.instagram.com/comicrelief"
+                href="https://www.youtube.com/channel/UCdF5u0ggeSETozc8fsprjcw"
                 rel="noopener noreferrer"
                 target="_blank"
-                title="Check out our Instagram account"
+                title="Check out our YouTube channel"
               >
                 <img
-                  alt="instagram"
+                  alt="youtube"
                   className="c6"
                   src="mock.asset"
                 />

package/src/utils/Membership.js

@@ -42,7 +42,8 @@ const handleDonateSubmission = (
   cartID,
   mbshipID,
   donateLink,
-  givingType = 'monthly'
+  givingType = 'monthly',
+  popUpShown = null
 ) => {
   let currentpageUrl = window.location.href;
   const affiliateValue = getUrlParameter(currentpageUrl);
@@ -56,7 +57,7 @@ const handleDonateSubmission = (
   }
   const givingTypeUrl = givingType === 'single' ? 'single' : 'monthly';
 
-  window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=${givingTypeUrl}&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
+  window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=${givingTypeUrl}&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}&popUpShown=${popUpShown}`;
 };
 
 export {