mediacube-ui-v2 0.0.5 → 0.0.7

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

@@ -1,135 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McSvgIcon from '@/components/elements/McSvgIcon/McSvgIcon.vue'
-import McTitle from '@/components/elements/McTitle/McTitle.vue'
-import McFieldText from '@/components/elements/McFieldText/McFieldText.vue'
-import McSeparator from '@/components/elements/McSeparator/McSeparator.vue'
-import { Colors } from '@/types/styles/Colors'
-import { Sizes } from '@/types/styles/Sizes'
-import { Directions } from '@/enums/ui/Directions'
-import iconsList from '@/mocks/icons.json'
-
-const iconsArrayList = Object.keys(iconsList)
-
-const meta = {
-  title: 'McSvgIcon',
-  component: McSvgIcon,
-  tags: ['autodocs'],
-  argTypes: {
-    name: { control: 'select', options: iconsArrayList },
-    color: { control: 'select', options: Object.keys(Colors) },
-    size: { control: 'select', options: Object.keys(Sizes) },
-    weight: { control: 'number' },
-    dir: { control: 'select', options: Directions },
-    spritePath: { control: 'none' }
-  },
-  args: {
-    color: 'purple',
-    size: '400',
-    weight: 1.5,
-    dir: Directions.Ltr
-  },
-  parameters: {
-    componentSubtitle: 'Status: Ready',
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2'
-    }
-  }
-} satisfies Meta<typeof McSvgIcon>
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    name: 'bank_card'
-  }
-}
-export const FullList: Story = {
-  render() {
-    return {
-      components: {
-        McSvgIcon,
-        McTitle,
-        McFieldText,
-          McSeparator,
-      },
-      data: () => ({
-        search: null
-      }),
-      computed: {
-        iconsSections() {
-          const iconsObject = {
-            colored: [],
-            blue: [],
-            arrows: [],
-            flags: [],
-            checks: [],
-            mediacube: [],
-            other: []
-          }
-          iconsArrayList.forEach((icon) => {
-            switch (true) {
-              case icon.includes('_colored'):
-                return iconsObject.colored.push(icon)
-              case icon.includes('_blue'):
-                return iconsObject.blue.push(icon)
-              case icon.includes('arrow'):
-                return iconsObject.arrows.push(icon)
-              case icon.includes('flag'):
-                return iconsObject.flags.push(icon)
-              case icon.includes('check'):
-                return iconsObject.checks.push(icon)
-              case icon.includes('mc'):
-              case icon.includes('mediacube'):
-                return iconsObject.mediacube.push(icon)
-              default:
-                return iconsObject.other.push(icon)
-            }
-          })
-          const defaultSections = Object.keys(iconsObject).map((key) => ({
-            title: key.replace(/^./, key[0].toUpperCase()),
-            icons: iconsObject[key],
-            id: key
-          }))
-
-          return this.search
-            ? [
-                {
-                  title: 'Search results',
-                  icons: iconsArrayList.filter((icon) => icon.includes(this.search))
-                }
-              ]
-            : defaultSections
-        }
-      },
-      template: `
-                <section>
-                    <mc-field-text v-model="search" name="search" title="Search" placeholder="Start typing to search..." />
-                    <div v-for="section in iconsSections" :key="section.id" :id="section.id">
-                        <mc-separator indent-bottom="400" indent-top="400" />
-                        <mc-title variation="h3">
-                            {{ section.title }}
-                        </mc-title>
-                        <mc-separator indent-bottom="400" indent-top="400" />
-                        <template v-if="section.icons.length">
-                            <div style="display: grid; grid-template-columns: repeat(auto-fit, 160px); gap: 16px">
-                                <div
-                                    v-for="icon in section.icons"
-                                    :key="icon"
-                                    style="display: flex; flex-direction: column; align-items: center; justify-content: center"
-                                >
-                                    <mc-svg-icon :name="icon" size="400" />
-                                    <mc-title text-align="center" class="mt-150">{{ icon }}</mc-title>
-                                </div>
-                            </div>
-                        </template>
-                        <div v-else style="width: 100%; height: 300px; display: flex; align-items: center; justify-content: center; flex-direction: column">
-                            <mc-svg-icon name="info" color="gray" size="800" />
-                            <mc-title text-align="center" color="gray" variation="h3">No results</mc-title>
-                        </div>
-                    </div>
-                </section>
-            `
-    }
-  }
-}

