@comicrelief/component-library 8.16.0 → 8.16.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 (7) hide show
  1. package/dist/components/Atoms/Checkbox/Checkbox.js +9 -5
  2. package/dist/components/Atoms/Checkbox/Checkbox.md +5 -4
  3. package/dist/theme/crTheme/Colors.md +13 -2
  4. package/package.json +1 -1
  5. package/src/components/Atoms/Checkbox/Checkbox.js +6 -3
  6. package/src/components/Atoms/Checkbox/Checkbox.md +5 -4
  7. package/src/theme/crTheme/Colors.md +13 -2
package/dist/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -21,9 +21,10 @@ 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'
@@ -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/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.16.1",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -10,7 +10,7 @@ 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' })`
@@ -38,7 +38,7 @@ const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
38
38
  }
39
39
  /* Visual checkbox when focused */
40
40
  :focus + span {
41
- border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
41
+ border: 1px solid ${({ theme, checkboxBorderFocus }) => (checkboxBorderFocus ? theme.color(checkboxBorderFocus) : theme.color('red'))};
42
42
  }
43
43
  `;
44
44
 
@@ -51,6 +51,7 @@ const Checkbox = React.forwardRef(({
51
51
  checkboxBorder,
52
52
  checkboxBgChecked,
53
53
  checkboxBorderChecked,
54
+ checkboxBorderFocus,
54
55
  ...rest
55
56
  }, ref) => (
56
57
  <Label
@@ -65,6 +66,7 @@ const Checkbox = React.forwardRef(({
65
66
  checkboxBorder={checkboxBorder}
66
67
  checkboxBgChecked={checkboxBgChecked}
67
68
  checkboxBorderChecked={checkboxBorderChecked}
69
+ checkboxBorderFocus={checkboxBorderFocus}
68
70
  />
69
71
  <span />
70
72
  {label ? <Text weight="bold">{label}</Text> : children}
@@ -80,7 +82,8 @@ Checkbox.propTypes = {
80
82
  checkboxBg: PropTypes.string,
81
83
  checkboxBorder: PropTypes.string,
82
84
  checkboxBgChecked: PropTypes.string,
83
- checkboxBorderChecked: PropTypes.string
85
+ checkboxBorderChecked: PropTypes.string,
86
+ checkboxBorderFocus: PropTypes.string
84
87
  };
85
88
 
86
89
  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/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>