@cypress-design/vue-checkbox 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,5 +1,111 @@
 # @cypress-design/vue-checkbox
 
+## 0.1.1
+
+### Patch Changes
+
+- [#164](https://github.com/cypress-io/cypress-design/pull/164) [`4fd951a`](https://github.com/cypress-io/cypress-design/commit/4fd951a39335900da2508beef9b3565a6f8f9518) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: update active buttons borders
+
+## 0.1.0
+
+### Minor Changes
+
+- [#162](https://github.com/cypress-io/cypress-design/pull/162) [`76d4e60`](https://github.com/cypress-io/cypress-design/commit/76d4e601687d28578cdee0ddc67cd04b286ae2c3) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: functionalize classes used
+
+## 0.5.0
+
+### Minor Changes
+
+- [#151](https://github.com/cypress-io/cypress-design/pull/151) [`8b0e735`](https://github.com/cypress-io/cypress-design/commit/8b0e7356eb64a6b3583d3486dda8ecbb11c34cca) Thanks [@elevatebart](https://github.com/elevatebart)! - refactor: use clases compatible with both windi and tailwind
+
+### Patch Changes
+
+- Updated dependencies [[`106b61a`](https://github.com/cypress-io/cypress-design/commit/106b61a97888f956a4c9d235fde5efb4243e1445), [`7b4f416`](https://github.com/cypress-io/cypress-design/commit/7b4f4162a0d150aa8cab7ec239faebb58c39464d)]:
+  - @cypress-design/vue-icon@0.18.0
+
+## 0.4.6
+
+### Patch Changes
+
+- [#112](https://github.com/cypress-io/cypress-design/pull/112) [`d229b48`](https://github.com/cypress-io/cypress-design/commit/d229b48a3806a882abe83c9ebf9c32ed18d2c47f) Thanks [@elevatebart](https://github.com/elevatebart)! - fix: when label is too big avoid checkbox shrinking
+
+## 0.4.5
+
+### Patch Changes
+
+- [#105](https://github.com/cypress-io/cypress-design/pull/105) [`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30) Thanks [@elevatebart](https://github.com/elevatebart)! - checkbox should not contain a div to be added inside an inline only tag (<p>)
+
+- Updated dependencies [[`2f54f5b`](https://github.com/cypress-io/cypress-design/commit/2f54f5b867b60ba5ce2e40fd38870bd65187ba30), [`e82d8cb`](https://github.com/cypress-io/cypress-design/commit/e82d8cb60882a379d89f86d1ff7b8f1d5b56ce66)]:
+  - @cypress-design/vue-icon@0.12.0
+
+## 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
+
+- [#68](https://github.com/cypress-io/cypress-design/pull/68) [`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13) Thanks [@elevatebart](https://github.com/elevatebart)! - feat: publish `.mjs` files for esm intead of `.js`
+
+- Updated dependencies [[`8c577fb`](https://github.com/cypress-io/cypress-design/commit/8c577fb0c6a0411cf8218dfe78281834df3d6f13)]:
+  - @cypress-design/vue-icon@0.5.2
+
+## 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/vue-icon@0.5.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.1
+
+### 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
+
+- Updated dependencies [[`e3eb9c7`](https://github.com/cypress-io/cypress-design/commit/e3eb9c7fee2d7a6e0a773e85ed4b73be04d83587)]:
+  - @cypress-design/vue-icon@0.4.2
+
+## 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.rootstory.tsx

@@ -0,0 +1,9 @@
+import Checkbox from './Checkbox.vue'
+
+export default (options: {
+  color?: 'jade' | 'indigo' | 'red'
+  checked?: boolean
+}) => {
+  const { checked = true, color } = options
+  return <Checkbox checked={checked} label="Checked" color={color} />
+}

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 checked 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,103 @@
-<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">
+function uid() {
+  return String(Date.now().toString(32) + Math.random().toString(16)).replace(
+    /\./g,
+    ''
+  )
+}
+</script>
 
 <script lang="ts" setup>
-type InputState = 'success' | 'danger' | 'default';
+import { ref, computed } from 'vue'
+import { IconCheckmarkSmall } from '@cypress-design/vue-icon'
+import { CheckboxColors, Classes } from '../constants'
 
 const props = withDefaults(
   defineProps<{
-    id: string;
-    modelValue: boolean;
-    state?: InputState;
-    label?: string;
+    /**
+     * A unique identifier for the checkbox on the whole page.
+     * It will be used to give match label with input for a11y.
+     */
+    id?: string
+    /**
+     * 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
+    modelValue?: boolean
+    /**
+     * Label for the checkbox.
+     * It is very important to set this to make the checkbox accessible.
+     */
+    label?: string
   }>(),
   {
-    state: 'default',
-    label: undefined,
+    id: () => uid(),
+    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(() =>
+  props.disabled
+    ? CheckboxColors.disabled
+    : localChecked.value
+    ? CheckboxColors[props.color]
+    : CheckboxColors.empty
+)
 </script>
+
+<template>
+  <span class="relative flex items-center">
+    <input
+      :id="id"
+      :class="Classes.hiddenInput"
+      :name="name || id"
+      type="checkbox"
+      @change="updated"
+      :disabled="props.disabled"
+      :checked="localChecked"
+    />
+    <label :class="Classes.labelTag" :for="id">
+      <IconCheckmarkSmall
+        v-if="localChecked"
+        strokeColor="white"
+        class="absolute"
+      />
+      <span :class="[checkboxClasses, Classes.visibleCheckbox]" />
+      <slot name="label">
+        <span
+          v-if="label"
+          :class="[
+            Classes.trueLabel,
+            disabled ? 'text-gray-500' : 'text-gray-800',
+          ]"
+        >
+          {{ label }}
+        </span>
+      </slot>
+    </label>
+  </span>
+</template>

package/CheckboxVue.cy.tsx

@@ -0,0 +1,89 @@
+/// <reference types="cypress" />
+
+import { ref } from 'vue'
+import { mount } from 'cypress/vue'
+import Checkbox from './Checkbox.vue'
+
+describe('<Checkbox />', () => {
+  it('changes when the label is clicked', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label="Welcome guide settings"
+          id="welcome-opt-out"
+          checked
+          class="px-2 py-1 m-2 border border-gray-300 rounded"
+        />
+      )
+    })
+
+    cy.get('input[type="checkbox"]').should('be.checked')
+    cy.percySnapshot()
+    cy.contains('Welcome guide settings').click()
+    cy.get('input[type="checkbox"]').should('not.be.checked')
+    cy.percySnapshot()
+  })
+
+  it('changes when checkbox is clicked', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label="Welcome guide settings"
+          id="welcome-opt-out"
+          checked
+          class="px-2 py-1 m-2 border 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')
+  })
+
+  it('keeps its width when label is long', () => {
+    mount(() => {
+      return (
+        <Checkbox
+          label={[
+            'lorem ipsum dolor sit amet, consectetur adipiscing elit,',
+            'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+            'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip',
+            'ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse',
+            'cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,',
+            'sunt in culpa qui officia deserunt mollit anim id est laborum.',
+          ].join(' ')}
+          id="lorem-checkbox"
+        />
+      )
+    })
+
+    cy.get('label span:first-child').invoke('outerWidth').should('equal', 16)
+  })
+
+  it('renders vModel', () => {
+    const isChecked = ref(false)
+    mount(() => {
+      return (
+        <div>
+          <Checkbox
+            label="Welcome guide settings"
+            vModel={isChecked.value}
+            class="px-2 py-1 m-2 border border-gray-300 rounded"
+          />
+          <div
+            class="px-2 py-1 m-2 border 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/ReadMe.md

@@ -0,0 +1,17 @@
+# Checkbox
+
+## Summary
+
+Describe your component here.
+
+## install
+
+```bash
+npm install @cypress-design/vue-checkbox
+```
+
+or with yarn
+
+```bash
+yarn add @cypress-design/vue-checkbox
+```

package/dist/constants.d.ts

@@ -0,0 +1,15 @@
+export declare const Classes: {
+    wrapper: string;
+    hiddenInput: string;
+    labelTag: string;
+    visibleCheckbox: string;
+    trueLabel: string;
+};
+export declare const CheckboxColors: {
+    readonly indigo: "border-indigo-500 bg-indigo-400";
+    readonly jade: "border-jade-500 bg-jade-400";
+    readonly red: "border-red-500 bg-red-400";
+    readonly disabled: "border-gray-200 bg-gray-100";
+    readonly empty: "border-gray-200 bg-white";
+};
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,OAAO;;;;;;CAOnB,CAAA;AAED,eAAO,MAAM,cAAc;;;;;;CAMjB,CAAA"}

package/dist/index.es.mjs

@@ -0,0 +1,107 @@
+import { h as f, defineComponent as x, ref as C, computed as y, openBlock as u, createElementBlock as g, createElementVNode as b, normalizeClass as i, unref as a, createBlock as v, createCommentVNode as k, renderSlot as w, toDisplayString as B } from "vue";
+import * as S from "@cypress-design/icon-registry";
+import { ICON_COLOR_PROP_NAMES as j } from "@cypress-design/icon-registry";
+const z = ({
+  body: e,
+  compiledClasses: o,
+  size: l,
+  class: t,
+  interactiveColorsOnGroup: h,
+  ...n
+}) => {
+  const d = Object.keys(n).reduce((p, s) => (!j.includes(s) && s !== "name" && (p[s] = n[s]), p), {}), c = {
+    width: l,
+    height: l,
+    viewBox: `0 0 ${l} ${l}`,
+    fill: "none",
+    innerHTML: e,
+    ...d
+  };
+  return o.length && (c.class = o.join(" ")), c;
+}, O = (e) => {
+  const { sizeWithDefault: o, compiledClasses: l } = S.getComponentAttributes({ ...e, availableSizes: ["16"] }), t = {
+    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"/>'
+  }[o];
+  if (!t)
+    throw Error(`Icon "checkmark-small" is not available in size ${o}`);
+  return f("svg", z({
+    ...e,
+    size: o,
+    body: t,
+    compiledClasses: l
+  }));
+}, r = {
+  wrapper: "relative flex items-center",
+  hiddenInput: "absolute inset-0 w-0 h-0 opacity-0",
+  labelTag: "flex items-center",
+  visibleCheckbox: "border border-solid rounded h-[16px] w-[16px] flex flex-shrink-0 items-center text-white",
+  trueLabel: "block ml-[8px] text-[16px] leading-[24px] font-light select-none"
+}, m = {
+  indigo: "border-indigo-500 bg-indigo-400",
+  jade: "border-jade-500 bg-jade-400",
+  red: "border-red-500 bg-red-400",
+  disabled: "border-gray-200 bg-gray-100",
+  empty: "border-gray-200 bg-white"
+}, V = { class: "relative flex items-center" }, E = ["id", "name", "disabled", "checked"], I = ["for"];
+function L() {
+  return String(Date.now().toString(32) + Math.random().toString(16)).replace(/\./g, "");
+}
+const $ = /* @__PURE__ */ x({
+  __name: "Checkbox",
+  props: {
+    id: { default: () => L() },
+    name: null,
+    checked: { type: Boolean },
+    color: { default: "indigo" },
+    disabled: { type: Boolean },
+    modelValue: { type: Boolean },
+    label: null
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: o }) {
+    const l = e, t = C(l.modelValue || l.checked);
+    function h() {
+      t.value = !t.value, o("update:modelValue", t.value);
+    }
+    const n = y(() => l.disabled ? m.disabled : t.value ? m[l.color] : m.empty);
+    return (d, c) => (u(), g("span", V, [
+      b("input", {
+        id: e.id,
+        class: i(a(r).hiddenInput),
+        name: e.name || e.id,
+        type: "checkbox",
+        onChange: h,
+        disabled: l.disabled,
+        checked: t.value
+      }, null, 42, E),
+      b("label", {
+        class: i(a(r).labelTag),
+        for: e.id
+      }, [
+        t.value ? (u(), v(a(O), {
+          key: 0,
+          strokeColor: "white",
+          class: "absolute"
+        })) : k("", !0),
+        b("span", {
+          class: i([a(n), a(r).visibleCheckbox])
+        }, null, 2),
+        w(d.$slots, "label", {}, () => [
+          e.label ? (u(), g("span", {
+            key: 0,
+            class: i([
+              a(r).trueLabel,
+              e.disabled ? "text-gray-500" : "text-gray-800"
+            ])
+          }, B(e.label), 3)) : k("", !0)
+        ])
+      ], 10, I)
+    ]));
+  }
+});
+export {
+  $ as default
+};
+
+/* <windicss-keep class="relative flex items-center absolute text-gray-500 text-gray-800 icon-dark-white inset-0 w-0 h-0 opacity-0 border border-solid rounded h-[16px] w-[16px] flex-shrink-0 text-white block ml-[8px] text-[16px] leading-[24px] font-light select-none border-indigo-500 bg-indigo-400 border-jade-500 bg-jade-400 border-red-500 bg-red-400 border-gray-200 bg-gray-100 bg-white"> */
+//# sourceMappingURL=index.es.mjs.map