package/src/components/elements/McSvgIcon/McSvgIcon.vue

@@ -1,114 +0,0 @@
-<script setup lang="ts">
-//@ts-ignore
-import iconsSpriteIcon from '../../../assets/iconsSprite.svg'
-import { Sizes, type SizeTypes } from '@/types/styles/Sizes'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { computed, type PropType } from 'vue'
-import type { DirectionsUnion } from '@/types/IDirections'
-import { type IconsListUnion } from '@/types/styles/Icons'
-import { Directions } from '@/enums/ui/Directions'
-
-const props = defineProps({
-  /**
-   * Путь к спрайту с иконками
-   * */
-  spritePath: {
-    type: String,
-    default: iconsSpriteIcon,
-    validator(value: string): boolean {
-      return !!value
-    }
-  },
-  /**
-   * Имя иконки
-   */
-  name: {
-    type: String as () => IconsListUnion,
-    required: true,
-  },
-  /**
-   * Цвет иконки
-   * (по токенам)
-   */
-  color: {
-    type: String as () => ColorTypes,
-    default: '',
-  },
-  /**
-   * Размер
-   */
-  size: {
-    type: String as () => SizeTypes,
-    default: '250',
-  },
-  /**
-   * Толщина линий 0-5 если нужно больше, нужно дописать список в стилях
-   * stroke-width
-   */
-  weight: {
-    type: Number as PropType<number>,
-    default: 1.5,
-  },
-  /**
-   * Отображение иконки,
-   * если не найдена по имени
-   * в 'name'
-   */
-  defaultName: {
-    type: String as PropType<string>,
-    default: '',
-  },
-  dir: {
-    type: String as () => DirectionsUnion,
-    default: Directions.Ltr,
-  },
-})
-
-const classes = computed((): { [key: string]: boolean } => ({
-  'mc-svg-icon': true,
-  [`mc-svg-icon--dir-${props.dir}`]: !!props.dir,
-}))
-
-const styles = computed((): { [key: string]: string } => ({
-  ['--mc-svg-icon-size']: Sizes[props.size],
-  ['--mc-svg-icon-weight']: String(props.weight)
-    ?.replace('.', '')
-    ?.split('')
-    ?.join('.'),
-  ['--mc-svg-icon-color']: props.color && Colors[props.color],
-}))
-</script>
-
-<template>
-  <svg :class="classes" :style="styles">
-    <use :xlink:href="`${props.spritePath}#${props.name}`"></use>
-  </svg>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/sizes' as *;
-.mc-svg-icon {
-  --mc-svg-icon-size: #{$size-250};
-  --mc-svg-icon-weight: 1.5;
-  --mc-svg-icon-color: initial;
-  @include reset();
-  @include reset-text-indents();
-
-  @include size(inherit);
-  width: var(--mc-svg-icon-size);
-  height: var(--mc-svg-icon-size);
-  min-width: var(--mc-svg-icon-size);
-  min-height: var(--mc-svg-icon-size);
-  stroke-width: var(--mc-svg-icon-weight);
-  color: var(--mc-svg-icon-color);
-  use {
-    stroke-width: var(--mc-svg-icon-weight);
-  }
-  &--dir {
-    &-rtl {
-      transform: scale(-1, 1);
-    }
-  }
-}
-</style>

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

