@twreporter/react-components 8.17.0-rc.3 → 8.17.0-rc.4

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.17.0-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.3...@twreporter/react-components@8.17.0-rc.4) (2023-04-14)
+
+**Note:** Version bump only for package @twreporter/react-components
+
+
+
+
+
 # [8.17.0-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-components@8.17.0-rc.2...@twreporter/react-components@8.17.0-rc.3) (2023-04-13)
 
 

package/lib/checkbox/index.js

@@ -23,6 +23,9 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+var disableColor = _color.colorGrayscale.gray400;
+var activeColor = _color.colorGrayscale.gray800;
+
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "checkbox__Container",
   componentId: "vzoxib-0"
@@ -31,13 +34,29 @@ var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   displayName: "checkbox__Input",
   componentId: "vzoxib-1"
-})(["width:16px;height:16px;border:solid 1px;border-radius:2px;accent-color:", ";margin-left:0px;margin-right:8px;&:enabled:not(:checked){border-color:", ";background:rgba(0,0,0,0);-webkit-appearance:none;-moz-appearance:none;appearance:none;}"], _color.colorGrayscale.gray800, _color.colorGrayscale.gray800);
+})(["width:0;height:0;opacity:0;z-index:-1;"]);
+
+var Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+  displayName: "checkbox__Label",
+  componentId: "vzoxib-2"
+})(["display:block;position:relative;padding-left:25px;"]);
+
+var Indicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "checkbox__Indicator",
+  componentId: "vzoxib-3"
+})(["width:16px;height:16px;background:", ";position:absolute;top:0px;left:0px;border-color:", ";border-radius:2px;box-shadow:0 0 0 1px ", ";margin:3px 8px 0px 0px;&::after{content:'';position:absolute;display:none;}", ":checked + &::after{display:block;left:5px;top:0px;width:4px;height:10px;border:solid white;border-width:0 2px 2px 0;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);}"], function (props) {
+  return props.value ? props.disabled ? disableColor : activeColor : 'rgba(0, 0, 0, 0)';
+}, function (props) {
+  return props.disabled ? disableColor : activeColor;
+}, function (props) {
+  return props.disabled ? disableColor : activeColor;
+}, Input);
 
 var ColorP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
   displayName: "checkbox__ColorP1",
-  componentId: "vzoxib-2"
+  componentId: "vzoxib-4"
 })(["color:", ";"], function (props) {
-  return props.disabled ? _color.colorGrayscale.gray400 : _color.colorGrayscale.gray800;
+  return props.disabled ? disableColor : activeColor;
 });
 
 var Checkbox = function Checkbox(_ref) {
@@ -55,15 +74,18 @@ var Checkbox = function Checkbox(_ref) {
     onChange && onChange(e);
   };
 
-  return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(Input, {
+  return /*#__PURE__*/_react["default"].createElement(Container, props, /*#__PURE__*/_react["default"].createElement(Label, null, label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
+    text: label,
+    disabled: disabled
+  }), /*#__PURE__*/_react["default"].createElement(Input, {
     type: "checkbox",
     checked: value,
     disabled: disabled,
     onChange: handleChange
-  }), label && /*#__PURE__*/_react["default"].createElement(ColorP1, {
-    text: label,
+  }), /*#__PURE__*/_react["default"].createElement(Indicator, {
+    value: value,
     disabled: disabled
-  }));
+  })));
 };
 
 exports.Checkbox = Checkbox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-components",
-  "version": "8.17.0-rc.3",
+  "version": "8.17.0-rc.4",
   "main": "lib/index.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
   "author": "twreporter <developer@twreporter.org>",
@@ -44,5 +44,5 @@
     "babel-loader": "^8.2.4",
     "chromatic": "^6.5.4"
   },
-  "gitHead": "278cbf7be48ece22befc99d4900a835f9f13c911"
+  "gitHead": "9c7c19c83d679794aaabf32ab21170fa681fa1e3"
 }