mediacube-ui 0.1.7

package/src/elements/McNotification/McNotification.vue

@@ -0,0 +1,203 @@
+<template>
+    <div :class="classes">
+        <div class="mc-notification__inner">
+            <mc-preview>
+                <!-- @slot Слот для иконки -->
+                <slot v-if="!hideIcon && ($slots.left || iconName)" slot="left" name="left">
+                    <mc-svg-icon :name="iconName" size="300" />
+                </slot>
+
+                <!-- @slot Слот заголовка -->
+                <slot v-if="$slots.header || title" slot="top" name="header">
+                    <mc-title
+                        v-if="title"
+                        :color="variation"
+                        :ellipsis="false"
+                        weight="semi-bold"
+                        class="mc-notification__title"
+                    >
+                        {{ title }}
+                    </mc-title>
+                </slot>
+
+                <div slot="bottom" class="mc-notification__text">
+                    <!-- @slot Слот для контента -->
+                    <slot>
+                        <mc-title :color="variation" :ellipsis="false" max-width="100%">
+                            {{ content }}
+                        </mc-title>
+                    </slot>
+                </div>
+
+                <!-- @slot Слот для кнопок -->
+                <slot v-if="$slots.right || isButtonVisible" slot="right" name="right">
+                    <mc-button
+                        v-if="isButtonVisible"
+                        slot="right"
+                        :variation="variation"
+                        class="mc-notification__button"
+                        @click="handleClick"
+                    >
+                        {{ buttonText }}
+                    </mc-button>
+                </slot>
+            </mc-preview>
+        </div>
+    </div>
+</template>
+
+<script>
+import McTitle from '../McTitle/McTitle.vue'
+import McSvgIcon from '../McSvgIcon/McSvgIcon.vue'
+import McButton from '../McButton/McButton.vue'
+import McPreview from '../../patterns/McPreview/McPreview'
+
+export default {
+    name: 'McNotification',
+    components: { McPreview, McTitle, McSvgIcon, McButton },
+    props: {
+        /**
+         * Дизайн:
+         * purple, red, orange и т.д.
+         */
+        variation: {
+            type: String,
+            default: 'purple',
+        },
+        /**
+         * Заголовок блока
+         */
+        title: {
+            type: String,
+        },
+        /**
+         * Содержимое блока
+         */
+        content: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отобразить кнопку внтури блока
+         */
+        isButtonVisible: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Текст кнопки
+         */
+        buttonText: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Название иконки
+         */
+        iconName: {
+            type: String,
+            default: 'info',
+        },
+        /**
+         * Не отображать иконку
+         */
+        hideIcon: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        classes() {
+            return ['mc-notification', `mc-notification--variation-${this.variation}`]
+        },
+    },
+    methods: {
+        handleClick(e) {
+            /**
+             * Событие клика по кнопке
+             */
+            this.$emit('click', e)
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-notification {
+    $block-name: &;
+
+    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: $color-orange;
+    }
+
+    &__text {
+        font-size: $font-size-200;
+        line-height: $line-height-200;
+    }
+
+    &__inner {
+        padding: $space-100 $space-150 $space-100 $space-200;
+        min-height: $size-700;
+        display: flex;
+        align-items: center;
+
+        .mc-preview {
+            width: 100%;
+            &__top {
+                margin-bottom: $space-50;
+            }
+            &__left {
+                display: flex;
+                align-items: center;
+                margin-right: $size-150;
+            }
+            &__right {
+                display: flex;
+                align-items: center;
+                margin-left: auto;
+                padding-left: $space-100;
+            }
+        }
+
+        @media #{$media-query-m-down} {
+            .mc-preview {
+                flex-wrap: wrap;
+
+                &__center {
+                    flex: 1;
+                }
+                &__right {
+                    width: 100%;
+                    padding: $space-100 0 0 $size-400 - 2;
+                }
+            }
+        }
+    }
+
+    @each $variation, $value in $token-colors {
+        &--variation-#{$variation} {
+            &:before {
+                background-color: $value;
+            }
+            #{$block-name}__inner {
+                background-color: rgba($value, 0.1);
+                color: $value;
+            }
+            #{$block-name}__text,
+            #{$block-name}__title {
+                filter: contrast(59%);
+            }
+        }
+    }
+}
+</style>

