@cypress-design/react-checkbox 0.2.2 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @cypress-design/react-checkbox
 
+## 0.4.1
+
+### Patch Changes
+
+- [`2afa4d5`](https://github.com/cypress-io/cypress-design/commit/2afa4d54a2373692f82bee35ae40446bc9bb3f91) Thanks [@elevatebart](https://github.com/elevatebart)! - avoid duplicate ids in checkboxes
+
+## 0.4.0
+
+### Minor Changes
+
+- [#51](https://github.com/cypress-io/cypress-design/pull/51) [`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e) Thanks [@elevatebart](https://github.com/elevatebart)! - in the build asset, add a comment containing all used windicss classes in the component
+
+### Patch Changes
+
+- [#57](https://github.com/cypress-io/cypress-design/pull/57) [`6fa7d52`](https://github.com/cypress-io/cypress-design/commit/6fa7d52e409762bd1b32a8b04edaf78765830754) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: move the input for checkboxes outside of label for accessibility
+
+  Source: https://www.a11ymatters.com/pattern/checkbox/
+
+- Updated dependencies [[`ccd8f9a`](https://github.com/cypress-io/cypress-design/commit/ccd8f9a8feb624c0a52deaa9754c76969f43fc1e), [`0866c65`](https://github.com/cypress-io/cypress-design/commit/0866c654f24c36951c98468d789462748606b428), [`43b53eb`](https://github.com/cypress-io/cypress-design/commit/43b53eb6bd10111629239a87374cfcc894eda0e3)]:
+  - @cypress-design/react-icon@0.4.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [#44](https://github.com/cypress-io/cypress-design/pull/44) [`2fdaf6b`](https://github.com/cypress-io/cypress-design/commit/2fdaf6be6f81a2a851761258347ed213577c5b26) Thanks [@elevatebart](https://github.com/elevatebart)! - Add missing descriptions of props in button, tooltip, checkbox
+
 ## 0.2.2
 
 ### Patch Changes

package/Checkbox.tsx

@@ -4,23 +4,52 @@ import type { FunctionComponent, HTMLProps, ReactNode } from 'react'
 import { IconCheckmarkSmall } from '@cypress-design/react-icon'
 
 export interface CheckboxProps
-  extends Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onChange'> {
+  extends Omit<HTMLProps<HTMLDivElement>, 'label' | 'onChange' | 'name'> {
+  /**
+   * A unique identifier for the checkbox on the whole page.
+   * It will be used to give match label with input for a11y.
+   */
   id?: string
-  checked: boolean
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
-  color?: 'indigo' | 'red' | 'jade'
-  label?: ReactNode
+  /**
+   * Name attribute of the <input type="checkbox"/>.
+   */
+  name?: string
+  /**
+   * Is the checkbox checked when it is first rendered.
+   */
+  checked?: boolean
+  /**
+   * The color of the background in the checkbox.
+   * The checkmark will always be white.
+   */
+  color?: 'red' | 'indigo' | 'jade'
+  /**
+   * If the checkbox is disabled, it will not be clickable.
+   */
   disabled?: boolean
+  /**
+   * Label for the checkbox.
+   * It is very important to set this to make the checkbox accessible.
+   */
+  label?: ReactNode
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
+const uid = () =>
+  String(Date.now().toString(32) + Math.random().toString(16)).replace(
+    /\./g,
+    ''
+  )
+
 export const Checkbox: FunctionComponent<CheckboxProps> = ({
-  // @ts-ignore
-  id = crypto.randomUUID(),
+  id = uid(),
   checked = false,
   onChange,
   color = 'indigo',
   label,
   disabled,
+  className,
+  name,
   ...rest
 }) => {
   const [localChecked, setChecked] = React.useState(checked)
@@ -31,15 +60,12 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
   }
 
   return (
-    <label
-      {...rest}
-      className={clsx(rest.className, 'relative flex items-center')}
-    >
+    <div className={clsx(className, 'relative flex items-center')} {...rest}>
       <input
         id={id}
         className="absolute inset-0 w-0 h-0 opacity-0"
         aria-describedby={`${id}-description`}
-        name={id}
+        name={name || id}
         type="checkbox"
         onChange={onChangeInput}
         disabled={disabled}
@@ -62,17 +88,19 @@ export const Checkbox: FunctionComponent<CheckboxProps> = ({
             : 'border-gray-200 bg-white',
         ])}
       />
-      {label && (
-        <span
-          className={clsx([
-            disabled ? 'text-gray-500' : 'text-gray-800',
-            'block ml-2 text-16px leading-normal font-light select-none',
-          ])}
-        >
-          {label}
-        </span>
-      )}
-    </label>
+      <label htmlFor={id}>
+        {label && (
+          <span
+            className={clsx([
+              disabled ? 'text-gray-500' : 'text-gray-800',
+              'block ml-2 text-16px leading-normal font-light select-none',
+            ])}
+          >
+            {label}
+          </span>
+        )}
+      </label>
+    </div>
   )
 }
 

package/dist/Checkbox.d.ts

@@ -1,12 +1,34 @@
 import * as React from 'react';
 import type { FunctionComponent, HTMLProps, ReactNode } from 'react';
-export interface CheckboxProps extends Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onChange'> {
+export interface CheckboxProps extends Omit<HTMLProps<HTMLDivElement>, 'label' | 'onChange' | 'name'> {
+    /**
+     * A unique identifier for the checkbox on the whole page.
+     * It will be used to give match label with input for a11y.
+     */
     id?: string;
-    checked: boolean;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    color?: 'indigo' | 'red' | 'jade';
-    label?: ReactNode;
+    /**
+     * Name attribute of the <input type="checkbox"/>.
+     */
+    name?: string;
+    /**
+     * Is the checkbox checked when it is first rendered.
+     */
+    checked?: boolean;
+    /**
+     * The color of the background in the checkbox.
+     * The checkmark will always be white.
+     */
+    color?: 'red' | 'indigo' | 'jade';
+    /**
+     * If the checkbox is disabled, it will not be clickable.
+     */
     disabled?: boolean;
+    /**
+     * Label for the checkbox.
+     * It is very important to set this to make the checkbox accessible.
+     */
+    label?: ReactNode;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const Checkbox: FunctionComponent<CheckboxProps>;
 export default Checkbox;

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,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/D,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC9D,KAAK,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAA;IACjC,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,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,CA6DrD,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/index.es.js

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import * as React from 'react';
 import * as iconsRegistry from '@cypress-design/icon-registry';
+import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -79,10 +80,17 @@ function __rest(s, e) {
 }
 
 var compileReactIconProperties = function (_a) {
-    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size; _a.strokeColor; _a.fillColor; _a.secondaryStrokeColor; _a.secondaryFillColor; var attributes = __rest(_a, ["body", "compiledClasses", "size", "strokeColor", "fillColor", "secondaryStrokeColor", "secondaryFillColor"]);
+    var body = _a.body, compiledClasses = _a.compiledClasses, size = _a.size, attributes = __rest(_a, ["body", "compiledClasses", "size"]);
+    var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
+        if (!ICON_COLOR_PROP_NAMES.includes(attrName)) {
+            newAttributes[attrName] =
+                attributes[attrName];
+        }
+        return newAttributes;
+    }, {});
     var componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
             __html: body
-        } }, attributes);
+        } }, filteredAttributes);
     if (attributes.className) {
         compiledClasses.push(attributes.className);
     }
