@fiscozen/checkbox 0.1.0

package/dist/src/types.d.ts

@@ -0,0 +1,76 @@
+export type FzCheckboxProps = {
+    /**
+     * The label of the checkbox
+     */
+    label: string;
+    /**
+     * The value of the checkbox. If not provided, the value will be the label
+     */
+    value?: string;
+    /**
+     * The size of the checkbox
+     */
+    size: "sm" | "md";
+    /**
+     * If the checkbox is checked
+     */
+    checked?: boolean;
+    /**
+     * if the checkbox is indeterminate
+     */
+    indeterminate?: boolean;
+    /**
+     * If true, the checkbox will be emphasized
+     */
+    emphasis?: boolean;
+    /**
+     * If true, the checkbox will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If true, the checkbox will be in an error state
+     */
+    error?: boolean;
+    /**
+     * If the checkbox is required
+     */
+    required?: boolean;
+    /**
+     * If the checkbox is standalone
+     */
+    standalone?: boolean;
+};
+export type FzCheckboxGroupProps = {
+    /**
+     * The label of the checkbox group
+     */
+    label: string;
+    /**
+     * The size of the checkbox
+     */
+    size: "sm" | "md";
+    /**
+     * The checkbox to render
+     */
+    options: ParentCheckbox[];
+    /**
+     * If true, the checkbox will be emphasized
+     */
+    emphasis?: boolean;
+    /**
+     * If true, the checkbox will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If true, the checkbox will be in an error state
+     */
+    error?: boolean;
+    /**
+     * If the checkbox group is required
+     */
+    required?: boolean;
+};
+export type ParentCheckbox = ChildCheckbox & {
+    children?: ChildCheckbox[];
+};
+export type ChildCheckbox = Omit<FzCheckboxProps, "size">;

package/dist/style.css

@@ -0,0 +1 @@
+input[type=checkbox][data-v-7bafffef]{width:0;height:0}input[type=checkbox]+label[data-v-7bafffef]{cursor:pointer}input[type=checkbox]+label[data-v-7bafffef]:hover{cursor:pointer}input[type=checkbox]:focus+label div[data-v-7bafffef]:after{border-radius:3px;content:"";border-style:solid;border-width:1px;@apply border-blue-500;top:0;left:0;right:0;bottom:0;position:absolute}.checkbox--small:focus+label div[data-v-7bafffef]:after{transform:translate(-.2px,.4px)}.checkbox-group--child-container__small[data-v-c563830e]{margin-top:5px;padding-left:24px}.checkbox-group--child-container__medium[data-v-c563830e]{margin-top:6px;padding-left:24px}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@fiscozen/checkbox",
+  "version": "0.1.0",
+  "description": "Design System Checkbox and Checkbox Group component",
+  "main": "src/index.ts",
+  "type": "module",
+  "keywords": [],
+  "author": "Cristian Barraco",
+  "dependencies": {
+    "@fiscozen/badge": "^0.1.0",
+    "@fiscozen/composables": "^0.1.8"
+  },
+  "peerDependencies": {
+    "tailwindcss": "^3.4.1",
+    "vue": "^3.4.13",
+    "@fiscozen/icons": "^0.1.3"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.3.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^18.19.3",
+    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitest/coverage-v8": "^1.2.1",
+    "@vue/test-utils": "^2.4.3",
+    "@vue/tsconfig": "^0.5.0",
+    "vite-plugin-dts": "^3.8.3",
+    "eslint": "^8.49.0",
+    "jsdom": "^23.0.1",
+    "prettier": "^3.0.3",
+    "typescript": "~5.3.0",
+    "vite": "^5.0.10",
+    "vitest": "^1.2.0",
+    "vue-tsc": "^1.8.25",
+    "@awesome.me/kit-8137893ad3": "^1.0.65",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/vue-fontawesome": "^3.0.6",
+    "@fiscozen/eslint-config": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0",
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/icons": "^0.1.3"
+  },
+  "license": "MIT",
+  "scripts": {
+    "coverage": "vitest run --coverage",
+    "format": "prettier --write src/",
+    "test:unit": "vitest run",
+    "build": "vue-tsc && vite build"
+  }
+}

