@comicrelief/component-library 8.14.0 → 8.16.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 (13) hide show
  1. package/.prettierrc +3 -0
  2. package/dist/components/Atoms/Checkbox/Checkbox.js +50 -34
  3. package/dist/components/Atoms/Checkbox/Checkbox.md +10 -1
  4. package/dist/components/Atoms/Checkbox/Checkbox.test.js +1 -1
  5. package/dist/components/Atoms/Text/Text.js +33 -26
  6. package/dist/components/Atoms/Text/Text.md +2 -2
  7. package/package.json +1 -1
  8. package/src/components/Atoms/Checkbox/Checkbox.js +47 -25
  9. package/src/components/Atoms/Checkbox/Checkbox.md +10 -1
  10. package/src/components/Atoms/Checkbox/Checkbox.test.js +34 -48
  11. package/src/components/Atoms/Text/Text.js +15 -1
  12. package/src/components/Atoms/Text/Text.md +2 -2
  13. package/src/components/Molecules/SearchInput/SearchInput.test.js +1 -1
package/.prettierrc ADDED
@@ -0,0 +1,3 @@
1
+ {
2
+ "singleQuote": true
3
+ }
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/dist/components/Atoms/Text/Text.js CHANGED
@@ -13,18 +13,17 @@ var _allBreakpoints = require("../../../theme/shared/allBreakpoints");
13
13
  const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
14
14
  displayName: "Text__BaseText",
15
15
  componentId: "sc-1snl0ya-0"
16
- })(["color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";", ";"], _ref => {
16
+ })(["", ";color:", ";font-size:", ";line-height:", ";text-transform:", ";", ";", ";", ";font-family:", ";", ";", ";", ";", ";"], _ref => {
17
17
  let {
18
- color,
19
- theme
18
+ textAlign
20
19
  } = _ref;
21
- return color ? theme.color(color) : 'inherit';
20
+ return textAlign && "text-align: ".concat(textAlign);
22
21
  }, _ref2 => {
23
22
  let {
24
- size,
23
+ color,
25
24
  theme
26
25
  } = _ref2;
27
- return theme.fontSize(size);
26
+ return color ? theme.color(color) : 'inherit';
28
27
  }, _ref3 => {
29
28
  let {
30
29
  size,
@@ -33,59 +32,65 @@ const BaseText = exports.BaseText = _styledComponents.default.span.withConfig({
33
32
  return theme.fontSize(size);
34
33
  }, _ref4 => {
35
34
  let {
36
- uppercase
35
+ size,
36
+ theme
37
37
  } = _ref4;
38
- return uppercase ? 'uppercase' : 'inherit';
38
+ return theme.fontSize(size);
39
39
  }, _ref5 => {
40
40
  let {
41
- weight
41
+ uppercase
42
42
  } = _ref5;
43
- return weight ? "font-weight: ".concat(weight) : null;
43
+ return uppercase ? 'uppercase' : 'inherit';
44
44
  }, _ref6 => {
45
45
  let {
46
- height
46
+ weight
47
47
  } = _ref6;
48
- return height ? "line-height: ".concat(height) : null;
48
+ return weight ? "font-weight: ".concat(weight) : null;
49
49
  }, _ref7 => {
50
50
  let {
51
- as
51
+ height
52
52
  } = _ref7;
53
- return as === 'p' || as === 'span' ? 'line-height: normal;' : null;
53
+ return height ? "line-height: ".concat(height) : null;
54
54
  }, _ref8 => {
55
+ let {
56
+ as
57
+ } = _ref8;
58
+ return as === 'p' || as === 'span' ? 'line-height: normal;' : null;
59
+ }, _ref9 => {
55
60
  let {
56
61
  family,
57
62
  theme
58
- } = _ref8;
63
+ } = _ref9;
59
64
  return family ? theme.fontFamilies(family) : theme.fontFamilies(theme.font.regular);
60
- }, _ref9 => {
65
+ }, _ref10 => {
61
66
  let {
62
67
  family
63
- } = _ref9;
68
+ } = _ref10;
64
69
  return family === 'Anton' ? 'letter-spacing: 0.03rem' : null;
65
- }, _ref10 => {
70
+ }, _ref11 => {
66
71
  let {
67
72
  size,
68
73
  theme
69
- } = _ref10;
74
+ } = _ref11;
70
75
  return size === 'super' ? (0, _styledComponents.css)(["font-size:", ";line-height:3rem;@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}@media ", "{font-size:", ";line-height:", ";margin-bottom:2rem;}"], theme.fontSize('xxl'), theme.allBreakpoints('M'), theme.fontSize('big'), theme.fontSize('big'), theme.allBreakpoints('L'), theme.fontSize('super'), theme.fontSize('super')) : null;
71
- }, _ref11 => {
76
+ }, _ref12 => {
72
77
  let {
73
78
  mobileColor,
74
79
  theme
75
- } = _ref11;
80
+ } = _ref12;
76
81
  return mobileColor && (0, _styledComponents.css)(["@media (max-width:", "px){color:", ";}"], _allBreakpoints.breakpointValues.L - 1, theme.color(mobileColor));
77
- }, _ref12 => {
82
+ }, _ref13 => {
78
83
  let {
79
84
  size,
80
85
  theme
81
- } = _ref12;
86
+ } = _ref13;
82
87
  return size === 'm' ? (0, _styledComponents.css)(["font-size:", ";@media ", "{font-size:", ";}"], theme.fontSize('s'), theme.allBreakpoints('M'), theme.fontSize('m')) : null;
