@comicrelief/component-library 8.16.0 → 8.17.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 (9) hide show
  1. package/dist/components/Atoms/Checkbox/Checkbox.js +10 -6
  2. package/dist/components/Atoms/Checkbox/Checkbox.md +5 -4
  3. package/dist/components/Atoms/Checkbox/Checkbox.test.js +1 -1
  4. package/dist/theme/crTheme/Colors.md +13 -2
  5. package/package.json +1 -1
  6. package/src/components/Atoms/Checkbox/Checkbox.js +17 -7
  7. package/src/components/Atoms/Checkbox/Checkbox.md +5 -4
  8. package/src/components/Atoms/Checkbox/Checkbox.test.js +20 -6
  9. package/src/theme/crTheme/Colors.md +13 -2
package/dist/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -21,16 +21,17 @@ const Label = _styledComponents.default.label.withConfig({
21
21
  return hasLabelAsString && 'align-items: center;';
22
22
  }, _ref2 => {
23
23
  let {
24
+ theme,
24
25
  labelColour
25
26
  } = _ref2;
26
- return labelColour && "color: ".concat(labelColour, ";");
27
+ return labelColour && "color: ".concat(theme.color(labelColour));
27
28
  });
28
29
  const StyledCheckboxInput = _styledComponents.default.input.attrs({
29
30
  type: 'checkbox'
30
31
  }).withConfig({
31
32
  displayName: "Checkbox__StyledCheckboxInput",
32
33
  componentId: "sc-ngak0-1"
33
- })(["width:0;height:0;margin:0;+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-size:contain;background-color:", ";border:1px solid ", ";}:focus + span{border:1px solid ", ";}"], _ref3 => {
34
+ })(["border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px;+ span{margin-right:12px;width:24px;height:24px;border-radius:4px;background-color:", ";border:1px solid ", ";float:left;flex-shrink:0;}:checked + span{background:url(", ") no-repeat center;background-size:contain;background-color:", ";border:1px solid ", ";}:focus + span{border:1px solid ", ";}"], _ref3 => {
34
35
  let {
35
36
  theme,
36
37
  checkboxBg
@@ -57,9 +58,9 @@ const StyledCheckboxInput = _styledComponents.default.input.attrs({
57
58
  }, _ref7 => {
58
59
  let {
59
60
  theme,
60
- checkboxBorderChecked
61
+ checkboxBorderFocus
61
62
  } = _ref7;
62
- return checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red');
63
+ return checkboxBorderFocus ? theme.color(checkboxBorderFocus) : theme.color('red');
63
64
  });
64
65
  const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
65
66
  let {
@@ -71,6 +72,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
71
72
  checkboxBorder,
72
73
  checkboxBgChecked,
73
74
  checkboxBorderChecked,
75
+ checkboxBorderFocus,
74
76
  ...rest
75
77
  } = _ref8;
76
78
  return /*#__PURE__*/_react.default.createElement(Label, {
@@ -82,7 +84,8 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
82
84
  checkboxBg: checkboxBg,
83
85
  checkboxBorder: checkboxBorder,
84
86
  checkboxBgChecked: checkboxBgChecked,
85
- checkboxBorderChecked: checkboxBorderChecked
87
+ checkboxBorderChecked: checkboxBorderChecked,
88
+ checkboxBorderFocus: checkboxBorderFocus
86
89
  })), /*#__PURE__*/_react.default.createElement("span", null), label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
87
90
  weight: "bold"
88
91
  }, label) : children);
@@ -96,6 +99,7 @@ Checkbox.propTypes = {
96
99
  checkboxBg: _propTypes.default.string,
97
100
  checkboxBorder: _propTypes.default.string,
98
101
  checkboxBgChecked: _propTypes.default.string,
99
- checkboxBorderChecked: _propTypes.default.string
102
+ checkboxBorderChecked: _propTypes.default.string,
103
+ checkboxBorderFocus: _propTypes.default.string
100
104
  };
101
105
  var _default = exports.default = Checkbox;
package/dist/components/Atoms/Checkbox/Checkbox.md CHANGED
@@ -31,11 +31,12 @@ const LongLabel = () => (
31
31
  name="sport"
32
32
  value="Football"
33
33
  label="Tennis (with wacky styling to test props)"
34
- labelColour="pink"
35
- checkboxBg="red"
36
- checkboxBorder="blue"
34
+ labelColour="purple_dark"
35
+ checkboxBg="white"
36
+ checkboxBorder="black"
37
37
  checkboxBgChecked="green"
38
- checkboxBorderChecked="red"
38
+ checkboxBorderChecked="green"
39
+ checkboxBorderFocus="blue"
39
40
  />
40
41
  <br/>
41
42
  <p>A checkbox with a long label containing links</p>
package/dist/components/Atoms/Checkbox/Checkbox.test.js CHANGED
@@ -15,5 +15,5 @@ it('renders correctly', () => {
15
15
  value: "Handball",
16
16
  label: "Handball"
17
17
  }))).toJSON();
