mediacube-ui-v2 0.0.3 → 0.0.5

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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,114 @@
+<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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,368 @@
+<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>