Checkbox component

src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,90 @@
+.ui-checkbox {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--checkbox-gap-text, 8px);
+  user-select: none;
+
+  --checkbox-size-width: 20px;
+  --checkbox-size-height: 20px;
+
+  // .ui-checkbox__checkbox
+  &__checkbox {
+    opacity: 0;
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin: 0;
+    z-index: 1;
+
+    &:disabled {
+
+      ~.ui-checkbox__marker {
+        cursor: not-allowed;
+        background: var(--checkbox-disabled-marker-bg, #DCDCE4);
+
+        &:before {
+          border-color: var(--checkbox-disabled-marker-border, #C0C0CF);
+        }
+      }
+    }
+
+    &:checked~.ui-checkbox__marker {
+      background: var(--checkbox-checked-bg, #4945FF);
+      border-color: transparent;
+
+      &:before {
+        opacity: 1;
+      }
+    }
+
+    &:focus~.ui-checkbox__marker {
+      &:after {
+        opacity: 1;
+      }
+    }
+  }
+
+  // .ui-checkbox__marker
+  &__marker {
+    position: relative;
+    width: var(--checkbox-size-width);
+    height: var(--checkbox-size-height);
+    z-index: 1;
+    flex-shrink: 0;
+    border-radius: var(--checkbox-border-radius, 4px);
+    border: 1px solid var(--checkbox-border-color, #C0C0CF);
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: -4px;
+      left: -4px;
+      right: -4px;
+      bottom: -4px;
+      z-index: -1;
+      border-width: 2px;
+      border-style: solid;
+      border-color: var(--checkbox-focus-bg, #271FE0);
+      border-radius: var(--checkbox-border-radius, 4px);
+      opacity: 0;
+      transition: .2s ease-in;
+    }
+
+    &:before {
+      position: absolute;
+      content: "";
+      top: 3px;
+      left: 8px;
+      width: 4px;
+      height: 9px;
+      border: solid var(--checkbox-border-color-checked-flag, #fff);
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+      opacity: 0;
+      z-index: 1;
+      transition: .3s ease-in;
+    }
+  }
+}

src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,45 @@
+<template>
+  <label class="ui-checkbox" data-test-id="checkbox">
+    <input
+      type="checkbox"
+      :checked="modelValue"
+      :disabled="disabled"
+      class="ui-checkbox__checkbox"
+      @change="switchHandler"
+    >
+
+    <span class="ui-checkbox__marker"></span>
+
+    <div v-if="$slots.default" class="ui-checkbox__text">
+      <slot />
+    </div>
+  </label>
+</template>
+
+<script setup>
+
+defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+
+  /**
+  * Делает checkbox неактивным
+  */
+  disabled: {
+    type: Boolean,
+    default: false,
+  }
+})
+
+const emit = defineEmits(['update:modelValue']);
+
+const switchHandler = ($event) => {
+  emit('update:modelValue', $event.target.checked);
+}
+</script>
+
+<style lang="scss" scoped>
+@use './Checkbox.scss';
+</style>

src/components/Checkbox/index.js

@@ -0,0 +1 @@
+export { default } from './Checkbox.vue';

stories/Checkbox.stories.js

@@ -0,0 +1,64 @@
+import UiCheckbox from "../src/components/Checkbox";
+import './assets/main.scss';
+
+export default {
+  title: 'Elements/Checkbox',
+  component: UiCheckbox,
+  tags: ['autodocs'],
+};
+
+export const Base = {
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        checked: false,
+      };
+    },
+    template: `
+        <UiCheckbox v-bind="args" v-model="checked" />
+    `,
+  }),
+};
+
+export const WithText = {
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        checked: false,
+      };
+    },
+    template: `
+        <UiCheckbox v-bind="args" v-model="checked">
+        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit molestias ex natus eligendi nulla tempora id illo a enim, sapiente officia corporis incidunt asperiores modi quibusdam ut et repellat neque! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Velit molestias ex natus eligendi nulla tempora id illo a enim, sapiente officia corporis incidunt asperiores modi quibusdam ut et repellat neque!</UiCheckbox>
+    `,
+  }),
+};
+
+export const Disabled = {
+  args: {
+    disabled: true,
+  },
+
+  render: (args) => ({
+    components: { UiCheckbox },
+    setup() {
+      return { args };
+    },
+    data() {
+      return {
+        checked: false,
+      };
+    },
+    template: `
+        <UiCheckbox v-bind="args" v-model="checked" />
+    `,
+  }),
+};

tests/Checkbox.test.js

@@ -0,0 +1,27 @@
+
+
+import { mount } from '@vue/test-utils';  
+import Checkbox from '../src/components/Checkbox';
+
+describe('Checkbox', () => {
+
+  it('Checkbox render', () => {
+    const wrapper = mount(Checkbox);
+
+		expect(wrapper.exists()).toBe(true);
+	})
+
+  it('Checkbox emitting update:modelValue', async () => {
+    const wrapper = mount(Checkbox, {
+      attachTo: document.body,
+      props: {
+        modelValue: false,
+        'update:modelValue': (e) => wrapper.setProps({ modelValue: e })
+      }
+    })
+
+    await wrapper.find('[data-test-id="checkbox"]').trigger('click');
+
+    expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+	})
+});