18
- expect(tree).toMatchInlineSnapshot("\n Array [\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .c1 {\n width: 0;\n height: 0;\n margin: 0;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Tenis\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Tenis\n </span>\n </label>,\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .c1 {\n width: 0;\n height: 0;\n margin: 0;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Handball\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Handball\n </span>\n </label>,\n ]\n ");
18
+ expect(tree).toMatchInlineSnapshot("\n Array [\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .c1 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Tenis\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Tenis\n </span>\n </label>,\n .c2 {\n font-size: 1rem;\n line-height: 1rem;\n text-transform: inherit;\n font-weight: bold;\n line-height: normal;\n font-family: 'Montserrat',Helvetica,Arial,sans-serif;\n }\n\n .c0 {\n display: -webkit-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n -webkit-align-items: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n margin-bottom: 8px;\n }\n\n .c1 {\n border: 0;\n -webkit-clip: rect(0 0 0 0);\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n }\n\n .c1 + span {\n margin-right: 12px;\n width: 24px;\n height: 24px;\n border-radius: 4px;\n background-color: #FFFFFF;\n border: 1px solid #969598;\n float: left;\n -webkit-flex-shrink: 0;\n -ms-flex-negative: 0;\n flex-shrink: 0;\n }\n\n .c1:checked + span {\n background: url(mock.asset) no-repeat center;\n background-size: contain;\n background-color: #E52630;\n border: 1px solid #E52630;\n }\n\n .c1:focus + span {\n border: 1px solid #E52630;\n }\n\n <label\n className=\"c0\"\n >\n <input\n className=\"c1\"\n name=\"sport\"\n type=\"checkbox\"\n value=\"Handball\"\n />\n <span />\n <span\n className=\"c2\"\n color=\"inherit\"\n size=\"s\"\n >\n Handball\n </span>\n </label>,\n ]\n ");
19
19
  });
package/dist/theme/crTheme/Colors.md CHANGED
@@ -127,6 +127,17 @@ const Item = styled.div`
127
127
  </Card>
128
128
  </Item>
129
129
 
130
+ <Item>
131
+ <Card backgroundColor="grey_4" height="auto">
132
+ <Text tag="h3" color="white" size="xs">
133
+ grey_4
134
+ </Text>
135
+ <Text color="white" tag="p">
136
+ #6E6E6E
137
+ </Text>
138
+ </Card>
139
+ </Item>
140
+
130
141
  <Item>
131
142
  <Card backgroundColor="grey_dark" height="auto">
132
143
  <Text tag="h3" color="white" size="xs">
@@ -330,7 +341,7 @@ const Item = styled.div`
330
341
  <Item>
331
342
  <Card backgroundColor="blue_donate" height="auto">
332
343
  <Text tag="h3" color="white" size="xs">
333
- Blue Donate
344
+ blue_donate
334
345
  </Text>
335
346
  <Text tag="p" color="white">#2042AD</Text>
336
347
  </Card>
@@ -339,7 +350,7 @@ const Item = styled.div`
339
350
  <Item>
340
351
  <Card backgroundColor="blue_donate_interact" height="auto">
341
352
  <Text tag="h3" color="white" size="xs">
342
- Blue Donate Interact
353
+ blue_donate_interact
343
354
  </Text>
344
355
  <Text tag="p" color="white">#001A85</Text>
345
356
  </Card>
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.16.0",
4
+ "version": "8.17.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -10,14 +10,21 @@ const Label = styled.label`
10
10
  display: flex;
11
11
  ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
12
12
  margin-bottom: 8px;
13
- ${({ labelColour }) => labelColour && `color: ${labelColour};`}
13
+ ${({ theme, labelColour }) => labelColour && `color: ${theme.color(labelColour)}`}
14
14
  `;
15
15
 
16
16
  const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
17
- /* This input is not visible */
18
- width: 0;
19
- height: 0;
20
- margin: 0;
17
+ /* This input is not visible but needs these long winded styles to remain accessible to screen readers */
18
+ border: 0;
19
+ clip: rect(0 0 0 0);
20
+ height: 1px;
21
+ margin: -1px;
22
+ overflow: hidden;
23
+ padding: 0;
24
+ position: absolute;
25
+ white-space: nowrap;
26
+ width: 1px;
27
+
21
28
  /* This span is actually the visual square Checkbox you see */
22
29
  + span {
23
30
  margin-right: 12px;
@@ -38,7 +45,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
38
45
  }
39
46
  /* Visual checkbox when focused */
40
47
  :focus + span {
41
- border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
48
+ border: 1px solid ${({ theme, checkboxBorderFocus }) => (checkboxBorderFocus ? theme.color(checkboxBorderFocus) : theme.color('red'))};
42
49
  }
43
50
  `;