package/src/elements/McProgress/McProgress.stories.js

@@ -0,0 +1,76 @@
+import {select, number, text, array} from "@storybook/addon-knobs"
+
+import McProgress from './McProgress'
+import { getTokensByType } from "../../utils/getTokens"
+
+export default {
+  title: 'Elements/McProgress',
+  component: McProgress,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=88%3A0',
+    },
+  },
+}
+
+const tokenColors = getTokensByType('color')
+
+const getCommonTags = ctx => {
+  return {
+    percent: ctx.percent,
+    color: ctx.color,
+    helpText: ctx.helpText,
+    errors: ctx.errors,
+  }
+}
+
+export const Default = () => ({
+  components: { McProgress },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    percent: {
+      default: number('percent', 68, {}, 'default')
+    },
+    color: {
+      default: select('color', tokenColors, 'azure', 'default')
+    },
+    helpText: {
+      default: text('helpText', 'maximum 16mb', 'default')
+    },
+    errors: {
+      default: array('errors', [], ',', 'default')
+    },
+  },
+  template: '<mc-progress v-bind="tagBind" />',
+})
+
+export const Error = () => ({
+  components: { McProgress },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    percent: {
+      default: number('percent', 10, {}, 'error')
+    },
+    color: {
+      default: select('color', tokenColors, 'azure', 'error')
+    },
+    helpText: {
+      default: text('helpText', 'maximum 16mb', 'error')
+    },
+    errors: {
+      default: array('errors', ['Файл просто огромный', 'Нельзя так делать'], ',', 'error')
+    },
+  },
+  template: '<mc-progress v-bind="tagBind" />',
+})
+

package/src/elements/McProgress/McProgress.vue

@@ -0,0 +1,229 @@
+<script>
+export default {
+    name: 'McProgress',
+    functional: true,
+    props: {
+        /**
+         *  Процент
+         *
+         */
+        percent: {
+            type: Number,
+            default: 0,
+        },
+        /**
+         *  Число для отображения, если не укказано, используется процент
+         *
+         */
+        amount: {
+            type: [String, Number, Boolean],
+            default: null,
+        },
+        /**
+         *  Цвет
+         *
+         */
+        color: {
+            type: String,
+            default: 'dark-gray',
+        },
+        /**
+         *  Цвет текста
+         *
+         */
+        helpTextColor: {
+            type: String,
+            default: 'gray',
+        },
+        /**
+         *  Вспомогательный текст
+         */
+        helpText: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Ошибки
+         */
+        errors: {
+            type: Array,
+            default: () => [],
+        },
+        /**
+         *  Поменять местами подписи
+         */
+        reverseHeaders: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Использовать моноширинный шрифт для percent и amount
+         */
+        monospaceNumbers: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    render(h, { props, data }) {
+        const errorText = props.errors !== null && props.errors.length ? props.errors.join(', ') : ''
+        const wrapperClasses = {
+            'mc-progress': true,
+            [`mc-progress--color-${props.color}`]: props.color,
+            'mc-progress--error': errorText,
+            ...(data.class || {}),
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            staticClasses.forEach(c => c && (wrapperClasses[c] = true))
+        }
+
+        let style = {}
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+
+        const lineClasses = {
+            'mc-progress__line': true,
+        }
+
+        return h(
+            'div',
+            {
+                class: wrapperClasses,
+                style,
+            },
+            [
+                h(
+                    'div',
+                    {
+                        class: ['mc-progress__top', { 'mc-progress__top--reverse-headers': props.reverseHeaders }],
+                    },
+                    [
+                        h(
+                            'div',
+                            {
+                                class: {
+                                    'mc-progress__percent': true,
+                                    'mc-progress__percent--monospace': props.monospaceNumbers,
+                                },
+                            },
+                            [errorText ? 0 : props.amount || props.amount === 0 ? props.amount : `${props.percent}%`],
+                        ),
+                        props.helpText
+                            ? h(
+                                  'div',
+                                  {
+                                      class: [
+                                          'mc-progress__help-text',
+                                          `mc-progress__help-text--color-${props.helpTextColor}`,
+                                      ],
+                                  },
+                                  [props.helpText],
+                              )
+                            : null,
+                    ],
+                ),
+                h(
+                    'div',
+                    {
+                        class: 'mc-progress__wrapper-line',
+                    },
+                    [
+                        h('div', {
+                            class: lineClasses,
+                            style: { width: `${errorText ? 2 : Math.sign(props.percent) > 0 ? props.percent : 0}%` },
+                        }),
+                    ],
+                ),
+                errorText
+                    ? h(
+                          'div',
+                          {
+                              class: 'mc-progress__errors-container',
+                          },
+                          [errorText],
+                      )
+                    : null,
+            ],
+        )
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-progress {
+    $block-name: &;
+
+    position: relative;
+    width: 100%;
+    font-family: $font-family-main;
+    line-height: $line-height-200;
+    font-size: $font-size-200;
+
+    @each $color, $value in $token-colors {
+        &--color-#{$color} {
+            #{$block-name} {
+                &__percent {
+                    color: $value;
+                }
+                &__line {
+                    background-color: $value;
+                }
+            }
+        }
+    }
+    &__percent {
+        &--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 {
+        @each $color, $value in $token-colors {
+            &--color-#{$color} {
+                color: $value;
+            }
+        }
+    }
+
+    &__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%;
+    }
+
+    &__errors-container {
+        margin-top: $space-150;
+        color: $color-red;
+    }
+}
+</style>

