@comicrelief/component-library 7.17.0 → 7.18.1

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

@@ -1,144 +1,143 @@
 describe('Header component', () => {
-    before(() => {
-        // go to header component
-        cy.visit('/#header');
+  before(() => {
+    // go to header component
+    cy.visit('/#header');
+  });
+
+  describe('props and methods section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Header-container"] button[name="rsg-usage"]')
+        .contains('Props & methods')
+        .as('propsBtn');
+
+      cy.get('@propsBtn')
+        .closest('[class^=rsg--tabs]')
+        .as('container');
     });
 
-    describe('props and methods section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Header-container"] button[name="rsg-usage"]')
-                .contains('Props & methods')
-                .as('propsBtn');
-
-            cy.get('@propsBtn')
-                .closest('[class^=rsg--tabs]')
-                .as('container');
-        });
-
-        it('is present', () => {
-            cy.get('@propsBtn').should('exist');
-        });
-
-        it('does not show table initially', () => {
-            cy.get('@container')
-                .find('table')
-                .should('not.exist');
-        });
-
-        it('shows the table on button click', () => {
-            cy.get('@propsBtn').click();
-            cy.get('@container')
-                .find('table')
-                .should('contain', 'Prop name');
-        });
+    it('is present', () => {
+      cy.get('@propsBtn').should('exist');
     });
 
-    describe('CR Header section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Header-example-1"]')
-                .as('container')
-                .find('[data-preview="Header"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders header preview', () => {
-            //Logo
-            cy.get('@container')
-                .find('[title="Go to Comic Relief homepage"]')
-                .should('exist');
-
-            //fundraising
-            cy.viewport('macbook-15');
-            cy.reload();
-            cy.get('@container')
-                .find('nav > ul > li:nth-child(1) a')
-                .should('have.attr', 'href', 'https://www.comicrelief.com/fundraising/pay-in-your-money');
-
-
-            //Donate
-            cy.get('@container')
-                .find('header[role="banner"] a[href="/donation"]')
-                .should('exist')
-                .contains('Donate');
-        });
-
-        it('has view code button', () => {
-            cy.get('@viewCodeBtn').should('exist');
-        });
-
-        it('shows code on click', () => {
-            cy.get('@viewCodeBtn').click();
-            cy.get('@container')
-                .find('textarea')
-                .should('exist');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('does not show table initially', () => {
+      cy.get('@container')
+        .find('table')
+        .should('not.exist');
     });
 
-    describe('CR Header with search and ESU section', () => {
-        beforeEach(() => {
-            cy.get('[data-testid="Header-example-5"]')
-                .as('container')
-                .find('[data-preview="Header"]')
-                .as('preview');
-
-            cy.get('@container')
-                .find('button')
-                .contains('View Code')
-                .as('viewCodeBtn');
-        });
-
-        it('renders CR Header with search and ESU preview', () => {
-            //Logo
-            cy.get('@container')
-                .find('[title="Go to Comic Relief homepage"]')
-                .should('exist');
-
-            //fundraising
-            cy.viewport('iphone-6');
-            cy.reload();
-            cy.get('@container')
-                .find('nav > ul > li:nth-child(1) a')
-                .should('have.attr', 'href', '#');
-
-            //Donate
-            cy.get('@container')
-                .find('header[role="banner"] a[href="/donation"]')
-                .should('exist')
-                .contains('Donate');
-
-            //search
-            cy.get('@container')
-                .find('header[role="banner"] a[href="/search"]')
-                .should('exist');
-
-            //search
-            cy.get('@container')
-                .find('[data-test="header-esu-icon"]')
-                .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');
-        });
-
-        it('closes code on click', () => {
-            cy.get('@viewCodeBtn').click();
-        });
+    it('shows the table on button click', () => {
+      cy.get('@propsBtn').click();
+      cy.get('@container')
+        .find('table')
+        .should('contain', 'Prop name');
     });
+  });
+
+  describe('CR Header section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Header-example-1"]')
+        .as('container')
+        .find('[data-preview="Header"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders header preview', () => {
+      // Logo
+      cy.get('@container')
+        .find('[title="Go to Comic Relief homepage"]')
+        .should('exist');
+
+      // fundraising
+      cy.viewport('macbook-15');
+      cy.reload();
+      cy.get('@container')
+        .find('nav > ul > li:nth-child(1) a')
+        .should('have.attr', 'href', 'https://www.comicrelief.com/fundraising/pay-in-your-money');
+
+      // Donate
+      cy.get('@container')
+        .find('header[role="banner"] a[href="/donation"]')
+        .should('exist')
+        .contains('Donate');
+    });
+
+    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();
+    });
+  });
+
+  describe('CR Header with search and ESU section', () => {
+    beforeEach(() => {
+      cy.get('[data-testid="Header-example-7"]')
+        .as('container')
+        .find('[data-preview="Header"]')
+        .as('preview');
+
+      cy.get('@container')
+        .find('button')
+        .contains('View Code')
+        .as('viewCodeBtn');
+    });
+
+    it('renders CR Header with search and ESU preview', () => {
+      // Logo
+      cy.get('@container')
+        .find('[title="Go to Comic Relief homepage"]')
+        .should('exist');
+
+      // fundraising
+      cy.viewport('iphone-6');
+      cy.reload();
+      cy.get('@container')
+        .find('nav > ul > li:nth-child(1) a')
+        .should('have.attr', 'href', '#');
+
+      // Donate
+      cy.get('@container')
+        .find('header[role="banner"] a[href="/donation"]')
+        .should('exist')
+        .contains('Donate');
+
+      // search
+      cy.get('@container')
+        .find('header[role="banner"] a[href="/search"]')
+        .should('exist');
+
+      // search
+      cy.get('@container')
+        .find('[data-test="header-esu-icon"]')
+        .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');
+    });
+
+    it('closes code on click', () => {
+      cy.get('@viewCodeBtn').click();
+    });
+  });
 });

package/dist/components/Atoms/Logo/Logo.js

@@ -21,6 +21,8 @@ var _srLogo = _interopRequireDefault(require("./assets/sr-logo.svg"));
 
 var _srGameonLogo = _interopRequireDefault(require("./assets/sr-gameon-logo.svg"));
 
