@cypress-design/react-checkbox 0.1.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @cypress-design/react-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
+
+- [#33](https://github.com/cypress-io/cypress-design/pull/33) [`5f9cf10`](https://github.com/cypress-io/cypress-design/commit/5f9cf10ff4709fcd7d322c2dc5dbc676473b433e) Thanks [@elevatebart](https://github.com/elevatebart)! - fix design and api of checkboxes
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @cypress-design/react-icon@0.2.1
+
 ## 0.1.0
 
 ### Minor Changes

package/Checkbox.stories.mdx

@@ -1,23 +1,67 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
+import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
+import { version } from "./package.json"
+import changelog from "./CHANGELOG.md"
 
 import { Checkbox } from './Checkbox'
 
-# Checkbox
+<h1>Checkbox<span className="text-lg font-normal"> - v{version}</span></h1>
 
-<Meta title="Checkbox" component={Checkbox} />
+<Meta title="Checkbox" component={Checkbox}
+  argTypes={{
+    color: {
+      control: {
+        type: 'select',
+      },
+    },
+  }}
+  parameters={{
+    design: {
+      type: "figma",
+      url: 'https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=1027%3A9825',
+    }
+  }} />
 
-<Canvas>
+<Canvas withSource="none">
   <Story name="Checkbox">
-    <>
-      <Checkbox modelValue={true} label="Checked" />
+    {args => 
+    (<>
+      <Checkbox  {...args} checked label="Checked"  />
       <br />
-      <Checkbox modelValue={false} label="Unchecked" />
+      <Checkbox  {...args} label="Unchecked" />
       <br />
-      <Checkbox modelValue={true} disabled label="Disabled & checked" />
+      <Checkbox  {...args} checked disabled label="Disabled & checked" />
       <br />
-      <Checkbox modelValue={false} disabled label="Disabled & unchecked" />
-    </>
+      <Checkbox  {...args} disabled label="Disabled & unchecked" />
+    </>)}
   </Story>
 </Canvas>
 
 <ArgsTable />
+
+## Usage
+
+Install the component
+
+```
+yarn add @cypress-design/react-checkbox
+```
+
+In the script, import the component
+
+```js
+import Checkbox from '@cypress-design/react-checkbox'
+```
+
+then in your render function, use it
+
+```jsx
+export const MyComp = () => {
+  return (<div>
+    <Checkbox checked={checked} label="Checked" color="indigo" onChange={setChecked}/>
+  </div>)
+}
+```
+
+<Description>
+  {changelog.replace(/^# .+/, '## Changelog')}
+</Description>

package/Checkbox.tsx

@@ -1,60 +1,79 @@
-import * as React from 'react';
-import type { FunctionComponent, HTMLProps, ReactNode } from 'react';
+import clsx from 'clsx'
+import * as React from 'react'
+import type { FunctionComponent, HTMLProps, ReactNode } from 'react'
+import { IconCheckmarkSmall } from '@cypress-design/react-icon'
 
 export interface CheckboxProps
-  extends Omit<HTMLProps<HTMLDivElement>, 'label'> {
-  id?: string;
-  modelValue: boolean;
-  onChange: () => void;
-  state?: 'success' | 'danger' | 'default';
-  label?: ReactNode;
+  extends Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onChange'> {
+  id?: string
+  checked: boolean
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  color?: 'indigo' | 'red' | 'jade'
+  label?: ReactNode
+  disabled?: boolean
 }
 
-// TODO: how do you disable it? does it work?
 export const Checkbox: FunctionComponent<CheckboxProps> = ({
+  // @ts-ignore
   id = crypto.randomUUID(),
-  modelValue,
+  checked = false,
   onChange,
-  state = 'default',
+  color = 'indigo',
   label,
+  disabled,
   ...rest
 }) => {
+  const [localChecked, setChecked] = React.useState(checked)
+
+  function onChangeInput(event: React.ChangeEvent<HTMLInputElement>) {
+    setChecked(!localChecked)
+    onChange(event)
+  }
+
   return (
-    <div {...rest} className="relative flex items-center">
-      <div className="flex items-center h-5">
-        <input
-          id={id}
-          defaultChecked={modelValue}
-          aria-describedby={`${id}-description`}
-          name={id}
-          type="checkbox"
-          className={`border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500 ${
-            state === 'default'
-              ? 'text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600'
-              : ''
-          } ${
-            state === 'success'
-              ? 'checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600'
-              : ''
-          } ${
-            state === 'danger'
-              ? 'checked:border-red-300 checked:bg-red-600 checked:text-red-600'
-              : ''
-          }`}
-          onChange={onChange}
-        />
-      </div>
-      <div className="ml-2 text-16px leading-normal">
-        <label
-          v-if="label"
-          htmlFor={id}
-          className="disabled:text-gray-500 text-gray-800 font-light select-none"
+    <label
+      {...rest}
+      className={clsx(rest.className, 'relative flex items-center')}
+    >
+      <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 && (
+        <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([
+            disabled ? 'text-gray-500' : 'text-gray-800',
+            'block ml-2 text-16px leading-normal font-light select-none',
+          ])}
         >
           {label}
-        </label>
-      </div>
-    </div>
-  );
-};
+        </span>
+      )}
+    </label>
+  )
+}
 
