@comicrelief/component-library 8.14.0 → 8.15.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 (7) hide show
  1. package/dist/components/Atoms/Checkbox/Checkbox.js +50 -34
  2. package/dist/components/Atoms/Checkbox/Checkbox.md +10 -1
  3. package/dist/components/Atoms/Checkbox/Checkbox.test.js +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Atoms/Checkbox/Checkbox.js +47 -25
  6. package/src/components/Atoms/Checkbox/Checkbox.md +10 -1
  7. package/src/components/Atoms/Checkbox/Checkbox.test.js +34 -48
package/dist/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -10,68 +10,79 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
10
10
  var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
  var _Text = _interopRequireDefault(require("../Text/Text"));
12
12
  var _tick = _interopRequireDefault(require("./assets/tick.svg"));
13
- const StyledCheckboxInput = _styledComponents.default.input.attrs({
14
- type: 'checkbox'
15
- }).withConfig({
16
- displayName: "Checkbox__StyledCheckboxInput",
13
+ // This label wraps both the input and the span that is the visual square checkbox you see */
14
+ const Label = _styledComponents.default.label.withConfig({
15
+ displayName: "Checkbox__Label",
17
16
  componentId: "sc-ngak0-0"
18
- })(["font-size:", ";display:block;box-sizing:border-box;opacity:0;position:absolute;left:0px;width:24px;height:24px;margin:0;border:1px solid ", ";+ 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-color:", ";border-color:", ";background-size:contain;}:focus + span{border-color:", ";border-width:1px;}"], _ref => {
17
+ })(["display:flex;", " margin-bottom:8px;", ""], _ref => {
19
18
  let {
20
- theme
19
+ hasLabelAsString
21
20
  } = _ref;
22
- return theme.fontSize('sm');
21
+ return hasLabelAsString && 'align-items: center;';
23
22
  }, _ref2 => {
24
23
  let {
25
- theme
24
+ labelColour
26
25
  } = _ref2;
27
- return theme.color('grey');
28
- }, _ref3 => {
26
+ return labelColour && "color: ".concat(labelColour, ";");
27
+ });
28
+ const StyledCheckboxInput = _styledComponents.default.input.attrs({
29
+ type: 'checkbox'
30
+ }).withConfig({
31
+ displayName: "Checkbox__StyledCheckboxInput",
32
+ 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 => {
29
34
  let {
30
- theme
35
+ theme,
36
+ checkboxBg
31
37
  } = _ref3;
32
- return theme.color('white');
38
+ return checkboxBg ? theme.color(checkboxBg) : theme.color('white');
33
39
  }, _ref4 => {
34
40
  let {
35
- theme
41
+ theme,
42
+ checkboxBorder
36
43
  } = _ref4;
37
- return theme.color('grey');
44
+ return checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey');
38
45
  }, _tick.default, _ref5 => {
39
46
  let {
40
- theme
47
+ theme,
48
+ checkboxBgChecked
41
49
  } = _ref5;
42
- return theme.color('red');
50
+ return checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red');
43
51
  }, _ref6 => {
44
52
  let {
45
- theme
53
+ theme,
54
+ checkboxBorderChecked
46
55
  } = _ref6;
47
- return theme.color('red');
56
+ return checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red');
48
57
  }, _ref7 => {
49
58
  let {
50
- theme
59
+ theme,
60
+ checkboxBorderChecked
51
61
  } = _ref7;
52
- return theme.color('red');
62
+ return checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red');
53
63
  });
54
- const Label = _styledComponents.default.label.withConfig({
55
- displayName: "Checkbox__Label",
56
- componentId: "sc-ngak0-1"
57
- })(["display:flex;", " margin-bottom:8px;"], _ref8 => {
58
- let {
59
- hasLabelAsString
60
- } = _ref8;
61
- return hasLabelAsString && 'align-items: center;';
62
- });
63
- const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
64
+ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
64
65
  let {
65
66
  label = undefined,
66
67
  value,
67
68
  children = undefined,
69
+ labelColour,
70
+ checkboxBg,
71
+ checkboxBorder,
72
+ checkboxBgChecked,
73
+ checkboxBorderChecked,
68
74
  ...rest
69
- } = _ref9;
75
+ } = _ref8;
70
76
  return /*#__PURE__*/_react.default.createElement(Label, {
71
- hasLabelAsString: !!label
77
+ hasLabelAsString: !!label,
78
+ labelColour: labelColour
72
79
  }, /*#__PURE__*/_react.default.createElement(StyledCheckboxInput, Object.assign({}, rest, {
73
80
  value: value,
74
- ref: ref
81
+ ref: ref,
82
+ checkboxBg: checkboxBg,
83
+ checkboxBorder: checkboxBorder,
84
+ checkboxBgChecked: checkboxBgChecked,
85
+ checkboxBorderChecked: checkboxBorderChecked
75
86
  })), /*#__PURE__*/_react.default.createElement("span", null), label ? /*#__PURE__*/_react.default.createElement(_Text.default, {
76
87
  weight: "bold"
77
88
  }, label) : children);
@@ -79,7 +90,12 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref9, ref) => {
79
90
  Checkbox.propTypes = {
80
91
  name: _propTypes.default.string.isRequired,
81
92
  value: _propTypes.default.string.isRequired,
93
+ children: _propTypes.default.node,
82
94
  label: _propTypes.default.string,
83
- children: _propTypes.default.node
95
+ labelColour: _propTypes.default.string,
96
+ checkboxBg: _propTypes.default.string,
97
+ checkboxBorder: _propTypes.default.string,
98
+ checkboxBgChecked: _propTypes.default.string,
99
+ checkboxBorderChecked: _propTypes.default.string
84
100
  };
85
101
  var _default = exports.default = Checkbox;
package/dist/components/Atoms/Checkbox/Checkbox.md CHANGED
@@ -27,7 +27,16 @@ const LongLabel = () => (
27
27
  <Checkbox name="sport" value="Tennis" label="Tennis" />
28
28
  <Checkbox name="sport" value="Basketball" label="Basketball" />
29
29
  <Checkbox name="sport" value="Cycling" label="Cycling" />
30
- <Checkbox name="sport" value="Football" label="Football" />
30
+ <Checkbox
31
+ name="sport"
32
+ value="Football"
33
+ label="Tennis (with wacky styling to test props)"
34
+ labelColour="pink"
35
+ checkboxBg="red"
36
+ checkboxBorder="blue"
37
+ checkboxBgChecked="green"
38
+ checkboxBorderChecked="red"
39
+ />
31
40
  <br/>
32
41
  <p>A checkbox with a long label containing links</p>
33
42
  <Checkbox name="node_label" value="node_label">
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 .c1 {\n display: block;\n box-sizing: border-box;\n opacity: 0;\n position: absolute;\n left: 0px;\n width: 24px;\n height: 24px;\n margin: 0;\n border: 1px solid #969598;\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-color: #E52630;\n border-color: #E52630;\n background-size: contain;\n }\n\n .c1:focus + span {\n border-color: #E52630;\n border-width: 1px;\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 <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 .c1 {\n display: block;\n box-sizing: border-box;\n opacity: 0;\n position: absolute;\n left: 0px;\n width: 24px;\n height: 24px;\n margin: 0;\n border: 1px solid #969598;\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-color: #E52630;\n border-color: #E52630;\n background-size: contain;\n }\n\n .c1:focus + span {\n border-color: #E52630;\n border-width: 1px;\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 <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 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 ");
19
19
  });
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.14.0",
4
+ "version": "8.15.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Checkbox/Checkbox.js CHANGED
@@ -5,50 +5,67 @@ import styled from 'styled-components';
5
5
  import Text from '../Text/Text';
6
6
  import checkBoxIcon from './assets/tick.svg';
7
7
 
8
+ // This label wraps both the input and the span that is the visual square checkbox you see */
9
+ const Label = styled.label`
10
+ display: flex;
11
+ ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
12
+ margin-bottom: 8px;
13
+ ${({ labelColour }) => labelColour && `color: ${labelColour};`}
14
+ `;
15
+
8
16
  const StyledCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
9
- font-size: ${({ theme }) => theme.fontSize('sm')};
10
- display: block;
11
- box-sizing: border-box;
12
- opacity: 0;
13
- position: absolute;
14
- left: 0px;
15
- width: 24px;
16
- height: 24px;
17
+ /* This input is not visible */
18
+ width: 0;
19
+ height: 0;
17
20
  margin: 0;
18
- border: 1px solid ${({ theme }) => theme.color('grey')};
21
+ /* This span is actually the visual square Checkbox you see */
19
22
  + span {
20
23
  margin-right: 12px;
21
24
  width: 24px;
22
25
  height: 24px;
23
26
  border-radius: 4px;
24
- background-color: ${({ theme }) => theme.color('white')};
25
- border: 1px solid ${({ theme }) => theme.color('grey')};
27
+ background-color: ${({ theme, checkboxBg }) => (checkboxBg ? theme.color(checkboxBg) : theme.color('white'))};
28
+ border: 1px solid ${({ theme, checkboxBorder }) => (checkboxBorder ? theme.color(checkboxBorder) : theme.color('grey'))};
26
29
  float: left;
27
30
  flex-shrink: 0;
28
31
  }
32
+ /* Visual checkbox when ticked */
29
33
  :checked + span {
30
34
  background: url(${checkBoxIcon}) no-repeat center;
31
- background-color: ${({ theme }) => theme.color('red')};
32
- border-color: ${({ theme }) => theme.color('red')};
33
35
  background-size: contain;
36
+ background-color: ${({ theme, checkboxBgChecked }) => (checkboxBgChecked ? theme.color(checkboxBgChecked) : theme.color('red'))};
37
+ border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
34
38
  }
39
+ /* Visual checkbox when focused */
35
40
  :focus + span {
36
- border-color: ${({ theme }) => theme.color('red')};
37
- border-width: 1px;
41
+ border: 1px solid ${({ theme, checkboxBorderChecked }) => (checkboxBorderChecked ? theme.color(checkboxBorderChecked) : theme.color('red'))};
38
42
  }
39
43
  `;
40
44
 
41
- const Label = styled.label`
42
- display: flex;
43
- ${({ hasLabelAsString }) => hasLabelAsString && 'align-items: center;'}
44
- margin-bottom: 8px;
45
- `;
46
-
47
45
  const Checkbox = React.forwardRef(({
48
- label = undefined, value, children = undefined, ...rest
46
+ label = undefined,
47
+ value,
48
+ children = undefined,
49
+ labelColour,
50
+ checkboxBg,
51
+ checkboxBorder,
52
+ checkboxBgChecked,
53
+ checkboxBorderChecked,
54
+ ...rest
49
55
  }, ref) => (
50
- <Label hasLabelAsString={!!label}>
51
- <StyledCheckboxInput {...rest} value={value} ref={ref} />
56
+ <Label
57
+ hasLabelAsString={!!label}
58
+ labelColour={labelColour}
59
+ >
60
+ <StyledCheckboxInput
61
+ {...rest}
62
+ value={value}
63
+ ref={ref}
64
+ checkboxBg={checkboxBg}
65
+ checkboxBorder={checkboxBorder}
66
+ checkboxBgChecked={checkboxBgChecked}
67
+ checkboxBorderChecked={checkboxBorderChecked}
68
+ />
52
69
  <span />
53
70
  {label ? <Text weight="bold">{label}</Text> : children}
54
71
  </Label>
@@ -57,8 +74,13 @@ const Checkbox = React.forwardRef(({
57
74
  Checkbox.propTypes = {
58
75
  name: PropTypes.string.isRequired,
59
76
  value: PropTypes.string.isRequired,
77
+ children: PropTypes.node,
60
78
  label: PropTypes.string,
61
- children: PropTypes.node
79
+ labelColour: PropTypes.string,
80
+ checkboxBg: PropTypes.string,
81
+ checkboxBorder: PropTypes.string,
82
+ checkboxBgChecked: PropTypes.string,
83
+ checkboxBorderChecked: PropTypes.string
62
84
  };
63
85
 
64
86
  export default Checkbox;
package/src/components/Atoms/Checkbox/Checkbox.md CHANGED
@@ -27,7 +27,16 @@ const LongLabel = () => (
27
27
  <Checkbox name="sport" value="Tennis" label="Tennis" />
28
28
  <Checkbox name="sport" value="Basketball" label="Basketball" />
29
29
  <Checkbox name="sport" value="Cycling" label="Cycling" />
30
- <Checkbox name="sport" value="Football" label="Football" />
30
+ <Checkbox
31
+ name="sport"
32
+ value="Football"
33
+ label="Tennis (with wacky styling to test props)"
34
+ labelColour="pink"
35
+ checkboxBg="red"
36
+ checkboxBorder="blue"
37
+ checkboxBgChecked="green"
38
+ checkboxBorderChecked="red"
39
+ />
31
40
  <br/>
32
41
  <p>A checkbox with a long label containing links</p>
33
42
  <Checkbox name="node_label" value="node_label">
package/src/components/Atoms/Checkbox/Checkbox.test.js CHANGED
@@ -22,16 +22,22 @@ it('renders correctly', () => {
22
22
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
23
23
  }
24
24
 
25
+ .c0 {
26
+ display: -webkit-box;
27
+ display: -webkit-flex;
28
+ display: -ms-flexbox;
29
+ display: flex;
30
+ -webkit-align-items: center;
31
+ -webkit-box-align: center;
32
+ -ms-flex-align: center;
33
+ align-items: center;
34
+ margin-bottom: 8px;
35
+ }
36
+
25
37
  .c1 {
26
- display: block;
27
- box-sizing: border-box;
28
- opacity: 0;
29
- position: absolute;
30
- left: 0px;
31
- width: 24px;
32
- height: 24px;
38
+ width: 0;
39
+ height: 0;
33
40
  margin: 0;
34
- border: 1px solid #969598;
35
41
  }
36
42
 
37
43
  .c1 + span {
@@ -49,26 +55,13 @@ it('renders correctly', () => {
49
55
 
50
56
  .c1:checked + span {
51
57
  background: url(mock.asset) no-repeat center;
52
- background-color: #E52630;
53
- border-color: #E52630;
54
58
  background-size: contain;
59
+ background-color: #E52630;
60
+ border: 1px solid #E52630;
55
61
  }
56
62
 
57
63
  .c1:focus + span {
58
- border-color: #E52630;
59
- border-width: 1px;
60
- }
61
-
62
- .c0 {
63
- display: -webkit-box;
64
- display: -webkit-flex;
65
- display: -ms-flexbox;
66
- display: flex;
67
- -webkit-align-items: center;
68
- -webkit-box-align: center;
69
- -ms-flex-align: center;
70
- align-items: center;
71
- margin-bottom: 8px;
64
+ border: 1px solid #E52630;
72
65
  }
73
66
 
74
67
  <label
@@ -98,16 +91,22 @@ it('renders correctly', () => {
98
91
  font-family: 'Montserrat',Helvetica,Arial,sans-serif;
99
92
  }
100
93
 
94
+ .c0 {
95
+ display: -webkit-box;
96
+ display: -webkit-flex;
97
+ display: -ms-flexbox;
98
+ display: flex;
99
+ -webkit-align-items: center;
100
+ -webkit-box-align: center;
101
+ -ms-flex-align: center;
102
+ align-items: center;
103
+ margin-bottom: 8px;
104
+ }
105
+
101
106
  .c1 {
102
- display: block;
103
- box-sizing: border-box;
104
- opacity: 0;
105
- position: absolute;
106
- left: 0px;
107
- width: 24px;
108
- height: 24px;
107
+ width: 0;
108
+ height: 0;
109
109
  margin: 0;
110
- border: 1px solid #969598;
111
110
  }
112
111
 
113
112
  .c1 + span {
@@ -125,26 +124,13 @@ it('renders correctly', () => {
125
124
 
126
125
  .c1:checked + span {
127
126
  background: url(mock.asset) no-repeat center;
128
- background-color: #E52630;
129
- border-color: #E52630;
130
127
  background-size: contain;
128
+ background-color: #E52630;
129
+ border: 1px solid #E52630;
131
130
  }
132
131
 
133
132
  .c1:focus + span {
134
- border-color: #E52630;
135
- border-width: 1px;
136
- }
137
-
138
- .c0 {
139
- display: -webkit-box;
140
- display: -webkit-flex;
141
- display: -ms-flexbox;
142
- display: flex;
143
- -webkit-align-items: center;
144
- -webkit-box-align: center;
145
- -ms-flex-align: center;
146
- align-items: center;
147
- margin-bottom: 8px;
133
+ border: 1px solid #E52630;
148
134
  }
149
135
 
150
136
  <label