@cypress-design/vue-checkbox 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @cypress-design/vue-checkbox
 
+## 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 [[`5f9cf10`](https://github.com/cypress-io/cypress-design/commit/5f9cf10ff4709fcd7d322c2dc5dbc676473b433e)]:
+  - @cypress-design/vue-icon@0.3.0
+
 ## 0.1.0
 
 ### Minor Changes

package/Checkbox.stories.mdx

@@ -0,0 +1,75 @@
+import { ArgsTable, Canvas, Meta, Story, Description } from '@storybook/addon-docs'
+import { version } from "./package.json"
+import changelog from "./CHANGELOG.md?raw"
+
+import Checkbox from './Checkbox.vue'
+
+<h1>Checkbox<span className="text-lg font-normal"> - v{version}</span></h1>
+
+<Meta title="Checkbox" component={Checkbox}
+  argTypes={{
+    color: {
+      options: ['indigo', 'red', 'jade'],
+      control: {
+        type: 'select',
+      },
+    },
+  }}
+  parameters={{
+    design: {
+      type: "figma",
+      url: 'https://www.figma.com/file/1WJ3GVQyMV5e7xVxPg3yID/Design-System?node-id=1027%3A9825',
+    }
+  }} />
+
+<Canvas withSource="none">
+  <Story name="Checkbox">
+    {({ color }) => ({ 
+      template: `
+        <Checkbox checked label="Checked" :color="color"/>
+        <br />
+        <Checkbox label="Unchecked" :color="color"/>
+        <br />
+        <Checkbox chedked disabled label="Disabled & checked" :color="color"/>
+        <br />
+        <Checkbox disabled label="Disabled & unchecked" :color="color"/>
+      `,
+      components: { Checkbox },
+      data: () => ({
+        color
+      })
+    })}
+  </Story>
+</Canvas>
+
+<ArgsTable />
+
+## Usage
+
+Install the component
+
+```
+yarn add @cypress-design/vue-checkbox
+```
+
+In the script, import the component
+
+```js
+import Checkbox from '@cypress-design/vue-checkbox'
+```
+
+then in the template, use it
+
+```html
+<Checkbox checked label="Checked" color="indigo"/>
+```
+
+or with the v-model
+
+```html
+<Checkbox v-model="checked" label="Checked" color="indigo"/>
+```
+
+<Description>
+  {changelog.replace(/^# .+/, '## Changelog')}
+</Description>

package/Checkbox.vue

@@ -1,48 +1,62 @@
-<template>
-  <div class="relative flex items-center">
-    <div class="flex items-center h-5">
-      <input :id="id" :checked="modelValue" :aria-describedby="`${id}-description`" :name="id" type="checkbox"
-        class="border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500"
-        :class="{
-          'text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600':
-            state === 'default',
-          'checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600':
-            state === 'success',
-          'checked:border-red-300 checked:bg-red-600 checked:text-red-600':
-            state === 'danger',
-        }" @click="updated()" />
-    </div>
-    <div class="ml-2 text-16px leading-normal">
-      <slot name="label">
-        <label v-if="label" :for="id" class="disabled:text-gray-500 text-gray-800 font-light select-none">
-          {{ label }}
-        </label>
-      </slot>
-    </div>
-  </div>
-</template>
-
 <script lang="ts" setup>
-type InputState = 'success' | 'danger' | 'default';
+import { ref, computed } from 'vue'
+import { IconCheckmarkSmall } from '@cypress-design/vue-icon'
+
+
+type CheckboxColor = 'red' | 'indigo' | 'jade'
 
 const props = withDefaults(
   defineProps<{
-    id: string;
-    modelValue: boolean;
-    state?: InputState;
-    label?: string;
+    id?: string
+    modelValue?: boolean
+    color?: CheckboxColor
+    label?: string
+    disabled?: boolean
+    checked?: boolean
   }>(),
   {
-    state: 'default',
-    label: undefined,
+    id: crypto.randomUUID(),
+    color: 'indigo',
   }
-);
+)
+
+const localChecked = ref(props.modelValue || props.checked)
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: boolean): void;
-}>();
+  (event: 'update:modelValue', value: boolean): void
+}>()
 
 function updated() {
-  emit('update:modelValue', !props.modelValue)
+  localChecked.value = !localChecked.value
+  emit('update:modelValue', localChecked.value)
 }
+
+const checkboxClasses = computed(() => [
+  'block border-1 rounded h-16px w-16px',
+  props.disabled
+    ? 'border-gray-200 bg-gray-100'
+    : localChecked.value
+      ? {
+        'border-indigo-500 bg-indigo-400': props.color === 'indigo',
+        'border-jade-500 bg-jade-400': props.color === 'jade',
+        'border-red-500 bg-red-400': props.color === 'red',
+      }
+      : 'border-gray-200 bg-white']
+)
+
 </script>
