@comicrelief/component-library 8.82.0 → 8.83.1

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/dist/index.cjs.js +518 -527
  2. package/dist/index.es.js +4348 -4349
  3. package/package.json +1 -1
  4. package/src/components/Atoms/Input/Input.js +2 -2
  5. package/src/components/Molecules/ExpandedButton/ExpandedButton.style.js +1 -0
  6. package/src/components/Molecules/ExpandedButton/__snapshots__/ExpandedButton.test.js.snap +1 -0
  7. package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js +62 -72
  8. package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js +40 -19
  9. package/src/components/Organisms/MarketingPreferencesDS/assets/{Email--white.svg → Email--red.svg} +1 -1
  10. package/src/components/Organisms/MarketingPreferencesDS/assets/{Phone--white.svg → Phone--red.svg} +3 -3
  11. package/src/components/Organisms/MarketingPreferencesDS/assets/{Post--white.svg → Post--red.svg} +1 -1
  12. package/src/components/Organisms/MarketingPreferencesDS/assets/{Text--white.svg → Text--red.svg} +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.82.0",
4
+ "version": "8.83.1",
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/Molecules/ExpandedButton/ExpandedButton.style.js CHANGED
@@ -25,6 +25,7 @@ const ButtonCard = styled.button`
25
25
  text-align: left;
26
26
  transition: all linear 0.2s;
27
27
  width: 100%;
28
+ color: ${crTheme.color('black')};
28
29
 
29
30
  &:hover {
30
31
  background-color: ${crTheme.color('grey_medium')};
package/src/components/Molecules/ExpandedButton/__snapshots__/ExpandedButton.test.js.snap CHANGED
@@ -40,6 +40,7 @@ exports[`renders correctly 1`] = `
40
40
  text-align: left;
41
41
  transition: all linear 0.2s;
42
42
  width: 100%;
43
+ color: #000000;
43
44
  }
44
45
 