package/src/elements/McRangeSlider/McRangeSlider.stories.js

@@ -0,0 +1,129 @@
+import {select, number, text, array, boolean} from "@storybook/addon-knobs"
+
+import McRangeSlider from './McRangeSlider'
+import { getTokensByType } from "../../utils/getTokens"
+import {action} from "@storybook/addon-actions"
+
+export default {
+  title: 'Elements/McRangeSlider',
+  component: McRangeSlider,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=88%3A0',
+    },
+  },
+}
+
+const tokenColors = getTokensByType('color')
+const placements = {
+  top: 'top',
+  right: 'right',
+  bottom: 'bottom',
+  left: 'left',
+}
+const tooltipDisplay = {
+  none: 'none',
+  always: 'always',
+  hover: 'hover',
+  focus: 'focus',
+  active: 'active',
+}
+
+const getUniqueProps = key => {
+  return {
+    step: {
+      default: number('step', 1, {}, key)
+    },
+    color: {
+      default: select('color', tokenColors, 'orange', key)
+    },
+    lazy: {
+      default: boolean('lazy', true, key)
+    },
+    disabled: {
+      default: boolean('disabled', false, key),
+    },
+    tooltip: {
+      default: select('tooltip', tooltipDisplay, 'hover', key),
+    },
+    tooltipPlacement: {
+      default: select('tooltipPlacement', placements, 'top', key),
+    },
+    coloredTooltip: {
+      default: boolean('coloredTooltip', false, key),
+    },
+  }
+}
+
+const getCommonTags = ctx => {
+  return {
+    value: ctx.value,
+    min: ctx.min,
+    max: ctx.max,
+    step: ctx.step,
+    color: ctx.color,
+    lazy: ctx.lazy,
+    disabled: ctx.disabled,
+    tooltip: ctx.tooltip,
+    'tooltip-placement': ctx.tooltipPlacement,
+    'colored-tooltip': ctx.coloredTooltip,
+  }
+}
+
+const actionsData = {
+  handleChange: action('changed'),
+  handleDrag: action('dragging'),
+}
+
+export const Default = () => ({
+  components: { McRangeSlider },
+  data() {
+    return {
+      value: 10,
+    }
+  },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    ...getUniqueProps('default'),
+    min: {
+      default: number('min', 0, {}, 'default')
+    },
+    max: {
+      default: number('max', 100, {}, 'default')
+    },
+  },
+  methods: actionsData,
+  template: '<mc-range-slider v-bind="tagBind" v-model="value" @input="handleChange" @dragging="handleDrag" />',
+})
+
+export const MultiValue = () => ({
+  components: { McRangeSlider },
+  data() {
+    return {
+      value: [20, 80],
+    }
+  },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    ...getUniqueProps('multiValue'),
+    min: {
+      default: number('min', 0, {}, 'multiValue')
+    },
+    max: {
+      default: number('max', 100, {}, 'multiValue')
+    },
+  },
+  methods: actionsData,
+  template: '<mc-range-slider v-bind="tagBind" v-model="value" @input="handleChange" @dragging="handleDrag" />',
+})
+