+var _CR_LOGO_PRIDE_KEY_RGB = _interopRequireDefault(require("./assets/CR_LOGO_PRIDE_KEY_RGB.svg"));
+
 var Image = _styledComponents.default.img.withConfig({
   displayName: "Logo__Image",
   componentId: "sc-18yiye8-0"
@@ -52,6 +54,9 @@ var themeSwitcher = function themeSwitcher(theme) {
     case 'Sport Relief Gameon':
       return _srGameonLogo.default;
 
+    case 'Pride':
+      return _CR_LOGO_PRIDE_KEY_RGB.default;
+
     default:
       return _crLogo.default;
   }
@@ -68,7 +73,7 @@ var Logo = function Logo(_ref2) {
     sizeMd: sizeMd
   }, /*#__PURE__*/_react.default.createElement(Image, {
     src: themeSwitcher(campaign),
-    alt: campaign === 'Comic Relief' ? 'Comic Relief logo' : 'Sport Relief logo'
+    alt: campaign === 'Comic Relief' || campaign === 'Pride' ? 'Comic Relief logo' : 'Sport Relief logo'
   }));
 };
 

package/dist/components/Atoms/Logo/assets/CR_LOGO_PRIDE_KEY_RGB.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Logo_Keyline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{filter:url(#Adobe_OpacityMaskFilter);}
+	.st1{fill:#FFFFFF;}
+	.st2{mask:url(#SVGID_1_);}
+	.st3{fill:#E52631;}
+	.st4{fill:#FF9144;}
+	.st5{fill:#FFE400;}
+	.st6{fill:#00C100;}
+	.st7{fill:#001B9E;}
+	.st8{fill:#82008D;}
+	.st9{fill:#010101;}
+	.st10{fill:#673608;}
+	.st11{fill:#49D9EF;}
+	.st12{fill:#FFABC7;}
+	.st13{fill:#FCF7F4;}
+</style>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56" id="SVGID_1_">
+	<g class="st0">
+		<rect x="13.07" y="16.74" class="st1" width="473.86" height="473.86"/>
+		<path id="Path" class="st1" d="M467.67,492.21l-435.34,0c-13.53,0-24.54-11.01-24.54-24.54l0-435.34
+			c0-13.53,11.01-24.54,24.54-24.55l435.34,0c13.53,0,24.54,11.01,24.54,24.55l0,435.34C492.21,481.2,481.2,492.21,467.67,492.21"/>
+	</g>
+</mask>
+<g class="st2">
+	<rect x="13.07" y="6.74" class="st3" width="478.3" height="78.98"/>
+	<rect x="13.07" y="85.71" class="st4" width="478.3" height="78.98"/>
+	<rect x="13.07" y="164.69" class="st5" width="478.3" height="78.98"/>
+	<rect x="13.07" y="243.67" class="st6" width="478.3" height="78.98"/>
+	<rect x="13.07" y="322.65" class="st7" width="478.3" height="78.98"/>
+	<rect x="13.07" y="401.62" class="st8" width="478.3" height="78.98"/>
+	
+		<rect x="-126.71" y="226.55" transform="matrix(0.7119 0.7023 -0.7023 0.7119 247.1254 -79.8056)" class="st9" width="695.08" height="69.51"/>
+	
+		<rect x="-175.52" y="276.04" transform="matrix(0.7119 0.7023 -0.7023 0.7119 267.8141 -31.2694)" class="st10" width="695.08" height="69.51"/>
+	
+		<rect x="-224.34" y="325.52" transform="matrix(0.7119 0.7023 -0.7023 0.7119 288.5028 17.2668)" class="st11" width="695.08" height="69.51"/>
+	
+		<rect x="-273.15" y="375" transform="matrix(0.7119 0.7023 -0.7023 0.7119 309.1915 65.8031)" class="st12" width="695.08" height="69.51"/>
+	
+		<rect x="-321.96" y="424.49" transform="matrix(0.7119 0.7023 -0.7023 0.7119 329.8802 114.3393)" class="st13" width="695.08" height="69.51"/>
+</g>
+<path id="Keyline" class="st1" d="M467.67,497.5H32.33c-7.96,0-15.44-3.11-21.08-8.74c-5.64-5.64-8.74-13.13-8.74-21.09l0-435.34
+	c0-7.96,3.11-15.44,8.74-21.08C16.88,5.6,24.37,2.5,32.33,2.5l435.34,0c16.45,0,29.83,13.38,29.83,29.83l0,435.34
+	C497.5,484.12,484.12,497.5,467.67,497.5z M467.67,13.06l-435.34,0c-5.13,0-9.97,2.01-13.61,5.65c-3.64,3.64-5.65,8.48-5.65,13.61
+	l0,435.34c0,5.14,2.01,9.97,5.65,13.61c3.64,3.64,8.48,5.65,13.61,5.65h435.34c10.62,0,19.26-8.64,19.26-19.26l0-435.34
+	C486.93,21.71,478.29,13.07,467.67,13.06z"/>
+<g id="COMIC_RELIEF_-_optical_tweak_1_">
+	<path class="st1" d="M94.57,207.4c0,10.32,1.29,16.95,9.21,16.95s9.21-6.63,9.21-16.95v-12.53h26.34v5.34
+		c0,27.08-8.66,46.05-35,46.05c-27.08,0-37.58-18.24-37.58-51.58v-15.84c0-33.34,10.5-51.58,37.58-51.58c26.34,0,35,18.97,35,46.05
+		v5.34h-26.34v-12.53c0-10.32-1.29-16.95-9.21-16.95s-9.21,6.63-9.21,16.95V207.4z"/>
+	<path class="st1" d="M219.57,193.95c0,33.34-10.5,52.31-37.58,52.31c-27.08,0-37.58-18.97-37.58-52.31v-14.37
+		c0-33.34,10.5-52.31,37.58-52.31c27.08,0,37.58,18.97,37.58,52.31V193.95z M172.41,207.03c0,10.32,1.66,17.32,9.58,17.32
+		c7.92,0,9.58-7,9.58-17.32v-40.53c0-10.32-1.66-17.32-9.58-17.32c-7.92,0-9.58,7-9.58,17.32V207.03z"/>
+	<path class="st1" d="M272.34,187.69h0.74l11.05-58.95h34.08v116.05h-25.05v-66.13h-0.74l-12.71,66.13h-16.95l-13.08-66.13h-0.74
+		v66.13h-23.76V128.75H260L272.34,187.69z"/>
+	<path class="st1" d="M353.84,128.75v116.05h-27.08V128.75H353.84z"/>
+	<path class="st1" d="M388.3,207.4c0,10.32,1.29,16.95,9.21,16.95c7.92,0,9.21-6.63,9.21-16.95v-12.53h26.34v5.34
+		c0,27.08-8.66,46.05-35,46.05c-27.08,0-37.58-18.24-37.58-51.58v-15.84c0-33.34,10.5-51.58,37.58-51.58c26.34,0,35,18.97,35,46.05
+		v5.34h-26.34v-12.53c0-10.32-1.29-16.95-9.21-16.95c-7.92,0-9.21,6.63-9.21,16.95V207.4z"/>
+	<path class="st1" d="M113.17,371.28c-1.47-4.42-1.84-11.24-2.58-25.24c-0.55-11.05-3.32-16.76-11.79-16.76h-3.5v42H68.6V255.23
+		h33.34c25.97,0,37.58,13.63,37.58,34.26c0,18.24-8.29,27.26-20.08,29.29c12.16,2.76,16.21,11.42,17.13,25.97
+		c0.92,15.29,0.74,21.18,3.32,26.53H113.17z M97.88,307.91c10.87,0,15.1-3.5,15.1-15.29c0-10.5-4.24-15.66-15.1-15.66h-2.58v30.95
+		H97.88z"/>
+	<path class="st1" d="M204.45,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
+	<path class="st1" d="M237.82,255.23v93.76h31.31v22.29h-58.39V255.23H237.82z"/>
+	<path class="st1" d="M301.28,255.23v116.05H274.2V255.23H301.28z"/>
+	<path class="st1" d="M368.39,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
+	<path class="st1" d="M374.68,371.28V255.23h56.55v22.29h-29.47v26.89h21.55v21.92h-21.55v44.95H374.68z"/>
+</g>
+</svg>

package/dist/components/Atoms/Logo/assets/cr-pride-logo.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 495 495" style="enable-background:new 0 0 495 495;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E52631;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M473.72,495.5H22.28c-11.98,0-21.78-9.8-21.78-21.78V22.28C0.5,10.3,10.3,0.5,22.28,0.5h451.44
+	c11.98,0,21.78,9.8,21.78,21.78v451.44C495.5,485.69,485.7,495.5,473.72,495.5z"/>
+<g id="COMIC_RELIEF_-_optical_tweak">
+	<path class="st1" d="M85.69,203.52c0,10.77,1.35,17.7,9.62,17.7s9.62-6.92,9.62-17.7v-13.08h27.5v5.58
+		c0,28.27-9.04,48.08-36.54,48.08c-28.27,0-39.24-19.04-39.24-53.85v-16.54c0-34.81,10.96-53.85,39.24-53.85
+		c27.5,0,36.54,19.81,36.54,48.08v5.58h-27.5v-13.08c0-10.77-1.35-17.7-9.62-17.7s-9.62,6.92-9.62,17.7V203.52z"/>
+	<path class="st1" d="M216.21,189.48c0,34.81-10.96,54.62-39.24,54.62c-28.27,0-39.24-19.81-39.24-54.62v-15
+		c0-34.81,10.96-54.62,39.24-54.62c28.27,0,39.24,19.81,39.24,54.62V189.48z M166.97,203.13c0,10.77,1.73,18.08,10,18.08
+		s10-7.31,10-18.08v-42.31c0-10.77-1.73-18.08-10-18.08s-10,7.31-10,18.08V203.13z"/>
+	<path class="st1" d="M271.32,182.94h0.77l11.54-61.55h35.58v121.17h-26.16v-69.05h-0.77l-13.27,69.05h-17.7l-13.66-69.05h-0.77
+		v69.05h-24.81V121.39h36.35L271.32,182.94z"/>
+	<path class="st1" d="M356.41,121.39v121.17h-28.27V121.39H356.41z"/>
+	<path class="st1" d="M392.39,203.52c0,10.77,1.35,17.7,9.62,17.7c8.27,0,9.62-6.92,9.62-17.7v-13.08h27.5v5.58
+		c0,28.27-9.04,48.08-36.54,48.08c-28.27,0-39.24-19.04-39.24-53.85v-16.54c0-34.81,10.96-53.85,39.24-53.85
+		c27.5,0,36.54,19.81,36.54,48.08v5.58h-27.5v-13.08c0-10.77-1.35-17.7-9.62-17.7c-8.27,0-9.62,6.92-9.62,17.7V203.52z"/>
+	<path class="st1" d="M105.12,374.63c-1.54-4.62-1.92-11.73-2.69-26.35c-0.58-11.54-3.46-17.5-12.31-17.5h-3.65v43.85H58.57V253.46
+		h34.81c27.12,0,39.24,14.23,39.24,35.77c0,19.04-8.66,28.47-20.97,30.58c12.69,2.88,16.93,11.92,17.89,27.12
+		c0.96,15.96,0.77,22.12,3.46,27.7H105.12z M89.16,308.46c11.35,0,15.77-3.65,15.77-15.96c0-10.96-4.42-16.35-15.77-16.35h-2.69
+		v32.31H89.16z"/>
+	<path class="st1" d="M200.42,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
+	<path class="st1" d="M235.27,253.46v97.9h32.7v23.27H207V253.46H235.27z"/>
+	<path class="st1" d="M301.53,253.46v121.17h-28.27V253.46H301.53z"/>
+	<path class="st1" d="M371.6,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
+	<path class="st1" d="M378.18,374.63V253.46h59.05v23.27h-30.77v28.08h22.5v22.89h-22.5v46.93H378.18z"/>
+</g>
+</svg>

package/dist/components/Molecules/Logos/Logos.js

@@ -43,6 +43,16 @@ var Logos = function Logos(_ref) {
     }));
   }
 
+  if (campaign === 'Pride') {
+    return /*#__PURE__*/_react.default.createElement("a", {
+      href: "/",
+      title: "Go to Comic Relief homepage"
+    }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
+      rotate: false,
+      campaign: "Pride"
+    }));
+  }
+
   return /*#__PURE__*/_react.default.createElement("a", {
     href: "/",
     title: "Go to Comic Relief homepage"

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

@@ -82,7 +82,7 @@ var Signup = function Signup(_ref) {
     // If a specific 'other amount' has been passed down, use it,
     // otherwise assign based on the associated moneybuys:
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(otherAmountValue);
     } else {
       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.
@@ -90,7 +90,7 @@ var Signup = function Signup(_ref) {
 
 
       var thisAmount = _givingData.moneybuys[1] ? _givingData.moneybuys[1].value : _givingData.moneybuys[0].value;
-      setAmountDonate(parseFloat(thisAmount));
+      setAmountDonate(thisAmount);
     }
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
   (0, _react.useEffect)(function () {
@@ -101,7 +101,7 @@ var Signup = function Signup(_ref) {
         moneyBuyNewDescription = moneyBuy.description;
       }
 
-      return index === 1 && amountDonate === ' ' && (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(parseFloat(moneyBuy.value)));
+      return index === 1 && amountDonate === undefined && (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(moneyBuy.value));
     });
 
     if (!(0, _Membership.isAmountValid)(amountDonate)) {
@@ -132,7 +132,7 @@ var Signup = function Signup(_ref) {
 
   (0, _react.useEffect)(function () {
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(otherAmountValue);
     }
   }, [otherAmountValue, setAmountDonate]); // Create money buy boxes
 
@@ -156,7 +156,7 @@ var Signup = function Signup(_ref) {
       // 'philantrophy' carts have been set up to use a single moneybuy.
       // See ENG-1685 for more details
       var thisAmount = givingData.moneybuys[1] ? givingData.moneybuys[1].value : givingData.moneybuys[0].value;
-      setAmountDonate(parseFloat(thisAmount));
+      setAmountDonate(thisAmount);
     }
   }, [errorMsg, givingData.moneybuys]); // Listen for click outside custom amount input if there is no value entered.
 
@@ -175,10 +175,10 @@ var Signup = function Signup(_ref) {
     }
 
     if (givingType === 'single') {
-      return "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate), " now");
+      return "Donate \xA3".concat(amountDonate, " now");
     }
 
-    return "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate), " monthly");
+    return "Donate \xA3".concat(amountDonate, " monthly");
   };
 
   return /*#__PURE__*/_react.default.createElement(_Donate.FormWrapper, null, showGivingSelector && /*#__PURE__*/_react.default.createElement(_GivingSelector.default, {
@@ -203,10 +203,10 @@ var Signup = function Signup(_ref) {
     var value = _ref2.value;
     return /*#__PURE__*/_react.default.createElement(_MoneyBuy.default, {
       isSelected: amountDonate === value,
-      amount: (0, _Membership.amountFormatter)(value),
+      amount: value.toString(),
       description: "\xA3".concat((0, _Membership.amountFormatter)(value)),
       setOtherAmount: function setOtherAmount() {
-        return setAmountDonate(parseFloat(value));
+        return setAmountDonate(value);
       },
       key: value,
       name: "".concat(mbshipID, "--moneyBuy").concat(index + 1),
@@ -218,7 +218,7 @@ var Signup = function Signup(_ref) {
   }, "Other amount"), /*#__PURE__*/_react.default.createElement(_Donate.AmountField, Object.assign({
     step: "0.01",
     name: "membership_amount",
-    type: "number",
+    type: "string",
     inputBorderColor: (0, _Membership.isAmountValid)(amountDonate) === false,
     label: "\xA3",
     errorMsg: "",
@@ -227,23 +227,24 @@ var Signup = function Signup(_ref) {
   }, rest, {
     max: "25000",
     min: "1",
-    value: (0, _Membership.amountFormatter)(amountDonate),
-    pattern: "[^[0-9]+([,.][0-9]+)?$]",
+    value: amountDonate,
+    pattern: "[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
+    ,
     placeholder: "0.00",
     onChange: function onChange(e) {
-      return setAmountDonate(parseFloat(e.target.value));
+      return setAmountDonate(e.target.value.trim());
     },
     "aria-label": "Input a different amount",
     ref: amountRef
   }))), amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && /*#__PURE__*/_react.default.createElement(_Donate.Copy, {
     as: "p"
-  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate.toFixed(2), " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
+  }, /*#__PURE__*/_react.default.createElement("strong", null, "\xA3".concat(amountDonate, " ")), moneyBuyCopy), errorMsg && /*#__PURE__*/_react.default.createElement(_Donate.Error, {
     className: "error--amount",
     tag: "p"
   }, "Please enter an amount between \xA31 and \xA325000 and up to 2 decimal places"), noMoneyBuys ? /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor
-  }, errorMsg ? 'Donate' : "Donate \xA3".concat((0, _Membership.amountFormatter)(amountDonate))) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
+  }, errorMsg ? 'Donate' : "Donate \xA3".concat(amountDonate)) : /*#__PURE__*/_react.default.createElement(_Donate.Button, {
     type: "submit",
     color: submitButtonColor,
     ref: buttonRef
@@ -252,8 +253,8 @@ var Signup = function Signup(_ref) {
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {},
-  otherAmountValue: null
+  otherAmountValue: null,
+  data: {}
 };
 var _default = Signup;
 exports.default = _default;

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

@@ -628,8 +628,8 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="345.67"
+                  type="string"
+                  value={345.67}
                 />
               </div>
               
@@ -1358,7 +1358,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box1"
-                  aria-label="£10.10"
+                  aria-label="£12.10"
                   className="c23"
                   id="mship-1--moneyBuy-box1"
                   name="mship-1--moneyBuy1"
@@ -1366,7 +1366,7 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder=""
                   required={false}
                   type="button"
-                  value="£ 10.10"
+                  value="£ 12.10"
                 />
               </div>
               
@@ -1391,7 +1391,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box2"
-                  aria-label="£20"
+                  aria-label="£20.00"
                   className="c23"
                   id="mship-1--moneyBuy-box2"
                   name="mship-1--moneyBuy2"
@@ -1424,7 +1424,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box3"
-                  aria-label="£30"
+                  aria-label="£30.00"
                   className="c23"
                   id="mship-1--moneyBuy-box3"
                   name="mship-1--moneyBuy3"
@@ -1479,8 +1479,8 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               
@@ -1490,7 +1490,7 @@ exports[`Monthly donation renders correctly 1`] = `
             className="c28"
           >
             <strong>
-              £10.00 
+              £10 
             </strong>
           </p>
           <button
@@ -2192,8 +2192,8 @@ exports[`Single donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="20"
+                  type="string"
+                  value={20}
                 />
               </div>
               
@@ -2203,7 +2203,7 @@ exports[`Single donation renders correctly 1`] = `
             className="c23"
           >
             <strong>
-              £20.00 
+              £20 
             </strong>
             a support worker to visit 10 isolated young mums with postnatal depression in the UK.
           </p>
@@ -2660,8 +2660,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               

package/dist/components/Organisms/Donate/dev-data/data.js

@@ -9,25 +9,25 @@ var _default = {
   singleGiving: {
     moneybuys: [{
       description: 'a pregnant woman in Uganda to have access to a birth kit so she can have a clean, safe delivery.',
-      value: 10.1
+      value: '12.10'
     }, {
       description: 'a support worker to visit 10 isolated young mums with postnatal depression in the UK.',
-      value: 20
+      value: '20'
     }, {
       description: 'clothes for a child who has had to leave their possessions behind while escaping domestic abuse.',
-      value: 30
+      value: '30'
     }]
   },
   regularGiving: {
     moneybuys: [{
       description: 'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-      value: 5
+      value: '5.50'
     }, {
       description: 'a potentially lifesaving call for a man at risk of suicide in the UK.',
-      value: 10
+      value: '10'
     }, {
       description: 'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-      value: 20
+      value: '20'
     }]
   }
 };

package/dist/components/Organisms/Header/Header.md

@@ -36,6 +36,25 @@ import Link from '../../Atoms/Link/Link';
 />;
 ```
 
+# Pride header
+
+```js
+import data from './data/data';
+import Link from '../../Atoms/Link/Link';
+
+<Header
+  navItems={data}
+  campaign="Pride"
+  metaIcons={
+    <>
+      <Link color="green" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+/>;
+```
+
 # Comic Relief header with Search
 
 ```js

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

@@ -197,7 +197,8 @@ var Signup = function Signup(_ref) {
     max: "25000",
     min: "1",
     value: userInput,
-    pattern: "[^[0-9]+([,.][0-9]+)?$]",
+    pattern: "[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
+    ,
     placeholder: "0.00",
     onChange: function onChange(e) {
       return handleChange(e.target.value, otherDescription);

package/dist/components/Organisms/Membership/dev-data/data.js

@@ -9,13 +9,13 @@ var _default = {
   regularGiving: {
     moneybuys: [{
       description: 'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-      value: 5
+      value: '5'
     }, {
       description: 'a potentially lifesaving call for a man at risk of suicide in the UK.',
-      value: 10
+      value: '10'
     }, {
       description: 'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-      value: 20
+      value: '20'
     }]
   }
 };

package/package.json

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

package/src/components/Atoms/Logo/Logo.js

@@ -7,6 +7,7 @@ import spacing from '../../../theme/shared/spacing';
 import crLogo from './assets/cr-logo.svg';
 import srLogo from './assets/sr-logo.svg';
 import srLogoGameOn from './assets/sr-gameon-logo.svg';
+import crLogoPride from './assets/CR_LOGO_PRIDE_KEY_RGB.svg';
 
 const Image = styled.img`
   object-fit: cover;
@@ -37,6 +38,8 @@ const themeSwitcher = theme => {
       return srLogo;
     case 'Sport Relief Gameon':
       return srLogoGameOn;
+    case 'Pride':
+      return crLogoPride;
     default:
       return crLogo;
   }
@@ -49,7 +52,7 @@ const Logo = ({
     <Image
       src={themeSwitcher(campaign)}
       alt={
-          campaign === 'Comic Relief'
+          campaign === 'Comic Relief' || campaign === 'Pride'
             ? 'Comic Relief logo'
             : 'Sport Relief logo'
         }

package/src/components/Atoms/Logo/assets/CR_LOGO_PRIDE_KEY_RGB.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Logo_Keyline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+	 y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
+<style type="text/css">
+	.st0{filter:url(#Adobe_OpacityMaskFilter);}
+	.st1{fill:#FFFFFF;}
+	.st2{mask:url(#SVGID_1_);}
+	.st3{fill:#E52631;}
+	.st4{fill:#FF9144;}
+	.st5{fill:#FFE400;}
+	.st6{fill:#00C100;}
+	.st7{fill:#001B9E;}
+	.st8{fill:#82008D;}
+	.st9{fill:#010101;}
+	.st10{fill:#673608;}
+	.st11{fill:#49D9EF;}
+	.st12{fill:#FFABC7;}
+	.st13{fill:#FCF7F4;}
+</style>
+<defs>
+	<filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56">
+		<feColorMatrix  type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 1 0"/>
+	</filter>
+</defs>
+<mask maskUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56" id="SVGID_1_">
+	<g class="st0">
+		<rect x="13.07" y="16.74" class="st1" width="473.86" height="473.86"/>
+		<path id="Path" class="st1" d="M467.67,492.21l-435.34,0c-13.53,0-24.54-11.01-24.54-24.54l0-435.34
+			c0-13.53,11.01-24.54,24.54-24.55l435.34,0c13.53,0,24.54,11.01,24.54,24.55l0,435.34C492.21,481.2,481.2,492.21,467.67,492.21"/>
+	</g>
+</mask>
+<g class="st2">
+	<rect x="13.07" y="6.74" class="st3" width="478.3" height="78.98"/>
+	<rect x="13.07" y="85.71" class="st4" width="478.3" height="78.98"/>
+	<rect x="13.07" y="164.69" class="st5" width="478.3" height="78.98"/>
+	<rect x="13.07" y="243.67" class="st6" width="478.3" height="78.98"/>
+	<rect x="13.07" y="322.65" class="st7" width="478.3" height="78.98"/>
+	<rect x="13.07" y="401.62" class="st8" width="478.3" height="78.98"/>
+	
+		<rect x="-126.71" y="226.55" transform="matrix(0.7119 0.7023 -0.7023 0.7119 247.1254 -79.8056)" class="st9" width="695.08" height="69.51"/>
+	
+		<rect x="-175.52" y="276.04" transform="matrix(0.7119 0.7023 -0.7023 0.7119 267.8141 -31.2694)" class="st10" width="695.08" height="69.51"/>
+	
+		<rect x="-224.34" y="325.52" transform="matrix(0.7119 0.7023 -0.7023 0.7119 288.5028 17.2668)" class="st11" width="695.08" height="69.51"/>
+	
+		<rect x="-273.15" y="375" transform="matrix(0.7119 0.7023 -0.7023 0.7119 309.1915 65.8031)" class="st12" width="695.08" height="69.51"/>
+	
+		<rect x="-321.96" y="424.49" transform="matrix(0.7119 0.7023 -0.7023 0.7119 329.8802 114.3393)" class="st13" width="695.08" height="69.51"/>
+</g>
+<path id="Keyline" class="st1" d="M467.67,497.5H32.33c-7.96,0-15.44-3.11-21.08-8.74c-5.64-5.64-8.74-13.13-8.74-21.09l0-435.34
+	c0-7.96,3.11-15.44,8.74-21.08C16.88,5.6,24.37,2.5,32.33,2.5l435.34,0c16.45,0,29.83,13.38,29.83,29.83l0,435.34
+	C497.5,484.12,484.12,497.5,467.67,497.5z M467.67,13.06l-435.34,0c-5.13,0-9.97,2.01-13.61,5.65c-3.64,3.64-5.65,8.48-5.65,13.61
+	l0,435.34c0,5.14,2.01,9.97,5.65,13.61c3.64,3.64,8.48,5.65,13.61,5.65h435.34c10.62,0,19.26-8.64,19.26-19.26l0-435.34
+	C486.93,21.71,478.29,13.07,467.67,13.06z"/>
+<g id="COMIC_RELIEF_-_optical_tweak_1_">
+	<path class="st1" d="M94.57,207.4c0,10.32,1.29,16.95,9.21,16.95s9.21-6.63,9.21-16.95v-12.53h26.34v5.34
+		c0,27.08-8.66,46.05-35,46.05c-27.08,0-37.58-18.24-37.58-51.58v-15.84c0-33.34,10.5-51.58,37.58-51.58c26.34,0,35,18.97,35,46.05
+		v5.34h-26.34v-12.53c0-10.32-1.29-16.95-9.21-16.95s-9.21,6.63-9.21,16.95V207.4z"/>
+	<path class="st1" d="M219.57,193.95c0,33.34-10.5,52.31-37.58,52.31c-27.08,0-37.58-18.97-37.58-52.31v-14.37
+		c0-33.34,10.5-52.31,37.58-52.31c27.08,0,37.58,18.97,37.58,52.31V193.95z M172.41,207.03c0,10.32,1.66,17.32,9.58,17.32
+		c7.92,0,9.58-7,9.58-17.32v-40.53c0-10.32-1.66-17.32-9.58-17.32c-7.92,0-9.58,7-9.58,17.32V207.03z"/>
+	<path class="st1" d="M272.34,187.69h0.74l11.05-58.95h34.08v116.05h-25.05v-66.13h-0.74l-12.71,66.13h-16.95l-13.08-66.13h-0.74
+		v66.13h-23.76V128.75H260L272.34,187.69z"/>
+	<path class="st1" d="M353.84,128.75v116.05h-27.08V128.75H353.84z"/>
+	<path class="st1" d="M388.3,207.4c0,10.32,1.29,16.95,9.21,16.95c7.92,0,9.21-6.63,9.21-16.95v-12.53h26.34v5.34
+		c0,27.08-8.66,46.05-35,46.05c-27.08,0-37.58-18.24-37.58-51.58v-15.84c0-33.34,10.5-51.58,37.58-51.58c26.34,0,35,18.97,35,46.05
+		v5.34h-26.34v-12.53c0-10.32-1.29-16.95-9.21-16.95c-7.92,0-9.21,6.63-9.21,16.95V207.4z"/>
+	<path class="st1" d="M113.17,371.28c-1.47-4.42-1.84-11.24-2.58-25.24c-0.55-11.05-3.32-16.76-11.79-16.76h-3.5v42H68.6V255.23
+		h33.34c25.97,0,37.58,13.63,37.58,34.26c0,18.24-8.29,27.26-20.08,29.29c12.16,2.76,16.21,11.42,17.13,25.97
+		c0.92,15.29,0.74,21.18,3.32,26.53H113.17z M97.88,307.91c10.87,0,15.1-3.5,15.1-15.29c0-10.5-4.24-15.66-15.1-15.66h-2.58v30.95
+		H97.88z"/>
+	<path class="st1" d="M204.45,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
+	<path class="st1" d="M237.82,255.23v93.76h31.31v22.29h-58.39V255.23H237.82z"/>
+	<path class="st1" d="M301.28,255.23v116.05H274.2V255.23H301.28z"/>
+	<path class="st1" d="M368.39,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
+	<path class="st1" d="M374.68,371.28V255.23h56.55v22.29h-29.47v26.89h21.55v21.92h-21.55v44.95H374.68z"/>
+</g>
+</svg>

package/src/components/Atoms/Logo/assets/cr-pride-logo.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 495 495" style="enable-background:new 0 0 495 495;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#E52631;}
+	.st1{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M473.72,495.5H22.28c-11.98,0-21.78-9.8-21.78-21.78V22.28C0.5,10.3,10.3,0.5,22.28,0.5h451.44
+	c11.98,0,21.78,9.8,21.78,21.78v451.44C495.5,485.69,485.7,495.5,473.72,495.5z"/>
+<g id="COMIC_RELIEF_-_optical_tweak">
+	<path class="st1" d="M85.69,203.52c0,10.77,1.35,17.7,9.62,17.7s9.62-6.92,9.62-17.7v-13.08h27.5v5.58
+		c0,28.27-9.04,48.08-36.54,48.08c-28.27,0-39.24-19.04-39.24-53.85v-16.54c0-34.81,10.96-53.85,39.24-53.85
+		c27.5,0,36.54,19.81,36.54,48.08v5.58h-27.5v-13.08c0-10.77-1.35-17.7-9.62-17.7s-9.62,6.92-9.62,17.7V203.52z"/>
+	<path class="st1" d="M216.21,189.48c0,34.81-10.96,54.62-39.24,54.62c-28.27,0-39.24-19.81-39.24-54.62v-15
+		c0-34.81,10.96-54.62,39.24-54.62c28.27,0,39.24,19.81,39.24,54.62V189.48z M166.97,203.13c0,10.77,1.73,18.08,10,18.08
+		s10-7.31,10-18.08v-42.31c0-10.77-1.73-18.08-10-18.08s-10,7.31-10,18.08V203.13z"/>
+	<path class="st1" d="M271.32,182.94h0.77l11.54-61.55h35.58v121.17h-26.16v-69.05h-0.77l-13.27,69.05h-17.7l-13.66-69.05h-0.77
+		v69.05h-24.81V121.39h36.35L271.32,182.94z"/>
+	<path class="st1" d="M356.41,121.39v121.17h-28.27V121.39H356.41z"/>
+	<path class="st1" d="M392.39,203.52c0,10.77,1.35,17.7,9.62,17.7c8.27,0,9.62-6.92,9.62-17.7v-13.08h27.5v5.58
+		c0,28.27-9.04,48.08-36.54,48.08c-28.27,0-39.24-19.04-39.24-53.85v-16.54c0-34.81,10.96-53.85,39.24-53.85
+		c27.5,0,36.54,19.81,36.54,48.08v5.58h-27.5v-13.08c0-10.77-1.35-17.7-9.62-17.7c-8.27,0-9.62,6.92-9.62,17.7V203.52z"/>
+	<path class="st1" d="M105.12,374.63c-1.54-4.62-1.92-11.73-2.69-26.35c-0.58-11.54-3.46-17.5-12.31-17.5h-3.65v43.85H58.57V253.46
+		h34.81c27.12,0,39.24,14.23,39.24,35.77c0,19.04-8.66,28.47-20.97,30.58c12.69,2.88,16.93,11.92,17.89,27.12
+		c0.96,15.96,0.77,22.12,3.46,27.7H105.12z M89.16,308.46c11.35,0,15.77-3.65,15.77-15.96c0-10.96-4.42-16.35-15.77-16.35h-2.69
+		v32.31H89.16z"/>
+	<path class="st1" d="M200.42,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
+	<path class="st1" d="M235.27,253.46v97.9h32.7v23.27H207V253.46H235.27z"/>
+	<path class="st1" d="M301.53,253.46v121.17h-28.27V253.46H301.53z"/>
+	<path class="st1" d="M371.6,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
+	<path class="st1" d="M378.18,374.63V253.46h59.05v23.27h-30.77v28.08h22.5v22.89h-22.5v46.93H378.18z"/>
+</g>
+</svg>

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

@@ -25,6 +25,14 @@ const Logos = ({ campaign }) => {
     );
   }
 
+  if (campaign === 'Pride') {
+    return (
+      <a href="/" title="Go to Comic Relief homepage">
+        <Logo rotate={false} campaign="Pride" />
+      </a>
+    );
+  }
+
   return (
     <a href="/" title="Go to Comic Relief homepage">
       <Logo rotate={false} campaign="Comic Relief" />

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

@@ -52,7 +52,7 @@ const Signup = ({
     // If a specific 'other amount' has been passed down, use it,
     // otherwise assign based on the associated moneybuys:
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(otherAmountValue);
     } else {
       const givingData = givingType === 'single' ? singleGiving : regularGiving;
 
@@ -63,7 +63,7 @@ const Signup = ({
         ? givingData.moneybuys[1].value
         : givingData.moneybuys[0].value;
 
-      setAmountDonate(parseFloat(thisAmount));
+      setAmountDonate(thisAmount);
     }
   }, [givingType, singleGiving, regularGiving, otherAmountValue]);
 
@@ -79,9 +79,9 @@ const Signup = ({
 
       return (
         index === 1
-        && amountDonate === ' '
+        && amountDonate === undefined
         && (setMoneyBuyCopy(moneyBuy.description),
-        setAmountDonate(parseFloat(moneyBuy.value)))
+        setAmountDonate(moneyBuy.value))
       );
     });
 
@@ -136,7 +136,7 @@ const Signup = ({
   // Update the local state if the prop has been set and changed
   useEffect(() => {
     if (otherAmountValue) {
-      setAmountDonate(parseFloat(otherAmountValue));
+      setAmountDonate(otherAmountValue);
     }
   }, [otherAmountValue, setAmountDonate]);
 
@@ -166,7 +166,7 @@ const Signup = ({
         ? givingData.moneybuys[1].value
         : givingData.moneybuys[0].value;
 
-      setAmountDonate(parseFloat(thisAmount));
+      setAmountDonate(thisAmount);
     }
   }, [errorMsg, givingData.moneybuys]);
 
@@ -186,9 +186,9 @@ const Signup = ({
       return 'Donate';
     }
     if (givingType === 'single') {
-      return `Donate £${amountFormatter(amountDonate)} now`;
+      return `Donate £${amountDonate} now`;
     }
-    return `Donate £${amountFormatter(amountDonate)} monthly`;
+    return `Donate £${amountDonate} monthly`;
   };
 
   return (
@@ -226,9 +226,9 @@ const Signup = ({
               {givingData.moneybuys.map(({ value }, index) => (
                 <MoneyBuy
                   isSelected={amountDonate === value}
-                  amount={amountFormatter(value)}
+                  amount={value.toString()}
                   description={`£${amountFormatter(value)}`}
-                  setOtherAmount={() => setAmountDonate(parseFloat(value))}
+                  setOtherAmount={() => setAmountDonate(value)}
                   key={value}
                   name={`${mbshipID}--moneyBuy${index + 1}`}
                   id={`${mbshipID}--moneyBuy-box${index + 1}`}
@@ -245,7 +245,7 @@ const Signup = ({
             <AmountField
               step="0.01"
               name="membership_amount"
-              type="number"
+              type="string"
               inputBorderColor={isAmountValid(amountDonate) === false}
               label="£"
               errorMsg=""
@@ -254,17 +254,17 @@ const Signup = ({
               {...rest}
               max="25000"
               min="1"
-              value={amountFormatter(amountDonate)}
-              pattern="[^[0-9]+([,.][0-9]+)?$]"
+              value={amountDonate}
+              pattern="[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
               placeholder="0.00"
-              onChange={e => setAmountDonate(parseFloat(e.target.value))}
+              onChange={e => setAmountDonate(e.target.value.trim())}
               aria-label="Input a different amount"
               ref={amountRef}
             />
           </FormFieldset>
           {amountDonate >= 1 && !noMoneyBuys && moneyBuyCopy && (
             <Copy as="p">
-              <strong>{`£${amountDonate.toFixed(2)} `}</strong>
+              <strong>{`£${amountDonate} `}</strong>
               {moneyBuyCopy}
             </Copy>
           )}
@@ -283,7 +283,7 @@ const Signup = ({
             >
               {errorMsg
                 ? 'Donate'
-                : `Donate £${amountFormatter(amountDonate)}`}
+                : `Donate £${amountDonate}`}
             </Button>
           ) : (
             <Button
@@ -318,8 +318,8 @@ Signup.propTypes = {
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {},
-  otherAmountValue: null
+  otherAmountValue: null,
+  data: {}
 };
 
 export default Signup;

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

@@ -628,8 +628,8 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="345.67"
+                  type="string"
+                  value={345.67}
                 />
               </div>
               
@@ -1358,7 +1358,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box1"
-                  aria-label="£10.10"
+                  aria-label="£12.10"
                   className="c23"
                   id="mship-1--moneyBuy-box1"
                   name="mship-1--moneyBuy1"
@@ -1366,7 +1366,7 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder=""
                   required={false}
                   type="button"
-                  value="£ 10.10"
+                  value="£ 12.10"
                 />
               </div>
               
@@ -1391,7 +1391,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box2"
-                  aria-label="£20"
+                  aria-label="£20.00"
                   className="c23"
                   id="mship-1--moneyBuy-box2"
                   name="mship-1--moneyBuy2"
@@ -1424,7 +1424,7 @@ exports[`Monthly donation renders correctly 1`] = `
                 
                 <input
                   aria-describedby="mship-1--moneyBuy-box3"
-                  aria-label="£30"
+                  aria-label="£30.00"
                   className="c23"
                   id="mship-1--moneyBuy-box3"
                   name="mship-1--moneyBuy3"
@@ -1479,8 +1479,8 @@ exports[`Monthly donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               
@@ -1490,7 +1490,7 @@ exports[`Monthly donation renders correctly 1`] = `
             className="c28"
           >
             <strong>
-              £10.00 
+              £10 
             </strong>
           </p>
           <button
@@ -2192,8 +2192,8 @@ exports[`Single donation renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="20"
+                  type="string"
+                  value={20}
                 />
               </div>
               
@@ -2203,7 +2203,7 @@ exports[`Single donation renders correctly 1`] = `
             className="c23"
           >
             <strong>
-              £20.00 
+              £20 
             </strong>
             a support worker to visit 10 isolated young mums with postnatal depression in the UK.
           </p>
@@ -2660,8 +2660,8 @@ exports[`Single donation with no Money Buys renders correctly 1`] = `
                   placeholder="0.00"
                   required={false}
                   step="0.01"
-                  type="number"
-                  value="10"
+                  type="string"
+                  value={10}
                 />
               </div>
               

package/src/components/Organisms/Donate/dev-data/data.js

@@ -5,17 +5,17 @@ export default {
       {
         description:
           'a pregnant woman in Uganda to have access to a birth kit so she can have a clean, safe delivery.',
-        value: 10.1
+        value: '12.10'
       },
       {
         description:
           'a support worker to visit 10 isolated young mums with postnatal depression in the UK.',
-        value: 20
+        value: '20'
       },
       {
         description:
           'clothes for a child who has had to leave their possessions behind while escaping domestic abuse.',
-        value: 30
+        value: '30'
       }
     ]
   },
@@ -24,17 +24,17 @@ export default {
       {
         description:
           'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-        value: 5
+        value: '5.50'
       },
       {
         description:
           'a potentially lifesaving call for a man at risk of suicide in the UK.',
-        value: 10
+        value: '10'
       },
       {
         description:
           'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-        value: 20
+        value: '20'
       }
     ]
   }

package/src/components/Organisms/Header/Header.md

@@ -36,6 +36,25 @@ import Link from '../../Atoms/Link/Link';
 />;
 ```
 
+# Pride header
+
+```js
+import data from './data/data';
+import Link from '../../Atoms/Link/Link';
+
+<Header
+  navItems={data}
+  campaign="Pride"
+  metaIcons={
+    <>
+      <Link color="green" type="button" href="/donation">
+        Donate
+      </Link>
+    </>
+  }
+/>;
+```
+
 # Comic Relief header with Search
 
 ```js

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

@@ -173,7 +173,7 @@ const Signup = ({
               max="25000"
               min="1"
               value={userInput}
-              pattern="[^[0-9]+([,.][0-9]+)?$]"
+              pattern="[^[0-9]+([,.][0-9]+)?$]" // this only applies on submit
               placeholder="0.00"
               onChange={e => handleChange(e.target.value, otherDescription)}
               onClick={e => hightlightInput(e.target.value, otherDescription)}

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

@@ -41,7 +41,7 @@ const MoneyBuy = ({
 );
 
 MoneyBuy.propTypes = {
-  amount: PropTypes.number,
+  amount: PropTypes.string,
   currency: PropTypes.string,
   description: PropTypes.string,
   // Function already set does'nt need to be passed as props

package/src/components/Organisms/Membership/dev-data/data.js

@@ -5,17 +5,17 @@ export default {
       {
         description:
           'a regular supply of toiletries for someone living in a refugee camp in Serbia.',
-        value: 5
+        value: '5'
       },
       {
         description:
           'a potentially lifesaving call for a man at risk of suicide in the UK.',
-        value: 10
+        value: '10'
       },
       {
         description:
           'the distribution of enough surplus food for a school breakfast club to feed 80 children.',
-        value: 20
+        value: '20'
       }
     ]
   }