mediacube-ui-v2 0.0.2 → 0.0.4

package/src/components/elements/McNodata/McNoData.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import McTitle from '@/components/elements/McTitle/McTitle.vue'
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+import { computed, type PropType } from 'vue'
+import { HorizontalAlignment, TitleVariations, Weights } from '@/enums'
+import type { IconsListUnion } from '@/types'
+const noTableDataImg = '/no_table_data.png'
+
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+const props = defineProps({
+  img: {
+    type: String as PropType<string>,
+    // eslint-disable-next-line vue/valid-define-props
+    default: noTableDataImg,
+  },
+  icon: {
+    type: String as () => IconsListUnion,
+    default: null
+  },
+  title: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  text: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  href: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  btnName: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  noAction: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  loading: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   * Вариант блока
+   * small - стандартный, небольшие отступы
+   * large - большие отступы (напр. для табов в админке) + немного меняются дефолтные шрифты тайтла
+   * */
+  variation: {
+    type: String as PropType<'small' | 'large'>,
+    default: 'small'
+  }
+})
+
+const btnAttrs = computed((): { [key: string]: boolean | string } => {
+  return {
+    class: 'mt-200',
+    loading: props.loading,
+    ...(props.href ? { href: props.href } : {})
+  }
+})
+
+const btnListeners = computed((): { [key: string]: Function } => {
+  return !props.href
+    ? {
+        click: () => handleClick()
+      }
+    : {}
+})
+
+const titleExtraProps = computed((): { [key: string]: string } => {
+  return props.variation === 'large'
+    ? {
+        variation: TitleVariations.Subtitle,
+        weight: Weights.SemiBold
+      }
+    : {}
+})
+
+const classes = computed((): { [key: string]: boolean } => {
+  return {
+    'mc-no-data': true,
+    [`mc-no-data--variation-${props.variation}`]: !!props.variation
+  }
+})
+
+const handleClick = (): void => {
+  emit('click')
+}
+</script>
+
+<template>
+  <div class="mc-no-data__wrapper">
+    <section :class="classes">
+      <mc-svg-icon v-if="props.icon" :weight="0.5" :name="props.icon" size="1000" color="outline-gray" />
+      <img v-if="props.img" :src="props.img" alt="no_entity" />
+      <slot v-if="title || $slots.title" name="title">
+        <mc-title
+          v-if="props.title"
+          v-bind="titleExtraProps"
+          color="gray"
+          :text-align="HorizontalAlignment.Center"
+          :html-data="props.title"
+        />
+      </slot>
+      <div v-if="text || $slots.text" class="mc-no-data__text">
+        <slot name="text">
+          <mc-title
+            color="gray"
+            :variation="TitleVariations.Article"
+            :text-align="HorizontalAlignment.Center"
+            :html-data="text"
+          />
+        </slot>
+      </div>
+      <div v-if="(btnName && !noAction) || $slots.action" class="mc-no-data__actions">
+        <slot name="action">
+          <mc-button v-bind="btnAttrs" v-on="btnListeners">
+            {{ btnName }}
+          </mc-button>
+        </slot>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/mixins' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/sizes' as *;
+@use '../../../assets/tokens/colors' as *;
+@use '../../../assets/tokens/media-queries' as *;
+.mc-no-data {
+  min-width: 100px;
+  max-width: 100%;
+  padding: 0 $space-200;
+  width: 98%;
+  text-align: center;
+  @include child-indent-bottom($space-100);
+
+  img {
+    max-width: $size-1000;
+    width: 100%;
+    min-width: 0;
+    margin-bottom: $space-150 !important;
+    user-select: none;
+  }
+
+  &__text {
+    a {
+      color: $color-purple;
+      text-decoration: none;
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    flex-grow: 1;
+    padding: $space-200;
+    width: 100%;
+    height: 100%;
+    @include align(true, true, absolute);
+
+    @media #{$media-query-l} {
+      padding: $space-300 $space-300 $space-400;
+    }
+    .mc-no-data {
+      position: static;
+      transform: none;
+    }
+  }
+
+  &__actions {
+    margin-top: $space-200;
+  }
+
+  &--variation {
+    &-large {
+      padding: $space-400;
+      @include child-indent-bottom($space-150);
+    }
+  }
+}
+</style>