@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3'
-import McTitle from './McTitle.vue'
-import { TitleVariations } from '@/enums/Title'
-import { Colors } from '@/types/styles/Colors'
-import { HorizontalAlignment } from '@/enums/ui/Alignment'
-import { LineHeights } from '@/types/styles/LineHeights'
-import { Weights } from '@/enums/ui/Weights'
-
-const meta = {
-    title: 'McTitle',
-    component: McTitle,
-    tags: ['autodocs'],
-    argTypes: {
-        variation: { control: 'select', options: TitleVariations },
-        ellipsis: { control: 'boolean' },
-        uppercase: { control: 'boolean' },
-        preLine: { control: 'boolean' },
-        nowrap: { control: 'boolean' },
-        plainText: { control: 'boolean' },
-        color: { control: 'select', options: Object.keys(Colors) },
-        textAlign: { control: 'select', options: HorizontalAlignment },
-        lineHeight: { control: 'select', options: Object.keys(LineHeights) },
-        weight: { control: 'select', options: Weights },
-        htmlData: { control: 'none' },
-    },
-    args: {
-        ellipsis: true,
-        uppercase: false,
-        preLine: false,
-        nowrap: false,
-        plainText: false,
-    },
-    parameters: {
-        componentSubtitle: 'Status: Ready',
-        design: {
-            type: 'figma',
-            url: '',
-        },
-    },
-} satisfies Meta<typeof McTitle>;
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-    args: {
-        default: 'McTitle'
-    },
-};
-export const VHtml: Story = {
-    render() {
-        return {
-            components: { McTitle },
-            data() {
-                return {
-                    text: '<div style="color: purple">Hello i am a purple text</div>',
-                }
-            },
-            template: `
-                input data - {{ text }}
-                <br/>
-                <mc-title :html-data="text" />
-            `
-        }
-    },
-};
-export const Adaptive: Story = {
-    args: {
-        default: 'McTitleAdaptiveText',
-        variation: 'body',
-        variationS: 'h3',
-        variationM: 'h1'
-    },
-};

package/src/components/elements/McTitle/McTitle.vue

