@comicrelief/component-library 8.81.0 → 8.83.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 (18) hide show
  1. package/dist/index.cjs.js +669 -685
  2. package/dist/index.es.js +6267 -6278
  3. package/package.json +1 -1
  4. package/src/components/Atoms/Input/Input.js +2 -2
  5. package/src/components/{Organisms → Molecules}/ExpandedButton/ExpandedButton.js +11 -12
  6. package/src/components/{Organisms → Molecules}/ExpandedButton/ExpandedButton.style.js +25 -35
  7. package/src/components/Molecules/ExpandedButton/ExpandedButton.test.js +26 -0
  8. package/src/components/{Organisms → Molecules}/ExpandedButton/ExpandedButtonExample.jsx +21 -12
  9. package/src/components/Molecules/ExpandedButton/__snapshots__/ExpandedButton.test.js.snap +251 -0
  10. package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +62 -72
  11. package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +40 -19
  12. package/src/components/Organisms/MarketingPreferencesDS/assets/{Email--white.svg → Email--red.svg} +1 -1
  13. package/src/components/Organisms/MarketingPreferencesDS/assets/{Phone--white.svg → Phone--red.svg} +3 -3
  14. package/src/components/Organisms/MarketingPreferencesDS/assets/{Post--white.svg → Post--red.svg} +1 -1
  15. package/src/components/Organisms/MarketingPreferencesDS/assets/{Text--white.svg → Text--red.svg} +1 -1
  16. package/src/demos/ExampleDisplay.jsx +37 -36
  17. package/src/demos/index.jsx +3 -3
  18. package/src/index.js +1 -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.81.0",