package/src/components/elements/McNotification/McNotification.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import McNotification from '@/components/elements/McNotification/McNotification.vue'
+import { Colors, type ColorTypes } from '@/types/styles/Colors'
+import iconsList from '@/mocks/icons.json'
+import type { IconsListUnion } from '@/types/styles/Icons'
+
+const meta = {
+    title: 'McNotification',
+    component: McNotification,
+    tags: ['autodocs'],
+    argTypes: {
+        variation: { control: 'select', options: Object.keys(Colors) },
+        iconName: { control: 'select', options: Object.keys(iconsList) },
+        iconVisible: { control: 'boolean' },
+        buttonVisible: { control: 'boolean' },
+        title: { control: 'text' },
+        content: { control: 'text' },
+    },
+    args: {
+        variation: 'purple' as ColorTypes,
+        title: 'Notification title',
+        content: 'Notification content',
+        buttonText: 'Action',
+        buttonVisible: true,
+        iconVisible: true,
+        iconName: 'info' as IconsListUnion,
+        onClick: fn(() => alert('click'))
+    },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=450%3A2514',
+        },
+    },
+} satisfies Meta<typeof McNotification>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

package/src/components/elements/McNotification/McNotification.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import McTitle from '@/components/elements/McTitle/McTitle.vue'
+import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
+import McButton from '@/components/elements/McButton/McButton.vue'
+import McPreview from '@/components/patterns/McPreview/McPreview.vue'
+import { computed, type PropType } from 'vue'
+import { Colors, type ColorTypes } from '@/types/styles/Colors'
+import type { IconsListUnion } from '@/types/styles/Icons'
+import { Weights } from '@/enums/ui/Weights'
+
+
+const emit = defineEmits(['click'])
+const props = defineProps({
+  /**
+   * Дизайн:
+   * purple, red, orange и т.д.
+   */
+  variation: {
+    type: String as () => ColorTypes,
+    default: 'purple' as ColorTypes,
+  },
+  /**
+   * Заголовок блока
+   */
+  title: {
+    type: String as PropType<string>,
+  },
+  /**
+   * Содержимое блока
+   */
+  content: {
+    type: String as PropType<string>,
+    default: null,
+  },
+  /**
+   * Отобразить кнопку внтури блока
+   */
+  buttonVisible: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
+  /**
+   * Текст кнопки
+   */
+  buttonText: {
+    type: String as PropType<string>,
+    default: '',
+  },
+  /**
+   * Название иконки
+   */
+  iconName: {
+    type: String as () => IconsListUnion,
+    default: 'info' as IconsListUnion,
+  },
+  /**
+   * Отображать иконку
+   */
+  iconVisible: {
+    type: Boolean as PropType<boolean>,
+    default: true,
+  },
+})
+
+const styles = computed((): { [key: string]: string } => {
+  return {
+    '--mc-notification-color': Colors[props.variation],
+  }
+})
+
+const handleClick = (e: Event):void => {
+  /**
+   * Событие клика по кнопке
+   */
+  emit('click', e)
+}
+</script>
+
+<template>
+  <div class="mc-notification" :style="styles">
+    <div class="mc-notification__inner">
+      <mc-preview>
+        <template v-if="props.iconVisible && ($slots.left || props.iconName)" #left>
+          <!-- @slot Слот для иконки -->
+          <slot name="left">
+            <mc-svg-icon :name="props.iconName" size="300" />
+          </slot>
+        </template>
+
+        <template v-if="$slots.header || props.title" #top>
+          <!-- @slot Слот заголовка -->
+          <slot name="header">
+            <mc-title
+              v-if="props.title"
+              :color="props.variation"
+              :weight="Weights.SemiBold"
+              class="mc-notification__title"
+            >
+              {{ props.title }}
+            </mc-title>
+          </slot>
+        </template>
+
+        <template v-if="props.content || $slots.default" #bottom>
+          <div class="mc-notification__text">
+            <!-- @slot Слот для контента -->
+            <slot>
+              <mc-title :color="props.variation">{{ props.content }}</mc-title>
+            </slot>
+          </div>
+        </template>
+
+        <template v-if="$slots.right || props.buttonVisible" #right>
+          <!-- @slot Слот для кнопок -->
+          <slot name="right">
+            <mc-button
+              v-if="props.buttonVisible"
+              :variation="props.variation"
+              class="mc-notification__button"
+              @click="handleClick"
+            >
+              {{ props.buttonText }}
+            </mc-button>
+          </slot>
+        </template>
+      </mc-preview>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../assets/styles/mixins' as *;
+@use '../../../assets/tokens/colors' as *;
+@use '../../../assets/tokens/sizes' as *;
+@use '../../../assets/tokens/font-sizes' as *;
+@use '../../../assets/tokens/line-heights' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/media-queries' as *;
+@use '../../../assets/tokens/border-radius' as *;
+.mc-notification {
+  $block-name: &;
+  --mc-notification-color: #{$color-orange};
+  position: relative;
+  background-color: $color-white;
+  border-radius: $radius-150;
+  overflow: hidden;
+  &:before {
+    content: '';
+    @include position(absolute, 0 null null 0);
+    display: block;
+    height: 100%;
+    width: $size-50;
+    background-color: var(--mc-notification-color);
+  }
+
+  &__text {
+    font-size: $font-size-200;
+    line-height: $line-height-200;
+  }
+
+  #{$block-name}__text,
+  #{$block-name}__title {
+    filter: contrast(59%);
+  }
+
+  &__inner {
+    padding: $space-100 $space-150 $space-100 $space-200;
+    min-height: $size-700;
+    display: flex;
+    align-items: center;
+    position: relative;
+    color: var(--mc-notification-color);
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-color: var(--mc-notification-color);
+      opacity: 0.1;
+    }
+
+    .mc-preview {
+      width: 100%;
+      z-index: 1;
+      &__top {
+        margin-bottom: $space-50;
+      }
+      &__left {
+        display: flex;
+        align-items: center;
+        margin-inline-end: $size-150;
+      }
+      &__right {
+        display: flex;
+        align-items: center;
+        margin-inline-start: auto;
+        padding-inline-start: $space-100;
+      }
+    }
+
+    @media #{$media-query-m-down} {
+      .mc-preview {
+        flex-wrap: wrap;
+
+        &__center {
+          flex: 1;
+        }
+        &__right {
+          width: 100%;
+          padding-top: $space-100;
+          padding-inline-start: $size-400 - 2;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/elements/McProgress/McProgress.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import McProgress from '@/components/elements/McProgress/McProgress.vue'
+import { Colors, type ColorTypes } from '@/types/styles/Colors'
+
+const meta = {
+    title: 'McProgress',
+    component: McProgress,
+    tags: ['autodocs'],
+    argTypes: {
+        percent: { control: 'number' },
+        amount: { control: 'number' },
+        color: { control: 'select', options: Object.keys(Colors) },
+        helpTextColor: { control: 'select', options: Object.keys(Colors) },
+        helpText: { control: 'text' },
+        reverseHeaders: { control: 'boolean' },
+        monospaceNumbers: { control: 'boolean' },
+    },
+    args: {
+        percent: 30,
+        color: 'purple' as ColorTypes,
+        helpTextColor: 'pinkish' as ColorTypes,
+        helpText: 'Help text',
+        reverseHeaders: false,
+        monospaceNumbers: false,
+    },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=88%3A0',
+        },
+    },
+} satisfies Meta<typeof McProgress>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

