@dt-dds/react-checkbox 1.0.0-beta.58 → 1.0.0-beta.60

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @dt-ui/react-checkbox
 
+## 1.0.0-beta.60
+
+### Patch Changes
+
+- fix: sonarqube warnings
+
+## 1.0.0-beta.59
+
+### Patch Changes
+
+- fix: change color logic on typography
+- Updated dependencies
+  - @dt-dds/themes@1.0.0-beta.12
+  - @dt-dds/react-core@1.0.0-beta.57
+  - @dt-dds/react-icon@1.0.0-beta.60
+
 ## 1.0.0-beta.58
 
 ### Minor Changes

package/dist/index.js

@@ -114,6 +114,16 @@ var getCheckboxColors = (theme) => ({
     }
   }
 });
+var getCheckboxState = (theme, $checked, $indeterminate, $disabled, $error) => {
+  const colors = getCheckboxColors(theme);
+  const isActive = $checked || $indeterminate;
+  const activeKey = isActive ? "active" : "inactive";
+  if ($disabled) {
+    return colors.disabled[activeKey];
+  }
+  const errorKey = $error ? "error" : "normal";
+  return colors.default[activeKey][errorKey];
+};
 var CheckboxStyled = (0, import_styled.default)("label", {
   shouldForwardProp: (prop) => (0, import_is_prop_valid.default)(prop) && !prop.startsWith("$")
 })`
@@ -142,14 +152,17 @@ var CheckboxBoxStyled = (0, import_styled.default)("div", {
   border-radius: ${({ theme }) => theme.shape.checkbox};
 
   ${({ theme, $checked, $indeterminate, $disabled, $error, $size }) => {
-  const colors = getCheckboxColors(theme);
-  const active = $checked || $indeterminate;
-  const state = $disabled ? colors.disabled[active ? "active" : "inactive"] : colors.default[active ? "active" : "inactive"][$error ? "error" : "normal"];
+  const state = getCheckboxState(
+    theme,
+    $checked,
+    $indeterminate,
+    $disabled,
+    $error
+  );
+  const boxSize = SIZES[$size];
   return `
-      height: ${SIZES[$size]}px;
-      min-height: ${SIZES[$size]}px;
-      width: ${SIZES[$size]}px;
-      min-width: ${SIZES[$size]}px;
+      height: ${boxSize}px;
+      width: ${boxSize}px;
 
       background-color: ${state.bg};
       border: 1px solid ${state.border};
@@ -238,9 +251,14 @@ var Checkbox = (0, import_react.forwardRef)(
       if (isDisabled) return;
       onChange == null ? void 0 : onChange(event);
     };
+    const getIconCode = () => {
+      if (isIndeterminate) return "remove";
+      if (isChecked) return "check";
+      return null;
+    };
     const hasLabel = Boolean(label || children);
     const inputId = id || (hasLabel ? dataTestId : void 0);
-    const iconCode = isIndeterminate ? "remove" : isChecked ? "check" : null;
+    const iconCode = getIconCode();
     const iconSize = size === "small" ? "medium" : "large";
     return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       CheckboxStyled,
@@ -272,6 +290,7 @@ var Checkbox = (0, import_react.forwardRef)(
               $error: hasError,
               $indeterminate: isIndeterminate,
               $size: size,
+              "data-testid": "checkbox-box",
               children: iconCode ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                 import_react_icon.Icon,
                 {

package/dist/index.mjs

@@ -81,6 +81,16 @@ var getCheckboxColors = (theme) => ({
     }
   }
 });
+var getCheckboxState = (theme, $checked, $indeterminate, $disabled, $error) => {
+  const colors = getCheckboxColors(theme);
+  const isActive = $checked || $indeterminate;
+  const activeKey = isActive ? "active" : "inactive";
+  if ($disabled) {
+    return colors.disabled[activeKey];
+  }
+  const errorKey = $error ? "error" : "normal";
+  return colors.default[activeKey][errorKey];
+};
 var CheckboxStyled = styled("label", {
   shouldForwardProp: (prop) => isPropValid(prop) && !prop.startsWith("$")
 })`
@@ -109,14 +119,17 @@ var CheckboxBoxStyled = styled("div", {
   border-radius: ${({ theme }) => theme.shape.checkbox};
 
   ${({ theme, $checked, $indeterminate, $disabled, $error, $size }) => {
-  const colors = getCheckboxColors(theme);
-  const active = $checked || $indeterminate;
-  const state = $disabled ? colors.disabled[active ? "active" : "inactive"] : colors.default[active ? "active" : "inactive"][$error ? "error" : "normal"];
+  const state = getCheckboxState(
+    theme,
+    $checked,
+    $indeterminate,
+    $disabled,
+    $error
+  );
+  const boxSize = SIZES[$size];
   return `
-      height: ${SIZES[$size]}px;
-      min-height: ${SIZES[$size]}px;
-      width: ${SIZES[$size]}px;
-      min-width: ${SIZES[$size]}px;
+      height: ${boxSize}px;
+      width: ${boxSize}px;
 
       background-color: ${state.bg};
       border: 1px solid ${state.border};
@@ -205,9 +218,14 @@ var Checkbox = forwardRef(
       if (isDisabled) return;
       onChange == null ? void 0 : onChange(event);
     };
+    const getIconCode = () => {
+      if (isIndeterminate) return "remove";
+      if (isChecked) return "check";
+      return null;
+    };
     const hasLabel = Boolean(label || children);
     const inputId = id || (hasLabel ? dataTestId : void 0);
-    const iconCode = isIndeterminate ? "remove" : isChecked ? "check" : null;
+    const iconCode = getIconCode();
     const iconSize = size === "small" ? "medium" : "large";
     return /* @__PURE__ */ jsxs(
       CheckboxStyled,
@@ -239,6 +257,7 @@ var Checkbox = forwardRef(
               $error: hasError,
               $indeterminate: isIndeterminate,
               $size: size,
+              "data-testid": "checkbox-box",
               children: iconCode ? /* @__PURE__ */ jsx(
                 Icon,
                 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dt-dds/react-checkbox",
-  "version": "1.0.0-beta.58",
+  "version": "1.0.0-beta.60",
   "license": "MIT",
   "exports": {
     ".": "./dist/index.js"
@@ -20,9 +20,9 @@
     "test:update:snapshot": "jest -u"
   },
   "dependencies": {
-    "@dt-dds/react-core": "1.0.0-beta.56",
-    "@dt-dds/react-icon": "1.0.0-beta.59",
-    "@dt-dds/themes": "1.0.0-beta.11"
+    "@dt-dds/react-core": "1.0.0-beta.57",
+    "@dt-dds/react-icon": "1.0.0-beta.60",
+    "@dt-dds/themes": "1.0.0-beta.12"
   },
   "devDependencies": {
     "@babel/core": "^7.22.9",