@comicrelief/component-library 8.78.0 → 8.79.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 (10) hide show
  1. package/dist/index.cjs.js +547 -534
  2. package/dist/index.es.js +4275 -4199
  3. package/package.json +1 -1
  4. package/src/components/Atoms/Logos/Logo.js +4 -4
  5. package/src/components/Atoms/Logos/LogoExample.jsx +2 -7
  6. package/src/components/Atoms/Logos/assets/cr-logo--wide.svg +14 -0
  7. package/src/components/Molecules/LogoLinked/LogoLinked.js +68 -34
  8. package/src/components/Molecules/LogoLinked/LogoLinked.style.js +27 -0
  9. package/src/components/Molecules/LogoLinked/LogoLinkedExample.jsx +26 -7
  10. package/src/components/Atoms/Logos/assets/sr-gameon-logo.svg +0 -1
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": "8.78.0",
4
+ "version": "8.79.0",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
7
7
  "files": [
package/src/components/Atoms/Logos/Logo.js CHANGED
@@ -6,8 +6,8 @@ import zIndex from '../../../theme/shared/zIndex';
6
6
  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
- import srLogoGameOn from './assets/sr-gameon-logo.svg';
10
9
  import crLogoPride from './assets/CR_LOGO_PRIDE_KEY_RGB.svg';
10
+ import crLogoWide from './assets/cr-logo--wide.svg';
11
11
 
12
12
  const Image = styled.img`
13
13
  object-fit: cover;
@@ -32,10 +32,10 @@ const themeSwitcher = theme => {
32
32
  switch (theme) {
33
33
  case 'Sport Relief':
34
34
  return srLogo;
35
- case 'Sport Relief Gameon':
36
- return srLogoGameOn;
37
35
  case 'Pride':
38
36
  return crLogoPride;
37
+ case 'Comic Relief wide':
38
+ return crLogoWide;
39
39
  default:
40
40
  return crLogo;
41
41
  }
@@ -48,7 +48,7 @@ const Logo = ({
48
48
  <Image
49
49
  src={themeSwitcher(campaign)}
50
50
  alt={
51
- campaign === 'Comic Relief' || campaign === 'Pride'
51
+ campaign === 'Comic Relief' || campaign === 'Pride' || campaign === 'Comic Relief wide'
52
52
  ? 'Comic Relief logo'
53
53
  : 'Sport Relief logo'
54
54
  }
package/src/components/Atoms/Logos/LogoExample.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
- import Logo from './Logo';
3
2
  import styled from 'styled-components';
3
+ import Logo from './Logo';
4
4
  import LogoNav2026 from '../LogoNav2026/_LogoNav2026';
5
5
  import { ExampleContainer } from '../../../demos/SharedStyles';
6
6
 
@@ -17,14 +17,9 @@ export default function LogoExample() {
17
17
  <Logo rotate={false} sizeSm="50px" sizeMd="60px" campaign="Sport Relief" />
18
18
  </ExampleContainer>
19
19
 
20
- <ExampleContainer>
21
- <h3>Sport Relief Game On Logo</h3>
22
- <Logo rotate={false} sizeSm="50px" sizeMd="60px" campaign="Sport Relief Gameon" />
23
- </ExampleContainer>
24
-
25
20
  <ExampleContainer>
26
21
  <h3>Logo for Nav 2026 rebuild</h3>
27
- <LogoNav2026/>
22
+ <LogoNav2026 />
28
23
  </ExampleContainer>
29
24
  </>
30
25
  );
package/src/components/Atoms/Logos/assets/cr-logo--wide.svg ADDED
@@ -0,0 +1,14 @@
1
+ <?xml version="1.0" encoding="utf-8"?>
2
+ <svg viewBox="0 0 813 124" fill="none" xmlns="http://www.w3.org/2000/svg">
3
+ <path d="M28.9 83.3C28.9 94 30.2 100.9 38.5 100.9C46.8 100.9 48.1 94 48.1 83.3V70.3H75.5V75.9C75.5 104.1 66.5 123.8 39.1 123.8C10.9 123.8 0 104.8 0 70.2V53.7C0 19 10.9 0.0999756 39.1 0.0999756C66.5 0.0999756 75.5 19.8 75.5 48V53.6H48.1V40.6C48.1 29.9 46.8 23 38.5 23C30.2 23 28.9 29.9 28.9 40.6V83.3Z" fill="#E52630"/>
4
+ <path d="M160 69.3C160 104 149.1 123.7 120.9 123.7C92.6998 123.7 81.7998 104 81.7998 69.3V54.4C81.7998 19.7 92.6998 0 120.9 0C149.1 0 160 19.7 160 54.4V69.3ZM111 82.9C111 93.6 112.7 100.9 121 100.9C129.2 100.9 131 93.6 131 82.9V40.8C131 30.1 129.3 22.8 121 22.8C112.8 22.8 111 30.1 111 40.8V82.9Z" fill="#E52630"/>
5
+ <path d="M217.7 62.8H218.5L230 1.5H265.4V122.2H239.3V53.4H238.5L225.3 122.2H207.7L194.1 53.4H193.3V122.2H168.6V1.5H204.8L217.7 62.8Z" fill="#E52630"/>
6
+ <path d="M304.3 1.5V122.2H276.1V1.5H304.3Z" fill="#E52630"/>
7
+ <path d="M342.1 83.3C342.1 94 343.4 100.9 351.7 100.9C359.9 100.9 361.3 94 361.3 83.3V70.3H388.7V75.9C388.7 104.1 379.7 123.8 352.3 123.8C324.1 123.8 313.2 104.8 313.2 70.2V53.7C313.2 19 324.1 0.0999756 352.3 0.0999756C379.7 0.0999756 388.7 19.8 388.7 48V53.6H361.3V40.6C361.3 29.9 360 23 351.7 23C343.5 23 342.1 29.9 342.1 40.6V83.3Z" fill="#E52630"/>
8
+ <path d="M472.2 122.2C470.7 117.6 470.3 110.5 469.5 96C468.9 84.5 466.1 78.6 457.2 78.6H453.6V122.3H425.8V1.5H460.5C487.5 1.5 499.6 15.7 499.6 37.1C499.6 56.1 491 65.5 478.7 67.6C491.3 70.5 495.6 79.5 496.5 94.6C497.5 110.5 497.3 116.6 499.9 122.2H472.2ZM456.3 56.3C467.6 56.3 472 52.7 472 40.4C472 29.5 467.6 24.1 456.3 24.1H453.6V56.3H456.3Z" fill="#E52630"/>
9
+ <path d="M569 122.2H507.9V1.5H569V24.7H535.5V49.4H560.4V72.4H535.5V99H569V122.2Z" fill="#E52630"/>
10
+ <path d="M605.6 1.5V99H638.2V122.2H577.5V1.5H605.6Z" fill="#E52630"/>
11
+ <path d="M673.5 1.5V122.2H645.4V1.5H673.5Z" fill="#E52630"/>
12
+ <path d="M745.2 122.2H684.1V1.5H745.2V24.7H711.7V49.4H736.6V72.4H711.7V99H745.2V122.2Z" fill="#E52630"/>
13
+ <path d="M753.7 122.2V1.5H812.5V24.7H781.9V52.7H804.3V75.5H781.9V122.2H753.7Z" fill="#E52630"/>
14
+ </svg>
package/src/components/Molecules/LogoLinked/LogoLinked.js CHANGED
@@ -1,60 +1,92 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
- import styled from 'styled-components';
4
3
 
5
4
  import Logo from '../../Atoms/Logos/Logo';
6
- import { logoRotateAnimation } from '../../../theme/shared/animations';
7
-
8
- const TitleLabel = styled.span`
9
- line-height: 0;
10
- font-size: 0;
11
- color: transparent;
12
- `;
13
-
14
- const LogoLink = styled.a`
15
- ${({ animateRotate }) => logoRotateAnimation(animateRotate)}
16
- `;
5
+ import { TitleLabel, LogoLink } from './LogoLinked.style';
17
6
 
18
7
  const LogoLinked = ({
19
8
  sizeSm, sizeMd,
20
- campaign = 'Comic Relief', title = 'Go to Comic Relief homepage', url = '/', animateRotate = false
9
+ campaign = 'Comic Relief',
10
+ title = 'Go to Comic Relief homepage',
11
+ url = '/',
12
+ animateRotate = false,
13
+ animatePulse = false,
14
+ newTab = false
21
15
  }) => {
22
- if (campaign === 'Sport Relief Gameon') {
16
+ if (campaign === 'Sport Relief') {
23
17
  return (
24
- <>
25
- <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
26
- <Logo rotate sizeSm="50px" sizeMd="60px" campaign="Comic Relief" title="Go to Comic Relief homepage" />
27
- <TitleLabel>Go to Comic Relief homepage</TitleLabel>
28
- </LogoLink>
29
- <LogoLink href="/sportrelief/" title="Go to Sport Relief homepage" animateRotate={animateRotate}>
30
- <Logo sizeSm="100px" sizeMd="120px" campaign="Sport Relief Gameon" title="Go to Sport Relief homepage" />
31
- <TitleLabel>Go to Sport Relief homepage</TitleLabel>
32
- </LogoLink>
33
- </>
18
+ <LogoLink
19
+ href={url}
20
+ title="Go to Sport Relief homepage"
21
+ target={newTab ? '_blank' : '_self'}
22
+ animateRotate={animateRotate}
23
+ >
24
+ <Logo
25
+ rotate={false}
26
+ campaign="Sport Relief"
27
+ title="Sport Relief in homepage"
28
+ />
29
+ <TitleLabel>Go to Sport Relief homepage</TitleLabel>
30
+ </LogoLink>
34
31
  );
35
32
  }
36
33
 
37
- if (campaign === 'Sport Relief') {
34
+ if (campaign === 'Pride') {
38
35
  return (
39
- <LogoLink href={url} title="Go to Sport Relief homepage" animateRotate={animateRotate}>
40
- <Logo rotate={false} campaign="Sport Relief" title="Sport Relief in homepage" />
41
- <TitleLabel>Go to Sport Relief homepage</TitleLabel>
36
+ <LogoLink
37
+ href={url}
38
+ title="Go to Comic Relief homepage"
39
+ target={newTab ? '_blank' : '_self'}
40
+ animateRotate={animateRotate}
41
+ >
42
+ <Logo
43
+ rotate={false}
44
+ campaign="Pride"
45
+ title="Go to Comic Relief homepage"
46
+ sizeSm={sizeSm}
47
+ sizeMd={sizeMd}
48
+ />
49
+ <TitleLabel>Go to Comic Relief homepage</TitleLabel>
42
50
  </LogoLink>
43
51
  );
44
52
  }
45
53
 
46
- if (campaign === 'Pride') {
54
+ // Our 'modern' alt, as used within the CRcom header nav
55
+ // (which exists 100% within that codebase, for now):
56
+ if (campaign === 'Comic Relief wide') {
47
57
  return (
48
- <LogoLink href={url} title="Go to Comic Relief homepage" animateRotate={animateRotate}>
49
- <Logo rotate={false} campaign="Pride" title="Go to Comic Relief homepage" sizeSm={sizeSm} sizeMd={sizeMd} />
58
+ <LogoLink
59
+ href={url}
60
+ title="Go to Comic Relief homepage"
61
+ target={newTab ? '_blank' : '_self'}
62
+ animatePulse={animatePulse}
63
+ >
64
+ <Logo
65
+ rotate={false}
66
+ campaign="Comic Relief wide"
67
+ title="Go to Comic Relief homepage"
68
+ sizeSm={sizeSm}
69
+ sizeMd={sizeMd}
70
+ />
50
71
  <TitleLabel>Go to Comic Relief homepage</TitleLabel>
51
72
  </LogoLink>
52
73
  );
53
74
  }
54
75
 
55
76
  return (
56
- <LogoLink href={url} title={title} animateRotate={animateRotate}>
57
- <Logo rotate={false} campaign="Comic Relief" title={title} sizeSm={sizeSm} sizeMd={sizeMd} />
77
+ <LogoLink
78
+ href={url}
79
+ title={title}
80
+ target={newTab ? '_blank' : '_self'}
81
+ animateRotate={animateRotate}
82
+ >
83
+ <Logo
84
+ rotate={false}
85
+ campaign="Comic Relief"
86
+ title={title}
87
+ sizeSm={sizeSm}
88
+ sizeMd={sizeMd}
89
+ />
58
90
  <TitleLabel>{title}</TitleLabel>
59
91
  </LogoLink>
60
92
  );
@@ -63,10 +95,12 @@ const LogoLinked = ({
63
95
  LogoLinked.propTypes = {
64
96
  campaign: PropTypes.string,
65
97
  animateRotate: PropTypes.bool,
98
+ animatePulse: PropTypes.bool,
66
99
  title: PropTypes.string,
67
100
  url: PropTypes.string,
68
101
  sizeSm: PropTypes.string,
69
- sizeMd: PropTypes.string
102
+ sizeMd: PropTypes.string,
103
+ newTab: PropTypes.bool
70
104
  };
71
105
 
72
106
  export default LogoLinked;
package/src/components/Molecules/LogoLinked/LogoLinked.style.js ADDED
@@ -0,0 +1,27 @@
1
+ import styled, { css } from 'styled-components';
2
+ import { logoRotateAnimation, pulseInAnimation, pulseOutAnimation } from '../../../theme/shared/animations';
3
+
4
+ const TitleLabel = styled.span`
5
+ line-height: 0;
6
+ font-size: 0;
7
+ color: transparent;
8
+ `;
9
+
10
+ const LogoLink = styled.a`
11
+ ${({ animateRotate }) => logoRotateAnimation(animateRotate)}
12
+
13
+ ${({ animatePulse }) => animatePulse && css`
14
+ img {
15
+ ${pulseOutAnimation};
16
+ }
17
+
18
+ &:hover,
19
+ &:focus {
20
+ img {
21
+ ${pulseInAnimation};
22
+ }
23
+ }
24
+ `}
25
+ `;
26
+
27
+ export { TitleLabel, LogoLink };
package/src/components/Molecules/LogoLinked/LogoLinkedExample.jsx CHANGED
@@ -11,23 +11,42 @@ export default function LogoLinkedExample() {
11
11
  </ExampleContainer>
12
12
 
13
13
  <ExampleContainer>
14
- <h3>Sport Relief</h3>
15
- <LogoLinked campaign="Sport Relief" sizeSm="50px" sizeMd="60px" />
14
+ <h3>Comic Relief wide, w/pulse animation and new tab functionality</h3>
15
+ <LogoLinked
16
+ campaign="Comic Relief wide"
17
+ sizeSm="150px"
18
+ sizeMd="150px"
19
+ url="https://www.comicrelief.com"
20
+ newTab
21
+ animatePulse
22
+ />
16
23
  </ExampleContainer>
17
24
 
18
25
  <ExampleContainer>
19
- <h3>Sport Relief Gameon</h3>
20
- <LogoLinked campaign="Sport Relief Gameon" sizeSm="50px" sizeMd="60px" />
26
+ <h3>Sport Relief</h3>
27
+ <LogoLinked
28
+ campaign="Sport Relief"
29
+ sizeSm="50px"
30
+ sizeMd="60px"
31
+ />
21
32
  </ExampleContainer>
22
33
 
23
34
  <ExampleContainer>
24
35
  <h3>Pride</h3>
25
- <LogoLinked campaign="Pride" sizeSm="50px" sizeMd="60px" />
36
+ <LogoLinked
37
+ campaign="Pride"
38
+ sizeSm="50px"
39
+ sizeMd="60px"
40
+ />
26
41
  </ExampleContainer>
27
42
 
28
43
  <ExampleContainer>
29
- <h3>With rotation animation</h3>
30
- <LogoLinked sizeSm="50px" sizeMd="60px" animateRotate />
44
+ <h3>Comic Relief (default) w/rotation animation</h3>
45
+ <LogoLinked
46
+ sizeSm="50px"
47
+ sizeMd="60px"
48
+ animateRotate
49
+ />
31
50
  </ExampleContainer>
32
51
  </>
33
52
  );
package/src/components/Atoms/Logos/assets/sr-gameon-logo.svg DELETED
@@ -1 +0,0 @@
1
- <svg id="LOGO" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 510.46 230.57"><defs><style>.cls-1{fill:#3a4972}.cls-2{fill:#e62731}.cls-3{fill:#fff}</style></defs><title>SR+IGO_LOGO_RGB</title><path class="cls-1" d="M239.92 32.69v55.36H227V32.69zM255.66 88.05V43.32h-10.55V32.69h34.19v10.63h-10.81v44.73zM284.58 32.69h12.56v10.63c0 7.56-3.95 10.9-12.56 11.16V48.6c3.78-.09 5.62-1.23 5.71-4.66h-5.71zM312.53 69.34v2.19c0 4.13 1.75 6.86 5.18 6.86 3 0 4.57-1.67 4.57-4.75s-2-4.39-5.36-6.24l-4.66-2.55c-5.88-3.25-11-7.2-11-16.69 0-9.85 6.41-16.17 15.9-16.17 10.11 0 15.91 5.8 15.91 17.13v2.2h-11.31V49c0-4.48-1.41-6.67-4.58-6.67-2.72 0-4.13 1.93-4.13 4.92 0 2.81 1.59 4.57 4.22 6l5.19 2.82c7.29 4 11.68 7.82 11.68 16.43 0 10.72-6.59 16.26-16.43 16.26s-16.52-5.45-16.52-17.32v-2.1zM377.39 88.05l-1-4.92c-1.4 3.78-5.36 5.63-9.75 5.63-11 0-15.64-8.7-15.64-24.61v-7.56c0-15.9 5.18-24.6 17.84-24.6S386 39.9 386 52.81v1.41h-12.56v-3.69c0-4.92-.79-8.09-4.57-8.09s-4.57 3.17-4.57 8.09V70c0 4.92 1.05 8.09 4.74 8.09s4.75-3.17 4.75-8.09v-.79h-4v-9.72H386v28.56zM417.3 32.69l11.95 55.36h-12.83l-1.85-9.84h-10.89l-1.94 9.84H390l11.95-55.36zm-11.78 35.77h7.3l-3.34-18.28h-.35zM455.89 60.81h.35l5.27-28.12h16.26v55.36h-11.95V56.51h-.35l-6.07 31.54h-8.08l-6.24-31.54h-.35v31.54h-11.34V32.69H450zM511.88 88.05h-28V32.69h28v10.63H496.5v11.34h11.42v10.55H496.5v12.21h15.38zM256.36 223.11a65.22 65.22 0 0 1-35.71-59.33 65.22 65.22 0 0 1 35.71-59.32q16.74-8.74 37.75-8.74t37.75 8.74a65.22 65.22 0 0 1 35.71 59.32 65.22 65.22 0 0 1-35.71 59.33q-16.74 8.73-37.75 8.74t-37.75-8.74zm52.54-30.78A28.53 28.53 0 0 0 319.4 181a36.07 36.07 0 0 0 3.91-17.21 36.08 36.08 0 0 0-3.91-17.2 28.66 28.66 0 0 0-10.5-11.34 29.32 29.32 0 0 0-29.57 0 28.68 28.68 0 0 0-10.51 11.34 36.2 36.2 0 0 0-3.91 17.2 36.18 36.18 0 0 0 3.91 17.21 28.55 28.55 0 0 0 10.51 11.34 29.32 29.32 0 0 0 29.57 0zM511.88 98.7v130.17H475.8l-49.47-59.13v59.13h-42.77V98.7h36.08l49.47 59.13V98.7z" transform="translate(-1.42 -1.42)"/><path class="cls-2" d="M230.22 96.69A115.27 115.27 0 1 1 96.69 3.19a115.27 115.27 0 0 1 133.53 93.5" transform="translate(-1.42 -1.42)"/><path class="cls-3" d="M45.32 109.66l.33 1.91c.64 3.59 2.58 5.69 5.56 5.16 2.6-.45 3.72-2.15 3.25-4.82s-2.43-3.51-5.62-4.6l-4.44-1.51c-5.62-1.92-10.65-4.58-12.11-12.83-1.51-8.55 3.1-15 11.35-16.49 8.79-1.55 14.72 2.6 16.45 12.46l.34 1.91-9.85 1.73-.35-2c-.69-3.9-2.25-5.59-5-5.11-2.37.42-3.3 2.32-2.84 4.91S44.47 94.13 47 95l4.93 1.65c7 2.32 11.36 5 12.68 12.5 1.65 9.32-3.23 15.14-11.79 16.65s-15.2-2.2-17-12.52l-.32-1.83zM80.58 120.22l-11.16 2-8.48-48.16 13.6-2.4C85.08 69.8 91.07 74.73 92.89 85s-2.11 17.12-12.66 19l-2.44.43zm-3.25-25.11C82 94.29 83 92.23 82.05 87s-2.56-7-7.22-6.13l-1.15.21 2.51 14.21zM127.59 90.19c2.44 13.83-.53 22.47-11.76 24.45s-17-5.12-19.41-19l-1-6c-2.44-13.83.52-22.47 11.76-24.45s17 5.12 19.41 19zM109 99.06c.75 4.28 2 7.06 5.23 6.48s3.47-3.6 2.71-7.88l-3-16.8c-.76-4.28-2-7.07-5.24-6.49s-3.43 3.63-2.7 7.89zM152.39 107.56c-.93-1.73-1.58-4.53-2.91-10.28-1-4.54-2.61-6.71-6.12-6.09l-1.45.26 3.09 17.42-11.08 1.95-8.48-48.13 13.82-2.44c10.78-1.9 16.59 2.9 18.09 11.46 1.34 7.56-1.44 11.91-6.18 13.62 5.24.25 7.56 3.55 9 9.52 1.5 6.27 1.86 8.73 3.32 10.76zm-11-25.16c4.5-.8 6-2.56 5.14-7.45-.77-4.35-2.9-6.18-7.41-5.39l-1.07.19 2.27 12.83zM173.55 103.83l-6.85-38.89-9.17 1.62-1.63-9.25 29.72-5.24 1.63 9.25-9.4 1.68 6.86 38.89zM67.46 178.49c-.94-1.72-1.59-4.52-2.92-10.27-1-4.55-2.6-6.71-6.11-6.09l-1.45.25 3.07 17.42L49 181.75l-8.49-48.13 13.83-2.43c10.77-1.9 16.58 2.9 18.09 11.46 1.33 7.56-1.44 11.91-6.18 13.61 5.24.26 7.55 3.55 9 9.52 1.5 6.28 1.85 8.73 3.32 10.76zm-11-25.16c4.51-.79 6-2.55 5.15-7.44-.77-4.36-2.9-6.19-7.41-5.39l-1.07.19 2.26 12.83zM105.35 171.81L81 176.11 72.49 128l24.37-4.3 1.63 9.25-13.37 2.35 1.74 9.86 9.93-1.75 1.62 9.17-9.93 1.75 1.87 10.62 13.37-2.36zM111 121.19l6.85 38.89 13-2.29 1.63 9.24-24.22 4.27-8.48-48.13zM137.81 116.46l8.49 48.13-11.23 2-8.49-48.13zM174 159.7l-24.34 4.3-8.49-48.13 24.38-4.3 1.63 9.25-13.37 2.35 1.73 9.86 9.94-1.75 1.61 9.17-9.93 1.75 1.84 10.62 13.37-2.36zM176.94 159.19l-8.49-48.13 23.45-4.14 1.63 9.25-12.22 2.15 2 11.16 8.93-1.58 1.61 9.09-8.94 1.58 3.29 18.64z" transform="translate(-1.42 -1.42)"/></svg>