44
51
 
@@ -51,6 +58,7 @@ const Checkbox = React.forwardRef(({
51
58
  checkboxBorder,
52
59
  checkboxBgChecked,
53
60
  checkboxBorderChecked,
61
+ checkboxBorderFocus,
54
62
  ...rest
55
63
  }, ref) => (
56
64
  <Label
@@ -65,6 +73,7 @@ const Checkbox = React.forwardRef(({
65
73
  checkboxBorder={checkboxBorder}
66
74
  checkboxBgChecked={checkboxBgChecked}
67
75
  checkboxBorderChecked={checkboxBorderChecked}
76
+ checkboxBorderFocus={checkboxBorderFocus}
68
77
  />
69
78
  <span />
70
79
  {label ? <Text weight="bold">{label}</Text> : children}
@@ -80,7 +89,8 @@ Checkbox.propTypes = {
80
89
  checkboxBg: PropTypes.string,
81
90
  checkboxBorder: PropTypes.string,
82
91
  checkboxBgChecked: PropTypes.string,
83
- checkboxBorderChecked: PropTypes.string
92
+ checkboxBorderChecked: PropTypes.string,
93
+ checkboxBorderFocus: PropTypes.string
84
94
  };
85
95
 
86
96
  export default Checkbox;
package/src/components/Atoms/Checkbox/Checkbox.md CHANGED
@@ -31,11 +31,12 @@ const LongLabel = () => (
31
31
  name="sport"
32
32
  value="Football"
33
33
  label="Tennis (with wacky styling to test props)"
34
- labelColour="pink"
35
- checkboxBg="red"
36
- checkboxBorder="blue"
34
+ labelColour="purple_dark"
35
+ checkboxBg="white"
36
+ checkboxBorder="black"
37
37
  checkboxBgChecked="green"
38
- checkboxBorderChecked="red"
38
+ checkboxBorderChecked="green"
39
+ checkboxBorderFocus="blue"
39
40
  />
40
41
  <br/>
41
42
  <p>A checkbox with a long label containing links</p>
package/src/components/Atoms/Checkbox/Checkbox.test.js CHANGED
@@ -35,9 +35,16 @@ it('renders correctly', () => {
35
35
  }
36
36
 
37
37
  .c1 {
38
- width: 0;
39
- height: 0;
40
- margin: 0;
38
+ border: 0;
39
+ -webkit-clip: rect(0 0 0 0);
40
+ clip: rect(0 0 0 0);
41
+ height: 1px;
42
+ margin: -1px;
43
+ overflow: hidden;
44
+ padding: 0;
45
+ position: absolute;
46
+ white-space: nowrap;
47
+ width: 1px;
41
48
  }
42
49
 
43
50
  .c1 + span {
@@ -104,9 +111,16 @@ it('renders correctly', () => {
104
111
  }
105
112
 
106
113
  .c1 {
107
- width: 0;
108
- height: 0;
109
- margin: 0;
114
+ border: 0;
115
+ -webkit-clip: rect(0 0 0 0);
116
+ clip: rect(0 0 0 0);
117
+ height: 1px;
118
+ margin: -1px;
119
+ overflow: hidden;
120
+ padding: 0;
121
+ position: absolute;
122
+ white-space: nowrap;
123
+ width: 1px;
110
124
  }
111
125
 
112
126
  .c1 + span {
package/src/theme/crTheme/Colors.md CHANGED
@@ -127,6 +127,17 @@ const Item = styled.div`
127
127
  </Card>
128
128
  </Item>
129
129
 
130
+ <Item>
131
+ <Card backgroundColor="grey_4" height="auto">
132
+ <Text tag="h3" color="white" size="xs">
133
+ grey_4
134
+ </Text>
135
+ <Text color="white" tag="p">
136
+ #6E6E6E
137
+ </Text>
138
+ </Card>
139
+ </Item>
140
+
130
141
  <Item>
131
142
  <Card backgroundColor="grey_dark" height="auto">
132
143
  <Text tag="h3" color="white" size="xs">
@@ -330,7 +341,7 @@ const Item = styled.div`
330
341
  <Item>
331
342
  <Card backgroundColor="blue_donate" height="auto">
332
343
  <Text tag="h3" color="white" size="xs">
333
- Blue Donate
344
+ blue_donate
334
345
  </Text>
335
346
  <Text tag="p" color="white">#2042AD</Text>
336
347
  </Card>
@@ -339,7 +350,7 @@ const Item = styled.div`
339
350
  <Item>
340
351
  <Card backgroundColor="blue_donate_interact" height="auto">
341
352
  <Text tag="h3" color="white" size="xs">
342
- Blue Donate Interact
353
+ blue_donate_interact
343
354
  </Text>
344
355
  <Text tag="p" color="white">#001A85</Text>
345
356
  </Card>