@comicrelief/component-library 8.0.2 → 8.1.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.
@@ -109,18 +109,23 @@ const ShowHideInputWrapper = exports.ShowHideInputWrapper = _styledComponents.de
109
109
  const ExtraInfo = exports.ExtraInfo = _styledComponents.default.span.withConfig({
110
110
  displayName: "MarketingPreferencesDSstyle__ExtraInfo",
111
111
  componentId: "sc-68n85q-9"
112
- })(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0.5rem;+ label{margin-top:20px;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"]);
112
+ })(["display:block;width:100%;font-size:1rem;text-transform:inherit;font-weight:normal;line-height:normal;font-family:'Montserrat',Helvetica,Arial,sans-serif;margin-bottom:0.5rem;color:", ";+ label{margin-top:20px;&[for=\"mp_email\"],&[for=\"mp_mobile\"],&[for=\"mp_phone\"]{> span:first-child{position:absolute;margin:-1px;padding:0;width:1px;height:1px;border:0;overflow:hidden;clip:rect(1px 1px 1px 1px);word-wrap:normal;}}"], _ref13 => {
113
+ let {
114
+ theme
115
+ } = _ref13;
116
+ return theme.color('grey_dark');
117
+ });
113
118
  const MPTextInput = exports.MPTextInput = (0, _styledComponents.default)(_TextInput.default).withConfig({
114
119
  displayName: "MarketingPreferencesDSstyle__MPTextInput",
115
120
  componentId: "sc-68n85q-10"
116
- })(["input{border:1px solid ", ";;@media ", "{max-width:none;}}"], _ref13 => {
121
+ })(["input{border:1px solid ", ";;@media ", "{max-width:none;}}"], _ref14 => {
117
122
  let {
118
123
  theme
119
- } = _ref13;
124
+ } = _ref14;
120
125
  return theme.color('black');
121
- }, _ref14 => {
126
+ }, _ref15 => {
122
127
  let {
123
128
  theme
124
- } = _ref14;
129
+ } = _ref15;
125
130
  return theme.allBreakpoints('M');
126
131
  });
@@ -31,7 +31,7 @@ const Item = styled.div`
31
31
 
32
32
  <div>
33
33
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
34
- Primary
34
+ Primary (CR Theme)
35
35
  </Text>
36
36
  <Grid>
37
37
  <Item>
@@ -277,7 +277,7 @@ const Item = styled.div`
277
277
  </Item>
278
278
  </Grid>
279
279
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
280
- Accent Colours
280
+ Accent Colours (CR Theme)
281
281
  </Text>
282
282
  <Text tag="h3" color="black" size="xs">
283
283
  Used for highlighted actions and content
@@ -319,5 +319,22 @@ const Item = styled.div`
319
319
  </Card>
320
320
  </Item>
321
321
  </Grid>
322
+
323
+ <Text tag="h3" family="Anton" uppercase color="black" size="l">
324
+ Additional Colours (CR Theme)
325
+ </Text>
326
+ <Text tag="h3" color="black" size="xs">
327
+ Currently, just one new colour used exclusively in the Donate widget on CRcom and the 2024 Donate build
328
+ </Text>
329
+ <Grid>
330
+ <Item>
331
+ <Card backgroundColor="blue_donate" height="auto">
332
+ <Text tag="h3" color="white" size="xs">
333
+ Blue Donate
334
+ </Text>
335
+ <Text tag="p" color="white">#2042AD</Text>
336
+ </Card>
337
+ </Item>
338
+ </Grid>
322
339
  </div>;
323
340
  ```
@@ -8,6 +8,7 @@ const colors = {
8
8
  black: '#000000',
9
9
  blue: '#0565D1',
10
10
  blue_dark: '#274084',
11
+ blue_donate: '#2042AD',
11
12
  blue_light: '#BECCF9',
12
13
  blue_royal: '#6489FC',
13
14
  coral: '#F9686D',
@@ -9,6 +9,7 @@ const colors = {
9
9
  black_dark: '#030e1a',
10
10
  blue: '#223c59',
11
11
  blue_dark: '#3a4972',
12
+ blue_donate: '#2042AD',
12
13
  blue_light: '#274084',
13
14
  blue_royal: '#6489FC',
14
15
  coral: '#FF6F61',
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.0.2",
4
+ "version": "8.1.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
@@ -138,6 +138,7 @@ const ExtraInfo = styled.span`
138
138
  line-height: normal;
139
139
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
140
140
  margin-bottom: 0.5rem;
141
+ color: ${({ theme }) => theme.color('grey_dark')};
141
142
 
142
143
  + label {
143
144
  margin-top: 20px;
@@ -31,7 +31,7 @@ const Item = styled.div`
31
31
 
32
32
  <div>
33
33
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
34
- Primary
34
+ Primary (CR Theme)
35
35
  </Text>
36
36
  <Grid>
37
37
  <Item>
@@ -277,7 +277,7 @@ const Item = styled.div`
277
277
  </Item>
278
278
  </Grid>
279
279
  <Text tag="h3" family="Anton" uppercase color="black" size="l">
280
- Accent Colours
280
+ Accent Colours (CR Theme)
281
281
  </Text>
282
282
  <Text tag="h3" color="black" size="xs">
283
283
  Used for highlighted actions and content
@@ -319,5 +319,22 @@ const Item = styled.div`
319
319
  </Card>
320
320
  </Item>
321
321
  </Grid>
322
+
323
+ <Text tag="h3" family="Anton" uppercase color="black" size="l">
324
+ Additional Colours (CR Theme)
325
+ </Text>
326
+ <Text tag="h3" color="black" size="xs">
327
+ Currently, just one new colour used exclusively in the Donate widget on CRcom and the 2024 Donate build
328
+ </Text>
329
+ <Grid>
330
+ <Item>
331
+ <Card backgroundColor="blue_donate" height="auto">
332
+ <Text tag="h3" color="white" size="xs">
333
+ Blue Donate
334
+ </Text>
335
+ <Text tag="p" color="white">#2042AD</Text>
336
+ </Card>
337
+ </Item>
338
+ </Grid>
322
339
  </div>;
323
340
  ```
@@ -2,6 +2,7 @@ const colors = {
2
2
  black: '#000000',
3
3
  blue: '#0565D1',
4
4
  blue_dark: '#274084',
5
+ blue_donate: '#2042AD',
5
6
  blue_light: '#BECCF9',
6
7
  blue_royal: '#6489FC',
7
8
  coral: '#F9686D',
@@ -3,6 +3,7 @@ const colors = {
3
3
  black_dark: '#030e1a',
4
4
  blue: '#223c59',
5
5
  blue_dark: '#3a4972',
6
+ blue_donate: '#2042AD',
6
7
  blue_light: '#274084',
7
8
  blue_royal: '#6489FC',
8
9
  coral: '#FF6F61',