Ui kit input, password input, field, field message

frontend/.eslintrc.js

@@ -45,6 +45,7 @@ module.exports = {
     'no-shadow': 'off',
     'vuejs-accessibility/mouse-events-have-key-events': 'off',
     'vuejs-accessibility/click-events-have-key-events': 'off',
+    'vuejs-accessibility/form-control-has-label': 'off',
     'func-names': 'off',
     'import/no-cycle': 'off',
     'vue/max-len': [

frontend/config/styles/components/field-message.scss

@@ -0,0 +1,26 @@
+:root {
+  /* ---------------------------------- *\
+           Field message style
+  \* ---------------------------------- */
+
+  // Message
+  --cr-field-message-font-size: #{rem(13)};
+  --cr-field-message-line-height: #{rem(17)};
+  --cr-field-message-spacing: #{rem(4)};
+
+  // Icon
+  --cr-field-message-icon-size: #{rem(20)};
+  --cr-field-message-icon-spacing: #{rem(4)};
+
+  // Error
+  --cr-field-message-error-color: var(--color-red-600);
+
+  // Info
+  --cr-field-message-info-color: var(--color-blue-600);
+
+  // Warning
+  --cr-field-message-warning-color: var(--color-yellow-600);
+
+  // Hint
+  --cr-field-message-hint-color: var(--color-gray-400);
+}

frontend/config/styles/components/field.scss

@@ -0,0 +1,16 @@
+:root {
+  /* ---------------------------------- *\
+           Field style
+  \* ---------------------------------- */
+
+  // Field label
+  --cr-field-label-font-size: #{rem(14)};
+  --cr-field-label-font-weight: var(--font-medium);
+  --cr-field-label-color: var(--color-gray-900);
+
+  // Required sign
+  --cr-field-required-color: var(--color-brand-500);
+
+  // Spacing
+  --cr-field-spacing: #{rem(4)};
+}

frontend/config/styles/components/index.scss

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

frontend/config/styles/components/input.scss

@@ -0,0 +1,25 @@
+:root {
+  /* ---------------------------------- *\
+           Input style
+  \* ---------------------------------- */
+
+  // Input
+  --cr-input-background: var(--color-white);
+  --cr-input-border: var(--color-gray-200);
+  --cr-input-border-radius: #{rem(8)};
+  --cr-input-shadow: var(--shadow-s);
+  --cr-input-color: var(--color-gray-900);
+  --cr-input-placeholder-color: var(--color-gray-400);
+
+  // Focus
+  --cr-input-focus-border: var(--color-gray-900);
+
+  // Disabled
+  --cr-input-disabled-background: var(--color-gray-50);
+  --cr-input-disabled-border: var(--color-gray-200);
+  --cr-input-disabled-color: var(--color-gray-400);
+  --cr-input-disabled-placeholder-color: var(--color-gray-300);
+
+  // Invalid
+  --cr-input-invalid-border: var(--color-red-600);
+}

frontend/src/shared/ui-kit/checkbox/Checkbox.stories.ts

@@ -58,8 +58,42 @@ export const Primary = {
   label: 'Primary',
   args: {
     size: 'medium',
+    modelValue: false,
     disabled: false,
     multiple: false,
     default: 'Checkbox text',
   },
 };
+
+export const Checked = {
+  label: 'Primary',
+  args: {
+    size: 'medium',
+    modelValue: true,
+    disabled: false,
+    multiple: false,
+    default: 'Checkbox text',
+  },
+};
+
+export const Disabled = {
+  label: 'Primary',
+  args: {
+    size: 'medium',
+    modelValue: true,
+    disabled: true,
+    multiple: false,
+    default: 'Checkbox text',
+  },
+};
+
+export const Multiple = {
+  label: 'Primary',
+  args: {
+    size: 'medium',
+    modelValue: true,
+    disabled: false,
+    multiple: true,
+    default: 'Checkbox text',
+  },
+};

frontend/src/shared/ui-kit/checkbox/Checkbox.vue

@@ -9,7 +9,6 @@
     <input v-model="checked" type="checkbox" :value="props.value" :disabled="props.disabled">
     <span class="flex flex-col">
       <slot />
-      <p>This is desc</p>
     </span>
   </label>
 </template>

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

@@ -20,7 +20,7 @@
 
     // Text
     & + span{
-      @apply cursor-pointer;
+      @apply cursor-pointer select-none;
     }
 
     // Icon

frontend/src/shared/ui-kit/field-message/FieldMessage.stories.ts

@@ -0,0 +1,85 @@
+import { fieldMessageTypes } from '@/shared/ui-kit/field-message/types/FieldMessageType';
+import CrFieldMessage from './FieldMessage.vue';
+import CrInput from '../input/Input.vue';
+import CrField from '../field/Field.vue';
+
+export default {
+  title: 'Crowd.dev/FieldMessage',
+  component: CrFieldMessage,
+  tags: ['autodocs'],
+  argTypes: {
+    // Props
+    type: {
+      description: 'Specifies field message type',
+      defaultValue: 'error',
+      control: 'select',
+      options: fieldMessageTypes,
+    },
+    hideIcon: {
+      description: 'Specifies if message icon is hidden',
+      defaultValue: false,
+      control: 'boolean',
+    },
+
+    // Slots
+    default: {
+      description: 'Message',
+      control: {
+        type: null,
+      },
+    },
+    icon: {
+      description: 'Icon content',
+      control: {
+        type: null,
+      },
+    },
+  },
+};
+
+const render = (args: any) => ({
+  components: { CrField, CrInput, CrFieldMessage },
+  setup() {
+    return { args };
+  },
+  template: `<cr-field label-text="Field">
+      <cr-input model-value="" placeholder="placeholder" :invalid="args.type === 'error'" />
+      <cr-field-message :type="args.type" :hide-icon="args.hideIcon">{{args.default}}</cr-field-message>
+    </cr-field>`,
+});
+
+export const Error = {
+  args: {
+    type: 'error',
+    hideIcon: false,
+    default: 'This is error message',
+  },
+  render,
+};
+
+export const Warning = {
+  args: {
+    type: 'warning',
+    hideIcon: false,
+    default: 'This is warning',
+  },
+  render,
+};
+
+export const Info = {
+  args: {
+    type: 'info',
+    hideIcon: false,
+    default: 'This is info message',
+  },
+  render,
+};
+
+export const Hint = {
+  args: {
+    type: 'hint',
+    hideIcon: false,
+    default: 'This is hint for stupid people',
+  },
+  render,
+};

frontend/src/shared/ui-kit/field-message/FieldMessage.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="c-field-message" :class="`c-field-message--${props.type}`">
+    <span v-if="$slots.icon || iconClass" class="c-field-message__icon">
+      <slot name="icon">
+        <span
+          v-if="!props.hideIcon"
+          :class="iconClass"
+        />
+      </slot>
+    </span>
+
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FieldMessageType } from '@/shared/ui-kit/field-message/types/FieldMessageType';
+import { computed } from 'vue';
+import { fieldMessageTypeData } from '@/shared/ui-kit/field-message/constants/fieldMessageTypeData';
+
+const props = withDefaults(defineProps<{
+  type?: FieldMessageType,
+  hideIcon?: boolean,
+}>(), {
+  type: 'error',
+  hideIcon: false,
+});
+
+const iconClass = computed(() => {
+  const { icon } = fieldMessageTypeData[props.type];
+  if (icon) {
+    return `ri-${icon}`;
+  }
+  return null;
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrFieldMessage',
+};
+</script>

frontend/src/shared/ui-kit/field-message/constants/fieldMessageTypeData.ts

@@ -0,0 +1,20 @@
+import { FieldMessageType } from '@/shared/ui-kit/field-message/types/FieldMessageType';
+
+interface FieldMessageTypeData{
+  icon: string
+}
+
+export const fieldMessageTypeData: Record<FieldMessageType, FieldMessageTypeData> = {
+  error: {
+    icon: 'error-warning-line',
+  },
+  hint: {
+    icon: '',
+  },
+  warning: {
+    icon: 'alert-line',
+  },
+  info: {
+    icon: 'information-line',
+  },
+};

frontend/src/shared/ui-kit/field-message/field-message.scss

@@ -0,0 +1,30 @@
+.c-field-message {
+  font-size: var(--cr-field-message-font-size);
+  line-height: var(--cr-field-message-line-height);
+  margin-top: var(--cr-field-message-spacing);
+  color: var(--cr-field-message-color);
+  @apply flex items-center;
+
+  &__icon{
+    font-size: var(--cr-field-message-icon-size);
+    margin-right: var(--cr-field-message-icon-spacing);
+  }
+
+  &--error {
+    --cr-field-message-color: var(--cr-field-message-error-color);
+  }
+
+  &--info {
+    --cr-field-message-color: var(--cr-field-message-info-color);
+  }
+
+  &--warning {
+    --cr-field-message-color: var(--cr-field-message-warning-color);
+  }
+
+  &--hint {
+    --cr-field-message-color: var(--cr-field-message-hint-color);
+  }
+}
+
+

frontend/src/shared/ui-kit/field-message/types/FieldMessageType.ts

@@ -0,0 +1,8 @@
+export const fieldMessageTypes = [
+  'error',
+  'warning',
+  'hint',
+  'info',
+] as const;
+
+export type FieldMessageType = typeof fieldMessageTypes[number];