@dhis2-ui/checkbox 9.2.0 → 9.3.0-alpha.1

package/build/cjs/checkbox/checkbox.js

@@ -110,7 +110,7 @@ class Checkbox extends _react.Component {
     });
     return /*#__PURE__*/_react.default.createElement("label", {
       "data-test": dataTest,
-      className: _style.default.dynamic([["1088888266", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)(className, {
+      className: _style.default.dynamic([["1252368010", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)(className, {
         disabled,
         dense
       }) || "")
@@ -126,9 +126,9 @@ class Checkbox extends _react.Component {
       onFocus: this.handleFocus,
       onKeyDown: this.handleKeyDown,
       onBlur: this.handleBlur,
-      className: _style.default.dynamic([["1088888266", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]])
+      className: _style.default.dynamic([["1252368010", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]])
     }), /*#__PURE__*/_react.default.createElement("div", {
-      className: _style.default.dynamic([["1088888266", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)('icon', {
+      className: _style.default.dynamic([["1252368010", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]]]) + " " + ((0, _classnames.default)('icon', {
         dense
       }) || "")
     }, dense ? /*#__PURE__*/_react.default.createElement(_checkboxIcon.CheckboxDense, {
@@ -136,9 +136,9 @@ class Checkbox extends _react.Component {
     }) : /*#__PURE__*/_react.default.createElement(_checkboxIcon.CheckboxRegular, {
       className: classes
     })), label, /*#__PURE__*/_react.default.createElement(_style.default, {
-      id: "1088888266",
+      id: "1252368010",
       dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]
-    }, ["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:14px;line-height:19px;}"), "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:".concat(_uiConstants.spacers.dp4, ";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;}")]));
+    }, ["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:14px;line-height:19px;}"), "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;inset-inline-start: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-inline-end:".concat(_uiConstants.spacers.dp4, ";border:2px solid transparent;padding:1px;border-radius:5px;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end: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;}")]));
   }
 
 }

package/build/cjs/checkbox/checkbox.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RTL = 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;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -262,4 +262,10 @@ exports.ImageLabelDense = ImageLabelDense;
 ImageLabelDense.args = { ...ImageLabel.args,
   dense: true
 };
-ImageLabelDense.storyName = 'Image label - Dense';
+ImageLabelDense.storyName = 'Image label - Dense';
+
+const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_index.Checkbox, args));
+
+exports.RTL = RTL;

package/build/cjs/checkbox-field/checkbox-field.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-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;
+exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RequiredDense = exports.Required = exports.RTL = 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;
 
 var _uiConstants = require("@dhis2/ui-constants");
 
@@ -206,4 +206,10 @@ exports.ImageLabelDense = ImageLabelDense;
 ImageLabelDense.args = { ...DefaultDense.args,
   ...ImageLabel.args
 };
-ImageLabelDense.storyName = 'Image label - Dense';
+ImageLabelDense.storyName = 'Image label - Dense';
+
+const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.CheckboxField, args)));
+
+exports.RTL = RTL;

package/build/es/checkbox/checkbox.js

@@ -92,7 +92,7 @@ class Checkbox extends Component {
     });
     return /*#__PURE__*/React.createElement("label", {
       "data-test": dataTest,
-      className: _JSXStyle.dynamic([["1088888266", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]]) + " " + (cx(className, {
+      className: _JSXStyle.dynamic([["1252368010", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]]) + " " + (cx(className, {
         disabled,
         dense
       }) || "")
@@ -108,9 +108,9 @@ class Checkbox extends Component {
       onFocus: this.handleFocus,
       onKeyDown: this.handleKeyDown,
       onBlur: this.handleBlur,
-      className: _JSXStyle.dynamic([["1088888266", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]])
+      className: _JSXStyle.dynamic([["1252368010", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]])
     }), /*#__PURE__*/React.createElement("div", {
-      className: _JSXStyle.dynamic([["1088888266", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]]) + " " + (cx('icon', {
+      className: _JSXStyle.dynamic([["1252368010", [colors.grey900, theme.disabled, spacers.dp4, theme.focus]]]) + " " + (cx('icon', {
         dense
       }) || "")
     }, dense ? /*#__PURE__*/React.createElement(CheckboxDense, {
@@ -118,9 +118,9 @@ class Checkbox extends Component {
     }) : /*#__PURE__*/React.createElement(CheckboxRegular, {
       className: classes
     })), label, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "1088888266",
+      id: "1252368010",
       dynamic: [colors.grey900, theme.disabled, spacers.dp4, theme.focus]
-    }, ["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:14px;line-height:19px;}"), "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:".concat(spacers.dp4, ";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;}")]));
+    }, ["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:14px;line-height:19px;}"), "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;inset-inline-start: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-inline-end:".concat(spacers.dp4, ";border:2px solid transparent;padding:1px;border-radius:5px;}"), "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;border-radius:4px;}", "input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}")]));
   }
 
 }

package/build/es/checkbox/checkbox.stories.js

@@ -225,4 +225,7 @@ export const ImageLabelDense = Template.bind({});
 ImageLabelDense.args = { ...ImageLabel.args,
   dense: true
 };
-ImageLabelDense.storyName = 'Image label - Dense';
+ImageLabelDense.storyName = 'Image label - Dense';
+export const RTL = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(Checkbox, args));

package/build/es/checkbox-field/checkbox-field.stories.js

@@ -170,4 +170,7 @@ export const ImageLabelDense = Template.bind({});
 ImageLabelDense.args = { ...DefaultDense.args,
   ...ImageLabel.args
 };
-ImageLabelDense.storyName = 'Image label - Dense';
+ImageLabelDense.storyName = 'Image label - Dense';
+export const RTL = args => /*#__PURE__*/React.createElement("div", {
+  dir: "rtl"
+}, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckboxField, args)));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/checkbox",
-    "version": "9.2.0",
+    "version": "9.3.0-alpha.1",
     "description": "UI Checkbox",
     "repository": {
         "type": "git",
@@ -33,9 +33,9 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/field": "9.2.0",
-        "@dhis2-ui/required": "9.2.0",
-        "@dhis2/ui-constants": "9.2.0",
+        "@dhis2-ui/field": "9.3.0-alpha.1",
+        "@dhis2-ui/required": "9.3.0-alpha.1",
+        "@dhis2/ui-constants": "9.3.0-alpha.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },