@comicrelief/component-library 7.17.0 → 7.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/cypress/integration/components/Organisms/Header.spec.js +134 -135
  2. package/dist/components/Atoms/Logo/Logo.js +6 -1
  3. package/dist/components/Atoms/Logo/assets/CR_LOGO_PRIDE_KEY_RGB.svg +79 -0
  4. package/dist/components/Atoms/Logo/assets/cr-pride-logo.svg +34 -0
  5. package/dist/components/Molecules/Logos/Logos.js +10 -0
  6. package/dist/components/Organisms/Header/Header.md +19 -0
  7. package/package.json +1 -1
  8. package/src/components/Atoms/Logo/Logo.js +4 -1
  9. package/src/components/Atoms/Logo/assets/CR_LOGO_PRIDE_KEY_RGB.svg +79 -0
  10. package/src/components/Atoms/Logo/assets/cr-pride-logo.svg +34 -0
  11. package/src/components/Molecules/Logos/Logos.js +8 -0
  12. package/src/components/Organisms/Header/Header.md +19 -0
package/cypress/integration/components/Organisms/Header.spec.js CHANGED
@@ -1,144 +1,143 @@
1
1
  describe('Header component', () => {
2
- before(() => {
3
- // go to header component
4
- cy.visit('/#header');
2
+ before(() => {
3
+ // go to header component
4
+ cy.visit('/#header');
5
+ });
6
+
7
+ describe('props and methods section', () => {
8
+ beforeEach(() => {
9
+ cy.get('[data-testid="Header-container"] button[name="rsg-usage"]')
10
+ .contains('Props & methods')
11
+ .as('propsBtn');
12
+
13
+ cy.get('@propsBtn')
14
+ .closest('[class^=rsg--tabs]')
15
+ .as('container');
5
16
  });
6
17
 
7
- describe('props and methods section', () => {
8
- beforeEach(() => {
9
- cy.get('[data-testid="Header-container"] button[name="rsg-usage"]')
10
- .contains('Props & methods')
11
- .as('propsBtn');
12
-
13
- cy.get('@propsBtn')
14
- .closest('[class^=rsg--tabs]')
15
- .as('container');
16
- });
17
-
18
- it('is present', () => {
19
- cy.get('@propsBtn').should('exist');
20
- });
21
-
22
- it('does not show table initially', () => {
23
- cy.get('@container')
24
- .find('table')
25
- .should('not.exist');
26
- });
27
-
28
- it('shows the table on button click', () => {
29
- cy.get('@propsBtn').click();
30
- cy.get('@container')
31
- .find('table')
32
- .should('contain', 'Prop name');
33
- });
18
+ it('is present', () => {
19
+ cy.get('@propsBtn').should('exist');
34
20
  });
35
21
 
36
- describe('CR Header section', () => {
37
- beforeEach(() => {
38
- cy.get('[data-testid="Header-example-1"]')
39
- .as('container')
40
- .find('[data-preview="Header"]')
41
- .as('preview');
42
-
43
- cy.get('@container')
44
- .find('button')
45
- .contains('View Code')
46
- .as('viewCodeBtn');
47
- });
48
-
49
- it('renders header preview', () => {
50
- //Logo
51
- cy.get('@container')
52
- .find('[title="Go to Comic Relief homepage"]')
53
- .should('exist');
54
-
55
- //fundraising
56
- cy.viewport('macbook-15');
57
- cy.reload();
58
- cy.get('@container')
59
- .find('nav > ul > li:nth-child(1) a')
60
- .should('have.attr', 'href', 'https://www.comicrelief.com/fundraising/pay-in-your-money');
61
-
62
-
63
- //Donate
64
- cy.get('@container')
65
- .find('header[role="banner"] a[href="/donation"]')
66
- .should('exist')
67
- .contains('Donate');
68
- });
69
-
70
- it('has view code button', () => {
71
- cy.get('@viewCodeBtn').should('exist');
72
- });
73
-
74
- it('shows code on click', () => {
75
- cy.get('@viewCodeBtn').click();
76
- cy.get('@container')
77
- .find('textarea')
78
- .should('exist');
79
- });
80
-
81
- it('closes code on click', () => {
82
- cy.get('@viewCodeBtn').click();
83
- });
22
+ it('does not show table initially', () => {
23
+ cy.get('@container')
24
+ .find('table')
25
+ .should('not.exist');
84
26
  });
85
27
 
86
- describe('CR Header with search and ESU section', () => {
87
- beforeEach(() => {
88
- cy.get('[data-testid="Header-example-5"]')
89
- .as('container')
90
- .find('[data-preview="Header"]')
91
- .as('preview');
92
-
93
- cy.get('@container')
94
- .find('button')
95
- .contains('View Code')
96
- .as('viewCodeBtn');
97
- });
98
-
99
- it('renders CR Header with search and ESU preview', () => {
100
- //Logo
101
- cy.get('@container')
102
- .find('[title="Go to Comic Relief homepage"]')
103
- .should('exist');
104
-
105
- //fundraising
106
- cy.viewport('iphone-6');
107
- cy.reload();
108
- cy.get('@container')
109
- .find('nav > ul > li:nth-child(1) a')
110
- .should('have.attr', 'href', '#');
111
-
112
- //Donate
113
- cy.get('@container')
114
- .find('header[role="banner"] a[href="/donation"]')
115
- .should('exist')
116
- .contains('Donate');
117
-
118
- //search
119
- cy.get('@container')
120
- .find('header[role="banner"] a[href="/search"]')
121
- .should('exist');
122
-
123
- //search
124
- cy.get('@container')
125
- .find('[data-test="header-esu-icon"]')
126
- .should('exist');
127
- });
128
-
129
- it('has view code button', () => {
130
- cy.get('@viewCodeBtn').should('exist');
131
- });
132
-
133
- it('shows code on click', () => {
134
- cy.get('@viewCodeBtn').click();
135
- cy.get('@container')
136
- .find('textarea')
137
- .should('exist');
138
- });
139
-
140
- it('closes code on click', () => {
141
- cy.get('@viewCodeBtn').click();
142
- });
28
+ it('shows the table on button click', () => {
29
+ cy.get('@propsBtn').click();
30
+ cy.get('@container')
31
+ .find('table')
32
+ .should('contain', 'Prop name');
143
33
  });
34
+ });
35
+
36
+ describe('CR Header section', () => {
37
+ beforeEach(() => {
38
+ cy.get('[data-testid="Header-example-1"]')
39
+ .as('container')
40
+ .find('[data-preview="Header"]')
41
+ .as('preview');
42
+
43
+ cy.get('@container')
44
+ .find('button')
45
+ .contains('View Code')
46
+ .as('viewCodeBtn');
47
+ });
48
+
49
+ it('renders header preview', () => {
50
+ // Logo
51
+ cy.get('@container')
52
+ .find('[title="Go to Comic Relief homepage"]')
53
+ .should('exist');
54
+
55
+ // fundraising
56
+ cy.viewport('macbook-15');
57
+ cy.reload();
58
+ cy.get('@container')
59
+ .find('nav > ul > li:nth-child(1) a')
60
+ .should('have.attr', 'href', 'https://www.comicrelief.com/fundraising/pay-in-your-money');
61
+
62
+ // Donate
63
+ cy.get('@container')
64
+ .find('header[role="banner"] a[href="/donation"]')
65
+ .should('exist')
66
+ .contains('Donate');
67
+ });
68
+
69
+ it('has view code button', () => {
70
+ cy.get('@viewCodeBtn').should('exist');
71
+ });
72
+
73
+ it('shows code on click', () => {
74
+ cy.get('@viewCodeBtn').click();
75
+ cy.get('@container')
76
+ .find('textarea')
77
+ .should('exist');
78
+ });
79
+
80
+ it('closes code on click', () => {
81
+ cy.get('@viewCodeBtn').click();
82
+ });
83
+ });
84
+
85
+ describe('CR Header with search and ESU section', () => {
86
+ beforeEach(() => {
87
+ cy.get('[data-testid="Header-example-7"]')
88
+ .as('container')
89
+ .find('[data-preview="Header"]')
90
+ .as('preview');
91
+
92
+ cy.get('@container')
93
+ .find('button')
94
+ .contains('View Code')
95
+ .as('viewCodeBtn');
96
+ });
97
+
98
+ it('renders CR Header with search and ESU preview', () => {
99
+ // Logo
100
+ cy.get('@container')
101
+ .find('[title="Go to Comic Relief homepage"]')
102
+ .should('exist');
103
+
104
+ // fundraising
105
+ cy.viewport('iphone-6');
106
+ cy.reload();
107
+ cy.get('@container')
108
+ .find('nav > ul > li:nth-child(1) a')
109
+ .should('have.attr', 'href', '#');
110
+
111
+ // Donate
112
+ cy.get('@container')
113
+ .find('header[role="banner"] a[href="/donation"]')
114
+ .should('exist')
115
+ .contains('Donate');
116
+
117
+ // search
118
+ cy.get('@container')
119
+ .find('header[role="banner"] a[href="/search"]')
120
+ .should('exist');
121
+
122
+ // search
123
+ cy.get('@container')
124
+ .find('[data-test="header-esu-icon"]')
125
+ .should('exist');
126
+ });
127
+
128
+ it('has view code button', () => {
129
+ cy.get('@viewCodeBtn').should('exist');
130
+ });
131
+
132
+ it('shows code on click', () => {
133
+ cy.get('@viewCodeBtn').click();
134
+ cy.get('@container')
135
+ .find('textarea')
136
+ .should('exist');
137
+ });
138
+
139
+ it('closes code on click', () => {
140
+ cy.get('@viewCodeBtn').click();
141
+ });
142
+ });
144
143
  });
package/dist/components/Atoms/Logo/Logo.js CHANGED
@@ -21,6 +21,8 @@ var _srLogo = _interopRequireDefault(require("./assets/sr-logo.svg"));
21
21
 
22
22
  var _srGameonLogo = _interopRequireDefault(require("./assets/sr-gameon-logo.svg"));
23
23
 
24
+ var _CR_LOGO_PRIDE_KEY_RGB = _interopRequireDefault(require("./assets/CR_LOGO_PRIDE_KEY_RGB.svg"));
25
+
24
26
  var Image = _styledComponents.default.img.withConfig({
25
27
  displayName: "Logo__Image",
26
28
  componentId: "sc-18yiye8-0"
@@ -52,6 +54,9 @@ var themeSwitcher = function themeSwitcher(theme) {
52
54
  case 'Sport Relief Gameon':
53
55
  return _srGameonLogo.default;
54
56
 
57
+ case 'Pride':
58
+ return _CR_LOGO_PRIDE_KEY_RGB.default;
59
+
55
60
  default:
56
61
  return _crLogo.default;
57
62
  }
@@ -68,7 +73,7 @@ var Logo = function Logo(_ref2) {
68
73
  sizeMd: sizeMd
69
74
  }, /*#__PURE__*/_react.default.createElement(Image, {
70
75
  src: themeSwitcher(campaign),
71
- alt: campaign === 'Comic Relief' ? 'Comic Relief logo' : 'Sport Relief logo'
76
+ alt: campaign === 'Comic Relief' || campaign === 'Pride' ? 'Comic Relief logo' : 'Sport Relief logo'
72
77
  }));
73
78
  };
74
79
 
package/dist/components/Atoms/Logo/assets/CR_LOGO_PRIDE_KEY_RGB.svg ADDED
@@ -0,0 +1,79 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Logo_Keyline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
4
+ y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{filter:url(#Adobe_OpacityMaskFilter);}
7
+ .st1{fill:#FFFFFF;}
8
+ .st2{mask:url(#SVGID_1_);}
9
+ .st3{fill:#E52631;}
10
+ .st4{fill:#FF9144;}
11
+ .st5{fill:#FFE400;}
12
+ .st6{fill:#00C100;}
13
+ .st7{fill:#001B9E;}
14
+ .st8{fill:#82008D;}
15
+ .st9{fill:#010101;}
16
+ .st10{fill:#673608;}
17
+ .st11{fill:#49D9EF;}
18
+ .st12{fill:#FFABC7;}
19
+ .st13{fill:#FCF7F4;}
20
+ </style>
21
+ <defs>
22
+ <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56">
23
+ <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
24
+ </filter>
25
+ </defs>
26
+ <mask maskUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56" id="SVGID_1_">
27
+ <g class="st0">
28
+ <rect x="13.07" y="16.74" class="st1" width="473.86" height="473.86"/>
29
+ <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
30
+ 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"/>
31
+ </g>
32
+ </mask>
33
+ <g class="st2">
34
+ <rect x="13.07" y="6.74" class="st3" width="478.3" height="78.98"/>
35
+ <rect x="13.07" y="85.71" class="st4" width="478.3" height="78.98"/>
36
+ <rect x="13.07" y="164.69" class="st5" width="478.3" height="78.98"/>
37
+ <rect x="13.07" y="243.67" class="st6" width="478.3" height="78.98"/>
38
+ <rect x="13.07" y="322.65" class="st7" width="478.3" height="78.98"/>
39
+ <rect x="13.07" y="401.62" class="st8" width="478.3" height="78.98"/>
40
+
41
+ <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"/>
42
+
43
+ <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"/>
44
+
45
+ <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"/>
46
+
47
+ <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"/>
48
+
49
+ <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"/>
50
+ </g>
51
+ <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
52
+ 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
53
+ 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
54
+ 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
55
+ C486.93,21.71,478.29,13.07,467.67,13.06z"/>
56
+ <g id="COMIC_RELIEF_-_optical_tweak_1_">
57
+ <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
58
+ 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
59
+ 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"/>
60
+ <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
61
+ 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
62
+ 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"/>
63
+ <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
64
+ v66.13h-23.76V128.75H260L272.34,187.69z"/>
65
+ <path class="st1" d="M353.84,128.75v116.05h-27.08V128.75H353.84z"/>
66
+ <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
67
+ 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
68
+ 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"/>
69
+ <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
70
+ 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
71
+ 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
72
+ H97.88z"/>
73
+ <path class="st1" d="M204.45,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
74
+ <path class="st1" d="M237.82,255.23v93.76h31.31v22.29h-58.39V255.23H237.82z"/>
75
+ <path class="st1" d="M301.28,255.23v116.05H274.2V255.23H301.28z"/>
76
+ <path class="st1" d="M368.39,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
77
+ <path class="st1" d="M374.68,371.28V255.23h56.55v22.29h-29.47v26.89h21.55v21.92h-21.55v44.95H374.68z"/>
78
+ </g>
79
+ </svg>
package/dist/components/Atoms/Logo/assets/cr-pride-logo.svg ADDED
@@ -0,0 +1,34 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 495 495" style="enable-background:new 0 0 495 495;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#E52631;}
7
+ .st1{fill:#FFFFFF;}
8
+ </style>
9
+ <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
10
+ c11.98,0,21.78,9.8,21.78,21.78v451.44C495.5,485.69,485.7,495.5,473.72,495.5z"/>
11
+ <g id="COMIC_RELIEF_-_optical_tweak">
12
+ <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
13
+ 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
14
+ 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"/>
15
+ <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
16
+ 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
17
+ s10-7.31,10-18.08v-42.31c0-10.77-1.73-18.08-10-18.08s-10,7.31-10,18.08V203.13z"/>
18
+ <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
19
+ v69.05h-24.81V121.39h36.35L271.32,182.94z"/>
20
+ <path class="st1" d="M356.41,121.39v121.17h-28.27V121.39H356.41z"/>
21
+ <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
22
+ 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
23
+ 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"/>
24
+ <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
25
+ 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
26
+ 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
27
+ v32.31H89.16z"/>
28
+ <path class="st1" d="M200.42,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
29
+ <path class="st1" d="M235.27,253.46v97.9h32.7v23.27H207V253.46H235.27z"/>
30
+ <path class="st1" d="M301.53,253.46v121.17h-28.27V253.46H301.53z"/>
31
+ <path class="st1" d="M371.6,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
32
+ <path class="st1" d="M378.18,374.63V253.46h59.05v23.27h-30.77v28.08h22.5v22.89h-22.5v46.93H378.18z"/>
33
+ </g>
34
+ </svg>
package/dist/components/Molecules/Logos/Logos.js CHANGED
@@ -43,6 +43,16 @@ var Logos = function Logos(_ref) {
43
43
  }));
44
44
  }
45
45
 
46
+ if (campaign === 'Pride') {
47
+ return /*#__PURE__*/_react.default.createElement("a", {
48
+ href: "/",
49
+ title: "Go to Comic Relief homepage"
50
+ }, /*#__PURE__*/_react.default.createElement(_Logo.default, {
51
+ rotate: false,
52
+ campaign: "Pride"
53
+ }));
54
+ }
55
+
46
56
  return /*#__PURE__*/_react.default.createElement("a", {
47
57
  href: "/",
48
58
  title: "Go to Comic Relief homepage"
package/dist/components/Organisms/Header/Header.md CHANGED
@@ -36,6 +36,25 @@ import Link from '../../Atoms/Link/Link';
36
36
  />;
37
37
  ```
38
38
 
39
+ # Pride header
40
+
41
+ ```js
42
+ import data from './data/data';
43
+ import Link from '../../Atoms/Link/Link';
44
+
45
+ <Header
46
+ navItems={data}
47
+ campaign="Pride"
48
+ metaIcons={
49
+ <>
50
+ <Link color="green" type="button" href="/donation">
51
+ Donate
52
+ </Link>
53
+ </>
54
+ }
55
+ />;
56
+ ```
57
+
39
58
  # Comic Relief header with Search
40
59
 
41
60
  ```js
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@comicrelief/component-library",
3
3
  "author": "Comic Relief Engineering Team",
4
- "version": "7.17.0",
4
+ "version": "7.18.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Logo/Logo.js CHANGED
@@ -7,6 +7,7 @@ import spacing from '../../../theme/shared/spacing';
7
7
  import crLogo from './assets/cr-logo.svg';
8
8
  import srLogo from './assets/sr-logo.svg';
9
9
  import srLogoGameOn from './assets/sr-gameon-logo.svg';
10
+ import crLogoPride from './assets/CR_LOGO_PRIDE_KEY_RGB.svg';
10
11
 
11
12
  const Image = styled.img`
12
13
  object-fit: cover;
@@ -37,6 +38,8 @@ const themeSwitcher = theme => {
37
38
  return srLogo;
38
39
  case 'Sport Relief Gameon':
39
40
  return srLogoGameOn;
41
+ case 'Pride':
42
+ return crLogoPride;
40
43
  default:
41
44
  return crLogo;
42
45
  }
@@ -49,7 +52,7 @@ const Logo = ({
49
52
  <Image
50
53
  src={themeSwitcher(campaign)}
51
54
  alt={
52
- campaign === 'Comic Relief'
55
+ campaign === 'Comic Relief' || campaign === 'Pride'
53
56
  ? 'Comic Relief logo'
54
57
  : 'Sport Relief logo'
55
58
  }
package/src/components/Atoms/Logo/assets/CR_LOGO_PRIDE_KEY_RGB.svg ADDED
@@ -0,0 +1,79 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <svg version="1.1" id="Logo_Keyline" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
4
+ y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{filter:url(#Adobe_OpacityMaskFilter);}
7
+ .st1{fill:#FFFFFF;}
8
+ .st2{mask:url(#SVGID_1_);}
9
+ .st3{fill:#E52631;}
10
+ .st4{fill:#FF9144;}
11
+ .st5{fill:#FFE400;}
12
+ .st6{fill:#00C100;}
13
+ .st7{fill:#001B9E;}
14
+ .st8{fill:#82008D;}
15
+ .st9{fill:#010101;}
16
+ .st10{fill:#673608;}
17
+ .st11{fill:#49D9EF;}
18
+ .st12{fill:#FFABC7;}
19
+ .st13{fill:#FCF7F4;}
20
+ </style>
21
+ <defs>
22
+ <filter id="Adobe_OpacityMaskFilter" filterUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56">
23
+ <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1 0"/>
24
+ </filter>
25
+ </defs>
26
+ <mask maskUnits="userSpaceOnUse" x="-246.25" y="-7.5" width="738.91" height="735.56" id="SVGID_1_">
27
+ <g class="st0">
28
+ <rect x="13.07" y="16.74" class="st1" width="473.86" height="473.86"/>
29
+ <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
30
+ 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"/>
31
+ </g>
32
+ </mask>
33
+ <g class="st2">
34
+ <rect x="13.07" y="6.74" class="st3" width="478.3" height="78.98"/>
35
+ <rect x="13.07" y="85.71" class="st4" width="478.3" height="78.98"/>
36
+ <rect x="13.07" y="164.69" class="st5" width="478.3" height="78.98"/>
37
+ <rect x="13.07" y="243.67" class="st6" width="478.3" height="78.98"/>
38
+ <rect x="13.07" y="322.65" class="st7" width="478.3" height="78.98"/>
39
+ <rect x="13.07" y="401.62" class="st8" width="478.3" height="78.98"/>
40
+
41
+ <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"/>
42
+
43
+ <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"/>
44
+
45
+ <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"/>
46
+
47
+ <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"/>
48
+
49
+ <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"/>
50
+ </g>
51
+ <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
52
+ 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
53
+ 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
54
+ 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
55
+ C486.93,21.71,478.29,13.07,467.67,13.06z"/>
56
+ <g id="COMIC_RELIEF_-_optical_tweak_1_">
57
+ <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
58
+ 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
59
+ 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"/>
60
+ <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
61
+ 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
62
+ 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"/>
63
+ <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
64
+ v66.13h-23.76V128.75H260L272.34,187.69z"/>
65
+ <path class="st1" d="M353.84,128.75v116.05h-27.08V128.75H353.84z"/>
66
+ <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
67
+ 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
68
+ 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"/>
69
+ <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
70
+ 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
71
+ 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
72
+ H97.88z"/>
73
+ <path class="st1" d="M204.45,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
74
+ <path class="st1" d="M237.82,255.23v93.76h31.31v22.29h-58.39V255.23H237.82z"/>
75
+ <path class="st1" d="M301.28,255.23v116.05H274.2V255.23H301.28z"/>
76
+ <path class="st1" d="M368.39,371.28h-58.76V255.23h58.76v22.29h-32.24v23.76h23.95v22.11h-23.95v25.6h32.24V371.28z"/>
77
+ <path class="st1" d="M374.68,371.28V255.23h56.55v22.29h-29.47v26.89h21.55v21.92h-21.55v44.95H374.68z"/>
78
+ </g>
79
+ </svg>
package/src/components/Atoms/Logo/assets/cr-pride-logo.svg ADDED
@@ -0,0 +1,34 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <!-- Generator: Adobe Illustrator 23.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
3
+ <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"
4
+ viewBox="0 0 495 495" style="enable-background:new 0 0 495 495;" xml:space="preserve">
5
+ <style type="text/css">
6
+ .st0{fill:#E52631;}
7
+ .st1{fill:#FFFFFF;}
8
+ </style>
9
+ <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
10
+ c11.98,0,21.78,9.8,21.78,21.78v451.44C495.5,485.69,485.7,495.5,473.72,495.5z"/>
11
+ <g id="COMIC_RELIEF_-_optical_tweak">
12
+ <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
13
+ 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
14
+ 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"/>
15
+ <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
16
+ 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
17
+ s10-7.31,10-18.08v-42.31c0-10.77-1.73-18.08-10-18.08s-10,7.31-10,18.08V203.13z"/>
18
+ <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
19
+ v69.05h-24.81V121.39h36.35L271.32,182.94z"/>
20
+ <path class="st1" d="M356.41,121.39v121.17h-28.27V121.39H356.41z"/>
21
+ <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
22
+ 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
23
+ 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"/>
24
+ <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
25
+ 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
26
+ 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
27
+ v32.31H89.16z"/>
28
+ <path class="st1" d="M200.42,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
29
+ <path class="st1" d="M235.27,253.46v97.9h32.7v23.27H207V253.46H235.27z"/>
30
+ <path class="st1" d="M301.53,253.46v121.17h-28.27V253.46H301.53z"/>
31
+ <path class="st1" d="M371.6,374.63h-61.36V253.46h61.36v23.27h-33.66v24.81h25v23.08h-25v26.74h33.66V374.63z"/>
32
+ <path class="st1" d="M378.18,374.63V253.46h59.05v23.27h-30.77v28.08h22.5v22.89h-22.5v46.93H378.18z"/>
33
+ </g>
34
+ </svg>
package/src/components/Molecules/Logos/Logos.js CHANGED
@@ -25,6 +25,14 @@ const Logos = ({ campaign }) => {
25
25
  );
26
26
  }
27
27
 
28
+ if (campaign === 'Pride') {
29
+ return (
30
+ <a href="/" title="Go to Comic Relief homepage">
31
+ <Logo rotate={false} campaign="Pride" />
32
+ </a>
33
+ );
34
+ }
35
+
28
36
  return (
29
37
  <a href="/" title="Go to Comic Relief homepage">
30
38
  <Logo rotate={false} campaign="Comic Relief" />
package/src/components/Organisms/Header/Header.md CHANGED
@@ -36,6 +36,25 @@ import Link from '../../Atoms/Link/Link';
36
36
  />;
37
37
  ```
38
38
 
39
+ # Pride header
40
+
41
+ ```js
42
+ import data from './data/data';
43
+ import Link from '../../Atoms/Link/Link';
44
+
45
+ <Header
46
+ navItems={data}
47
+ campaign="Pride"
48
+ metaIcons={
49
+ <>
50
+ <Link color="green" type="button" href="/donation">
51
+ Donate
52
+ </Link>
53
+ </>
54
+ }
55
+ />;
56
+ ```
57
+
39
58
  # Comic Relief header with Search
40
59
 
41
60
  ```js