package/src/FzCheckbox.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="flex justify-center flex-col w-fit">
+    <input
+      type="checkbox"
+      :id="value.replace(/ /g, '-').toLowerCase()"
+      :disabled="disabled"
+      :checked="checked"
+      :class="staticInputClass"
+      :required="required"
+      :value="value"
+      @change="emit('change', $event)"
+      v-model="model"
+      :indeterminate="indeterminate"
+      ref="refCheckbox"
+    />
+    <label
+      :for="value.replace(/ /g, '-').toLowerCase()"
+      :class="[staticLabelClass, computedLabelClass]"
+    >
+      <FzIcon
+        :name="computedName"
+        :size="size"
+        :class="[staticIconClass, computedIconClasses]"
+        :variant="computedVariant"
+      />
+      <span class="w-fit">{{ standalone ? "" : label }}</span>
+    </label>
+    <FzRadioErrorText :size="size" v-if="error && $slots.error">
+      <slot name="error" />
+    </FzRadioErrorText>
+    <slot name="children" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { FzCheckboxProps } from "./types";
+import { mapSizeToClasses } from "./common";
+import FzRadioErrorText from "./components/FzCheckboxErrorText.vue";
+import { FzIcon } from "@fiscozen/icons";
+
+const props = withDefaults(defineProps<FzCheckboxProps>(), {
+  size: "md",
+  indeterminate: false,
+});
+
+const value = props.value || props.label;
+
+const model = defineModel<boolean | string[]>({
+  required: true,
+});
+
+const emit = defineEmits(["change"]);
+const refCheckbox = ref<HTMLInputElement | null>(null);
+
+const staticInputClass = "w-0 h-0 peer";
+const staticLabelClass = `
+  flex items-start gap-4 hover:cursor-pointer
+  peer-focus:[&_div]:after:border-1
+  peer-focus:[&_div]:after:border-solid
+  peer-focus:[&_div]:after:rounded-[3px]
+  peer-focus:[&_div]:after:border-blue-500
+  peer-focus:[&_div]:after:content-['']
+  peer-focus:[&_div]:after:top-0
+  peer-focus:[&_div]:after:left-0
+  peer-focus:[&_div]:after:right-0
+  peer-focus:[&_div]:after:bottom-0
+  peer-focus:[&_div]:after:absolute
+`;
+const staticIconClass = "relative";
+
+const computedLabelClass = computed(() => [
+  mapSizeToClasses[props.size],
+  getTextClassForLabel(),
+]);
+
+const computedIconClasses = computed(() => [
+  props.size === "sm" ? "mt-1" : "",
+  props.size === "md" ? "mt-2" : "",
+  getTextClassForIcon(),
+]);
+
+const computedName = computed(() => {
+  if (props.indeterminate) {
+    return "square-minus";
+  }
+
+  return checkValueIsInModel() ? "square-check" : "square";
+});
+
+const computedVariant = computed(() => {
+  return !props.indeterminate && !checkValueIsInModel() ? "far" : "fas";
+});
+
+const checkValueIsInModel = () => {
+  if (typeof model.value === "boolean") {
+    return model.value;
+  } else {
+    return model.value.includes(value);
+  }
+};
+
+const getTextClassForLabel = () => {
+  switch (true) {
+    case props.disabled:
+      return "text-grey-300";
+    case props.error:
+      return "text-semantic-error";
+    case props.emphasis:
+      return "text-grey-500 peer-checked:[&_div]:text-blue-500 peer-indeterminate:[&_div]:text-blue-500";
+    default:
+      return "text-grey-500";
+  }
+};
+
+const getTextClassForIcon = () => {
+  switch (true) {
+    case props.disabled:
+      return "text-grey-300";
+    case props.error:
+      return "text-semantic-error";
+    case props.emphasis:
+    default:
+      return "text-grey-500";
+  }
+};
+
+onMounted(() => {
+  if (typeof model.value === "boolean") {
+    if (model.value) refCheckbox.value?.dispatchEvent(new Event("change"));
+    else if (props.checked !== undefined) model.value = props.checked;
+  } else {
+    if (model.value.includes(value))
+      refCheckbox.value?.dispatchEvent(new Event("change"));
+    else if (props.checked) model.value.push(value);
+  }
+});
+</script>
+<style scoped></style>

