Ui kit radio (#2180)

(cherry picked from commit 8db80cf)

frontend/config/styles/components/index.scss

@@ -1,6 +1,7 @@
 @import "button";
 @import "card";
 @import "checkbox";
+@import "radio";
 @import "field";
 @import "field-message";
 @import "input";

frontend/config/styles/components/radio.scss

@@ -0,0 +1,49 @@
+:root {
+  /* ---------------------------------- *\
+           Radio style
+  \* ---------------------------------- */
+
+  // General style
+  --cr-radio-shadow: var(--shadow-s);
+
+  // Text style
+  --cr-radio-text-font-weight: var(--font-medium);
+  --cr-radio-text-color: var(--color-gray-900);
+
+  // Description style
+  --cr-radio-description-font-size: #{rem(12)};
+  --cr-radio-description-line-height: #{rem(15)};
+  --cr-radio-description-font-weight: var(--font-normal);
+  --cr-radio-description-color: var(--color-gray-500);
+  --cr-radio-description-spacing: #{rem(4)};
+
+  // Unchecked
+  --cr-radio-unchecked-border: var(--color-gray-300);
+  --cr-radio-unchecked-background: var(--color-white);
+
+  // Checked
+  --cr-radio-checked-border: var(--color-gray-900);
+  --cr-radio-checked-background: var(--color-white);
+
+  // Disabled Unchecked
+  --cr-radio-disabled-unchecked-border: var(--color-gray-200);
+  --cr-radio-disabled-unchecked-background: var(--color-gray-50);
+
+  // Disabled Checked
+  --cr-radio-disabled-checked-border: var(--color-gray-400);
+  --cr-radio-disabled-checked-background: var(--color-white);
+
+  /* ---------------------------------- *\
+           Checkbox sizes
+  \* ---------------------------------- */
+
+  /* Small */
+  --cr-radio-small-size: #{rem(14)};
+  --cr-radio-small-font-size: #{rem(13)};
+  --cr-radio-small-line-height: 1.25;
+
+  /* Medium */
+  --cr-radio-medium-size: #{rem(16)};
+  --cr-radio-medium-font-size: #{rem(14)};
+  --cr-radio-medium-line-height: 1.25;
+}

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

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

frontend/src/shared/ui-kit/radio/Radio.stories.ts

@@ -0,0 +1,101 @@
+import { radioSizes } from '@/shared/ui-kit/radio/types/RadioSize';
+import { reactive } from 'vue';
+import CrRadio from './Radio.vue';
+
+export default {
+  title: 'Crowd.dev/Radio',
+  component: CrRadio,
+  tags: ['autodocs'],
+  argTypes: {
+    // Props
+    size: {
+      description: 'Specifies radio size',
+      defaultValue: 'medium',
+      control: 'select',
+      options: radioSizes,
+    },
+    modelValue: {
+      description: 'Radio value',
+      control: {
+        type: null,
+      },
+    },
+    value: {
+      description: 'Value for radio when selected',
+      control: {
+        type: null,
+      },
+    },
+    disabled: {
+      description: 'Specifies if radio is disabled',
+      defaultValue: false,
+      control: 'boolean',
+    },
+
+    // Slots
+    default: {
+      description: 'Text or html content of the radio',
+      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: 'Radio text',
+    modelValue: true,
+  },
+};
+
+export const Multiple = {
+  label: 'Primary',
+  args: {
+    size: 'medium',
+    disabled: false,
+    default: 'Primary',
+    modelValue: true,
+  },
+  render: (args: any) => ({
+    components: { CrRadio },
+    setup() {
+      const form = reactive({
+        type: 'primary',
+      });
+
+      return { args, form };
+    },
+    template: `<div>
+      <cr-radio v-model="form.type" value="primary" class="mb-2" :size="args.size" :disabled="args.disabled">
+        Primary<p>This is primary description</p>
+      </cr-radio>
+      <cr-radio v-model="form.type" value="secondary" class="mb-2" :size="args.size" :disabled="args.disabled">
+        Secondary<p>This is secondary description</p>
+      </cr-radio>
+      <cr-radio v-model="form.type" value="tertiary" :size="args.size" :disabled="args.disabled">
+        Tertiary<p>This is tertiary description</p>
+      </cr-radio>
+    </div>`,
+  }),
+};
+
+export const Disabled = {
+  label: 'Primary',
+  args: {
+    size: 'medium',
+    disabled: true,
+    default: 'Disabled radio',
+  },
+};

frontend/src/shared/ui-kit/radio/Radio.vue

@@ -0,0 +1,46 @@
+<template>
+  <label
+    class="c-radio"
+    :class="[
+      `c-radio--${props.size}`,
+    ]"
+  >
+    <input v-model="checked" type="radio" :value="props.value" :disabled="props.disabled">
+    <span class="flex flex-col">
+      <slot />
+    </span>
+  </label>
+</template>
+
+<script setup lang="ts">
+import { RadioSize } from '@/shared/ui-kit/radio/types/RadioSize';
+import { computed, withDefaults } from 'vue';
+
+const props = withDefaults(defineProps<{
+  size?: RadioSize,
+  modelValue: string,
+  value?: string,
+  disabled?: boolean,
+}>(), {
+  size: 'medium',
+  value: '',
+  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: 'CrRadio',
+};
+</script>

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

@@ -0,0 +1,69 @@
+.c-radio {
+  font-size: var(--cr-radio-font-size);
+  line-height: var(--cr-radio-line-height);
+  font-weight: var(--cr-radio-text-font-weight);
+  color: var(--cr-radio-text-color);
+  @apply flex flex-wrap relative;
+
+  input {
+    height: var(--cr-radio-size);
+    width: var(--cr-radio-size);
+    border: rem(1) solid var(--cr-radio-border);
+    background: var(--cr-radio-background);
+    box-shadow: var(--cr-radio-shadow);
+
+    --cr-radio-border: var(--cr-radio-unchecked-border);
+    --cr-radio-background: var(--cr-radio-unchecked-background);
+
+    @apply transition-all appearance-none rounded-full p-0 my-0 ml-0 inline-block mr-2 cursor-pointer;
+
+    // Text
+    & + span{
+      @apply cursor-pointer;
+    }
+
+    // Checked
+    &:checked{
+      --cr-radio-border: var(--cr-radio-checked-border);
+      --cr-radio-background: var(--cr-radio-checked-background);
+      border-width: rem(5);
+    }
+
+    // Disabled
+    &:disabled {
+      --cr-radio-border: var(--cr-radio-disabled-unchecked-border);
+      --cr-radio-background: var(--cr-radio-disabled-unchecked-background);
+      @apply cursor-not-allowed;
+
+      &:checked {
+        --cr-radio-border: var(--cr-radio-disabled-checked-border);
+        --cr-radio-background: var(--cr-radio-disabled-checked-background);
+      }
+
+      & + span{
+        @apply cursor-not-allowed;
+      }
+    }
+  }
+
+  // Checkbox sizes
+  &--small {
+    --cr-radio-size: var(--cr-radio-small-size);
+    --cr-radio-font-size: var(--cr-radio-small-font-size);
+    --cr-radio-line-height: var(--cr-radio-small-line-height);
+  }
+
+  &--medium {
+    --cr-radio-size: var(--cr-radio-medium-size);
+    --cr-radio-font-size: var(--cr-radio-medium-font-size);
+    --cr-radio-line-height: var(--cr-radio-medium-line-height);
+  }
+
+  p{
+    font-size: var(--cr-radio-description-font-size);
+    line-height: var(--cr-radio-description-line-height);
+    font-weight: var(--cr-radio-description-font-weight);
+    color: var(--cr-radio-description-color);
+    margin-top: var(--cr-radio-description-spacing);
+  }
+}

frontend/src/shared/ui-kit/radio/types/RadioSize.ts

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