@cypress-design/react-checkbox 0.4.2 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @cypress-design/react-checkbox
 
+## 0.4.3
+
+### Patch Changes
+
+- [#71](https://github.com/cypress-io/cypress-design/pull/71) [`379079e`](https://github.com/cypress-io/cypress-design/commit/379079e08802b6c3fae243925e3b9e8881e8ef54) Thanks [@elevatebart](https://github.com/elevatebart)! - allow users to click the checkbox instead of the label
+
 ## 0.4.2
 
 ### Patch Changes

package/Checkbox.tsx

@@ -71,24 +71,24 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
         disabled={disabled}
         checked={localChecked}
       />
-      {localChecked && (
-        <IconCheckmarkSmall strokeColor="white" className="absolute" />
-      )}
-      <span
-        className={clsx([
-          `block border-1 rounded h-16px w-16px flex items-center text-white`,
-          disabled
-            ? 'border-gray-200 bg-gray-100'
-            : localChecked
-            ? {
-                'border-indigo-500 bg-indigo-400': color === 'indigo',
-                'border-jade-500 bg-jade-400': color === 'jade',
-                'border-red-500 bg-red-400': color === 'red',
-              }
-            : 'border-gray-200 bg-white',
-        ])}
-      />
-      <label htmlFor={id}>
+      <label className="flex items-center" htmlFor={id}>
+        {localChecked && (
+          <IconCheckmarkSmall strokeColor="white" className="absolute" />
+        )}
+        <span
+          className={clsx([
+            `block border-1 rounded h-16px w-16px flex items-center text-white`,
+            disabled
+              ? 'border-gray-200 bg-gray-100'
+              : localChecked
+              ? {
+                  'border-indigo-500 bg-indigo-400': color === 'indigo',
+                  'border-jade-500 bg-jade-400': color === 'jade',
+                  'border-red-500 bg-red-400': color === 'red',
+                }
+              : 'border-gray-200 bg-white',
+          ])}
+        />
         {label && (
           <span
             className={clsx([

package/CheckboxReact.cy.tsx

@@ -3,7 +3,7 @@ import { mount } from 'cypress/react'
 import { Checkbox } from './Checkbox'
 
 describe('Checkbox', () => {
-  it('renders', () => {
+  it('changes when the label is clicked', () => {
     let isChecked = true
 
     mount(
@@ -20,4 +20,22 @@ describe('Checkbox', () => {
     cy.contains('Welcome guide settings').click()
     cy.get('input[type="checkbox"]').should('not.be.checked')
   })
+
+  it('changes when checkbox is clicked', () => {
+    let isChecked = true
+
+    mount(
+      <Checkbox
+        label="Welcome guide settings"
+        id="welcome-opt-out"
+        checked={isChecked}
+        onChange={() => (isChecked = !isChecked)}
+        className="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+      />
+    )
+
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.get('svg').click()
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+  })
 })

package/dist/index.es.mjs

@@ -125,23 +125,24 @@ var Checkbox = function (_a) {
     }
     return (React.createElement("div", __assign$1({ className: clsx(className, 'relative flex items-center') }, rest),
         React.createElement("input", { id: id, className: "absolute inset-0 w-0 h-0 opacity-0", "aria-describedby": id + "-description", name: name || id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
-        localChecked && (React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
-        React.createElement("span", { className: clsx([
-                "block border-1 rounded h-16px w-16px flex items-center text-white",
-                disabled
-                    ? 'border-gray-200 bg-gray-100'
-                    : localChecked
-                        ? {
-                            'border-indigo-500 bg-indigo-400': color === 'indigo',
-                            'border-jade-500 bg-jade-400': color === 'jade',
-                            'border-red-500 bg-red-400': color === 'red'
-                        }
-                        : 'border-gray-200 bg-white',
-            ]) }),
-        React.createElement("label", { htmlFor: id }, label && (React.createElement("span", { className: clsx([
-                disabled ? 'text-gray-500' : 'text-gray-800',
-                'block ml-2 text-16px leading-normal font-light select-none',
-            ]) }, label)))));
+        React.createElement("label", { className: "flex items-center", htmlFor: id },
+            localChecked && (React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
+            React.createElement("span", { className: clsx([
+                    "block border-1 rounded h-16px w-16px flex items-center text-white",
+                    disabled
+                        ? 'border-gray-200 bg-gray-100'
+                        : localChecked
+                            ? {
+                                'border-indigo-500 bg-indigo-400': color === 'indigo',
+                                'border-jade-500 bg-jade-400': color === 'jade',
+                                'border-red-500 bg-red-400': color === 'red'
+                            }
+                            : 'border-gray-200 bg-white',
+                ]) }),
+            label && (React.createElement("span", { className: clsx([
+                    disabled ? 'text-gray-500' : 'text-gray-800',
+                    'block ml-2 text-16px leading-normal font-light select-none',
+                ]) }, label)))));
 };
 
 export { Checkbox as default };