@@ -1,368 +0,0 @@
-<script setup lang="ts">
-//@ts-ignore
-import _upperFirst from 'lodash/upperFirst'
-import DOMPurify from 'isomorphic-dompurify'
-import { Colors, type ColorTypes } from '@/types/styles/Colors'
-import { type HorizontalAlignmentUnion } from '@/types/styles/Alignment'
-import { LineHeights, type LineHeightTypes } from '@/types/styles/LineHeights'
-import { type WeightsUnion } from '@/types/styles/Weights'
-
-import { computed, type PropType, useAttrs } from 'vue'
-import { FontWeights } from '@/types/styles/FontWeights'
-import { adaptiveAdditionalProps, adaptivePropsParams, adaptivePropsSizes } from '@/utils/mcTitleAdaptiveProps'
-import type { TitleVariationsUnion } from '@/types/ITitle'
-
-const attrs = useAttrs()
-const props = defineProps({
-  ...adaptiveAdditionalProps,
-  /**
-   * Уровень: `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`, `article`, 'info'.
-   */
-  variation: {
-    type: String as () => TitleVariationsUnion,
-    default: 'body'
-  },
-  /**
-   * В одну строку с точками в конце, если не вмещается
-   */
-  ellipsis: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Если нужен другой тэг
-   */
-  tagName: {
-    type: String as PropType<string>,
-    default: 'div'
-  },
-  /**
-   * Заглавные буквы
-   */
-  uppercase: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * Цвет
-   */
-  color: {
-    type: String as () => ColorTypes,
-    default: 'black'
-  },
-  /**
-   *  Позиция текста:
-   *  `left, center, right`
-   */
-  textAlign: {
-    type: String as () => HorizontalAlignmentUnion,
-    default: 'left'
-  },
-  /**
-   * Если нужна иная высота строки: `100`, `200`, `300` и т.д.
-   */
-  lineHeight: {
-    type: String as () => LineHeightTypes,
-    default: ''
-  },
-  /**
-   * Толщина текста:
-   * normal, medium, semi-bold
-   */
-  weight: {
-    type: String as () => WeightsUnion,
-    default: ''
-  },
-  /**
-   * Если нужно указать свою
-   * максимальную ширину
-   */
-  maxWidth: {
-    type: String as PropType<string>,
-    default: '100%'
-  },
-  preLine: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  nowrap: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  plainText: {
-    type: Boolean as PropType<boolean>,
-    default: false
-  },
-  /**
-   * ** Analog v-html, component use DOMPurify**
-   * */
-  htmlData: {
-    type: String as PropType<string>,
-    default: ''
-  }
-})
-
-const id = computed(() => {
-  return attrs.id as string
-})
-
-const responsivePropsClasses = computed((): { [key: string]: boolean } => {
-  const result: { [key: string]: any } = {}
-  result[`mc-title--variation-${props.variation}`] = !!props.variation
-  adaptivePropsParams.forEach((value) => {
-    adaptivePropsSizes.forEach((size) => {
-      //@ts-ignore
-      const sizeValue: string | undefined | unknown = props[`${value}${_upperFirst(size)}`]
-      result[`mc-title--${value}-${size}-${sizeValue}`] = !!sizeValue
-    })
-  })
-
-  return result
-})
-
-const classes = computed((): { [key: string]: boolean } => ({
-  'mc-title': true,
-  ['mc-title--ellipsis']: props.ellipsis,
-  [`mc-title--text-align-${props.textAlign}`]: !!props.textAlign,
-  [`mc-title--pre-line`]: props.preLine,
-  [`mc-title--nowrap`]: props.nowrap,
-  'mc-title--uppercase': props.uppercase,
-  'mc-title--line-height': !!props.lineHeight,
-  'mc-title--weight': !!props.weight,
-  'mc-title--plain-text': props.plainText,
-  ...responsivePropsClasses.value
-}))
-const style = computed((): { [key: string]: string } => {
-  let style: { [key: string]: string } = {}
-  if (props.color) style['--mc-title-color'] = Colors[props.color]
-  if (props.weight) style['--mc-title-weight'] = FontWeights[props.weight]
-  if (props.lineHeight) style['--mc-title-line-height'] = LineHeights[props.lineHeight]
-
-  return style
-})
-
-const contentStyle = computed((): { [key: string]: string } => ({
-  'max-width': props.maxWidth
-}))
-</script>
-
-<template>
-  <div :class="classes" :style="style" :id="id">
-    <!-- @slot -->
-    <slot name="icon-prepend" />
-    <div
-      v-if="props.htmlData"
-      class="mc-title__text"
-      :style="contentStyle"
-      v-html="DOMPurify.sanitize(props.htmlData)"
-    />
-    <div v-else class="mc-title__text" :style="contentStyle"><slot /></div>
-
-    <!-- @slot -->
-    <slot name="icon-append" />
-  </div>
-</template>
-
-<style lang="scss">
-@use '../../../assets/styles/mixins' as *;
-@use '../../../assets/tokens/font-families' as *;
-@use '../../../assets/tokens/letter-spacings' as *;
-@use '../../../assets/tokens/font-weights' as *;
-@use '../../../assets/tokens/font-sizes' as *;
-@use '../../../assets/tokens/line-heights' as *;
-@use '../../../assets/tokens/spacings' as *;
-@use '../../../assets/tokens/media-queries' as *;
-.mc-title {
-  $block-name: &;
-  --mc-title-color: initial;
-  --mc-title-weight: initial;
-  --mc-title-line-height: initial;
-  color: var(--mc-title-color);
-  font-family: $font-family-main;
-  @mixin variations() {
-    &-h1 {
-      font-size: $font-size-700;
-      line-height: $line-height-600;
-      font-weight: $font-weight-semi-bold;
-      #{$block-name}__text {
-        max-width: 920px;
-      }
-    }
-    &-h2 {
-      font-size: $font-size-600;
-      line-height: $line-height-500;
-      font-weight: $font-weight-semi-bold;
-      #{$block-name}__text {
-        max-width: 820px;
-      }
-    }
-    &-h3 {
-      font-size: $font-size-500;
-      line-height: $line-height-400;
-      font-weight: $font-weight-semi-bold;
-      #{$block-name}__text {
-        max-width: 720px;
-      }
-    }
-    &-h4 {
-      font-size: $font-size-400;
-      line-height: $line-height-300;
-      font-weight: $font-weight-bold;
-      #{$block-name}__text {
-        max-width: 700px;
-      }
-    }
-
-    &-subtitle {
-      font-size: $font-size-300;
-      line-height: $line-height-250;
-      #{$block-name}__text {
-        max-width: 640px;
-      }
-    }
-    &-article {
-      font-size: $font-size-200;
-      line-height: $line-height-250;
-      #{$block-name}__text {
-        max-width: 536px;
-      }
-    }
-    &-info {
-      font-size: $font-size-300;
-      line-height: $line-height-300;
-    }
-    &-body {
-      font-size: $font-size-200;
-      line-height: $line-height-200;
-      #{$block-name}__text {
-        max-width: 330px;
-      }
-    }
-    &-overline {
-      font-size: $font-size-100;
-      line-height: $line-height-150;
-      font-weight: $font-weight-medium;
-      #{$block-name}__text {
-        max-width: 330px;
-      }
-    }
-  }
-
-  margin-top: 0;
-  margin-bottom: 0;
-  display: inline-flex;
-  max-width: 100%;
-  width: 100%;
-  text-decoration: none;
-  //@include child-indent-right($space-50);
-
-  &__text {
-    padding-bottom: 1px; // fix overflow
-    margin-bottom: -1px; // fix overflow
-  }
-
-  > *:not(:empty):not(:last-child) {
-    margin-inline-end: $space-50;
-  }
-
-  .mc-svg-icon,
-  .mc-button {
-    @include reset-text-indents();
-  }
-
-  &--pre-line {
-    #{$block-name}__text {
-      white-space: pre-line !important;
-      word-break: normal;
-    }
-  }
-
-  &--nowrap {
-    #{$block-name}__text {
-      white-space: nowrap;
-    }
-  }
-
-  &--variation {
-    @include variations;
-  }
-
-  &--ellipsis {
-    align-items: center;
-
-    #{$block-name} {
-      &__text {
-        @include ellipsis($display: inline-block);
-        @include layout-flex-fix();
-      }
-    }
-  }
-
-  &--uppercase {
-    text-transform: uppercase;
-    letter-spacing: $letter-spacing-m;
-  }
-  &--plain-text {
-    #{$block-name} {
-      &__text {
-        unicode-bidi: plaintext;
-      }
-    }
-  }
-
-  &--text-align {
-    &-left {
-      justify-content: flex-start;
-      text-align: start;
-    }
-    &-center {
-      justify-content: center;
-      text-align: center;
-    }
-    &-right {
-      justify-content: flex-end;
-      text-align: end;
-    }
-  }
-  &--line-height {
-    line-height: var(--mc-title-line-height);
-  }
-  &--weight {
-    font-weight: var(--mc-title-weight);
-  }
-  @each $media, $value in $token-media-queries {
-    @media #{$value} {
-      &--variation-#{$media} {
-        @include variations;
-      }
-      &--weight-#{$media} {
-        &-normal {
-          font-weight: $font-weight-normal;
-        }
-        &-medium {
-          font-weight: $font-weight-medium;
-        }
-        &-semi-bold {
-          font-weight: $font-weight-semi-bold;
-        }
-        &-bold {
-          font-weight: $font-weight-bold;
-        }
-      }
-    }
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    font-weight: inherit;
-    font-style: inherit;
-    font-size: inherit;
-    line-height: inherit;
-    margin-block-start: 0;
-    margin-block-end: 0;
-  }
-}
-</style>