package/src/components/elements/McProgress/McProgress.vue

@@ -0,0 +1,194 @@
+<script setup lang="ts">
+import { computed, type PropType } from 'vue'
+import { Colors, type ColorTypes } from '@/types/styles/Colors'
+import { useFieldErrors } from '@/composables/useFieldErrors'
+
+const props = defineProps({
+  /**
+   *  Процент
+   *
+   */
+  percent: {
+    type: Number as PropType<number>,
+    default: 0
+  },
+  /**
+   *  Число для отображения, если не укказано, используется процент
+   *
+   */
+  amount: {
+    type: [String, Number, Boolean] as PropType<string | number | boolean>,
+    default: null
+  },
+  /**
+   *  Цвет
+   *
+   */
+  color: {
+    type: String as () => ColorTypes,
+    default: 'dark-gray'
+  },
+  /**
+   *  Цвет текста
+   *
+   */
+  helpTextColor: {
+    type: String as () => ColorTypes,
+    default: 'gray'
+  },
+  /**
+   *  Вспомогательный текст
+   */
+  helpText: {
+    type: String as PropType<string>,
+    default: ''
+  },
+  /**
+   *  Ошибки
+   */
+  errors: {
+    type: Array as PropType<string[]>,
+    default: () => []
+  },
+  /**
+   *  Поменять местами подписи
+   */
+  reverseHeaders: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  },
+  /**
+   *  Использовать моноширинный шрифт для percent и amount
+   */
+  monospaceNumbers: {
+    type: Boolean as PropType<boolean>,
+    default: false
+  }
+})
+
+const fieldErrors = useFieldErrors(props.errors)
+const wrapperClasses = computed(() => ({
+  'mc-progress': true,
+  'mc-progress--error': fieldErrors.errorText.value
+}))
+const topClasses = computed(() => ({
+  'mc-progress__top': true,
+  'mc-progress__top--reverse-headers': props.reverseHeaders
+}))
+const percentClasses = computed(() => ({
+  'mc-progress__percent': true,
+  'mc-progress__percent--monospace': props.monospaceNumbers
+}))
+const lineClasses = computed(() => ({
+  'mc-progress__line': true
+}))
+const styles = computed((): { [key: string]: string } => {
+  return {
+    '--mc-progress-color': Colors[props.color]
+  }
+})
+const helpTextStyles = computed(() => {
+  return {
+    '--mc-progress-help-text-color': Colors[props.helpTextColor]
+  }
+})
+const lineStyles = computed(() => {
+  return {
+    width: `${fieldErrors.errorText.value ? 2 : Math.sign(props.percent) > 0 ? props.percent : 0}%`
+  }
+})
+const percentValue = computed(() => {
+  if (fieldErrors.errorText.value) return 0
+  return props.amount ?? `${props.percent}%`
+})
+</script>
+
+<template>
+  <div :class="wrapperClasses" :style="styles">
+    <div :class="topClasses">
+      <div :class="percentClasses">
+        {{ percentValue }}
+      </div>
+      <div v-if="props.helpText" class="mc-progress__help-text" :style="helpTextStyles">
+        {{ props.helpText }}
+      </div>
+    </div>
+    <div class="mc-progress__wrapper-line">
+      <div :class="lineClasses" :style="lineStyles"></div>
+    </div>
+    <div v-if="fieldErrors.errorText.value" class="mc-progress__errors-container">
+      {{ fieldErrors.errorText.value }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+@use '../../../assets/tokens/border-radius' as *;
+@use '../../../assets/tokens/font-families' as *;
+@use '../../../assets/tokens/colors' as *;
+@use '../../../assets/tokens/line-heights' as *;
+@use '../../../assets/tokens/font-sizes' as *;
+@use '../../../assets/tokens/spacings' as *;
+@use '../../../assets/tokens/sizes' as *;
+.mc-progress {
+  $block-name: &;
+  --mc-progress-color: #{$color-dark-gray};
+  --mc-progress-help-text-color: #{$color-gray};
+  position: relative;
+  width: 100%;
+  font-family: $font-family-main;
+  line-height: $line-height-200;
+  font-size: $font-size-200;
+  &__percent {
+    flex-shrink: 0;
+    color: var(--mc-progress-color);
+    &--monospace {
+      font-feature-settings: 'tnum';
+      font-variant-numeric: tabular-nums;
+    }
+  }
+  &--error {
+    #{$block-name} {
+      &__percent {
+        color: $color-red;
+      }
+      &__line {
+        background-color: $color-red;
+      }
+    }
+  }
+
+  &__top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: $space-100;
+    &--reverse-headers {
+      flex-direction: row-reverse;
+    }
+  }
+
+  &__help-text {
+    color: var(--mc-progress-help-text-color);
+  }
+
+  &__wrapper-line {
+    height: $size-100;
+    border-radius: $radius-100;
+    background-color: $color-hover-gray;
+    width: 100%;
+  }
+
+  &__line {
+    height: 100%;
+    border-radius: $radius-100;
+    max-width: 100%;
+    background-color: var(--mc-progress-color);
+  }
+
+  &__errors-container {
+    margin-top: $space-150;
+    color: $color-red;
+  }
+}
+</style>