Ui kit switch

frontend/config/styles/components/index.scss

@@ -5,3 +5,4 @@
 @import "field";
 @import "field-message";
 @import "input";
+@import "switch";

frontend/config/styles/components/switch.scss

@@ -0,0 +1,48 @@
+:root {
+  /* ---------------------------------- *\
+           Switch style
+  \* ---------------------------------- */
+
+  // Text style
+  --cr-switch-text-font-weight: var(--font-medium);
+  --cr-switch-text-color: var(--color-gray-900);
+
+  // Description style
+  --cr-switch-description-font-size: #{rem(12)};
+  --cr-switch-description-line-height: #{rem(15)};
+  --cr-switch-description-font-weight: var(--font-normal);
+  --cr-switch-description-color: var(--color-gray-500);
+  --cr-switch-description-spacing: #{rem(4)};
+
+  // Unchecked
+  --cr-switch-background: var(--color-gray-200);
+  --cr-switch-handle: var(--color-white);
+
+  // Checked
+  --cr-switch-checked-background: var(--color-gray-900);
+  --cr-switch-checked-handle: var(--color-white);
+
+  // Disabled Unchecked
+  --cr-switch-disabled-unchecked-background: var(--color-gray-100);
+  --cr-switch-disabled-unchecked-handle: var(--color-white);
+
+  // Disabled Checked
+  --cr-switch-disabled-checked-background: var(--color-gray-400);
+  --cr-switch-disabled-checked-handle: var(--color-white);
+
+  /* ---------------------------------- *\
+           Switch sizes
+  \* ---------------------------------- */
+
+  /* Small */
+  --cr-switch-small-height: #{rem(20)};
+  --cr-switch-small-width: #{rem(36)};
+  --cr-switch-small-font-size: #{rem(13)};
+  --cr-switch-small-line-height: #{rem(16.25)};
+
+  /* Medium */
+  --cr-switch-medium-height: #{rem(24)};
+  --cr-switch-medium-width: #{rem(44)};
+  --cr-switch-medium-font-size: #{rem(14)};
+  --cr-switch-medium-line-height: #{rem(17.5)};
+}

frontend/src/shared/ui-kit/index.scss

@@ -5,4 +5,5 @@
 @import 'input/input';
 @import 'field-message/field-message';
 @import 'radio/radio';
+@import 'switch/switch';
 

frontend/src/shared/ui-kit/switch/Switch.stories.ts

@@ -0,0 +1,68 @@
+import { switchSizes } from '@/shared/ui-kit/switch/types/SwitchSize';
+import CrSwitch from './Switch.vue';
+
+export default {
+  title: 'Crowd.dev/Switch',
+  component: CrSwitch,
+  tags: ['autodocs'],
+  argTypes: {
+    // Props
+    size: {
+      description: 'Specifies switch size',
+      defaultValue: 'medium',
+      control: 'select',
+      options: switchSizes,
+    },
+    modelValue: {
+      description: 'Switch value',
+      control: {
+        type: null,
+      },
+    },
+    value: {
+      description: 'Value for switch when enabled',
+      control: {
+        type: null,
+      },
+    },
+    disabled: {
+      description: 'Specifies if switch is disabled',
+      defaultValue: false,
+      control: 'boolean',
+    },
+
+    // Slots
+    default: {
+      description: 'Text or html content of the switch',
+      control: {
+        type: null,
+      },
+    },
+
+    // Events
+    'update:modelValue': {
+      description: 'Event triggered when value changes',
+      control: {
+        type: null,
+      },
+    },
+  },
+};
+
+export const Regular = {
+  label: 'Primary',
+  args: {
+    size: 'medium',
+    disabled: false,
+    default: 'Switch text',
+  },
+};
+export const Disabled = {
+  label: 'Primary',
+  args: {
+    size: 'medium',
+    disabled: true,
+    modelValue: true,
+    default: 'Disabled',
+  },
+};

frontend/src/shared/ui-kit/switch/Switch.vue