4
+ "version": "8.83.0",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
7
7
  "files": [
package/src/components/Atoms/Input/Input.js CHANGED
@@ -59,9 +59,9 @@ const InputField = styled.input`${({ theme, $error, $prefixLength }) => css`
59
59
 
60
60
  const ErrorIconWrapper = styled.div`
61
61
  position: absolute;
62
- right: 0.6rem;
62
+ right: 1rem;
63
63
  background: url("${alertIcon}") center/contain no-repeat;
64
- --iconSize: 19px;
64
+ --iconSize: 23px;
65
65
  width: var(--iconSize);
66
66
  height: var(--iconSize);
67
67
  z-index: 3;
package/src/components/{Organisms → Molecules}/ExpandedButton/ExpandedButton.js RENAMED
@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import Arrow from '../../Atoms/Icons/Arrow';
4
4
  import {
5
- Wrapper,
6
5
  Grid,
7
6
  ButtonCard,
8
7
  CardTopWrapper,
@@ -21,8 +20,8 @@ function ExpandedButton({ options = [], selectedId, onSelect }) {
21
20
  }, [onSelect]);
22
21
 
23
22
  return (
24
- <Wrapper>
25
- <Grid>
23
+ <>
24
+ <Grid data-testid="expanded-button-grid">
26
25
  {options.map(option => (
27
26
  <ButtonCard
28
27
  key={option.id}
@@ -31,29 +30,29 @@ function ExpandedButton({ options = [], selectedId, onSelect }) {
31
30
  data-test={`expanded-button-${option.id}`}
32
31
  >
33
32
 
34
- <CardTopWrapper>
33
+ <CardTopWrapper data-testid="expanded-button-card-top-wrapper">
35
34
 
36
- <HeadingContentWrapper>
35
+ <HeadingContentWrapper data-testid="expanded-button-heading-content-wrapper">
37
36
  {option.icon && (
38
- <HeadingIconWrapper>
39
- <img src={option.icon} alt="" />
37
+ <HeadingIconWrapper data-testid="expanded-button-heading-icon-wrapper">
38
+ <img src={option.icon} alt="" data-testid="expanded-button-heading-icon-img" />
40
39
  </HeadingIconWrapper>
41
40
  )}
42
- <CardHeading>{option.title}</CardHeading>
41
+ <CardHeading data-testid="expanded-button-card-heading">{option.title}</CardHeading>
43
42
  </HeadingContentWrapper>
44
43
 
45
- <ArrowWrapper>
46
- <Arrow colour="black" />
44
+ <ArrowWrapper data-testid="expanded-button-arrow-wrapper">
45
+ <Arrow colour="black" data-testid="expanded-button-arrow" />
47
46
  </ArrowWrapper>
48
47
 
49
48
  </CardTopWrapper>
50
49
 
51
- <CardBlurb>{option.description}</CardBlurb>
50
+ <CardBlurb data-testid="expanded-button-card-blurb">{option.description}</CardBlurb>
52
51
 
53
52
  </ButtonCard>
54
53
  ))}
55
54
  </Grid>
56
- </Wrapper>
55
+ </>
57
56
  );
58
57
  }
59
58
 
package/src/components/{Organisms → Molecules}/ExpandedButton/ExpandedButton.style.js RENAMED
@@ -1,28 +1,16 @@
1
1
  import styled from 'styled-components';
2
2
  import crTheme from '../../../theme/crTheme/theme';
3
- import containers from '../../../theme/shared/containers';
4
3
  import Text from '../../Atoms/Text/Text';
5
4
 
6
- const Wrapper = styled.div`
7
- background: ${crTheme.color('grey_light')};
8
- padding: 3rem 1.5rem;
9
- display: flex;
10
- flex-direction: column;
11
- width: 100%;
12
- text-align: center;
13
-
14
- @media ${crTheme.allBreakpoints('M')} {
15
- padding: 3rem 2rem;
16
- }
17
- `;
18
-
19
5
  const Grid = styled.div`
20
6
  display: flex;
21
7
  width: 100%;
22
- max-width: ${containers.medium};
23
8
  margin: 0 auto;
24
9
  flex-direction: column;
25
- gap: 1rem;
10
+ gap: 0.5rem;
11
+ @media ${crTheme.allBreakpoints('M')} {
12
+ gap: 1rem;
13
+ }
26
14
  `;
27
15
 
28
16
  const ButtonCard = styled.button`
@@ -47,33 +35,18 @@ const ButtonCard = styled.button`
47
35
  }
48
36
  `;
49
37
 
50
- const ArrowWrapper = styled.div`
51
- display: flex;
52
- align-items: center;
53
- justify-content: center;
54
- width: 18px;
55
- height: 18px;
56
- transform: rotate(45deg);
57
- flex-shrink: 0;
58
-
59
- svg {
60
- width: auto;
61
- height: auto;
62
- }
63
- `;
64
-
65
38
  const CardTopWrapper = styled.div`
66
39
  margin: 0 0 8px 0;
67
40
  display: flex;
68
41
  flex-direction: row;
69
- align-items: center;
42
+ align-items: flex-start;
70
43
  justify-content: space-between;
71
44
  gap: 0.5rem;
72
45
  `;
73
46
 
74
47
  const HeadingContentWrapper = styled.div`
75
48
  display: flex;
76
- align-items: center;
49
+ align-items: flex-start;
77
50
  `;
78
51
 
79
52
  const HeadingIconWrapper = styled.span`
@@ -90,10 +63,28 @@ const HeadingIconWrapper = styled.span`
90
63
 
91
64
  const CardHeading = styled.h3`
92
65
  font-family: 'Montserrat', sans-serif;
93
- font-size: 16px;
94
66
  font-weight: 700;
95
67
  line-height: 20px;
96
68
  color: ${crTheme.color('black')};
69
+ font-size: 14px;
70
+ @media ${crTheme.allBreakpoints('M')} {
71
+ font-size: 16px;
72
+ }
73
+ `;
74
+
75
+ const ArrowWrapper = styled.div`
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ width: 18px;
80
+ height: 18px;
81
+ transform: rotate(45deg);
82
+ flex-shrink: 0;
83
+
84
+ svg {
85
+ width: auto;
86
+ height: auto;
87
+ }
97
88
  `;
98
89
 
99
90
  const CardBlurb = styled(Text)`
@@ -104,7 +95,6 @@ const CardBlurb = styled(Text)`
104
95
  `;
105
96
 
106
97
  export {
107
- Wrapper,
108
98
  Grid,
109
99
  ButtonCard,
110
100
  CardTopWrapper,
package/src/components/Molecules/ExpandedButton/ExpandedButton.test.js ADDED
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ import 'jest-styled-components';
3
+ import renderWithTheme from '../../../../tests/hoc/shallowWithTheme';
4
+ import ExpandedButton from './ExpandedButton';
5
+
6
+ const options = [
7
+ {
8
+ id: 'option-one',
9
+ title: 'Option one',
10
+ description: 'The first option description',
11
+ icon: 'https://example.com/icon.svg'
12
+ },
13
+ {
14
+ id: 'option-two',
15
+ title: 'Option two',
16
+ description: 'The second option description'
17
+ }
18
+ ];
19
+
20
+ it('renders correctly', () => {
21
+ const tree = renderWithTheme(
22
+ <ExpandedButton options={options} selectedId="option-one" onSelect={() => {}} />
23
+ ).toJSON();
24
+
25
+ expect(tree).toMatchSnapshot();
26
+ });
package/src/components/{Organisms → Molecules}/ExpandedButton/ExpandedButtonExample.jsx RENAMED
@@ -3,6 +3,11 @@ import ExpandedButton from './ExpandedButton';
3
3
  import CalendarIcon from '../../../data/expanded-button-icons/calendar.svg';
4
4
  import HeartHandIcon from '../../../data/expanded-button-icons/heart-hand.svg';
5
5
  import CupcakeIcon from '../../../data/expanded-button-icons/cupcake.svg';
6
+ import styled from 'styled-components';
7
+
8
+ const ExpandedButtonExampleWrapper = styled.div`
9
+ margin-bottom: 50px;
10
+ `;
6
11
 
7
12
  export default function ExpandedButtonExample() {
8
13
  const [selectedId, setSelectedId] = useState('monthly');
@@ -38,18 +43,22 @@ export default function ExpandedButtonExample() {
38
43
 
39
44
  return (
40
45
  <>
41
- <h3>Expanded Button with icons</h3>
42
- <ExpandedButton
43
- options={optionsWithIcons}
44
- selectedId={selectedId}
45
- onSelect={setSelectedId}
46
- />
47
- <h3>Expanded Button without icons</h3>
48
- <ExpandedButton
49
- options={baseOptions}
50
- selectedId={selectedId}
51
- onSelect={setSelectedId}
52
- />
46
+ <ExpandedButtonExampleWrapper data-testid="expanded-button-example-wrapper">
47
+ <h3>Expanded Button with icons</h3>
48
+ <ExpandedButton
49
+ options={optionsWithIcons}
50
+ selectedId={selectedId}
51
+ onSelect={setSelectedId}
52
+ />
53
+ </ExpandedButtonExampleWrapper>
54
+ <ExpandedButtonExampleWrapper data-testid="expanded-button-example-wrapper">
55
+ <h3>Expanded Button without icons</h3>
56
+ <ExpandedButton
57
+ options={baseOptions}
58
+ selectedId={selectedId}
59
+ onSelect={setSelectedId}
60
+ />
61
+ </ExpandedButtonExampleWrapper>
53
62
  </>
54
63
  );
55
64
  }
package/src/components/Molecules/ExpandedButton/__snapshots__/ExpandedButton.test.js.snap ADDED
@@ -0,0 +1,251 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`renders correctly 1`] = `
4
+ .c7 {
5
+ transform: rotate(-90deg);
6
+ fill: #000000;
7
+ }
8
+
9
+ .c8 {
10
+ font-family: 'Montserrat',Helvetica,Arial,sans-serif;
11
+ font-weight: 400;
12
+ text-transform: inherit;
13
+ letter-spacing: 0;
14
+ font-size: 1rem;
15
+ line-height: 1.25rem;
16
+ }
17
+
18
+ .c8 span {
19
+ font-size: inherit;
20
+ line-height: inherit;
21
+ }
22
+
23
+ .c0 {
24
+ display: flex;
25
+ width: 100%;
26
+ margin: 0 auto;
27
+ flex-direction: column;
28
+ gap: 0.5rem;
29
+ }
30
+
31
+ .c1 {
32
+ display: flex;
33
+ flex-direction: column;
34
+ padding: 1rem;
35
+ background: #FFFFFF;
36
+ border: 1px solid #969598;
37
+ border-radius: 8px;
38
+ cursor: pointer;
39
+ flex: 1;
40
+ text-align: left;
41
+ transition: all linear 0.2s;
42
+ width: 100%;
43
+ }
44
+
45
+ .c1:hover {
46
+ background-color: #E1E2E3;
47
+ }
48
+
49
+ .c2 {
50
+ margin: 0 0 8px 0;
51
+ display: flex;
52
+ flex-direction: row;
53
+ align-items: flex-start;
54
+ justify-content: space-between;
55
+ gap: 0.5rem;
56
+ }
57
+
58
+ .c3 {
59
+ display: flex;
60
+ align-items: flex-start;
61
+ }
62
+
63
+ .c4 {
64
+ margin-right: 0.5rem;
65
+ display: inline-flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ }
69
+
70
+ .c4 svg {
71
+ width: auto;
72
+ height: auto;
73
+ }
74
+
75
+ .c5 {
76
+ font-family: 'Montserrat',sans-serif;
77
+ font-weight: 700;
78
+ line-height: 20px;
79
+ color: #000000;
80
+ font-size: 14px;
81
+ }
82
+
83
+ .c6 {
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ width: 18px;
88
+ height: 18px;
89
+ transform: rotate(45deg);
90
+ flex-shrink: 0;
91
+ }
92
+
93
+ .c6 svg {
94
+ width: auto;
95
+ height: auto;
96
+ }
97
+
98
+ .c9 {
99
+ font-size: 14px;
100
+ }
101
+
102
+ @media (min-width: 1024px) {
103
+ .c7 {
104
+ fill: #000000;
105
+ }
106
+ }
107
+
108
+ @media (min-width: 740px) {
109
+ .c8 {
110
+ font-size: 1rem;
111
+ line-height: 1.25rem;
112
+ }
113
+ }
114
+
115
+ @media (min-width: 1024px) {
116
+ .c8 {
117
+ font-size: 1.125rem;
118
+ line-height: 1.375rem;
119
+ }
120
+ }
121
+
122
+ @media (min-width: 740px) {
123
+ .c0 {
124
+ gap: 1rem;
125
+ }
126
+ }
127
+
128
+ @media (min-width: 740px) {
129
+ .c1 {
130
+ padding: 1rem;
131
+ }
132
+ }
133
+
134
+ @media (min-width: 740px) {
135
+ .c5 {
136
+ font-size: 16px;
137
+ }
138
+ }
139
+
140
+ @media (min-width: 740px) {
141
+ .c9 {
142
+ font-size: 16px;
143
+ }
144
+ }
145
+
146
+ <div
147
+ className="c0"
148
+ data-testid="expanded-button-grid"
149
+ >
150
+ <button
151
+ className="c1"
152
+ data-test="expanded-button-option-one"
153
+ onClick={[Function]}
154
+ >
155
+ <div
156
+ className="c2"
157
+ data-testid="expanded-button-card-top-wrapper"
158
+ >
159
+ <div
160
+ className="c3"
161
+ data-testid="expanded-button-heading-content-wrapper"
162
+ >
163
+ <span
164
+ className="c4"
165
+ data-testid="expanded-button-heading-icon-wrapper"
166
+ >
167
+ <img
168
+ alt=""
169
+ data-testid="expanded-button-heading-icon-img"
170
+ src="https://example.com/icon.svg"
171
+ />
172
+ </span>
173
+ <h3
174
+ className="c5"
175
+ data-testid="expanded-button-card-heading"
176
+ >
177
+ Option one
178
+ </h3>
179
+ </div>
180
+ <div
181
+ className="c6"
182
+ data-testid="expanded-button-arrow-wrapper"
183
+ >
184
+ <svg
185
+ className="c7"
186
+ data-testid="expanded-button-arrow"
187
+ height={24}
188
+ viewBox="0 0 15 15"
189
+ width={24}
190
+ xmlns="http://www.w3.org/2000/svg"
191
+ >
192
+ <path
193
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
194
+ />
195
+ </svg>
196
+ </div>
197
+ </div>
198
+ <span
199
+ className="c8 c9"
200
+ data-testid="expanded-button-card-blurb"
201
+ >
202
+ The first option description
203
+ </span>
204
+ </button>
205
+ <button
206
+ className="c1"
207
+ data-test="expanded-button-option-two"
208
+ onClick={[Function]}
209
+ >
210
+ <div
211
+ className="c2"
212
+ data-testid="expanded-button-card-top-wrapper"
213
+ >
214
+ <div
215
+ className="c3"
216
+ data-testid="expanded-button-heading-content-wrapper"
217
+ >
218
+ <h3
219
+ className="c5"
220
+ data-testid="expanded-button-card-heading"
221
+ >
222
+ Option two
223
+ </h3>
224
+ </div>
225
+ <div
226
+ className="c6"
227
+ data-testid="expanded-button-arrow-wrapper"
228
+ >
229
+ <svg
230
+ className="c7"
231
+ data-testid="expanded-button-arrow"
232
+ height={24}
233
+ viewBox="0 0 15 15"
234
+ width={24}
235
+ xmlns="http://www.w3.org/2000/svg"
236
+ >
237
+ <path
238
+ d="M9.58496 1.3501C9.1395 0.88346 8.40641 0.883488 7.96094 1.3501C7.52803 1.80361 7.5281 2.53033 7.96094 2.98389L11.1582 6.3335H1.13672C0.48748 6.3335 0 6.87834 0 7.50049C2.15408e-05 8.12262 0.487494 8.66748 1.13672 8.66748H11.1582L7.96094 12.0171C7.52806 12.4706 7.52899 13.1974 7.96191 13.6509C8.18163 13.8804 8.47556 14.0005 8.77344 14.0005C9.07114 14.0004 9.36533 13.8809 9.58496 13.6509L14.6758 8.31689L14.6748 8.31592L14.6875 8.30322L14.6865 8.30225C14.6954 8.29227 14.7044 8.28494 14.71 8.27783C14.7117 8.27557 14.7133 8.27298 14.7148 8.271C14.7485 8.23215 14.7824 8.18937 14.8135 8.14111L14.8154 8.13818C14.8354 8.1067 14.8493 8.07854 14.8564 8.06396L14.8652 8.04639L14.8662 8.04443L14.8672 8.04346C14.8672 8.04346 14.868 8.0407 14.8691 8.03857C14.8709 8.03524 14.8758 8.02683 14.8799 8.01904L14.8802 8.01851C14.8888 8.00212 14.9034 7.97435 14.917 7.93994V7.93799C14.9303 7.90387 14.9391 7.87297 14.9443 7.854C14.9469 7.8447 14.9498 7.83579 14.9512 7.83057C14.9527 7.82466 14.9535 7.82292 14.9541 7.8208C14.9541 7.8208 14.9542 7.81765 14.9551 7.81494L14.958 7.80615L14.9586 7.80434C14.9631 7.78973 14.9718 7.76131 14.9785 7.72705V7.7251C15.0066 7.57717 15.0066 7.42472 14.9785 7.27686V7.2749L14.958 7.1958L14.9551 7.18604L14.9531 7.18018L14.9512 7.17236C14.9497 7.16652 14.9481 7.15689 14.9453 7.14697C14.9398 7.12707 14.9307 7.09666 14.917 7.06201C14.9032 7.027 14.8885 6.99825 14.8799 6.98193C14.8758 6.97415 14.8709 6.96574 14.8691 6.9624L14.8564 6.93701C14.849 6.92189 14.8351 6.89384 14.8154 6.86279L14.8145 6.86084L14.7529 6.77393C14.7316 6.74671 14.7094 6.72141 14.6875 6.69775C14.6837 6.69353 14.6802 6.68867 14.6758 6.68408L9.58496 1.3501Z"
239
+ />
240
+ </svg>
241
+ </div>
242
+ </div>
243
+ <span
244
+ className="c8 c9"
245
+ data-testid="expanded-button-card-blurb"
246
+ >
247
+ The second option description
248
+ </span>
249
+ </button>
250
+ </div>
251
+ `;