@@ -102,20 +110,20 @@ var IconCheckmarkSmall = function (props) {
     }
     return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
 };
+/* <windicss-keep class=""> */
 
+var uid = function () {
+    return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, '');
+};
 var Checkbox = function (_a) {
-    var 
-    // @ts-ignore
-    _b = _a.id, 
-    // @ts-ignore
-    id = _b === void 0 ? crypto.randomUUID() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, rest = __rest$1(_a, ["id", "checked", "onChange", "color", "label", "disabled"]);
+    var _b = _a.id, id = _b === void 0 ? uid() : _b, _c = _a.checked, checked = _c === void 0 ? false : _c, onChange = _a.onChange, _d = _a.color, color = _d === void 0 ? 'indigo' : _d, label = _a.label, disabled = _a.disabled, className = _a.className, name = _a.name, rest = __rest$1(_a, ["id", "checked", "onChange", "color", "label", "disabled", "className", "name"]);
     var _e = React.useState(checked), localChecked = _e[0], setChecked = _e[1];
     function onChangeInput(event) {
         setChecked(!localChecked);
         onChange(event);
     }
-    return (React.createElement("label", __assign$1({}, rest, { className: clsx(rest.className, 'relative flex items-center') }),
-        React.createElement("input", { id: id, className: "absolute inset-0 w-0 h-0 opacity-0", "aria-describedby": id + "-description", name: id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
+    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",
@@ -129,11 +137,13 @@ var Checkbox = function (_a) {
                         }
                         : 'border-gray-200 bg-white',
             ]) }),
-        label && (React.createElement("span", { className: clsx([
+        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))));
+            ]) }, 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"> */
+
 //# sourceMappingURL=index.es.js.map