@comicrelief/component-library 7.16.0 → 7.18.0

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/Input/Input.js

@@ -114,7 +114,7 @@ Input.propTypes = {
 
   /** text, email, number, date, search, tel, url, password */
   type: _propTypes.default.string.isRequired,
-  labelProps: _propTypes.default.objectOf(_propTypes.default.any),
+  labelProps: _propTypes.default.objectOf(_propTypes.default.string),
   // className is needed so that styled(`Input`) will work
   // (as `rest` is not spread on the outermost component)
   className: _propTypes.default.string,

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/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -21,7 +21,7 @@ var _Text = _interopRequireDefault(require("../Text/Text"));
 
 var _TextInputWithDropdown = require("./TextInputWithDropdown.style");
 
-var _excluded = ["value", "options", "onChange", "onSelect", "id", "name", "label", "dropdownInstruction", "className"],
+var _excluded = ["options", "onChange", "onSelect", "id", "name", "label", "dropdownInstruction", "className"],
     _excluded2 = ["options", "dropdownInstruction", "onSelect", "activeOption", "resetActiveOption"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -37,14 +37,13 @@ var KEY_CODE_ESCAPE = 27;
  * This component deals with the visual aspect of a text input with typeahead-style functionality
  *
  * API querying and state management (aside from that related to keyboard usage/accessibility) are
- *  handled by the parent component (via the value, options, onChange and onSelect props)
+ *  handled by the parent component (options, onChange and onSelect props)
  *
  * See the Typeahead and SchoolLookup molecules for the full implementation
  */
 
 var TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
-  var value = _ref.value,
-      options = _ref.options,
+  var options = _ref.options,
       onChange = _ref.onChange,
       onSelect = _ref.onSelect,
       id = _ref.id,
@@ -97,7 +96,6 @@ var TextInputWithDropdown = /*#__PURE__*/_react.default.forwardRef(function (_re
   };
 
   var inputProps = (0, _objectSpread2.default)({
-    value: value,
     onChange: onChange,
     id: id,
     name: name,

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/Donate.js

@@ -98,7 +98,7 @@ var Donate = function Donate(_ref) {
     "aria-live": "polite"
   }, /*#__PURE__*/_react.default.createElement(_Donate.Header, {
     formAlignRight: formAlignRight
-  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, subtitle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Text.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Donate.HeaderInner, null, Boolean(subtitle) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, Boolean(title) && /*#__PURE__*/_react.default.createElement(_Text.default, {
     tag: "h2",
     color: textColor,
     size: "big",
@@ -146,7 +146,8 @@ Donate.defaultProps = {
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
   isDesktopOverride: null,
-  otherAmountValue: null
+  otherAmountValue: null,
+  title: null
 };
 var _default = Donate;
 exports.default = _default;

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

@@ -252,7 +252,8 @@ var Signup = function Signup(_ref) {
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {}
+  data: {},
+  otherAmountValue: null
 };
 var _default = Signup;
 exports.default = _default;

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

@@ -32,7 +32,6 @@ var GivingSelector = function GivingSelector(_ref) {
     value: "Single",
     type: "radio",
     label: "",
-    errormsg: "",
     checked: givingType === 'single',
     onClick: function onClick() {
       return handleGivingTypeChange('single', givingType);
@@ -47,7 +46,6 @@ var GivingSelector = function GivingSelector(_ref) {
     value: "Monthly",
     type: "radio",
     label: "",
-    errormsg: "",
     checked: givingType === 'monthly',
     onClick: function onClick() {
       return handleGivingTypeChange('monthly', givingType);

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

@@ -543,7 +543,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-4"
             label=""
             onClick={[Function]}
@@ -560,7 +559,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-4"
             label=""
             onClick={[Function]}
@@ -1286,7 +1284,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-1"
             label=""
             onClick={[Function]}
@@ -1303,7 +1300,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-1"
             label=""
             onClick={[Function]}

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

@@ -397,7 +397,7 @@ exports[`renders correctly 1`] = `
             Subscribe
           </span>
           <div
-            className="ButtonWithStates__LoaderContainer-sc-7gb81g-1"
+            className=""
           />
         </button>
       </div>

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

@@ -563,7 +563,7 @@ exports[`renders correctly 1`] = `
         className="c2"
       >
         <div
-          className="Footerstyle__SocialIconWrapper-sc-167xaf5-7"
+          className=""
         >
           <ul
             className="c3"

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/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -21,6 +21,8 @@ exports.MarketingPreferencesDS = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 var _reactHookForm = require("react-hook-form");
 
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -221,4 +223,12 @@ MarketingPreferencesDS.defaultProps = {
   copyBottom: _DefaultCopy.defaultCopyBottom,
   id: null,
   formContext: null
+};
+MaybeDisabled.propTypes = {
+  children: _propTypes.default.node,
+  disabled: _propTypes.default.bool
+};
+MaybeDisabled.defaultProps = {
+  children: null,
+  disabled: false
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comicrelief/component-library",
   "author": "Comic Relief Engineering Team",
-  "version": "7.16.0",
+  "version": "7.18.0",
   "main": "dist/index.js",
   "license": "ISC",
   "jest": {
@@ -21,29 +21,29 @@
     "url": "https://github.com/comicrelief/component-library.git"
   },
   "dependencies": {
-    "@babel/cli": "^7.14.8",
+    "@babel/cli": "^7.21.5",
     "@hookform/resolvers": "^1.3.4",
     "axios": "^0.21.1",
     "ejs": "^3.1.9",
-    "jest-styled-components": "^7.0.5",
+    "jest-styled-components": "^7.1.1",
     "lazysizes": "^5.3.2",
     "lodash": "^4.17.11",
     "moment": "^2.29.4",
-    "prop-types": "^15.7.2",
+    "prop-types": "^15.8.1",
     "react": "^17.0.2",
-    "react-canvas-confetti": "^1.3.0",
-    "react-currency-format": "^1.0.0",
+    "react-canvas-confetti": "^1.4.0",
+    "react-currency-format": "^1.1.0",
     "react-dom": "^17.0.2",
     "react-hook-form": "^6.3.0",
-    "react-modal": "^3.14.3",
+    "react-modal": "^3.16.1",
     "react-responsive": "^9.0.2",
     "react-scripts": "4.0.3",
     "react-spinners": "^0.11.0",
     "react-styleguidist": "^11.1.7",
     "react-test-renderer": "^17.0.2",
-    "react-uid": "^2.3.2",
-    "styled-components": "^5.3.1",
-    "youtube-player": "^5.5.2",
+    "react-uid": "^2.3.3",
+    "styled-components": "^5.3.11",
+    "youtube-player": "^5.6.0",
     "yup": "^0.32.9"
   },
   "resolutions": {
@@ -78,13 +78,13 @@
     "cypress": "^8.3.0",
     "eslint": "^7.32.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.0.5",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^26.1.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.3.2",
+    "prettier": "^2.8.8",
     "semantic-release": "^17.4.6"
   }
 }

package/src/components/Atoms/Input/Input.js

@@ -23,7 +23,7 @@ const InputField = styled.input`${({ theme, error, prefixLength }) => css`
   border-color: ${error ? theme.color('red') : theme.color('grey_medium')};
   box-shadow: none;
   appearance: none;
-  color: ${theme.color('black')}; 
+  color: ${theme.color('black')};
   border-radius: ${spacing('sm')};
   font-size: inherit;
   z-index: 2;
@@ -119,7 +119,7 @@ Input.propTypes = {
   id: PropTypes.string.isRequired,
   /** text, email, number, date, search, tel, url, password */
   type: PropTypes.string.isRequired,
-  labelProps: PropTypes.objectOf(PropTypes.any),
+  labelProps: PropTypes.objectOf(PropTypes.string),
   // className is needed so that styled(`Input`) will work
   // (as `rest` is not spread on the outermost component)
   className: PropTypes.string,

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/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -22,14 +22,13 @@ const KEY_CODE_ESCAPE = 27;
  * This component deals with the visual aspect of a text input with typeahead-style functionality
  *
  * API querying and state management (aside from that related to keyboard usage/accessibility) are
- *  handled by the parent component (via the value, options, onChange and onSelect props)
+ *  handled by the parent component (options, onChange and onSelect props)
  *
  * See the Typeahead and SchoolLookup molecules for the full implementation
  */
 const TextInputWithDropdown = React.forwardRef(
   (
     {
-      value,
       options,
       onChange,
       onSelect,
@@ -76,7 +75,6 @@ const TextInputWithDropdown = React.forwardRef(
     };
 
     const inputProps = {
-      value,
       onChange,
       id,
       name,
@@ -178,7 +176,6 @@ const Options = ({
 };
 
 TextInputWithDropdown.propTypes = {
-  value: PropTypes.string.isRequired,
   options: PropTypes.arrayOf(PropTypes.string).isRequired,
   onChange: PropTypes.func.isRequired,
   onSelect: PropTypes.func.isRequired,

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/Donate.js

@@ -92,8 +92,9 @@ const Donate = ({
       <Wrapper formAlignRight={formAlignRight} aria-live="polite">
         <Header formAlignRight={formAlignRight}>
           <HeaderInner>
-            {subtitle && (
+            {Boolean(subtitle) && (
               <>
+                {Boolean(title) && (
                 <Text
                   tag="h2"
                   color={textColor}
@@ -104,6 +105,8 @@ const Donate = ({
                 >
                   {title}
                 </Text>
+                )}
+
                 <Text tag="p" color={textColor} size="m">
                   {subtitle}
                 </Text>
@@ -136,7 +139,7 @@ Donate.propTypes = {
   data: PropTypes.objectOf(PropTypes.shape),
   clientID: PropTypes.string.isRequired,
   donateLink: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   otherAmountText: PropTypes.string,
   subtitle: PropTypes.string,
   formAlignRight: PropTypes.bool,
@@ -182,7 +185,8 @@ Donate.defaultProps = {
   PopUpText: 'Help us deliver long-term impact by converting your single donation into a monthly gift.',
   chooseAmountText: '',
   isDesktopOverride: null,
-  otherAmountValue: null
+  otherAmountValue: null,
+  title: null
 };
 
 export default Donate;

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

@@ -313,12 +313,13 @@ Signup.propTypes = {
   PopUpText: PropTypes.string.isRequired,
   chooseAmountText: PropTypes.string.isRequired,
   submitButtonColor: PropTypes.string.isRequired,
-  otherAmountValue: PropTypes.number.isRequired
+  otherAmountValue: PropTypes.number
 };
 
 Signup.defaultProps = {
   noMoneyBuys: false,
-  data: {}
+  data: {},
+  otherAmountValue: null
 };
 
 export default Signup;

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

@@ -26,7 +26,6 @@ const GivingSelector = ({
           value="Single"
           type="radio"
           label=""
-          errormsg=""
           checked={givingType === 'single'}
           onClick={() => handleGivingTypeChange('single', givingType)}
         />
@@ -40,7 +39,6 @@ const GivingSelector = ({
           value="Monthly"
           type="radio"
           label=""
-          errormsg=""
           checked={givingType === 'monthly'}
           onClick={() => handleGivingTypeChange('monthly', givingType)}
         />

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

@@ -543,7 +543,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-4"
             label=""
             onClick={[Function]}
@@ -560,7 +559,6 @@ exports[`"Single Giving, No Money Buys, with overridden manual input value" rend
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-4"
             label=""
             onClick={[Function]}
@@ -1286,7 +1284,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Single"
             checked={true}
             className="give-once"
-            errormsg=""
             id="give-once--mship-1"
             label=""
             onClick={[Function]}
@@ -1303,7 +1300,6 @@ exports[`Monthly donation renders correctly 1`] = `
             aria-label="Monthly"
             checked={false}
             className="give-monthly"
-            errormsg=""
             id="give-monthly--mship-1"
             label=""
             onClick={[Function]}

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

@@ -397,7 +397,7 @@ exports[`renders correctly 1`] = `
             Subscribe
           </span>
           <div
-            className="ButtonWithStates__LoaderContainer-sc-7gb81g-1"
+            className=""
           />
         </button>
       </div>

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

@@ -563,7 +563,7 @@ exports[`renders correctly 1`] = `
         className="c2"
       >
         <div
-          className="Footerstyle__SocialIconWrapper-sc-167xaf5-7"
+          className=""
         >
           <ul
             className="c3"

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/MarketingPreferencesDS/_MarketingPreferencesDS.js

@@ -263,6 +263,16 @@ MarketingPreferencesDS.defaultProps = {
   formContext: null
 };
 
+MaybeDisabled.propTypes = {
+  children: PropTypes.node,
+  disabled: PropTypes.bool
+};
+
+MaybeDisabled.defaultProps = {
+  children: null,
+  disabled: false
+};
+
 export {
   MarketingPreferencesDS, setInitialValues, buildValidationSchema
 };