Ui kit badge (#2189)

frontend/config/styles/components/badge.scss

@@ -0,0 +1,34 @@
+:root {
+  /* ---------------------------------- *\
+            Badge sizes
+  \* ---------------------------------- */
+
+
+  /* Small */
+  --cr-badge-small-font-size: #{rem(12)};
+  --cr-badge-small-height: #{rem(22)};
+
+
+  /* Medium */
+  --cr-badge-medium-font-size: #{rem(13)};
+  --cr-badge-medium-height: #{rem(26)};
+
+  /* ---------------------------------- *\
+            Badge styles
+  \* ---------------------------------- */
+
+  /* Default */
+  --cr-badge-default-background: var(--color-gray-100);
+  --cr-badge-default-border: var(--color-gray-200);
+  --cr-badge-default-text: var(--color-gray-900);
+
+  /* White */
+  --cr-badge-white-background: var(--color-white);
+  --cr-badge-white-border: var(--color-gray-200);
+  --cr-badge-white-text: var(--color-gray-900);
+
+  /* Brand */
+  --cr-badge-brand-background: var(--color-brand-50);
+  --cr-badge-brand-border: var(--color-brand-100);
+  --cr-badge-brand-text: var(--color-brand-600);
+}

frontend/config/styles/components/index.scss

@@ -1,3 +1,4 @@
+@import "badge";
 @import "button";
 @import "card";
 @import "checkbox";

frontend/src/assets/scss/index.scss

@@ -34,4 +34,4 @@
 @import 'form/switch';
 
 @import '../../../config/styles';
-@import '../../shared/ui-kit';
+@import '../../ui-kit';

frontend/src/ui-kit/badge/Badge.stories.ts

@@ -0,0 +1,56 @@
+import { badgeSize } from '@/ui-kit/badge/types/BadgeSize';
+import { badgeType } from '@/ui-kit/badge/types/BadgeType';
+import CrBadge from './Badge.vue';
+
+export default {
+  title: 'Crowd.dev/Badge',
+  component: CrBadge,
+  tags: ['autodocs'],
+  argTypes: {
+    // Props
+    size: {
+      description: 'Specifies badge size',
+      defaultValue: 'medium',
+      control: 'select',
+      options: badgeSize,
+    },
+    type: {
+      description: 'Specifies badge type',
+      defaultValue: 'default',
+      control: 'select',
+      options: badgeType,
+    },
+
+    // Slots
+    default: {
+      description: 'Text or html content of the radio',
+      control: {
+        type: null,
+      },
+    },
+  },
+};
+
+export const Regular = {
+  args: {
+    size: 'medium',
+    type: 'default',
+    default: 'Badge',
+  },
+};
+
+export const White = {
+  args: {
+    size: 'medium',
+    type: 'white',
+    default: 'Badge',
+  },
+};
+
+export const Brand = {
+  args: {
+    size: 'medium',
+    type: 'brand',
+    default: 'Badge',
+  },
+};

frontend/src/ui-kit/badge/Badge.vue

@@ -0,0 +1,30 @@
+<template>
+  <div
+    class="c-badge"
+    :class="[
+      `c-badge--${props.size}`,
+      `c-badge--${props.type}`,
+    ]"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { BadgeSize } from '@/ui-kit/badge/types/BadgeSize';
+import { BadgeType } from '@/ui-kit/badge/types/BadgeType';
+
+const props = withDefaults(defineProps<{
+  size?: BadgeSize,
+  type?: BadgeType,
+}>(), {
+  size: 'medium',
+  type: 'default',
+});
+</script>
+
+<script lang="ts">
+export default {
+  name: 'CrBadge',
+};
+</script>

frontend/src/ui-kit/badge/badge.scss