package/src/FzCheckboxGroup.vue

@@ -0,0 +1,74 @@
+<template>
+  <div :class="[staticContainerClass, computedContainerClass]" :id="id">
+    <label :for="id" :class="[staticLabeldClass, computedLabelClass]">
+      <span>{{ label }}<span v-if="required"> *</span></span>
+      <p :class="computedHelpTextClass" v-if="$slots.help">
+        <slot name="help" />
+      </p>
+    </label>
+    <div :class="[staticSlotContainerClass, computedSlotContainerClass]">
+      <FzCheckboxGroupOption
+        v-for="option in options"
+        :key="option.value"
+        v-model="model"
+        v-bind="option"
+        :disabled="disabled"
+        :emphasis="emphasis"
+        :error="error"
+        :size="size"
+      />
+    </div>
+    <FzCheckboxErrorText :size="size" v-if="error && $slots.error">
+      <slot name="error" />
+    </FzCheckboxErrorText>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { FzCheckboxGroupProps, ParentCheckbox } from "./types";
+import FzCheckboxErrorText from "./components/FzCheckboxErrorText.vue";
+import { mapSizeToClasses } from "./common";
+import FzCheckboxGroupOption from "./components/FzCheckboxGroupOption.vue";
+
+const props = defineProps<FzCheckboxGroupProps>();
+const id = `fz-checkbox-group-${generateRandomId()}`;
+
+const computedHelpTextClass = computed(() => [
+  props.size === "sm" ? "text-xs" : "text-sm",
+  props.disabled ? "text-grey-400" : "text-grey-500",
+]);
+
+const model = defineModel<string[]>({
+  required: true,
+  default: [],
+});
+
+const staticLabeldClass = "flex flex-col";
+const staticContainerClass = "flex flex-col";
+const staticSlotContainerClass = "flex flex-col";
+
+const computedLabelClass = computed(() => [
+  mapSizeToClasses[props.size],
+  props.size === "sm" ? "gap-4" : "",
+  props.size === "md" ? "gap-6" : "",
+  props.disabled ? "text-grey-400" : "",
+  !props.disabled ? "text-grey-500" : "",
+]);
+
+const computedContainerClass = computed(() => [
+  mapSizeToClasses[props.size],
+  props.size === "sm" ? "gap-10" : "",
+  props.size === "md" ? "gap-12" : "",
+]);
+
+const computedSlotContainerClass = computed(() => [
+  mapSizeToClasses[props.size],
+  props.size === "sm" ? "gap-6" : "",
+  props.size === "md" ? "gap-8" : "",
+]);
+
+function generateRandomId() {
+  return Math.random().toString(36).slice(2, 9);
+}
+</script>

package/src/__test__/FzCheckbox.test.ts

@@ -0,0 +1,88 @@
+// FzCheckbox.spec.ts
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import FzCheckbox from "../FzCheckbox.vue";
+
+describe("FzCheckbox", () => {
+  it("renders correctly", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        size: "md",
+        modelValue: false,
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.html()).toContain("Test Checkbox");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("emits an update event when clicked", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        modelValue: false,
+      },
+    });
+    await wrapper.find("input").trigger("click");
+    expect(wrapper.emitted()).toHaveProperty("update:modelValue");
+  });
+
+  it("is checked when v-model is true", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        modelValue: true,
+      },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("input").element.checked).toBe(true);
+  });
+
+  it("is unchecked when v-model is false", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        modelValue: false,
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("input").element.checked).toBe(false);
+  });
+
+  it("should be emphasized", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        size: "md",
+        modelValue: false,
+        emphasis: true,
+      },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("label").classes()).toContain(
+      "peer-checked:[&_div]:text-blue-500",
+    );
+  });
+
+  it("should be disabled", async () => {
+    const wrapper = mount(FzCheckbox, {
+      props: {
+        label: "Test Checkbox",
+        value: "test",
+        size: "md",
+        modelValue: false,
+        disabled: true,
+      },
+    });
+    await wrapper.vm.$nextTick();
+    expect(wrapper.find("input").element.disabled).toBe(true);
+  });
+});

package/src/__test__/FzCheckboxGroup.test.ts