83
88
  });
84
89
 
85
90
  /** Text renders different elements based on the `tag` prop
86
91
  * Weight is checked for existence to prevent overriding the tag's css
87
92
  */
88
- const Text = _ref13 => {
93
+ const Text = _ref14 => {
89
94
  let {
90
95
  tag = 'span',
91
96
  size = 's',
@@ -96,8 +101,9 @@ const Text = _ref13 => {
96
101
  weight = undefined,
97
102
  family = null,
98
103
  mobileColor = null,
104
+ textAlign = null,
99
105
  ...rest
100
- } = _ref13;
106
+ } = _ref14;
101
107
  return /*#__PURE__*/_react.default.createElement(BaseText, Object.assign({}, rest, {
102
108
  as: tag,
103
109
  color: color,
@@ -106,7 +112,8 @@ const Text = _ref13 => {
106
112
  height: height,
107
113
  weight: weight,
108
114
  family: family,
109
- mobileColor: mobileColor
115
+ mobileColor: mobileColor,
116
+ textAlign: textAlign
110
117
  }), children);
111
118
  };
112
119
  var _default = exports.default = Text;
package/dist/components/Atoms/Text/Text.md CHANGED
@@ -105,8 +105,8 @@ Sport Relief
105
105
  <Text tag="h4" family="Founders_bold" uppercase size="xl">
106
106
  Heading 4
107
107
  </Text>
108
- <Text tag="h4" family="Founders_bold" uppercase size="l">
109
- Heading 5
108
+ <Text tag="h4" family="Founders_bold" uppercase size="l" textAlign="center">
109
+ Heading 5, textAlign prop
110
110
  </Text>
111
111
  <Text tag="p" family="Founders" size="m">
112
112
  Body 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.14.0",
4
+ "version": "8.16.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
package/src/components/Atoms/Text/Text.js CHANGED
@@ -5,6 +5,7 @@ import { breakpointValues } from '../../../theme/shared/allBreakpoints';
5
5
 
6
6
  /** Text component */
7
7
  export const BaseText = styled.span`
8
+ ${({ textAlign }) => textAlign && `text-align: ${textAlign}`};
8
9
  color: ${({ color, theme }) => (color ? theme.color(color) : 'inherit')};
9
10
  font-size: ${({ size, theme }) => theme.fontSize(size)};
10
11
  line-height: ${({ size, theme }) => theme.fontSize(size)};
@@ -51,7 +52,17 @@ export const BaseText = styled.span`
51
52
  * Weight is checked for existence to prevent overriding the tag's css
52
53
  */
53
54
  const Text = ({
54
- tag = 'span', size = 's', color = 'inherit', children = undefined, uppercase = false, height = undefined, weight = undefined, family = null, mobileColor = null, ...rest
55
+ tag = 'span',
56
+ size = 's',
57
+ color = 'inherit',
58
+ children = undefined,
59
+ uppercase = false,
60
+ height = undefined,
61
+ weight = undefined,
62
+ family = null,
63
+ mobileColor = null,
64
+ textAlign = null,
65
+ ...rest
55
66
  }) => (
56
67
  <BaseText
57
68
  {...rest}
@@ -63,12 +74,15 @@ const Text = ({
63
74
  weight={weight}
64
75
  family={family}
65
76
  mobileColor={mobileColor}
77
+ textAlign={textAlign}
66
78
  >
67
79
  {children}
68
80
  </BaseText>
69
81
  );
70
82
 
71
83
  Text.propTypes = {
84
+ /** Text Align */
85
+ textAlign: PropTypes.string,
72
86
  /** Font family */
73
87
  family: PropTypes.string,
74
88
  /** Font weight */
package/src/components/Atoms/Text/Text.md CHANGED
@@ -105,8 +105,8 @@ Sport Relief
105
105
  <Text tag="h4" family="Founders_bold" uppercase size="xl">
106
106
  Heading 4
107
107
  </Text>
108
- <Text tag="h4" family="Founders_bold" uppercase size="l">
109
- Heading 5
108
+ <Text tag="h4" family="Founders_bold" uppercase size="l" textAlign="center">
109
+ Heading 5, textAlign prop
110
110
  </Text>
111
111
  <Text tag="p" family="Founders" size="m">
112
112
  Body 1
package/src/components/Molecules/SearchInput/SearchInput.test.js CHANGED
@@ -6,7 +6,7 @@ import SearchInput from './SearchInput';
6
6
  it('renders correctly', () => {
7
7
  const tree = renderWithTheme(
8
8
  <SearchInput
9
- onChange={e => {
9
+ onChange={(e) => {
10
10
  e.preventDefault();
11
11
  return e.target.value;
12
12
  }}