@@ -0,0 +1,46 @@
+<template>
+  <label
+    class="c-switch"
+    :class="[
+      `c-switch--${props.size}`,
+    ]"
+  >
+    <input v-model="checked" type="checkbox" :value="props.value" :disabled="props.disabled">
+    <span v-if="$slots.default" class="flex flex-col">
+      <slot />
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { CheckboxSize } from '@/shared/ui-kit/checkbox/types/CheckboxSize';
+import { computed, withDefaults } from 'vue';
+
+const props = withDefaults(defineProps<{
+  size?: CheckboxSize,
+  modelValue: string | boolean,
+  value?: string | boolean,
+  disabled?: boolean,
+}>(), {
+  size: 'medium',
+  value: true,
+  disabled: false,
+});
+
+const emit = defineEmits<{(e: 'update:modelValue', value: string | boolean): any}>();
+
+const checked = computed<string | boolean>({
+  get() {
+    return props.modelValue;
+  },
+  set(val: string | boolean) {
+    emit('update:modelValue', val);
+  },
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrSwitch',
+};
+</script>

frontend/src/shared/ui-kit/switch/switch.scss

@@ -0,0 +1,79 @@
+.c-switch {
+  font-size: var(--cr-switch-font-size);
+  line-height: var(--cr-switch-line-height);
+  font-weight: var(--cr-switch-text-font-weight);
+  color: var(--cr-switch-text-color);
+  @apply flex flex-wrap relative;
+
+  input {
+    height: var(--cr-switch-height);
+    width: var(--cr-switch-width);
+    border: rem(2) solid var(--cr-switch-background);
+    background: var(--cr-switch-background);
+    border-radius: var(--cr-switch-height);
+
+    @apply transition-all appearance-none relative p-0 my-0 ml-0 inline-block mr-0 cursor-pointer;
+
+    // Text
+    & + span{
+      margin-top: calc((var(--cr-switch-height) - var(--cr-switch-line-height)) / 2);
+      @apply cursor-pointer ml-3;
+    }
+
+    &:before{
+      content: '';
+      background: var(--cr-switch-handle);
+      margin-left: 0;
+      @apply relative h-full w-1/2 rounded-full block transition-all;
+    }
+
+    // Checked
+    &:checked{
+      --cr-switch-handle: var(--cr-switch-checked-handle);
+      --cr-switch-background: var(--cr-switch-checked-background);
+
+      &:before{
+        margin-left: 50%;
+      }
+    }
+
+    // Disabled
+    &:disabled {
+      --cr-switch-handle: var(--cr-switch-disabled-unchecked-handle);
+      --cr-switch-background: var(--cr-switch-disabled-unchecked-background);
+      @apply cursor-not-allowed;
+
+      &:checked {
+        --cr-switch-handle: var(--cr-switch-disabled-checked-handle);
+        --cr-switch-background: var(--cr-switch-disabled-checked-background);
+      }
+
+      & + span{
+        @apply cursor-not-allowed;
+      }
+    }
+  }
+
+  // Checkbox sizes
+  &--small {
+    --cr-switch-height: var(--cr-switch-small-height);
+    --cr-switch-width: var(--cr-switch-small-width);
+    --cr-switch-font-size: var(--cr-switch-small-font-size);
+    --cr-switch-line-height: var(--cr-switch-small-line-height);
+  }
+
+  &--medium {
+    --cr-switch-height: var(--cr-switch-medium-height);
+    --cr-switch-width: var(--cr-switch-medium-width);
+    --cr-switch-font-size: var(--cr-switch-medium-font-size);
+    --cr-switch-line-height: var(--cr-switch-medium-line-height);
+  }
+
+  p{
+    font-size: var(--cr-switch-description-font-size);
+    line-height: var(--cr-switch-description-line-height);
+    font-weight: var(--cr-switch-description-font-weight);
+    color: var(--cr-switch-description-color);
+    margin-top: var(--cr-switch-description-spacing);
+  }
+}

frontend/src/shared/ui-kit/switch/types/SwitchSize.ts

@@ -0,0 +1,6 @@
+export const switchSizes = [
+  'small',
+  'medium',
+] as const;
+
+export type SwitchSize = typeof switchSizes[number];