@cypress-design/react-checkbox 0.4.2 → 0.4.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @cypress-design/react-checkbox
 
+## 0.4.4
+
+### Patch Changes
+
+- [#101](https://github.com/cypress-io/cypress-design/pull/101) [`1630e4c`](https://github.com/cypress-io/cypress-design/commit/1630e4c4200944cf6414cee9e92dcce6b4d8a576) Thanks [@mapsandapps](https://github.com/mapsandapps)! - Fix styles for 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,25 @@ 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 && (
+          // <windi-keep strokeColor="white"/>
+          <IconCheckmarkSmall strokeColor="white" className="absolute" />
+        )}
+        <span
+          className={clsx([
+            `block border-1 border-solid 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/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACtE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D;AAQD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA6DrD,CAAA;AAED,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGpE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;IACtE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAA;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC/D;AAQD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA8DrD,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/index.es.mjs

@@ -125,26 +125,29 @@ 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 && (
+            // <windi-keep strokeColor="white"/>
+            React.createElement(IconCheckmarkSmall, { strokeColor: "white", className: "absolute" })),
+            React.createElement("span", { className: clsx([
+                    "block border-1 border-solid 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 };
 
-/* <windicss-keep class="relative flex items-center absolute inset-0 w-0 h-0 opacity-0 block border-1 rounded h-16px w-16px text-white border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white text-gray-500 text-gray-800 ml-2 text-16px leading-normal font-light select-none"> */
+/* <windicss-keep class="relative flex items-center absolute inset-0 w-0 h-0 opacity-0 block border-1 border-solid rounded h-16px w-16px text-white border-gray-200 bg-gray-100 border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 bg-white text-gray-500 text-gray-800 ml-2 text-16px leading-normal font-light select-none icon-dark-white"> */
 //# sourceMappingURL=index.es.mjs.map