45
46
  .c1:hover {
package/src/components/Organisms/MarketingPreferencesDS/MarketingPreferencesDS.style.js CHANGED
@@ -1,34 +1,20 @@
1
1
  import styled, { css } from 'styled-components';
2
2
 
3
3
  import spacing from '../../../theme/shared/spacing';
4
- import checkBoxIcon from './assets/CR_Tick_black.svg';
4
+ import checkBoxIcon from './assets/CR_Tick.svg';
5
5
  import TextInput from './_TextInput';
6
6
  import EmailIcon from './assets/Email.svg';
7
7
  import PhoneIcon from './assets/Phone.svg';
8
8
  import PostIcon from './assets/Post.svg';
9
9
  import SMSIcon from './assets/Text.svg';
10
- import EmailIconWhite from './assets/Email--white.svg';
11
- import PhoneIconWhite from './assets/Phone--white.svg';
12
- import PostIconWhite from './assets/Post--white.svg';
13
- import SMSIconWhite from './assets/Text--white.svg';
10
+ import EmailIconRed from './assets/Email--red.svg';
11
+ import PhoneIconRed from './assets/Phone--red.svg';
12
+ import PostIconRed from './assets/Post--red.svg';
13
+ import SMSIconRed from './assets/Text--red.svg';
14
14
 
15
15
  const OuterWrapper = styled.div`
16
16
  display: flex;
17
17
  flex-direction: column;
18
-
19
- /* Preload 'selected' icons */
20
- &:after {
21
- position:absolute;
22
- width: 0;
23
- height: 0;
24
- overflow: hidden;
25
- z-index: -1;
26
- content:
27
- url("${EmailIconWhite}")
28
- url("${PhoneIconWhite}")
29
- url("${PostIconWhite}")
30
- url("${SMSIconWhite}");
31
- }
32
18
  `;
33
19
 
34
20
  const TopCopyWrapper = styled.div`
@@ -49,8 +35,8 @@ const CheckboxWrapper = styled.div`
49
35
  `;
50
36
 
51
37
  const AssociatedFieldsName = styled.span`
52
- padding-left: 40px;
53
- line-height: 30px;
38
+ padding-left: calc(24px + 1rem);
39
+ line-height: 24px;
54
40
  background-repeat: no-repeat;
55
41
  background-position: left center;
56
42
 
@@ -71,54 +57,47 @@ const AssociatedFieldsName = styled.span`
71
57
  }
72
58
  `;
73
59
 
74
- const FormField = styled.div`${({ theme, $isError }) => css`
60
+ const FormField = styled.div`${({ theme, $isErroring }) => css`
75
61
  position: relative;
76
62
  margin-bottom: ${spacing('md')};
77
63
  width: 100%;
78
64
  display: flex;
79
65
  flex-direction: column;
80
66
  padding: ${spacing('m')};
81
- background-color: ${theme.color('grey_light')};
82
- transition: background-color 0.3s, color 0.3s;
67
+ background-color: ${theme.color('white')};
83
68
  border-radius: 0.5rem;
84
- border: 1px solid ${theme.color('grey')};
85
-
86
- &.selected {
87
- background-color: ${$isError ? theme.color('red') : theme.color('blue_donate')};
88
- &:hover {
89
- background-color: ${$isError ? theme.color('red_dark') : theme.color('blue_donate')};
90
- border-color: ${theme.color('grey_4')};
91
- }
92
-
93
- span.icon-mp_permissionEmail {
94
- background-image: url("${EmailIconWhite}");
95
- }
69
+ border: 1px solid ${$isErroring ? theme.color('red') : theme.color('grey')};
70
+ color: ${$isErroring ? theme.color('red') : theme.color('black')};
71
+ span {
72
+ background-size: contain;
73
+ }
96
74
 
97
- span.icon-mp_permissionPhone {
98
- background-image: url("${PhoneIconWhite}");
99
- }
75
+ ${$isErroring && css`
76
+ ${AssociatedFieldsName} {
77
+ &.icon-mp_permissionEmail {
78
+ background-image: url("${EmailIconRed}");
79
+ }
100
80
 
101
- span.icon-mp_permissionPost {
102
- background-image: url("${PostIconWhite}");
103
- }
81
+ &.icon-mp_permissionPhone {
82
+ background-image: url("${PhoneIconRed}");
83
+ }
104
84
 
105
- span.icon-mp_permissionSMS {
106
- background-image: url("${SMSIconWhite}");
107
- }
85
+ &.icon-mp_permissionPost {
86
+ background-image: url("${PostIconRed}");
87
+ }
108
88
 
109
- > div {
110
- label, > span {
111
- color: ${theme.color('white')};
89
+ &.icon-mp_permissionSMS {
90
+ background-image: url("${SMSIconRed}");
112
91
  }
113
92
  }
114
- }
93
+ `}
115
94
 
116
95
  /* All labels; input AND checkbox */
117
96
  label {
118
97
  position: relative;
119
98
  margin-bottom: 0;
120
99
  width: 100%;
121
- color: ${theme.color('black')};
100
+ color: inherit;
122
101
  font-weight: 600;
123
102
  display: flex;
124
103
  justify-content: space-between;
@@ -148,40 +127,52 @@ const CheckContainer = styled.div`${({ theme }) => css`
148
127
  `}`;
149
128
 
150
129
  const CheckLabel = styled.label`${({ theme }) => css`
130
+ position: relative;
151
131
  display: flex;
152
132
  align-items: center;
153
133
  font-size: ${theme.fontSize('xs')};
134
+ cursor: pointer;
154
135
 
155
136
  @media ${theme.allBreakpoints('M')} {
156
137
  font-size: ${theme.fontSize('s')};
157
138
  }
158
139
  `}`;
159
140
 
160
- const CheckInput = styled.input`
161
- font-size: ${({ theme }) => theme.fontSize('sm')};
141
+ const CheckInput = styled.input`${({ theme }) => css`
142
+ font-size: ${theme.fontSize('sm')};
162
143
  display: block;
163
144
  box-sizing: border-box;
164
145
  opacity: 0;
165
146
  position: absolute;
166
- width: 100%;
167
- height: 100%;
168
- left: 0;
169
- top:0;
170
147
  margin: 0;
171
- border: 1px solid ${({ theme }) => theme.color('grey')};
148
+
172
149
  + span {
173
150
  width: 30px;
174
151
  height: 30px;
175
- background-color: ${({ theme }) => theme.color('white')};
176
- border: 1px solid ${({ theme }) => theme.color('grey')};
177
- float: left;
152
+ flex-shrink: 0;
153
+ background-color: ${theme.color('white')};
154
+ border: 1px solid ${theme.color('grey')};
178
155
  border-radius: 0.5rem;
156
+ pointer-events: none;
157
+ }
158
+
159
+ &:not(:checked):hover + span,
160
+ &:not(:checked):focus-visible + span {
161
+ background-color: ${theme.color('grey_extra_light')};
179
162
  }
163
+
180
164
  &:checked + span {
181
- background: url("${checkBoxIcon}") no-repeat center ${({ theme }) => theme.color('white')};
165
+ background: url("${checkBoxIcon}") no-repeat center ${theme.color('red')};
182
166
  background-size: contain;
167
+ border-color: ${theme.color('red')};
183
168
  }
184
- `;
169
+
170
+ &:checked:hover + span,
171
+ &:checked:focus-visible + span {
172
+ background-color: ${theme.color('red_dark')};
173
+ border-color: ${theme.color('red_dark')};
174
+ }
175
+ `}`;
185
176
 
186
177
  const ShowHideInputWrapper = styled.div`
187
178
  display: ${({ $show }) => ($show ? 'block' : 'none')};
@@ -204,7 +195,7 @@ const ExtraInfo = styled.span`
204
195
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
205
196
  margin-bottom: 0rem;
206
197
  margin-top: 1rem;
207
- color: ${({ theme }) => theme.color('black')};
198
+ color: inherit;
208
199
 
209
200
  + label {
210
201
  margin-top: ${spacing('md')};
@@ -227,22 +218,21 @@ const ExtraInfo = styled.span`
227
218
  clip: rect(1px 1px 1px 1px);
228
219
  word-wrap: normal;
229
220
  }
221
+ }
230
222
  }
231
223
  `;
232
224
 
233
- const MPTextInput = styled(TextInput)`
225
+ const MPTextInput = styled(TextInput)`${({ theme, $isErroring }) => css`
226
+ color: ${$isErroring ? theme.color('red') : theme.color('black')};
227
+ margin-top: 1rem;
234
228
  input {
235
- border: 1px solid ${({ theme }) => theme.color('black')};
236
- background-color: ${({ theme }) => theme.color('white')};
237
- @media ${({ theme }) => theme.allBreakpoints('M')} {
229
+ background-color: ${theme.color('white')};
230
+ color: ${$isErroring ? theme.color('red') : theme.color('black')};
231
+ @media ${theme.allBreakpoints('M')} {
238
232
  max-width: none;
239
233
  }
240
234
  }
241
- /* error message text colour */
242
- span {
243
- color: white;
244
- }
245
- `;
235
+ `}`;
246
236
 
247
237
  export {
248
238
  TopCopyWrapper,
package/src/components/Organisms/MarketingPreferencesDS/_MarketingPreferencesDS.js CHANGED
@@ -22,7 +22,7 @@ const MarketingPreferencesDS = ({
22
22
  formContext = null,
23
23
  ...rest
24
24
  }) => {
25
- const { formState: { errors }, control } = formContext;
25
+ const { formState: { errors }, control, getValues } = formContext;
26
26
 
27
27
  // For brevity
28
28
  const emailChoice = useWatch({ control, name: 'mp_permissionEmail', defaultValue: null });
@@ -52,19 +52,35 @@ const MarketingPreferencesDS = ({
52
52
  return errors.mp_address1 || errors.mp_address2
53
53
  || errors.mp_address3 || errors.mp_town || errors.mp_country || errors.mp_postcode;
54
54
  };
55
- /* Only show the field if config hasn't hidden it (to pass in parent values)
56
- or if a choice has been made */
57
- const showEmailField = !mp_permissionEmail.hideInput && (emailChoice || errors.mp_email);
58
- const showSMSField = !mp_permissionSMS.hideInput && (smsChoice || errors.mp_mobile);
59
- const showPhoneField = !mp_permissionPhone.hideInput && (phoneChoice || errors.mp_phone);
60
- const showPostFields = !mp_permissionPost.hideInput && (postChoice || isAddressErroring());
55
+
56
+ const hasStoredAddress = () => [
57
+ 'mp_address1', 'mp_address2', 'mp_address3', 'mp_town', 'mp_country', 'mp_postcode'
58
+ ].some(field => getValues(field));
59
+
60
+ /* Only show the field if config hasn't hidden it (to pass in parent values),
61
+ if a choice has been made, or if the form already has a value in redux (e.g. returning
62
+ back to the page). */
63
+ const showEmailField = !mp_permissionEmail.hideInput && (
64
+ emailChoice || errors.mp_email || getValues('mp_email')
65
+ );
66
+ const showSMSField = !mp_permissionSMS.hideInput && (
67
+ smsChoice || errors.mp_mobile || getValues('mp_mobile')
68
+ );
69
+ const showPhoneField = !mp_permissionPhone.hideInput && (
70
+ phoneChoice || errors.mp_phone || getValues('mp_phone')
71
+ );
72
+ const showPostFields = !mp_permissionPost.hideInput && (
73
+ postChoice || isAddressErroring() || hasStoredAddress()
74
+ );
61
75
 
62
76
  const customId = id ? `marketing-preferences--${id}` : 'marketing-preferences';
63
77
 
64
78
  // Check for field-specific errors
65
79
  const hasEmailError = Boolean(errors.mp_permissionEmail || errors.mp_email);
66
- const hasPostError = Boolean(errors.mp_permissionPost || errors.mp_address1 || errors.mp_address2
67
- || errors.mp_address3 || errors.mp_town || errors.mp_country || errors.mp_postcode);
80
+ const hasPostError = Boolean(errors.mp_permissionPost
81
+ || errors.mp_address1 || errors.mp_address2
82
+ || errors.mp_address3 || errors.mp_town
83
+ || errors.mp_country || errors.mp_postcode);
68
84
  const hasSMSError = Boolean(errors.mp_permissionSMS || errors.mp_mobile);
69
85
  const hasPhoneError = Boolean(errors.mp_permissionPhone || errors.mp_phone);
70
86
 
@@ -76,7 +92,7 @@ const MarketingPreferencesDS = ({
76
92
  {!mp_permissionEmail.disableOption && (
77
93
  <FormField
78
94
  className={`field-email ${emailChoice && 'selected'}`}
79
- $isError={hasEmailError}
95
+ $isErroring={hasEmailError}
80
96
  >
81
97
  <CheckboxWrapper>
82
98
  <OptInCheckbox
@@ -104,6 +120,7 @@ const MarketingPreferencesDS = ({
104
120
  type="email"
105
121
  id="mp_email"
106
122
  formContext={formContext}
123
+ $isErroring={hasEmailError}
107
124
  />
108
125
  </ShowHideInputWrapper>
109
126
  </MaybeDisabled>
@@ -114,7 +131,7 @@ const MarketingPreferencesDS = ({
114
131
  {!mp_permissionPost.disableOption && (
115
132
  <FormField
116
133
  className={`field-post ${postChoice && 'selected'}`}
117
- $isError={hasPostError}
134
+ $isErroring={hasPostError}
118
135
  >
119
136
  <CheckboxWrapper>
120
137
  <OptInCheckbox
@@ -139,6 +156,7 @@ const MarketingPreferencesDS = ({
139
156
  optional={!mp_permissionPost[postChoice]}
140
157
  id="mp_address1"
141
158
  formContext={formContext}
159
+ $isErroring={Boolean(errors.mp_address1)}
142
160
  />
143
161
  <MPTextInput
144
162
  placeholder=""
@@ -147,6 +165,7 @@ const MarketingPreferencesDS = ({
147
165
  optional
148
166
  id="mp_address2"
149
167
  formContext={formContext}
168
+ $isErroring={Boolean(errors.mp_address2)}
150
169
  />
151
170
  <MPTextInput
152
171
  placeholder=""
@@ -155,6 +174,7 @@ const MarketingPreferencesDS = ({
155
174
  optional
156
175
  id="mp_address3"
157
176
  formContext={formContext}
177
+ $isErroring={Boolean(errors.mp_address3)}
158
178
  />
159
179
  <MPTextInput
160
180
  placeholder=""
@@ -163,6 +183,7 @@ const MarketingPreferencesDS = ({
163
183
  optional={!mp_permissionPost[postChoice]}
164
184
  id="mp_town"
165
185
  formContext={formContext}
186
+ $isErroring={Boolean(errors.mp_town)}
166
187
  />
167
188
  <MPTextInput
168
189
  placeholder=""
@@ -171,6 +192,7 @@ const MarketingPreferencesDS = ({
171
192
  optional={!mp_permissionPost[postChoice]}
172
193
  id="mp_postcode"
173
194
  formContext={formContext}
195
+ $isErroring={Boolean(errors.mp_postcode)}
174
196
  />
175
197
  <MPTextInput
176
198
  placeholder=""
@@ -179,6 +201,7 @@ const MarketingPreferencesDS = ({
179
201
  optional={!mp_permissionPost[postChoice]}
180
202
  id="mp_country"
181
203
  formContext={formContext}
204
+ $isErroring={Boolean(errors.mp_country)}
182
205
  />
183
206
  </ShowHideInputWrapper>
184
207
  </MaybeDisabled>
@@ -189,7 +212,7 @@ const MarketingPreferencesDS = ({
189
212
  {!mp_permissionSMS.disableOption && (
190
213
  <FormField
191
214
  className={`field-sms ${smsChoice && 'selected'}`}
192
- $isError={hasSMSError}
215
+ $isErroring={hasSMSError}
193
216
  >
194
217
  <CheckboxWrapper>
195
218
  <OptInCheckbox
@@ -203,9 +226,7 @@ const MarketingPreferencesDS = ({
203
226
  <MaybeDisabled disabled={disableSMSInput}>
204
227
  <ShowHideInputWrapper $show={showSMSField}>
205
228
  <ExtraInfo>
206
- Please confirm the mobile number we will use to
207
- <b> text </b>
208
- you on:
229
+ Please enter a telephone or mobile number:
209
230
  </ExtraInfo>
210
231
  <MPTextInput
211
232
  placeholder=""
@@ -214,6 +235,7 @@ const MarketingPreferencesDS = ({
214
235
  optional={!mp_permissionSMS[smsChoice]}
215
236
  id="mp_mobile"
216
237
  formContext={formContext}
238
+ $isErroring={hasSMSError}
217
239
  />
218
240
  </ShowHideInputWrapper>
219
241
  </MaybeDisabled>
@@ -224,7 +246,7 @@ const MarketingPreferencesDS = ({
224
246
  {!mp_permissionPhone.disableOption && (
225
247
  <FormField
226
248
  className={`field-phone ${phoneChoice && 'selected'}`}
227
- $isError={hasPhoneError}
249
+ $isErroring={hasPhoneError}
228
250
  >
229
251
  <CheckboxWrapper>
230
252
  <OptInCheckbox
@@ -238,9 +260,7 @@ const MarketingPreferencesDS = ({
238
260
  <MaybeDisabled disabled={disablePhoneInput}>
239
261
  <ShowHideInputWrapper $show={showPhoneField}>
240
262
  <ExtraInfo>
241
- Please confirm the telephone number we will use to
242
- <b> phone </b>
243
- you on:
263
+ Please enter a telephone or mobile number
244
264
  </ExtraInfo>
245
265
  <MPTextInput
246
266
  placeholder=""
@@ -249,6 +269,7 @@ const MarketingPreferencesDS = ({
249
269
  optional={!mp_permissionPhone[phoneChoice]}
250
270
  id="mp_phone"
251
271
  formContext={formContext}
272
+ $isErroring={hasPhoneError}
252
273
  />
253
274
  </ShowHideInputWrapper>
254
275
  </MaybeDisabled>
package/src/components/Organisms/MarketingPreferencesDS/assets/{Email--white.svg → Email--red.svg} RENAMED
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#FFFFFF"/>
2
+ <path d="M22 3.5H2C1.4475 3.5 1 3.9475 1 4.5V19.5C1 20.052 1.448 20.5 2 20.5H22C22.552 20.5 23 20.052 23 19.5V4.5C23 3.9475 22.552 3.5 22 3.5ZM19.9495 5.5L12 12.6545L4.0505 5.5H19.9495ZM3 18.5V7.2455L11.331 14.7435C11.521 14.9145 11.7605 15 12 15C12.2395 15 12.479 14.9145 12.669 14.7435L21 7.2455V18.5H3Z" fill="#E52630"/>
3
3
  </svg>
package/src/components/Organisms/MarketingPreferencesDS/assets/{Phone--white.svg → Phone--red.svg} RENAMED
@@ -1,5 +1,5 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#FFFFFF"/>
3
- <path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#FFFFFF"/>
4
- <path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#FFFFFF"/>
2
+ <path d="M11.4995 3.5C11.4995 2.948 11.9475 2.5 12.4995 2.5C17.0415 2.5 21.4995 6.958 21.4995 11.5C21.4995 12.052 21.0515 12.5 20.4995 12.5C19.9475 12.5 19.4995 12.052 19.4995 11.5C19.4995 8.0325 15.967 4.5 12.4995 4.5C11.9475 4.5 11.4995 4.052 11.4995 3.5Z" fill="#E52630"/>
3
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M19.8065 17.3886C18.012 15.5851 16.576 14.1631 14.882 14.2541C13.932 14.3056 13.071 14.8226 12.25 15.8346C12.0505 15.8816 11.1785 15.7606 9.70854 14.2906C8.23804 12.8201 8.11454 11.9496 8.16454 11.7491C9.17604 10.9286 9.69354 10.0676 9.74454 9.11755C9.83751 7.40352 8.41382 5.98733 6.61102 4.19403L6.60954 4.19255L6.20954 3.79305C5.93154 3.51505 5.51704 3.42655 5.15154 3.56405C3.32754 4.24805 2.08754 5.70855 1.66204 7.67605C0.960038 10.9181 2.54404 14.9526 5.79604 18.2046C8.53754 20.9466 11.8355 22.5026 14.7455 22.5026C15.2875 22.5026 15.816 22.4486 16.3245 22.3386C18.292 21.9121 19.752 20.6731 20.4365 18.8486C20.574 18.4816 20.4845 18.0676 20.207 17.7906L19.8065 17.3886ZM15.9005 20.3836C13.358 20.9351 9.94454 19.5246 7.20954 16.7901C4.47504 14.0556 3.06504 10.6441 3.61604 8.09905C3.78504 7.31805 4.21604 6.31955 5.29054 5.70055C6.59004 6.99305 7.79154 8.20805 7.74804 9.00955C7.72904 9.36455 7.43604 9.77105 6.87804 10.2181C6.45104 10.5596 6.19704 11.0826 6.16304 11.6896C6.11804 12.5036 6.45104 13.8611 8.29504 15.7046C10.139 17.5486 11.5 17.8816 12.3105 17.8366C12.918 17.8031 13.4405 17.5491 13.7815 17.1221C14.2285 16.5636 14.635 16.2706 14.99 16.2511C15.81 16.2126 17.007 17.4101 18.2985 18.7086C17.68 19.7831 16.6815 20.2141 15.9005 20.3836Z" fill="#E52630"/>
4
+ <path d="M15.4995 11.5C15.4995 12.052 15.9475 12.5 16.4995 12.5C17.0515 12.5 17.4995 12.052 17.4995 11.5C17.4995 8.93 15.07 6.5 12.4995 6.5C11.9475 6.5 11.4995 6.948 11.4995 7.5C11.4995 8.052 11.9475 8.5 12.4995 8.5C13.9575 8.5 15.4995 10.042 15.4995 11.5Z" fill="#E52630"/>
5
5
  </svg>
package/src/components/Organisms/MarketingPreferencesDS/assets/{Post--white.svg → Post--red.svg} RENAMED
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#FFFFFF"/>
2
+ <path d="M23.4045 5.91958C23.4395 5.84458 23.464 5.76358 23.4795 5.67908C23.483 5.65908 23.488 5.63958 23.49 5.61958C23.492 5.60508 23.4965 5.59158 23.4975 5.57708C23.5035 5.49758 23.4975 5.42008 23.486 5.34408C23.4835 5.32858 23.479 5.31458 23.4755 5.29908C23.4565 5.20708 23.427 5.11908 23.384 5.03758C23.3815 5.03258 23.3815 5.02708 23.3785 5.02208C23.3775 5.02058 23.376 5.01908 23.375 5.01758C23.328 4.93308 23.2675 4.85808 23.1985 4.79058C23.1855 4.77758 23.173 4.76508 23.1595 4.75308C23.09 4.69158 23.0135 4.63958 22.9285 4.59908C22.9165 4.59358 22.904 4.58958 22.892 4.58458C22.8125 4.55058 22.728 4.52658 22.639 4.51408C22.6265 4.51208 22.615 4.50858 22.6025 4.50758C22.5935 4.50658 22.5855 4.50358 22.5765 4.50308L3.0765 3.00308C2.677 2.97108 2.286 3.19058 2.1045 3.55608C1.9235 3.92108 1.9825 4.36008 2.253 4.66458L5.353 8.15208L1.291 9.02258C0.881497 9.11058 0.569497 9.44458 0.509997 9.85958C0.450997 10.2746 0.656997 10.6821 1.026 10.8806L7.102 14.1526L8.016 19.1791C8.0825 19.5451 8.3465 19.8436 8.7015 19.9546C8.8005 19.9856 8.901 20.0006 9.0005 20.0006C9.2615 20.0006 9.517 19.8981 9.7075 19.7076L23.2075 6.20758C23.218 6.19708 23.223 6.18258 23.2335 6.17158C23.2945 6.10558 23.3495 6.03358 23.3915 5.95208C23.3965 5.94158 23.3995 5.93058 23.4045 5.91958ZM5.3935 5.18758L15.5445 5.96858L7.601 7.67058L5.3935 5.18758ZM9.643 16.9441L8.9845 13.3216C8.9305 13.0226 8.7425 12.7641 8.4745 12.6201L4.368 10.4086L19.399 7.18758L9.643 16.9441ZM3.0015 18.0006C2.6345 18.0006 2.2815 17.7981 2.106 17.4476C1.859 16.9536 2.059 16.3531 2.5535 16.1056L4.5535 15.1056C5.0485 14.8576 5.6485 15.0591 5.8955 15.5531C6.1425 16.0471 5.9425 16.6476 5.448 16.8951L3.448 17.8951C3.304 17.9671 3.1515 18.0006 3.0015 18.0006ZM6.7075 18.2936C7.098 18.6841 7.098 19.3171 6.7075 19.7076L4.7075 21.7076C4.512 21.9031 4.2565 22.0006 4.0005 22.0006C3.7445 22.0006 3.489 21.9031 3.2935 21.7076C2.903 21.3171 2.903 20.6841 3.2935 20.2936L5.2935 18.2936C5.684 17.9031 6.317 17.9031 6.7075 18.2936Z" fill="#E52630"/>
3
3
  </svg>
package/src/components/Organisms/MarketingPreferencesDS/assets/{Text--white.svg → Text--red.svg} RENAMED
@@ -1,3 +1,3 @@
1
1
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#FFFFFF"/>
2
+ <path d="M8.5 10.5C8.5 11.327 7.827 12 7 12C6.173 12 5.5 11.327 5.5 10.5C5.5 9.673 6.173 9 7 9C7.827 9 8.5 9.673 8.5 10.5ZM12 9C11.173 9 10.5 9.673 10.5 10.5C10.5 11.327 11.173 12 12 12C12.827 12 13.5 11.327 13.5 10.5C13.5 9.673 12.827 9 12 9ZM17 9C16.173 9 15.5 9.673 15.5 10.5C15.5 11.327 16.173 12 17 12C17.827 12 18.5 11.327 18.5 10.5C18.5 9.673 17.827 9 17 9ZM23 5V16C23 16.1075 22.983 16.2145 22.9485 16.316L20.9485 22.316C20.8205 22.7 20.474 22.9685 20.0705 22.9975C20.047 22.9995 20.0235 23 19.9995 23C19.623 23 19.276 22.7875 19.1055 22.4475L17.382 19H4C2.318 19 1 17.682 1 16V5C1 3.318 2.318 2 4 2H20C21.682 2 23 3.318 23 5ZM21 5C21 4.4205 20.5795 4 20 4H4C3.4205 4 3 4.4205 3 5V16C3 16.5795 3.4205 17 4 17H18C18.379 17 18.725 17.214 18.8945 17.5525L19.815 19.3935L21 15.8375V5Z" fill="#E52630"/>
3
3
  </svg>