@@ -0,0 +1,100 @@
+import { mount } from "@vue/test-utils";
+import { describe, it, expect } from "vitest";
+import FzCheckboxGroup from "../FzCheckboxGroup.vue";
+import FzCheckbox from "../FzCheckbox.vue";
+
+describe("FzCheckboxGroup", () => {
+  it("renders correctly", async () => {
+    const wrapper = mount(FzCheckboxGroup, {
+      props: {
+        label: "Test Checkbox Group",
+        size: "md",
+        modelValue: [],
+        options: [
+          { label: "Option 1", value: "option1" },
+          { label: "Option 2", value: "option2" },
+        ],
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.html()).toContain("Test Checkbox Group");
+    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
+  });
+
+  it("displays error text when error prop is true", async () => {
+    const wrapper = mount(FzCheckboxGroup, {
+      props: {
+        label: "Test Checkbox Group",
+        size: "md",
+        modelValue: [],
+        options: [
+          { label: "Option 1", value: "option1" },
+          { label: "Option 2", value: "option2" },
+        ],
+        error: true,
+      },
+      slots: {
+        error: "Test error message",
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.html()).toContain("Test error message");
+    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
+    expect(wrapper.findAllComponents(FzCheckbox).at(0)!.props("error")).toBe(
+      true,
+    );
+    expect(wrapper.findAllComponents(FzCheckbox).at(1)!.props("error")).toBe(
+      true,
+    );
+  });
+
+  it("has disabled checkboxes when disabled prop is true", async () => {
+    const wrapper = mount(FzCheckboxGroup, {
+      props: {
+        label: "Test Checkbox Group",
+        size: "md",
+        modelValue: [],
+        options: [
+          { label: "Option 1", value: "option1" },
+          { label: "Option 2", value: "option2" },
+        ],
+        disabled: true,
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
+    expect(wrapper.findAllComponents(FzCheckbox).at(0)!.props("disabled")).toBe(
+      true,
+    );
+    expect(wrapper.findAllComponents(FzCheckbox).at(1)!.props("disabled")).toBe(
+      true,
+    );
+  });
+
+  it("display emphasized checkboxes when emphasis prop is true", async () => {
+    const wrapper = mount(FzCheckboxGroup, {
+      props: {
+        label: "Test Checkbox Group",
+        size: "md",
+        modelValue: [],
+        options: [
+          { label: "Option 1", value: "option1" },
+          { label: "Option 2", value: "option2" },
+        ],
+        emphasis: true,
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+    expect(wrapper.findAllComponents(FzCheckbox).length).toBe(2);
+    expect(wrapper.findAllComponents(FzCheckbox).at(0)!.props("emphasis")).toBe(
+      true,
+    );
+    expect(wrapper.findAllComponents(FzCheckbox).at(1)!.props("emphasis")).toBe(
+      true,
+    );
+  });
+});

package/src/__test__/__snapshots__/FzCheckbox.test.ts.snap

@@ -0,0 +1,21 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`FzCheckbox > renders correctly 1`] = `
+"<div class="flex justify-center flex-col w-fit"><input type="checkbox" id="test" class="w-0 h-0 peer" value="test"><label for="test" class="flex items-start gap-4 hover:cursor-pointer
+  peer-focus:[&amp;_div]:after:border-1
+  peer-focus:[&amp;_div]:after:border-solid
+  peer-focus:[&amp;_div]:after:rounded-[3px]
+  peer-focus:[&amp;_div]:after:border-blue-500
+  peer-focus:[&amp;_div]:after:content-['']
+  peer-focus:[&amp;_div]:after:top-0
+  peer-focus:[&amp;_div]:after:left-0
+  peer-focus:[&amp;_div]:after:right-0
+  peer-focus:[&amp;_div]:after:bottom-0
+  peer-focus:[&amp;_div]:after:absolute text-md text-grey-500">
+    <div class="flex items-center justify-center w-[20px] h-[20px] relative mt-2 text-grey-500"><svg class="svg-inline--fa fa-square h-[16px]" aria-hidden="true" focusable="false" data-prefix="far" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+        <path class="" fill="currentColor" d="M384 80c8.8 0 16 7.2 16 16V416c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V96c0-8.8 7.2-16 16-16H384zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"></path>
+      </svg></div><span class="w-fit">Test Checkbox</span>
+  </label>
+  <!--v-if-->
+</div>"
+`;

package/src/common.ts

@@ -0,0 +1,4 @@
+export const mapSizeToClasses = {
+  sm: "text-sm",
+  md: "text-md",
+};

package/src/components/FzCheckboxErrorText.vue

@@ -0,0 +1,20 @@
+<template>
+  <p :class="[staticErrorTextClass, computedErrorTextClass]">
+    <FzIcon
+      class="text-semantic-error"
+      name="triangle-exclamation"
+      :size="size"
+    />
+    <slot />
+  </p>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { mapSizeToClasses } from "../common";
+import { FzIcon } from "@fiscozen/icons";
+
+const props = defineProps<{ errorText?: string; size: "sm" | "md" }>();
+const staticErrorTextClass = "flex w-full gap-4 items-center";
+const computedErrorTextClass = computed(() => [mapSizeToClasses[props.size]]);
+</script>

package/src/components/FzCheckboxGroupOption.vue

@@ -0,0 +1,96 @@
+<template>
+  <FzCheckbox
+    v-model="model"
+    :value="props.value"
+    :label="props.label"
+    :disabled="disabled"
+    :emphasis="emphasis"
+    :error="error"
+    :size="size"
+    :indeterminate="isIndeterminate"
+    @change="onCheckboxParentChange"
+  >
+    <template #children v-if="children?.length">
+      <div :class="[staticChildContainerClass, computedChildContainerClasses]">
+        <FzCheckbox
+          v-for="child in children"
+          :key="child.value"
+          v-model="model"
+          v-bind="child"
+          :disabled="disabled"
+          :emphasis="emphasis"
+          :error="error"
+          :size="size"
+          @change="handleCheckboxParentChange"
+        />
+      </div>
+    </template>
+  </FzCheckbox>
+</template>
+<script setup lang="ts">
+import { computed } from "vue";
+import FzCheckbox from "../FzCheckbox.vue";
+import { ParentCheckbox } from "../types";
+
+const props = defineProps<ParentCheckbox & { size: "sm" | "md" }>();
+
+const model = defineModel<string[]>({
+  required: true,
+  default: [],
+});
+
+const staticChildContainerClass = "flex flex-col justify-center pl-24";
+
+const computedChildContainerClasses = computed(() => [
+  props.size === "sm" ? "gap-6 mt-6" : "",
+  props.size === "md" ? "gap-8 mt-8" : "",
+]);
+
+const isIndeterminate = computed(() => {
+  if (!props.children) return false;
+
+  const numChecked = props.children.filter((child) =>
+    model.value.includes(child.value || child.label),
+  ).length;
+  return numChecked > 0 && numChecked < props.children.length;
+});
+
+function handleCheckboxParentChange() {
+  if (!props.children) return;
+  const numChecked = props.children.filter((child) =>
+    model.value.includes(child.value || child.label),
+  ).length;
+
+  if (numChecked === props.children.length) {
+    // push parent value to model (using concat to force reactivity, push seems to not work)
+    model.value = model.value.concat(props.value || props.label);
+  } else {
+    // remove parent value from model if it exists
+    if (model.value.includes(props.value || props.label))
+      model.value = model.value.filter(
+        (value) => value !== (props.value || props.label),
+      );
+  }
+}
+
+function onCheckboxParentChange() {
+  if (!props.children) return;
+  if (model.value.includes(props.value || props.label)) {
+    // push all children values to model that are not already in model
+    model.value = model.value.concat(
+      props.children
+        ?.map((child) => child.value || child.label)
+        .filter((value) => !model.value.includes(value)),
+    );
+  } else {
+    // remove all children values from model
+    model.value = model.value.filter(
+      (value) =>
+        !props.children
+          ?.map((child) => child.value || child.label)
+          .includes(value),
+    );
+  }
+}
+</script>
+<style scoped></style>

package/src/index.ts

@@ -0,0 +1,3 @@
+export { default as FzCheckbox } from "./FzCheckbox.vue";
+export { default as FzCheckboxGroup } from "./FzCheckboxGroup.vue";
+export type { FzCheckboxProps, FzCheckboxGroupProps } from "./types";