@@ -0,0 +1,41 @@
+.c-badge {
+  background: var(--cr-badge-background);
+  border: rem(1) solid var(--cr-badge-border);
+  color: var(--cr-badge-text);
+
+  font-size: var(--cr-badge-font-size);
+  height: var(--cr-badge-height);
+  line-height: calc(var(--cr-badge-height) - rem(2));
+
+  @apply px-2 rounded-md inline-block font-medium;
+
+  /* Badge types */
+  &--default{
+    --cr-badge-background: var(--cr-badge-default-background);
+    --cr-badge-border: var(--cr-badge-default-border);
+    --cr-badge-text: var(--cr-badge-default-text);
+  }
+
+  &--white{
+    --cr-badge-background: var(--cr-badge-white-background);
+    --cr-badge-border: var(--cr-badge-white-border);
+    --cr-badge-text: var(--cr-badge-white-text);
+  }
+
+  &--brand{
+    --cr-badge-background: var(--cr-badge-brand-background);
+    --cr-badge-border: var(--cr-badge-brand-border);
+    --cr-badge-text: var(--cr-badge-brand-text);
+  }
+
+  /* Badge sizes */
+  &--small{
+    --cr-badge-font-size: var(--cr-badge-small-font-size);
+    --cr-badge-height: var(--cr-badge-small-height);
+  }
+
+  &--medium{
+    --cr-badge-font-size: var(--cr-badge-medium-font-size);
+    --cr-badge-height: var(--cr-badge-medium-height);
+  }
+}

frontend/src/ui-kit/badge/types/BadgeSize.ts

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

frontend/src/ui-kit/badge/types/BadgeType.ts

@@ -0,0 +1,7 @@
+export const badgeType = [
+  'default',
+  'white',
+  'brand',
+] as const;
+
+export type BadgeType = typeof badgeType[number];

frontend/src/shared/ui-kit/button/Button.stories.ts → frontend/src/ui-kit/button/Button.stories.ts