+
+<template>
+  <label class="relative flex items-center">
+    <input :id="id" class="absolute inset-0 w-0 h-0 opacity-0" :name="id" type="checkbox" @change="updated"
+      :disabled="props.disabled" :checked="localChecked" />
+    <IconCheckmarkSmall v-if="localChecked" strokeColor="white" class="absolute" />
+    <span :class="checkboxClasses" />
+    <slot name="label">
+      <span v-if="label"
+        :class="['block ml-2 text-16px leading-normal font-light select-none', disabled ? 'text-gray-500' : 'text-gray-800']">
+        {{ label }}
+      </span>
+    </slot>
+  </label>
+</template>

package/CheckboxVue.cy.tsx

@@ -0,0 +1,50 @@
+/// <reference types="cypress" />
+
+import { ref } from 'vue'
+import { mount } from 'cypress/vue'
+import Checkbox from './Checkbox.vue'
+
+describe('<Checkbox />', () => {
+  it('renders', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label="Welcome guide settings"
+          id="welcome-opt-out"
+          checked
+          class="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')
+  })
+
+  it('renders vModel', () => {
+    const isChecked = ref(false)
+    mount(() => {
+      return (
+        <div>
+          <Checkbox
+            label="Welcome guide settings"
+            vModel={isChecked.value}
+            class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+          />
+          <div
+            class="m-2 px-2 py-1 border-1 border-gray-300 rounded"
+            data-cy="result"
+          >
+            isChecked = {isChecked.value.toString()}
+          </div>
+        </div>
+      )
+    })
+
+    cy.get('[data-cy="result"]').should('contain', 'isChecked = false')
+    cy.contains('Welcome guide settings').click()
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.get('[data-cy="result"]').should('contain', 'isChecked = true')
+  })
+})

package/dist/Checkbox.vue.d.ts

@@ -1,26 +1,30 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    modelValue: boolean;
-    state?: ("default" | "success" | "danger") | undefined;
+    id?: string | undefined;
+    modelValue?: boolean | undefined;
+    color?: ("indigo" | "red" | "jade") | undefined;
     label?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
 }>, {
-    state: string;
-    label: undefined;
+    id: string;
+    color: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id: string;
-    modelValue: boolean;
-    state?: ("default" | "success" | "danger") | undefined;
+    id?: string | undefined;
+    modelValue?: boolean | undefined;
+    color?: ("indigo" | "red" | "jade") | undefined;
     label?: string | undefined;
+    disabled?: boolean | undefined;
+    checked?: boolean | undefined;
 }>, {
-    state: string;
-    label: undefined;
+    id: string;
+    color: string;
 }>>> & {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
 }, {
-    state: "default" | "success" | "danger";
-    label: string;
+    id: string;
+    color: "indigo" | "red" | "jade";
 }>;
 export default _default;
 declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/dist/Checkbox.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";QA8BQ,MAAM;gBACE,OAAO;;;;;;;;;QADf,MAAM;gBACE,OAAO;;;;;;;;;;;;AA9BvB,wBAwFK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE5B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}
+{"version":3,"file":"Checkbox.vue.d.ts","sourceRoot":"","sources":["../Checkbox.vue.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,wBAoGK;AACL,aAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,aAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,aAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE5B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG;QACzD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,GAAG,CAAC,CAAC,CAAC,CAAC;CACR,CAAC"}

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,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/index.es.js

@@ -1,47 +1,133 @@
-import { defineComponent, openBlock, createElementBlock, createElementVNode, normalizeClass, renderSlot, toDisplayString, createCommentVNode } from "vue";
+import { h, defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, createBlock, unref, createCommentVNode, normalizeClass, renderSlot, toDisplayString } from "vue";
+import * as iconsRegistry from "@cypress-design/icon-registry";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const compileVueIconProperties = (_a) => {
+  var _b = _a, {
+    body,
+    compiledClasses,
+    size,
+    strokeColor,
+    fillColor,
+    secondaryStrokeColor,
+    secondaryFillColor,
+    class: className
+  } = _b, attributes = __objRest(_b, [
+    "body",
+    "compiledClasses",
+    "size",
+    "strokeColor",
+    "fillColor",
+    "secondaryStrokeColor",
+    "secondaryFillColor",
+    "class"
+  ]);
+  const componentProps = __spreadValues({
+    width: size,
+    height: size,
+    fill: "none",
+    innerHTML: body
+  }, attributes);
+  if (compiledClasses.length) {
+    componentProps.class = compiledClasses.join(" ");
+  }
+  return componentProps;
+};
+const IconCheckmarkSmall = (props) => {
+  const { sizeWithDefault: size, compiledClasses } = iconsRegistry.getComponentAttributes(__spreadProps(__spreadValues({}, props), { availableSizes: ["16"] }));
+  const 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"/>'
+  };
+  const body = iconBodies[size];
+  if (!body) {
+    throw Error(`Icon "checkmark-small" is not available in size ${size}`);
+  }
+  return h("svg", compileVueIconProperties(__spreadProps(__spreadValues({}, props), {
+    size,
+    body,
+    compiledClasses
+  })));
+};
 const _hoisted_1 = { class: "relative flex items-center" };
