@cypress-design/react-checkbox 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @cypress-design/react-checkbox
 
+## 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
+
+- [`e3eb9c7`](https://github.com/cypress-io/cypress-design/commit/e3eb9c7fee2d7a6e0a773e85ed4b73be04d83587) Thanks [@elevatebart](https://github.com/elevatebart)! - downgrade typescript to 4.4 for compat with app
+
+## 0.2.1
+
+### Patch Changes
+
+- [#39](https://github.com/cypress-io/cypress-design/pull/39) [`1b383f3`](https://github.com/cypress-io/cypress-design/commit/1b383f3d149948bf2cc062d3baa17d5ce032f07e) Thanks [@elevatebart](https://github.com/elevatebart)! - fix file path of sourcemaps
+
+- Updated dependencies [[`4259026`](https://github.com/cypress-io/cypress-design/commit/4259026314464260e89bcd88690c8a60ad2f0459), [`1b383f3`](https://github.com/cypress-io/cypress-design/commit/1b383f3d149948bf2cc062d3baa17d5ce032f07e)]:
+  - @cypress-design/react-icon@0.3.0
+
 ## 0.2.0
 
 ### Minor Changes

package/Checkbox.tsx

@@ -5,15 +5,34 @@ import { IconCheckmarkSmall } from '@cypress-design/react-icon'
 
 export interface CheckboxProps
   extends Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onChange'> {
+  /**
+   * 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
+  /**
+   * 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 const Checkbox: FunctionComponent<CheckboxProps> = ({
+  // @ts-ignore
   id = crypto.randomUUID(),
   checked = false,
   onChange,

package/dist/Checkbox.d.ts

@@ -1,12 +1,30 @@
 import * as React from 'react';
 import type { FunctionComponent, HTMLProps, ReactNode } from 'react';
 export interface CheckboxProps extends Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onChange'> {
+    /**
+     * 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;
+    /**
+     * 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,CA4DrD,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,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC/D;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;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;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA6DrD,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/index.es.js

@@ -98,20 +98,24 @@ var IconCheckmarkSmall = function (props) {
     };
     var body = iconBodies[size];
     if (!body) {
-        throw Error("Icon \"checkmark-small\" is not available in size ".concat(size));
+        throw Error("Icon \"checkmark-small\" is not available in size " + size);
     }
     return React.createElement('svg', compileReactIconProperties(__assign(__assign({}, props), { size: size, body: body, compiledClasses: compiledClasses })));
 };
 
 var Checkbox = function (_a) {
-    var _b = _a.id, 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 
+    // @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 _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": "".concat(id, "-description"), name: id, type: "checkbox", onChange: onChangeInput, disabled: disabled, checked: localChecked }),
+        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 }),
         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",