@@ -1,6 +1,6 @@
-import { buttonTypes } from '@/shared/ui-kit/button/types/ButtonType';
-import { buttonSizes } from '@/shared/ui-kit/button/types/ButtonSize';
-import { buttonNativeTypes } from '@/shared/ui-kit/button/types/ButtonNativeType';
+import { buttonTypes } from '@/ui-kit/button/types/ButtonType';
+import { buttonSizes } from '@/ui-kit/button/types/ButtonSize';
+import { buttonNativeTypes } from '@/ui-kit/button/types/ButtonNativeType';
 import CrButton from './Button.vue';
 
 export default {

frontend/src/shared/ui-kit/button/Button.vue → frontend/src/ui-kit/button/Button.vue

@@ -17,9 +17,9 @@
 </template>
 
 <script setup lang="ts">
-import { ButtonType } from '@/shared/ui-kit/button/types/ButtonType';
-import { ButtonSize } from '@/shared/ui-kit/button/types/ButtonSize';
-import { ButtonNativeType } from '@/shared/ui-kit/button/types/ButtonNativeType';
+import { ButtonType } from '@/ui-kit/button/types/ButtonType';
+import { ButtonSize } from '@/ui-kit/button/types/ButtonSize';
+import { ButtonNativeType } from '@/ui-kit/button/types/ButtonNativeType';
 
 const props = withDefaults(defineProps<{
   type?: ButtonType,

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

@@ -1,4 +1,4 @@
-import { checkboxSizes } from '@/shared/ui-kit/checkbox/types/CheckboxSize';
+import { checkboxSizes } from '@/ui-kit/checkbox/types/CheckboxSize';
 import CrCheckbox from './Checkbox.vue';
 
 export default {

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

@@ -14,7 +14,7 @@
 </template>
 
 <script setup lang="ts">
-import { CheckboxSize } from '@/shared/ui-kit/checkbox/types/CheckboxSize';
+import { CheckboxSize } from '@/ui-kit/checkbox/types/CheckboxSize';
 import { computed, withDefaults } from 'vue';
 
 const props = withDefaults(defineProps<{

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

@@ -1,4 +1,4 @@
-import { fieldMessageTypes } from '@/shared/ui-kit/field-message/types/FieldMessageType';
+import { fieldMessageTypes } from '@/ui-kit/field-message/types/FieldMessageType';
 import CrFieldMessage from './FieldMessage.vue';
 import CrInput from '../input/Input.vue';
 import CrField from '../field/Field.vue';

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

@@ -14,9 +14,9 @@
 </template>
 
 <script setup lang="ts">
-import { FieldMessageType } from '@/shared/ui-kit/field-message/types/FieldMessageType';
+import { FieldMessageType } from '@/ui-kit/field-message/types/FieldMessageType';
 import { computed } from 'vue';
-import { fieldMessageTypeData } from '@/shared/ui-kit/field-message/constants/fieldMessageTypeData';
+import { fieldMessageTypeData } from '@/ui-kit/field-message/constants/fieldMessageTypeData';
 
 const props = withDefaults(defineProps<{
   type?: FieldMessageType,

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

@@ -1,4 +1,4 @@
-import { FieldMessageType } from '@/shared/ui-kit/field-message/types/FieldMessageType';
+import { FieldMessageType } from '@/ui-kit/field-message/types/FieldMessageType';
 
 interface FieldMessageTypeData{
   icon: string

frontend/src/shared/ui-kit/field-messages/FieldMessages.stories.ts → frontend/src/ui-kit/field-messages/FieldMessages.stories.ts

@@ -1,5 +1,5 @@
-import CrField from '@/shared/ui-kit/field/Field.vue';
-import CrInput from '@/shared/ui-kit/input/Input.vue';
+import CrField from '@/ui-kit/field/Field.vue';
+import CrInput from '@/ui-kit/input/Input.vue';
 import { reactive } from 'vue';
 import { email, required } from '@vuelidate/validators';
 import useVuelidate from '@vuelidate/core';

frontend/src/shared/ui-kit/field-messages/FieldMessages.vue → frontend/src/ui-kit/field-messages/FieldMessages.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import { computed } from 'vue';
-import CrFieldMessage from '@/shared/ui-kit/field-message/FieldMessage.vue';
+import CrFieldMessage from '@/ui-kit/field-message/FieldMessage.vue';
 
 const props = withDefaults(defineProps<{
   validation: any,

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

@@ -1,3 +1,4 @@
+@import 'badge/badge';
 @import 'button/button';
 @import 'card/card';
 @import 'checkbox/checkbox';

frontend/src/shared/ui-kit/input-password/InputPassword.vue → frontend/src/ui-kit/input-password/InputPassword.vue

@@ -13,7 +13,7 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import CrInput from '@/shared/ui-kit/input/Input.vue';
+import CrInput from '@/ui-kit/input/Input.vue';
 
 const props = defineProps<{
   modelValue: string,

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

@@ -1,4 +1,4 @@
-import { radioSizes } from '@/shared/ui-kit/radio/types/RadioSize';
+import { radioSizes } from '@/ui-kit/radio/types/RadioSize';
 import { reactive } from 'vue';
 import CrRadio from './Radio.vue';
 

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

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { RadioSize } from '@/shared/ui-kit/radio/types/RadioSize';
+import { RadioSize } from '@/ui-kit/radio/types/RadioSize';
 import { computed, withDefaults } from 'vue';
 
 const props = withDefaults(defineProps<{

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

@@ -1,4 +1,4 @@
-import { switchSizes } from '@/shared/ui-kit/switch/types/SwitchSize';
+import { switchSizes } from '@/ui-kit/switch/types/SwitchSize';
 import CrSwitch from './Switch.vue';
 
 export default {

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

@@ -13,7 +13,7 @@
 </template>
 
 <script setup lang="ts">
-import { CheckboxSize } from '@/shared/ui-kit/checkbox/types/CheckboxSize';
+import { CheckboxSize } from '@/ui-kit/checkbox/types/CheckboxSize';
 import { computed, withDefaults } from 'vue';
 
 const props = withDefaults(defineProps<{