@dhis2-ui/checkbox 8.2.0 → 8.2.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.
- package/build/cjs/checkbox/checkbox-icon.js +22 -20
- package/build/cjs/checkbox/checkbox.js +3 -3
- package/build/cjs/checkbox/checkbox.stories.js +12 -16
- package/build/cjs/checkbox-field/checkbox-field.js +62 -56
- package/build/cjs/checkbox-field/checkbox-field.stories.js +11 -16
- package/build/es/checkbox/checkbox-icon.js +21 -19
- package/build/es/checkbox/checkbox.js +3 -3
- package/build/es/checkbox/checkbox.stories.js +11 -15
- package/build/es/checkbox-field/checkbox-field.js +62 -56
- package/build/es/checkbox-field/checkbox-field.stories.js +10 -15
- package/package.json +4 -4
|
@@ -3,8 +3,8 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.CheckboxRegular = CheckboxRegular;
|
|
7
6
|
exports.CheckboxDense = CheckboxDense;
|
|
7
|
+
exports.CheckboxRegular = CheckboxRegular;
|
|
8
8
|
|
|
9
9
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
10
10
|
|
|
@@ -16,55 +16,57 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
16
16
|
|
|
17
17
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
18
|
|
|
19
|
-
const commonStyles = ["svg.jsx-1744227082{display:block;pointer-events:none;}",
|
|
19
|
+
const commonStyles = ["svg.jsx-1744227082{display:block;pointer-events:none;}", "svg.jsx-1744227082 .border.jsx-1744227082{fill:".concat(_uiConstants.colors.grey600, ";}"), "svg.jsx-1744227082 .background.jsx-1744227082,svg.jsx-1744227082 .indeterminate.jsx-1744227082,svg.jsx-1744227082 .checkmark.jsx-1744227082{fill:".concat(_uiConstants.colors.white, ";}"), "svg.checked.jsx-1744227082 .background.jsx-1744227082,svg.indeterminate.jsx-1744227082 .background.jsx-1744227082{fill:".concat(_uiConstants.colors.teal400, ";}"), "svg.valid.jsx-1744227082 .background.jsx-1744227082{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.warning.jsx-1744227082 .background.jsx-1744227082{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.error.jsx-1744227082 .background.jsx-1744227082{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.jsx-1744227082:not(.checked) .checkmark.jsx-1744227082,svg.jsx-1744227082:not(.indeterminate) .indeterminate.jsx-1744227082{fill:none;}", "svg.jsx-1744227082:not(.checked):not(.indeterminate) .background.jsx-1744227082{fill:".concat(_uiConstants.colors.white, ";}")];
|
|
20
20
|
commonStyles.__hash = "1744227082";
|
|
21
21
|
|
|
22
|
-
function CheckboxRegular({
|
|
23
|
-
|
|
24
|
-
|
|
22
|
+
function CheckboxRegular(_ref) {
|
|
23
|
+
let {
|
|
24
|
+
className
|
|
25
|
+
} = _ref;
|
|
25
26
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
26
27
|
viewBox: "0 0 18 18",
|
|
27
28
|
xmlns: "http://www.w3.org/2000/svg",
|
|
28
|
-
className:
|
|
29
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["3549931073", [_uiConstants.colors.teal700, _uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + (className || "")
|
|
29
30
|
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
30
31
|
x: "0",
|
|
31
32
|
y: "0",
|
|
32
33
|
width: "18",
|
|
33
34
|
height: "18",
|
|
34
35
|
rx: "3",
|
|
35
|
-
className:
|
|
36
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["3549931073", [_uiConstants.colors.teal700, _uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "background"
|
|
36
37
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
37
38
|
d: "M3,0 L15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 0,16.6568542 0,15 L0,3 C0,1.34314575 1.34314575,0 3,0 Z M3,2 C2.44771525,2 2,2.44771525 2,3 L2,15 C2,15.5522847 2.44771525,16 3,16 L15,16 C15.5522847,16 16,15.5522847 16,15 L16,3 C16,2.44771525 15.5522847,2 15,2 L3,2 Z",
|
|
38
|
-
className:
|
|
39
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["3549931073", [_uiConstants.colors.teal700, _uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "border"
|
|
39
40
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
40
41
|
d: "M4.74451387,8.02852516 C4.39595738,8.11985643 4.12375034,8.39235188 4.03251575,8.74127768 C3.94128115,9.09020348 4.04521722,9.46125864 4.30437605,9.71182782 L7.29823844,12.7078028 C7.68753993,13.0973991 8.31859767,13.0973991 8.70789916,12.7078028 L13.695624,6.71585285 C13.9547828,6.46528367 14.0587189,6.09422851 13.9674843,5.74530271 C13.8762497,5.39637691 13.6040426,5.12388146 13.2554861,5.0325502 C12.9069296,4.94121893 12.5362672,5.04526513 12.2859632,5.30469855 L8.0030688,10.5910713 L5.71403676,8.30067351 C5.46373279,8.0412401 5.09307036,7.9371939 4.74451387,8.02852516 Z",
|
|
41
|
-
className:
|
|
42
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["3549931073", [_uiConstants.colors.teal700, _uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "checkmark"
|
|
42
43
|
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
43
44
|
x: "4",
|
|
44
45
|
y: "8",
|
|
45
46
|
width: "10",
|
|
46
47
|
height: "2",
|
|
47
48
|
rx: "1",
|
|
48
|
-
className:
|
|
49
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["3549931073", [_uiConstants.colors.teal700, _uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "indeterminate"
|
|
49
50
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
50
51
|
id: commonStyles.__hash
|
|
51
52
|
}, commonStyles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
52
53
|
id: "3549931073",
|
|
53
54
|
dynamic: [_uiConstants.colors.teal700, _uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]
|
|
54
|
-
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}",
|
|
55
|
+
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", "svg.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.teal700, ";}"), "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey300, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue700, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red700, ";}")]));
|
|
55
56
|
}
|
|
56
57
|
|
|
57
58
|
CheckboxRegular.propTypes = {
|
|
58
59
|
className: _propTypes.default.string
|
|
59
60
|
};
|
|
60
61
|
|
|
61
|
-
function CheckboxDense({
|
|
62
|
-
|
|
63
|
-
|
|
62
|
+
function CheckboxDense(_ref2) {
|
|
63
|
+
let {
|
|
64
|
+
className
|
|
65
|
+
} = _ref2;
|
|
64
66
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
65
67
|
viewBox: "0 0 14 14",
|
|
66
68
|
xmlns: "http://www.w3.org/2000/svg",
|
|
67
|
-
className:
|
|
69
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2720111562", [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + (className || "")
|
|
68
70
|
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
69
71
|
fill: "#009688",
|
|
70
72
|
x: "0",
|
|
@@ -72,28 +74,28 @@ function CheckboxDense({
|
|
|
72
74
|
width: "14",
|
|
73
75
|
height: "14",
|
|
74
76
|
rx: "2",
|
|
75
|
-
className:
|
|
77
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2720111562", [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "background"
|
|
76
78
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
77
79
|
d: "M2,0 L12,0 C13.1045695,0 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 L1,12 C1,12.5522847 1.44771525,13 2,13 L12,13 C12.5522847,13 13,12.5522847 13,12 L13,2 C13,1.44771525 12.5522847,1 12,1 L2,1 Z",
|
|
78
80
|
fill: "#004D40",
|
|
79
|
-
className:
|
|
81
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2720111562", [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "border"
|
|
80
82
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
81
83
|
d: "M10.3520005,3.30015877 L5.54268293,8.03252726 L3.64634146,6.16652726 L2.28668615,7.5044281 L5.54310367,10.7010587 L11.7145993,4.628307 L10.3520005,3.30015877 Z M5.54268293,9.43547274 L5.61193184,9.36733181 L5.54226219,9.29894127 L5.47309681,9.367 L5.54268293,9.43547274 Z M10.6496329,4.41023392 L10.6495057,4.35652297 L10.5648412,4.35672356 L10.2854007,4.631693 L10.3553166,4.69984123 L10.6496329,4.41023392 Z M3.42891348,7.22439304 L3.35030905,7.22439304 L3.35034135,7.27820863 L3.64634146,7.56947274 L3.71331385,7.5035719 L3.42891348,7.22439304 Z",
|
|
82
84
|
fill: "#FFFFFF",
|
|
83
|
-
className:
|
|
85
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2720111562", [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "checkmark"
|
|
84
86
|
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
85
87
|
fill: "#FFFFFF",
|
|
86
88
|
x: "3",
|
|
87
89
|
y: "6",
|
|
88
90
|
width: "8",
|
|
89
91
|
height: "2",
|
|
90
|
-
className:
|
|
92
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _style.default.dynamic([["2720111562", [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "indeterminate"
|
|
91
93
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
92
94
|
id: commonStyles.__hash
|
|
93
95
|
}, commonStyles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
94
96
|
id: "2720111562",
|
|
95
97
|
dynamic: [_uiConstants.colors.teal800, _uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]
|
|
96
|
-
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}",
|
|
98
|
+
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", "svg.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.teal800, ";}"), "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.disabled.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.disabled.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.grey500, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.blue800, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(_uiConstants.colors.red800, ";}")]));
|
|
97
99
|
}
|
|
98
100
|
|
|
99
101
|
CheckboxDense.propTypes = {
|
|
@@ -28,8 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
28
28
|
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
29
|
|
|
30
30
|
class Checkbox extends _react.Component {
|
|
31
|
-
constructor(
|
|
32
|
-
super(...
|
|
31
|
+
constructor() {
|
|
32
|
+
super(...arguments);
|
|
33
33
|
|
|
34
34
|
_defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
|
|
35
35
|
|
|
@@ -131,7 +131,7 @@ class Checkbox extends _react.Component {
|
|
|
131
131
|
})), label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
132
132
|
id: "2774859264",
|
|
133
133
|
dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.theme.focus]
|
|
134
|
-
}, [
|
|
134
|
+
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer;color:".concat(_uiConstants.colors.grey900, ";font-size:16px;line-height:20px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(_uiConstants.theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:18px;left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:5px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:4px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}")]));
|
|
135
135
|
}
|
|
136
136
|
|
|
137
137
|
}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.IndeterminateDense = exports.Indeterminate = exports.ImageLabelDense = exports.ImageLabel = exports.FocusedUncheckedDense = exports.FocusedUnchecked = exports.FocusedCheckedDense = exports.FocusedChecked = exports.ErrorDense = exports.Error = exports.DisabledDense = exports.Disabled = exports.DefaultDense = exports.Default = exports.CheckedDense = exports.Checked = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -16,17 +16,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
16
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
|
|
18
18
|
const subtitle = 'A checkbox is a control that allows a user to toggle an option.';
|
|
19
|
-
const description =
|
|
20
|
-
Checkboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.
|
|
21
|
-
|
|
22
|
-
Do not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.
|
|
23
|
-
|
|
24
|
-
If there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.
|
|
25
|
-
|
|
26
|
-
\`\`\`js
|
|
27
|
-
import { Checkbox } from '@dhis2/ui'
|
|
28
|
-
\`\`\`
|
|
29
|
-
`;
|
|
19
|
+
const description = "\nCheckboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.\n\nDo not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.\n\nIf there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.\n\n```js\nimport { Checkbox } from '@dhis2/ui'\n```\n";
|
|
30
20
|
|
|
31
21
|
window.onChange = (payload, event) => {
|
|
32
22
|
console.log('onClick payload', payload);
|
|
@@ -43,11 +33,17 @@ window.onBlur = (payload, event) => {
|
|
|
43
33
|
console.log('onBlur event', event);
|
|
44
34
|
};
|
|
45
35
|
|
|
46
|
-
const onChange = (
|
|
36
|
+
const onChange = function () {
|
|
37
|
+
return window.onChange(...arguments);
|
|
38
|
+
};
|
|
47
39
|
|
|
48
|
-
const onFocus = (
|
|
40
|
+
const onFocus = function () {
|
|
41
|
+
return window.onFocus(...arguments);
|
|
42
|
+
};
|
|
49
43
|
|
|
50
|
-
const onBlur = (
|
|
44
|
+
const onBlur = function () {
|
|
45
|
+
return window.onBlur(...arguments);
|
|
46
|
+
};
|
|
51
47
|
|
|
52
48
|
const defaultArgs = {
|
|
53
49
|
name: 'Ex',
|
|
@@ -68,7 +64,7 @@ const uniqueOnStateArgType = {
|
|
|
68
64
|
}
|
|
69
65
|
};
|
|
70
66
|
var _default = {
|
|
71
|
-
title: '
|
|
67
|
+
title: 'Checkbox',
|
|
72
68
|
component: _index.Checkbox,
|
|
73
69
|
parameters: {
|
|
74
70
|
componentSubtitle: subtitle,
|
|
@@ -19,13 +19,16 @@ var _index = require("../index.js");
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
21
|
|
|
22
|
-
const AddRequired =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
22
|
+
const AddRequired = _ref => {
|
|
23
|
+
let {
|
|
24
|
+
label,
|
|
25
|
+
required,
|
|
26
|
+
dataTest
|
|
27
|
+
} = _ref;
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, label, required && /*#__PURE__*/_react.default.createElement(_required.Required, {
|
|
29
|
+
dataTest: "".concat(dataTest, "-required")
|
|
30
|
+
}));
|
|
31
|
+
};
|
|
29
32
|
|
|
30
33
|
AddRequired.propTypes = {
|
|
31
34
|
dataTest: _propTypes.default.string,
|
|
@@ -33,55 +36,58 @@ AddRequired.propTypes = {
|
|
|
33
36
|
required: _propTypes.default.bool
|
|
34
37
|
};
|
|
35
38
|
|
|
36
|
-
const CheckboxField =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
39
|
+
const CheckboxField = _ref2 => {
|
|
40
|
+
let {
|
|
41
|
+
value,
|
|
42
|
+
label,
|
|
43
|
+
name,
|
|
44
|
+
className,
|
|
45
|
+
tabIndex,
|
|
46
|
+
onChange,
|
|
47
|
+
onFocus,
|
|
48
|
+
onBlur,
|
|
49
|
+
checked,
|
|
50
|
+
disabled,
|
|
51
|
+
valid,
|
|
52
|
+
warning,
|
|
53
|
+
error,
|
|
54
|
+
dense,
|
|
55
|
+
initialFocus,
|
|
56
|
+
required,
|
|
57
|
+
helpText,
|
|
58
|
+
validationText,
|
|
59
|
+
dataTest
|
|
60
|
+
} = _ref2;
|
|
61
|
+
return /*#__PURE__*/_react.default.createElement(_field.Field, {
|
|
62
|
+
className: className,
|
|
63
|
+
dataTest: dataTest,
|
|
64
|
+
helpText: helpText,
|
|
65
|
+
validationText: validationText,
|
|
66
|
+
error: error,
|
|
67
|
+
warning: warning,
|
|
68
|
+
valid: valid,
|
|
69
|
+
disabled: disabled
|
|
70
|
+
}, /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
71
|
+
value: value,
|
|
72
|
+
label: /*#__PURE__*/_react.default.createElement(AddRequired, {
|
|
73
|
+
label: label,
|
|
74
|
+
required: required,
|
|
75
|
+
dataTest: dataTest
|
|
76
|
+
}),
|
|
77
|
+
name: name,
|
|
78
|
+
tabIndex: tabIndex,
|
|
79
|
+
onChange: onChange,
|
|
80
|
+
onFocus: onFocus,
|
|
81
|
+
onBlur: onBlur,
|
|
82
|
+
checked: checked,
|
|
83
|
+
disabled: disabled,
|
|
84
|
+
valid: valid,
|
|
85
|
+
warning: warning,
|
|
86
|
+
error: error,
|
|
87
|
+
dense: dense,
|
|
88
|
+
initialFocus: initialFocus
|
|
89
|
+
}));
|
|
90
|
+
};
|
|
85
91
|
|
|
86
92
|
exports.CheckboxField = CheckboxField;
|
|
87
93
|
CheckboxField.defaultProps = {
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RequiredDense = exports.Required = exports.ImageLabelDense = exports.ImageLabel = exports.HelpText = exports.FocusedUncheckedDense = exports.FocusedUnchecked = exports.FocusedCheckedDense = exports.FocusedChecked = exports.ErrorDense = exports.Error = exports.DisabledDense = exports.Disabled = exports.DefaultDense = exports.Default = exports.CheckedDense = exports.Checked = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
@@ -15,24 +15,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
15
15
|
|
|
16
16
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
17
|
|
|
18
|
-
const description = `
|
|
19
|
-
A \`CheckboxField\` is a Checkbox component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.
|
|
18
|
+
const description = "\nA `CheckboxField` is a Checkbox component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.\n\nSee the basic Checkbox for usage and design system guidelines.\n\n```js\nimport { CheckboxField } from '@dhis2/ui'\n```\n";
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
name,
|
|
30
|
-
value,
|
|
31
|
-
checked
|
|
32
|
-
}) => console.log(`name: ${name}, value: ${value}, checked: ${checked}`);
|
|
20
|
+
const logger = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
name,
|
|
23
|
+
value,
|
|
24
|
+
checked
|
|
25
|
+
} = _ref;
|
|
26
|
+
return console.log("name: ".concat(name, ", value: ").concat(value, ", checked: ").concat(checked));
|
|
27
|
+
};
|
|
33
28
|
|
|
34
29
|
var _default = {
|
|
35
|
-
title: '
|
|
30
|
+
title: 'Checkbox Field',
|
|
36
31
|
component: _index.CheckboxField,
|
|
37
32
|
parameters: {
|
|
38
33
|
docs: {
|
|
@@ -2,52 +2,54 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
2
2
|
import { colors } from '@dhis2/ui-constants';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
const commonStyles = ["svg.jsx-1744227082{display:block;pointer-events:none;}",
|
|
5
|
+
const commonStyles = ["svg.jsx-1744227082{display:block;pointer-events:none;}", "svg.jsx-1744227082 .border.jsx-1744227082{fill:".concat(colors.grey600, ";}"), "svg.jsx-1744227082 .background.jsx-1744227082,svg.jsx-1744227082 .indeterminate.jsx-1744227082,svg.jsx-1744227082 .checkmark.jsx-1744227082{fill:".concat(colors.white, ";}"), "svg.checked.jsx-1744227082 .background.jsx-1744227082,svg.indeterminate.jsx-1744227082 .background.jsx-1744227082{fill:".concat(colors.teal400, ";}"), "svg.valid.jsx-1744227082 .background.jsx-1744227082{fill:".concat(colors.blue600, ";}"), "svg.warning.jsx-1744227082 .background.jsx-1744227082{fill:".concat(colors.yellow700, ";}"), "svg.error.jsx-1744227082 .background.jsx-1744227082{fill:".concat(colors.red500, ";}"), "svg.jsx-1744227082:not(.checked) .checkmark.jsx-1744227082,svg.jsx-1744227082:not(.indeterminate) .indeterminate.jsx-1744227082{fill:none;}", "svg.jsx-1744227082:not(.checked):not(.indeterminate) .background.jsx-1744227082{fill:".concat(colors.white, ";}")];
|
|
6
6
|
commonStyles.__hash = "1744227082";
|
|
7
|
-
export function CheckboxRegular({
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
export function CheckboxRegular(_ref) {
|
|
8
|
+
let {
|
|
9
|
+
className
|
|
10
|
+
} = _ref;
|
|
10
11
|
return /*#__PURE__*/React.createElement("svg", {
|
|
11
12
|
viewBox: "0 0 18 18",
|
|
12
13
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13
|
-
className:
|
|
14
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["3549931073", [colors.teal700, colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + (className || "")
|
|
14
15
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
15
16
|
x: "0",
|
|
16
17
|
y: "0",
|
|
17
18
|
width: "18",
|
|
18
19
|
height: "18",
|
|
19
20
|
rx: "3",
|
|
20
|
-
className:
|
|
21
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["3549931073", [colors.teal700, colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "background"
|
|
21
22
|
}), /*#__PURE__*/React.createElement("path", {
|
|
22
23
|
d: "M3,0 L15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 0,16.6568542 0,15 L0,3 C0,1.34314575 1.34314575,0 3,0 Z M3,2 C2.44771525,2 2,2.44771525 2,3 L2,15 C2,15.5522847 2.44771525,16 3,16 L15,16 C15.5522847,16 16,15.5522847 16,15 L16,3 C16,2.44771525 15.5522847,2 15,2 L3,2 Z",
|
|
23
|
-
className:
|
|
24
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["3549931073", [colors.teal700, colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "border"
|
|
24
25
|
}), /*#__PURE__*/React.createElement("path", {
|
|
25
26
|
d: "M4.74451387,8.02852516 C4.39595738,8.11985643 4.12375034,8.39235188 4.03251575,8.74127768 C3.94128115,9.09020348 4.04521722,9.46125864 4.30437605,9.71182782 L7.29823844,12.7078028 C7.68753993,13.0973991 8.31859767,13.0973991 8.70789916,12.7078028 L13.695624,6.71585285 C13.9547828,6.46528367 14.0587189,6.09422851 13.9674843,5.74530271 C13.8762497,5.39637691 13.6040426,5.12388146 13.2554861,5.0325502 C12.9069296,4.94121893 12.5362672,5.04526513 12.2859632,5.30469855 L8.0030688,10.5910713 L5.71403676,8.30067351 C5.46373279,8.0412401 5.09307036,7.9371939 4.74451387,8.02852516 Z",
|
|
26
|
-
className:
|
|
27
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["3549931073", [colors.teal700, colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "checkmark"
|
|
27
28
|
}), /*#__PURE__*/React.createElement("rect", {
|
|
28
29
|
x: "4",
|
|
29
30
|
y: "8",
|
|
30
31
|
width: "10",
|
|
31
32
|
height: "2",
|
|
32
33
|
rx: "1",
|
|
33
|
-
className:
|
|
34
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["3549931073", [colors.teal700, colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]]]) + " " + "indeterminate"
|
|
34
35
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
35
36
|
id: commonStyles.__hash
|
|
36
37
|
}, commonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
37
38
|
id: "3549931073",
|
|
38
39
|
dynamic: [colors.teal700, colors.grey300, colors.grey400, colors.blue600, colors.blue700, colors.yellow700, colors.yellow800, colors.red500, colors.red700]
|
|
39
|
-
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}",
|
|
40
|
+
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", "svg.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.teal700, ";}"), "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(colors.grey300, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue700, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red700, ";}")]));
|
|
40
41
|
}
|
|
41
42
|
CheckboxRegular.propTypes = {
|
|
42
43
|
className: PropTypes.string
|
|
43
44
|
};
|
|
44
|
-
export function CheckboxDense({
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
export function CheckboxDense(_ref2) {
|
|
46
|
+
let {
|
|
47
|
+
className
|
|
48
|
+
} = _ref2;
|
|
47
49
|
return /*#__PURE__*/React.createElement("svg", {
|
|
48
50
|
viewBox: "0 0 14 14",
|
|
49
51
|
xmlns: "http://www.w3.org/2000/svg",
|
|
50
|
-
className:
|
|
52
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2720111562", [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + (className || "")
|
|
51
53
|
}, /*#__PURE__*/React.createElement("rect", {
|
|
52
54
|
fill: "#009688",
|
|
53
55
|
x: "0",
|
|
@@ -55,28 +57,28 @@ export function CheckboxDense({
|
|
|
55
57
|
width: "14",
|
|
56
58
|
height: "14",
|
|
57
59
|
rx: "2",
|
|
58
|
-
className:
|
|
60
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2720111562", [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "background"
|
|
59
61
|
}), /*#__PURE__*/React.createElement("path", {
|
|
60
62
|
d: "M2,0 L12,0 C13.1045695,0 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 L1,12 C1,12.5522847 1.44771525,13 2,13 L12,13 C12.5522847,13 13,12.5522847 13,12 L13,2 C13,1.44771525 12.5522847,1 12,1 L2,1 Z",
|
|
61
63
|
fill: "#004D40",
|
|
62
|
-
className:
|
|
64
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2720111562", [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "border"
|
|
63
65
|
}), /*#__PURE__*/React.createElement("path", {
|
|
64
66
|
d: "M10.3520005,3.30015877 L5.54268293,8.03252726 L3.64634146,6.16652726 L2.28668615,7.5044281 L5.54310367,10.7010587 L11.7145993,4.628307 L10.3520005,3.30015877 Z M5.54268293,9.43547274 L5.61193184,9.36733181 L5.54226219,9.29894127 L5.47309681,9.367 L5.54268293,9.43547274 Z M10.6496329,4.41023392 L10.6495057,4.35652297 L10.5648412,4.35672356 L10.2854007,4.631693 L10.3553166,4.69984123 L10.6496329,4.41023392 Z M3.42891348,7.22439304 L3.35030905,7.22439304 L3.35034135,7.27820863 L3.64634146,7.56947274 L3.71331385,7.5035719 L3.42891348,7.22439304 Z",
|
|
65
67
|
fill: "#FFFFFF",
|
|
66
|
-
className:
|
|
68
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2720111562", [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "checkmark"
|
|
67
69
|
}), /*#__PURE__*/React.createElement("rect", {
|
|
68
70
|
fill: "#FFFFFF",
|
|
69
71
|
x: "3",
|
|
70
72
|
y: "6",
|
|
71
73
|
width: "8",
|
|
72
74
|
height: "2",
|
|
73
|
-
className:
|
|
75
|
+
className: "jsx-".concat(commonStyles.__hash) + " " + _JSXStyle.dynamic([["2720111562", [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]]]) + " " + "indeterminate"
|
|
74
76
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
75
77
|
id: commonStyles.__hash
|
|
76
78
|
}, commonStyles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
77
79
|
id: "2720111562",
|
|
78
80
|
dynamic: [colors.teal800, colors.grey400, colors.grey400, colors.grey500, colors.blue600, colors.blue800, colors.yellow700, colors.yellow800, colors.red500, colors.red800]
|
|
79
|
-
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}",
|
|
81
|
+
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", "svg.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.teal800, ";}"), "svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey400, ";}"), "svg.disabled.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.disabled.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), "svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.blue800, ";}"), "svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.yellow800, ";}"), "svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red500, ";}"), "svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:".concat(colors.red800, ";}")]));
|
|
80
82
|
}
|
|
81
83
|
CheckboxDense.propTypes = {
|
|
82
84
|
className: PropTypes.string
|
|
@@ -10,8 +10,8 @@ import React, { Component, createRef } from 'react';
|
|
|
10
10
|
import { CheckboxRegular, CheckboxDense } from './checkbox-icon.js';
|
|
11
11
|
|
|
12
12
|
class Checkbox extends Component {
|
|
13
|
-
constructor(
|
|
14
|
-
super(...
|
|
13
|
+
constructor() {
|
|
14
|
+
super(...arguments);
|
|
15
15
|
|
|
16
16
|
_defineProperty(this, "ref", /*#__PURE__*/createRef());
|
|
17
17
|
|
|
@@ -113,7 +113,7 @@ class Checkbox extends Component {
|
|
|
113
113
|
})), label, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
114
114
|
id: "2774859264",
|
|
115
115
|
dynamic: [colors.grey900, theme.disabled, theme.focus]
|
|
116
|
-
}, [
|
|
116
|
+
}, ["label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer;color:".concat(colors.grey900, ";font-size:16px;line-height:20px;}"), "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", "label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:".concat(theme.disabled, ";}"), "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:18px;left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:5px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:4px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}")]));
|
|
117
117
|
}
|
|
118
118
|
|
|
119
119
|
}
|
|
@@ -4,17 +4,7 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { Checkbox } from './index.js';
|
|
6
6
|
const subtitle = 'A checkbox is a control that allows a user to toggle an option.';
|
|
7
|
-
const description =
|
|
8
|
-
Checkboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.
|
|
9
|
-
|
|
10
|
-
Do not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.
|
|
11
|
-
|
|
12
|
-
If there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.
|
|
13
|
-
|
|
14
|
-
\`\`\`js
|
|
15
|
-
import { Checkbox } from '@dhis2/ui'
|
|
16
|
-
\`\`\`
|
|
17
|
-
`;
|
|
7
|
+
const description = "\nCheckboxes are used when an option can be toggled on or off. Toggling a checkbox on (true) is always considered a positive action and should reflect a positive/true/on state. Multiple checkboxes can be used in a list where a user can toggle multiple elements.\n\nDo not use checkboxes in a list of several options where only a single option can be toggled, use [radio buttons](../?path=/docs/forms-radio-radio--default) here instead.\n\nIf there are many options that need to select from, consider using a [select](../?path=/docs/forms-single-select-single-select--with-options) instead.\n\n```js\nimport { Checkbox } from '@dhis2/ui'\n```\n";
|
|
18
8
|
|
|
19
9
|
window.onChange = (payload, event) => {
|
|
20
10
|
console.log('onClick payload', payload);
|
|
@@ -31,11 +21,17 @@ window.onBlur = (payload, event) => {
|
|
|
31
21
|
console.log('onBlur event', event);
|
|
32
22
|
};
|
|
33
23
|
|
|
34
|
-
const onChange = (
|
|
24
|
+
const onChange = function () {
|
|
25
|
+
return window.onChange(...arguments);
|
|
26
|
+
};
|
|
35
27
|
|
|
36
|
-
const onFocus = (
|
|
28
|
+
const onFocus = function () {
|
|
29
|
+
return window.onFocus(...arguments);
|
|
30
|
+
};
|
|
37
31
|
|
|
38
|
-
const onBlur = (
|
|
32
|
+
const onBlur = function () {
|
|
33
|
+
return window.onBlur(...arguments);
|
|
34
|
+
};
|
|
39
35
|
|
|
40
36
|
const defaultArgs = {
|
|
41
37
|
name: 'Ex',
|
|
@@ -56,7 +52,7 @@ const uniqueOnStateArgType = {
|
|
|
56
52
|
}
|
|
57
53
|
};
|
|
58
54
|
export default {
|
|
59
|
-
title: '
|
|
55
|
+
title: 'Checkbox',
|
|
60
56
|
component: Checkbox,
|
|
61
57
|
parameters: {
|
|
62
58
|
componentSubtitle: subtitle,
|
|
@@ -5,13 +5,16 @@ import PropTypes from 'prop-types';
|
|
|
5
5
|
import React from 'react';
|
|
6
6
|
import { Checkbox } from '../index.js';
|
|
7
7
|
|
|
8
|
-
const AddRequired =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
const AddRequired = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
label,
|
|
11
|
+
required,
|
|
12
|
+
dataTest
|
|
13
|
+
} = _ref;
|
|
14
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement(Required, {
|
|
15
|
+
dataTest: "".concat(dataTest, "-required")
|
|
16
|
+
}));
|
|
17
|
+
};
|
|
15
18
|
|
|
16
19
|
AddRequired.propTypes = {
|
|
17
20
|
dataTest: PropTypes.string,
|
|
@@ -19,55 +22,58 @@ AddRequired.propTypes = {
|
|
|
19
22
|
required: PropTypes.bool
|
|
20
23
|
};
|
|
21
24
|
|
|
22
|
-
const CheckboxField =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
25
|
+
const CheckboxField = _ref2 => {
|
|
26
|
+
let {
|
|
27
|
+
value,
|
|
28
|
+
label,
|
|
29
|
+
name,
|
|
30
|
+
className,
|
|
31
|
+
tabIndex,
|
|
32
|
+
onChange,
|
|
33
|
+
onFocus,
|
|
34
|
+
onBlur,
|
|
35
|
+
checked,
|
|
36
|
+
disabled,
|
|
37
|
+
valid,
|
|
38
|
+
warning,
|
|
39
|
+
error,
|
|
40
|
+
dense,
|
|
41
|
+
initialFocus,
|
|
42
|
+
required,
|
|
43
|
+
helpText,
|
|
44
|
+
validationText,
|
|
45
|
+
dataTest
|
|
46
|
+
} = _ref2;
|
|
47
|
+
return /*#__PURE__*/React.createElement(Field, {
|
|
48
|
+
className: className,
|
|
49
|
+
dataTest: dataTest,
|
|
50
|
+
helpText: helpText,
|
|
51
|
+
validationText: validationText,
|
|
52
|
+
error: error,
|
|
53
|
+
warning: warning,
|
|
54
|
+
valid: valid,
|
|
55
|
+
disabled: disabled
|
|
56
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
57
|
+
value: value,
|
|
58
|
+
label: /*#__PURE__*/React.createElement(AddRequired, {
|
|
59
|
+
label: label,
|
|
60
|
+
required: required,
|
|
61
|
+
dataTest: dataTest
|
|
62
|
+
}),
|
|
63
|
+
name: name,
|
|
64
|
+
tabIndex: tabIndex,
|
|
65
|
+
onChange: onChange,
|
|
66
|
+
onFocus: onFocus,
|
|
67
|
+
onBlur: onBlur,
|
|
68
|
+
checked: checked,
|
|
69
|
+
disabled: disabled,
|
|
70
|
+
valid: valid,
|
|
71
|
+
warning: warning,
|
|
72
|
+
error: error,
|
|
73
|
+
dense: dense,
|
|
74
|
+
initialFocus: initialFocus
|
|
75
|
+
}));
|
|
76
|
+
};
|
|
71
77
|
|
|
72
78
|
CheckboxField.defaultProps = {
|
|
73
79
|
dataTest: 'dhis2-uiwidgets-checkboxfield'
|
|
@@ -3,24 +3,19 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
3
3
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { CheckboxField } from './index.js';
|
|
6
|
-
const description = `
|
|
7
|
-
A \`CheckboxField\` is a Checkbox component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.
|
|
6
|
+
const description = "\nA `CheckboxField` is a Checkbox component wrapped with extra form utilities, including the ability to add a label, help text, and validation text. Validation styles like 'error' apply to all of these subcomponents.\n\nSee the basic Checkbox for usage and design system guidelines.\n\n```js\nimport { CheckboxField } from '@dhis2/ui'\n```\n";
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
name,
|
|
18
|
-
value,
|
|
19
|
-
checked
|
|
20
|
-
}) => console.log(`name: ${name}, value: ${value}, checked: ${checked}`);
|
|
8
|
+
const logger = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
name,
|
|
11
|
+
value,
|
|
12
|
+
checked
|
|
13
|
+
} = _ref;
|
|
14
|
+
return console.log("name: ".concat(name, ", value: ").concat(value, ", checked: ").concat(checked));
|
|
15
|
+
};
|
|
21
16
|
|
|
22
17
|
export default {
|
|
23
|
-
title: '
|
|
18
|
+
title: 'Checkbox Field',
|
|
24
19
|
component: CheckboxField,
|
|
25
20
|
parameters: {
|
|
26
21
|
docs: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/checkbox",
|
|
3
|
-
"version": "8.2.
|
|
3
|
+
"version": "8.2.1",
|
|
4
4
|
"description": "UI Checkbox",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.0.0-beta.1",
|
|
35
|
-
"@dhis2-ui/field": "8.2.
|
|
36
|
-
"@dhis2-ui/required": "8.2.
|
|
37
|
-
"@dhis2/ui-constants": "8.2.
|
|
35
|
+
"@dhis2-ui/field": "8.2.1",
|
|
36
|
+
"@dhis2-ui/required": "8.2.1",
|
|
37
|
+
"@dhis2/ui-constants": "8.2.1",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|