-const _hoisted_2 = { class: "flex items-center h-5" };
-const _hoisted_3 = ["id", "checked", "aria-describedby", "name"];
-const _hoisted_4 = { class: "ml-2 text-16px leading-normal" };
-const _hoisted_5 = ["for"];
+const _hoisted_2 = ["id", "name", "disabled", "checked"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
-    id: null,
+    id: { default: crypto.randomUUID() },
     modelValue: { type: Boolean },
-    state: { default: "default" },
-    label: { default: void 0 }
+    color: { default: "indigo" },
+    label: null,
+    disabled: { type: Boolean },
+    checked: { type: Boolean }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit }) {
     const props = __props;
+    const localChecked = ref(props.modelValue || props.checked);
     function updated() {
-      emit("update:modelValue", !props.modelValue);
+      localChecked.value = !localChecked.value;
+      emit("update:modelValue", localChecked.value);
     }
+    const checkboxClasses = computed(() => [
+      "block border-1 rounded h-16px w-16px",
+      props.disabled ? "border-gray-200 bg-gray-100" : localChecked.value ? {
+        "border-indigo-500 bg-indigo-400": props.color === "indigo",
+        "border-jade-500 bg-jade-400": props.color === "jade",
+        "border-red-500 bg-red-400": props.color === "red"
+      } : "border-gray-200 bg-white"
+    ]);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        createElementVNode("div", _hoisted_2, [
-          createElementVNode("input", {
-            id: __props.id,
-            checked: __props.modelValue,
-            "aria-describedby": `${__props.id}-description`,
-            name: __props.id,
-            type: "checkbox",
-            class: normalizeClass(["border-1 rounded border-gray-200 bg-white h-4 w-4 text-indigo-500 disabled:bg-gray-100 checked:bg-indigo-500", {
-              "text-indigo-500 checked:border-indigo-300 checked:bg-indigo-600 checked:text-indigo-600": __props.state === "default",
-              "checked:border-jade-300 checked:bg-jade-600 checked:text-jade-600": __props.state === "success",
-              "checked:border-red-300 checked:bg-red-600 checked:text-red-600": __props.state === "danger"
-            }]),
-            onClick: _cache[0] || (_cache[0] = ($event) => updated())
-          }, null, 10, _hoisted_3)
-        ]),
-        createElementVNode("div", _hoisted_4, [
-          renderSlot(_ctx.$slots, "label", {}, () => [
-            __props.label ? (openBlock(), createElementBlock("label", {
-              key: 0,
-              for: __props.id,
-              class: "disabled:text-gray-500 text-gray-800 font-light select-none"
-            }, toDisplayString(__props.label), 9, _hoisted_5)) : createCommentVNode("", true)
-          ])
+      return openBlock(), createElementBlock("label", _hoisted_1, [
+        createElementVNode("input", {
+          id: __props.id,
+          class: "absolute inset-0 w-0 h-0 opacity-0",
+          name: __props.id,
+          type: "checkbox",
+          onChange: updated,
+          disabled: props.disabled,
+          checked: localChecked.value
+        }, null, 40, _hoisted_2),
+        localChecked.value ? (openBlock(), createBlock(unref(IconCheckmarkSmall), {
+          key: 0,
+          strokeColor: "white",
+          class: "absolute"
+        })) : createCommentVNode("", true),
+        createElementVNode("span", {
+          class: normalizeClass(unref(checkboxClasses))
+        }, null, 2),
+        renderSlot(_ctx.$slots, "label", {}, () => [
+          __props.label ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            class: normalizeClass(["block ml-2 text-16px leading-normal font-light select-none", __props.disabled ? "text-gray-500" : "text-gray-800"])
+          }, toDisplayString(__props.label), 3)) : createCommentVNode("", true)
         ])
       ]);
     };