@comicrelief/component-library 8.29.0 → 8.30.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 (5) hide show
  1. package/dist/components/Atoms/Input/Input.md +12 -0
  2. package/dist/components/Atoms/Label/Label.js +21 -9
  3. package/package.json +1 -1
  4. package/src/components/Atoms/Input/Input.md +12 -0
  5. package/src/components/Atoms/Label/Label.js +18 -3
package/dist/components/Atoms/Input/Input.md CHANGED
@@ -119,3 +119,15 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
119
119
  maxPxWidthLargeBreakpoint={250}
120
120
  />
121
121
  ```
122
+
123
+ ```js
124
+ <h4>Input with dark label</h4>
125
+ <Input
126
+ name="dark-label"
127
+ placeholder="£0.00"
128
+ type="text"
129
+ label="The label text can be made black rather than the default grey"
130
+ id="input-example-8"
131
+ labelProps={{ darkLabel: true }}
132
+ />
133
+ ```
package/dist/components/Atoms/Label/Label.js CHANGED
@@ -11,16 +11,24 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
11
11
  var _Text = _interopRequireDefault(require("../Text/Text"));
12
12
  var _spacing = _interopRequireDefault(require("../../../theme/shared/spacing"));
13
13
  var _hideVisually = _interopRequireDefault(require("../../../theme/shared/hideVisually"));
14
- const LabelElement = _styledComponents.default.label.withConfig({
15
- displayName: "Label__LabelElement",
16
- componentId: "sc-2nrw50-0"
17
- })(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], _ref => {
14
+ const getLabelColor = _ref => {
18
15
  let {
19
16
  theme,
20
- errorMsg
17
+ errorMsg,
18
+ darkLabel
21
19
  } = _ref;
22
- return errorMsg ? theme.color('red') : theme.color('grey_label');
23
- }, _ref2 => {
20
+ if (errorMsg) {
21
+ return theme.color('red');
22
+ }
23
+ if (darkLabel) {
24
+ return theme.color('black');
25
+ }
26
+ return theme.color('grey_label');
27
+ };
28
+ const LabelElement = _styledComponents.default.label.withConfig({
29
+ displayName: "Label__LabelElement",
30
+ componentId: "sc-2nrw50-0"
31
+ })(["width:100%;position:relative;display:flex;flex-direction:column;color:", ";", ""], getLabelColor, _ref2 => {
24
32
  let {
25
33
  optional,
26
34
  theme
@@ -63,6 +71,7 @@ const LabelText = _ref3 => {
63
71
  * @param children
64
72
  * @param label
65
73
  * @param hideLabel - Visually hide the label text (without removing it from the document)
74
+ * @param darkLabel - Make the label text black rather than the default grey
66
75
  * @param rest
67
76
  * @returns {JSX.Element}
68
77
  * @constructor
@@ -72,13 +81,15 @@ const Label = _ref4 => {
72
81
  children = null,
73
82
  label,
74
83
  hideLabel = false,
84
+ darkLabel = false,
75
85
  optional = null,
76
86
  errorMsg = '',
77
87
  ...rest
78
88
  } = _ref4;
79
89
  return /*#__PURE__*/_react.default.createElement(LabelElement, Object.assign({
80
90
  optional: optional,
81
- errorMsg: errorMsg
91
+ errorMsg: errorMsg,
92
+ darkLabel: darkLabel
82
93
  }, rest), /*#__PURE__*/_react.default.createElement(LabelText, {
83
94
  label: label,
84
95
  hideLabel: hideLabel
@@ -86,6 +97,7 @@ const Label = _ref4 => {
86
97
  };
87
98
  LabelElement.propTypes = {
88
99
  optional: _propTypes.default.bool,
89
- errorMsg: _propTypes.default.string
100
+ errorMsg: _propTypes.default.string,
101
+ darkLabel: _propTypes.default.bool
90
102
  };
91
103
  var _default = exports.default = Label;
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.29.0",
4
+ "version": "8.30.0",
5
5
  "main": "dist/index.js",
6
6
  "license": "ISC",
7
7
  "jest": {
package/src/components/Atoms/Input/Input.md CHANGED
@@ -119,3 +119,15 @@ const ItalicText = styled(Text).attrs({weight: 'normal'})`
119
119
  maxPxWidthLargeBreakpoint={250}
120
120
  />
121
121
  ```
122
+
123
+ ```js
124
+ <h4>Input with dark label</h4>
125
+ <Input
126
+ name="dark-label"
127
+ placeholder="£0.00"
128
+ type="text"
129
+ label="The label text can be made black rather than the default grey"
130
+ id="input-example-8"
131
+ labelProps={{ darkLabel: true }}
132
+ />
133
+ ```
package/src/components/Atoms/Label/Label.js CHANGED
@@ -6,12 +6,22 @@ import Text from '../Text/Text';
6
6
  import spacing from '../../../theme/shared/spacing';
7
7
  import hideVisually from '../../../theme/shared/hideVisually';
8
8
 
9
+ const getLabelColor = ({ theme, errorMsg, darkLabel }) => {
10
+ if (errorMsg) {
11
+ return theme.color('red');
12
+ }
13
+ if (darkLabel) {
14
+ return theme.color('black');
15
+ }
16
+ return theme.color('grey_label');
17
+ };
18
+
9
19
  const LabelElement = styled.label`
10
20
  width: 100%;
11
21
  position: relative;
12
22
  display: flex;
13
23
  flex-direction: column;
14
- color: ${({ theme, errorMsg }) => (errorMsg ? theme.color('red') : theme.color('grey_label'))};
24
+ color: ${getLabelColor};
15
25
 
16
26
  ${({ optional, theme }) => optional === true && `
17
27
  :after {
@@ -45,6 +55,7 @@ const LabelText = ({
45
55
  * @param children
46
56
  * @param label
47
57
  * @param hideLabel - Visually hide the label text (without removing it from the document)
58
+ * @param darkLabel - Make the label text black rather than the default grey
48
59
  * @param rest
49
60
  * @returns {JSX.Element}
50
61
  * @constructor
@@ -53,6 +64,7 @@ const Label = ({
53
64
  children = null,
54
65
  label,
55
66
  hideLabel = false,
67
+ darkLabel = false,
56
68
  optional = null,
57
69
  errorMsg = '',
58
70
  ...rest
@@ -60,6 +72,7 @@ const Label = ({
60
72
  <LabelElement
61
73
  optional={optional}
62
74
  errorMsg={errorMsg}
75
+ darkLabel={darkLabel}
63
76
  {...rest}
64
77
  >
65
78
  <LabelText
@@ -78,12 +91,14 @@ Label.propTypes = {
78
91
  hideLabel: PropTypes.bool,
79
92
  children: PropTypes.node,
80
93
  optional: PropTypes.bool,
81
- errorMsg: PropTypes.string
94
+ errorMsg: PropTypes.string,
95
+ darkLabel: PropTypes.bool
82
96
  };
83
97
 
84
98
  LabelElement.propTypes = {
85
99
  optional: PropTypes.bool,
86
- errorMsg: PropTypes.string
100
+ errorMsg: PropTypes.string,
101
+ darkLabel: PropTypes.bool
87
102
  };
88
103
 
89
104
  LabelText.propTypes = {