-export default Checkbox;
+export default Checkbox

package/CheckboxReact.cy.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { mount } from 'cypress/react'
+import { Checkbox } from './Checkbox'
+
+describe('Checkbox', () => {
+  it('renders', () => {
+    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.contains('Welcome guide settings').click()
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+  })
+})

package/dist/Checkbox.d.ts

@@ -1,10 +1,12 @@
+import * as React from 'react';
 import type { FunctionComponent, HTMLProps, ReactNode } from 'react';
-export interface CheckboxProps extends Omit<HTMLProps<HTMLDivElement>, 'label'> {
+export interface CheckboxProps extends Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onChange'> {
     id?: string;
-    modelValue: boolean;
-    onChange: () => void;
-    state?: 'success' | 'danger' | 'default';
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    color?: 'indigo' | 'red' | 'jade';
     label?: ReactNode;
+    disabled?: boolean;
 }
 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,EAAE,iBAAiB,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErE,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzC,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAGD,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CA4CrD,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"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"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA"}

package/dist/index.es.js

@@ -1,4 +1,44 @@
+import clsx from 'clsx';
 import * as React from 'react';
+import * as iconsRegistry from '@cypress-design/icon-registry';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign$1 = function() {
+    __assign$1 = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+
+function __rest$1(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -38,20 +78,61 @@ function __rest(s, e) {
     return t;
 }
 
-// TODO: how do you disable it? does it work?
+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 componentProps = __assign({ width: size, height: size, fill: 'none', dangerouslySetInnerHTML: {
+            __html: body
+        } }, attributes);
+    if (attributes.className) {
+        compiledClasses.push(attributes.className);
+    }
+    if (compiledClasses.length) {
+        componentProps.className = compiledClasses.join(' ');
+    }
+    return componentProps;
+};
+var IconCheckmarkSmall = function (props) {
+    var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, props), { availableSizes: ["16"] })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
+    var iconBodies = {
+        "16": "<path d=\"M5 8.5 7.5 11 11 5\" stroke=\"currentColor\" class=\"icon-dark\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>"
+    };
+    var body = iconBodies[size];
+    if (!body) {
+        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, modelValue = _a.modelValue, onChange = _a.onChange, _c = _a.state, state = _c === void 0 ? 'default' : _c, label = _a.label, rest = __rest(_a, ["id", "modelValue", "onChange", "state", "label"]);
-    return (React.createElement("div", __assign({}, rest, { className: "relative flex items-center" }),
-        React.createElement("div", { className: "flex items-center h-5" },
-            React.createElement("input", { id: id, defaultChecked: modelValue, "aria-describedby": "".concat(id, "-description"), name: id, type: "checkbox", className: "border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500 ".concat(state === 'default'
-                    ? 'text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600'
-                    : '', " ").concat(state === 'success'
-                    ? 'checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600'
-                    : '', " ").concat(state === 'danger'
-                    ? 'checked:border-red-300 checked:bg-red-600 checked:text-red-600'
-                    : ''), onChange: onChange })),
-        React.createElement("div", { className: "ml-2 text-16px leading-normal" },
-            React.createElement("label", { "v-if": "label", htmlFor: id, className: "disabled:text-gray-500 text-gray-800 font-light select-none" }, label))));
+    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": 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",
+                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 };