mediacube-ui 0.1.7

package/src/elements/McRangeSlider/McRangeSlider.vue

@@ -0,0 +1,196 @@
+<template>
+    <vue-slider
+        :class="classes"
+        :value="newValue"
+        :dot-size="20"
+        :interval="step"
+        :min="min"
+        :max="max"
+        :disabled="disabled"
+        :lazy="lazy"
+        :tooltip="tooltip"
+        :tooltip-placement="tooltipPlacement"
+        :tooltip-formatter="tooltipFormatter"
+        @change="handleInput"
+        @dragging="handleDrag"
+    />
+</template>
+
+<script>
+import VueSlider from 'vue-slider-component'
+import 'vue-slider-component/theme/default.css'
+
+export default {
+    name: 'McRangeSlider',
+    components: {
+        VueSlider,
+    },
+    props: {
+        /**
+         *  Значение
+         */
+        value: {
+            type: [Number, Array],
+            required: true,
+        },
+        /**
+         *  Мин. значение
+         */
+        min: {
+            type: Number,
+            required: true,
+        },
+        /**
+         *  Макс. значение
+         */
+        max: {
+            type: Number,
+            required: true,
+        },
+        /**
+         *  The interval between two values.
+         */
+        step: {
+            type: Number,
+            default: 1,
+        },
+        /**
+         *  Цвет слайдера
+         */
+        color: {
+            type: String,
+            default: 'purple',
+        },
+        /**
+         *  Is it lazy to update the value.
+         *  Useful whenever you need to consume a high-loss operation
+         */
+        lazy: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         *  Whether to disable the component.
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Control Tooltip display.
+         *  'none' | 'always' | 'hover' | 'focus' | 'active'
+         */
+        tooltip: {
+            type: String,
+            default: 'hover',
+        },
+        /**
+         *  The placement of the Tooltip.
+         *  'top' | 'right' | 'bottom' | 'left'
+         */
+        tooltipPlacement: {
+            type: [String, Array],
+            default: 'top',
+        },
+        /**
+         *  The placement of the Tooltip.
+         *  'top' | 'right' | 'bottom' | 'left'
+         */
+        coloredTooltip: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    data() {
+        return {
+            newValue: this.value,
+        }
+    },
+    computed: {
+        classes() {
+            return {
+                'mc-range-slider': true,
+                [`mc-range-slider--color-${this.color}`]: this.color,
+                'mc-range-slider--colored-tooltip': this.coloredTooltip,
+            }
+        },
+    },
+    methods: {
+        handleInput(value) {
+            /**
+             * Событие по изменению значения
+             * @property {Number}
+             */
+            this.$emit('input', value)
+        },
+        handleDrag(value) {
+            /**
+             * Событие по изменению значения
+             * (если нужно отслеживать value в ленивом режиме)
+             * @property {Number}
+             */
+            this.$emit('dragging', value)
+        },
+        tooltipFormatter(value) {
+            if (Number(value) !== value) return value
+            return ('' + value).replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-range-slider {
+    $block-name: &;
+
+    .vue-slider-dot-tooltip-inner {
+        line-height: $line-height-200;
+        font-size: $font-size-200;
+    }
+
+    @each $color, $value in $token-colors {
+        &--color-#{$color} {
+            .vue-slider-process {
+                background-color: $value;
+            }
+
+            .vue-slider-dot-tooltip-inner {
+                padding: $space-100 $space-150;
+                background-color: $color-black;
+                border-color: $color-black;
+            }
+
+            .vue-slider-dot-handle-focus {
+                box-shadow: $shadow-s;
+            }
+            .vue-slider-dot-handle {
+                box-shadow: $shadow-s;
+                &:hover {
+                    border: 2px solid fade_out($value, 0.5);
+                }
+                &:active {
+                    border: 2px solid $value;
+                }
+            }
+
+            &#{$block-name}--colored-tooltip {
+                .vue-slider-dot-tooltip-inner {
+                    background-color: $value;
+                    border-color: $value;
+                    padding: $space-100 $space-150;
+                }
+            }
+        }
+    }
+    &.vue-slider {
+        .vue-slider-rail {
+            cursor: pointer;
+        }
+        &-disabled {
+            .vue-slider-rail {
+                cursor: auto;
+            }
+        }
+    }
+}
+</style>

package/src/elements/McSeparator/McSeparator.stories.js

@@ -0,0 +1,84 @@
+import {select} from "@storybook/addon-knobs"
+
+import McSeparator from './McSeparator'
+import { getTokensByType, getTokenGroup } from "../../utils/getTokens"
+
+const wrapper = () => {
+  return {
+    template: `<div style="width: 100%;"><story /></div>`,
+  }
+}
+
+export default {
+  title: 'Elements/McSeparator',
+  component: McSeparator,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=81%3A788',
+    },
+  },
+  decorators: [wrapper],
+}
+
+const tokenColors = getTokensByType('color')
+const weights = {
+  s: 's',
+  m: 'm',
+}
+const spaces = getTokenGroup('spaces')
+const computedSpaces = {
+  ...spaces,
+  none: '',
+}
+
+const getCommonTags = ctx => {
+  return {
+    weight: ctx.weight,
+    color: ctx.color,
+    indentTop: ctx.indentTop,
+    indentBottom: ctx.indentBottom,
+    indentLeft: ctx.indentLeft,
+    indentRight: ctx.indentRight,
+    indentX: ctx.indentX,
+    indentY: ctx.indentY,
+  }
+}
+
+export const Default = () => ({
+  components: { McSeparator },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    weight: {
+      default: select('weight', weights, 's', 'default')
+    },
+    color: {
+      default: select('color', tokenColors, 'outline-gray', 'default')
+    },
+    indentTop: {
+      default: select('indentTop', computedSpaces, '100', 'default')
+    },
+    indentBottom: {
+      default: select('indentBottom', computedSpaces, '100', 'default')
+    },
+    indentLeft: {
+      default: select('indentLeft', computedSpaces, '100', 'default')
+    },
+    indentRight: {
+      default: select('indentRight', computedSpaces, '100', 'default')
+    },
+    indentX: {
+      default: select('indentX', computedSpaces, '', 'default')
+    },
+    indentY: {
+      default: select('indentY', computedSpaces, '', 'default')
+    },
+  },
+  template: '<mc-separator v-bind="tagBind" />',
+})
+

package/src/elements/McSeparator/McSeparator.vue

@@ -0,0 +1,158 @@
+<script>
+export default {
+    name: 'McSeparator',
+    functional: true,
+    props: {
+        /**
+         * Толщина `s, m`
+         */
+        weight: {
+            type: String,
+            default: 's',
+        },
+        /**
+         * Цвет (токены)
+         */
+        color: {
+            type: String,
+            default: 'outline-gray',
+        },
+        /**
+         * Отступ слева и справа: 50, 200... ...1000
+         */
+        indentX: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху и снизу: 50, 200... ...1000
+         */
+        indentY: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ сверху: 50, 200... ...1000
+         */
+        indentTop: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ снизу: 50, 200... ...1000
+         */
+        indentBottom: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ слева: 50, 200... ...1000
+         */
+        indentLeft: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Отступ справа: 50, 200... ...1000
+         */
+        indentRight: {
+            type: String,
+            default: '',
+        },
+    },
+
+    render(h, { props, slots, data }) {
+        const indents = {
+            top: props.indentTop || props.indentY,
+            bottom: props.indentBottom || props.indentY,
+            left: props.indentLeft || props.indentX,
+            right: props.indentRight || props.indentX,
+        }
+        const classes = {
+            'mc-separator': true,
+            [`mc-separator--weight-${props.weight}`]: props.weight,
+            [`mc-separator--color-${props.color}`]: props.color,
+            [`mc-separator--indent-top-${indents.top}`]: indents.top,
+            [`mc-separator--indent-bottom-${indents.bottom}`]: indents.bottom,
+            [`mc-separator--indent-left-${indents.left}`]: indents.left,
+            [`mc-separator--indent-right-${indents.right}`]: indents.right,
+            ...(data.class || {}),
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            staticClasses.forEach(c => c && (classes[c] = true))
+        }
+
+        let style = {}
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+
+        return h(
+            'div',
+            {
+                class: classes,
+                style,
+            },
+            [
+                h(
+                    'div',
+                    {
+                        class: 'mc-separator__wrapper',
+                    },
+                    slots()['default'],
+                ),
+            ],
+        )
+    },
+}
+</script>
+
+<style lang="scss">
+$weights: (
+    's': 1px,
+    'm': 2px,
+);
+
+.mc-separator {
+    $block-name: &;
+
+    width: 100%;
+
+    @each $key, $value in $weights {
+        &--weight-#{$key} {
+            height: #{$value};
+        }
+    }
+
+    &--color {
+        @each $color, $value in $token-colors {
+            &-#{$color} {
+                #{$block-name}__wrapper {
+                    @include size(100%);
+                    background-color: $value;
+                }
+            }
+        }
+    }
+
+    @each $key, $value in $token-spaces {
+        &--indent-top-#{$key} {
+            margin-top: #{$value};
+        }
+
+        &--indent-bottom-#{$key} {
+            margin-bottom: #{$value};
+        }
+
+        &--indent-left-#{$key} {
+            padding-left: #{$value};
+        }
+
+        &--indent-right-#{$key} {
+            padding-right: #{$value};
+        }
+    }
+}
+</style>

package/src/elements/McSlideUpDown/McSlideUpDown.stories.js

@@ -0,0 +1,77 @@
+import {text, boolean, number} from "@storybook/addon-knobs"
+import { action } from "@storybook/addon-actions"
+
+import McSlideUpDown from './McSlideUpDown'
+import McButton from '../McButton/McButton'
+
+export default {
+  title: 'Elements/McSlideUpDown',
+  component: McSlideUpDown,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+  },
+}
+
+const getUniqueProps = key => {
+  return {
+    duration: {
+      default: number('duration', 500, {}, key)
+    },
+    tag: {
+      default: text('tag', 'div', key)
+    },
+    useHidden: {
+      default: boolean('useHidden', true, key),
+    },
+
+  }
+}
+
+const getCommonTags = ctx => {
+  return {
+    duration: ctx.duration,
+    tag: ctx.tag,
+    'use-hidden': ctx.useHidden,
+  }
+}
+
+const actionsData = {
+  handleOpenStart: action("onOpenStart"),
+  handleCloseStart: action("onCloseStart"),
+  handleOpenEnd: action("onOpenEnd"),
+  handleCloseEnd: action("onCloseEnd"),
+}
+
+export const Default = () => ({
+  components: { McSlideUpDown, McButton },
+  data() {
+    return {
+      isActive: false,
+      content: `Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+       Autem doloribus est illo laborum libero nostrum suscipit tempora voluptates! Assumenda, provident! Odmen petuh!`,
+    }
+  },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    ...getUniqueProps('default'),
+  },
+  methods: actionsData,
+  template: `<div>
+      <mc-button @click="isActive = !isActive">Toggle</mc-button>
+      <mc-slide-up-down 
+        v-bind="tagBind" 
+        :active="isActive" 
+        @slide-open-start="handleOpenStart"
+        @slide-close-start="handleCloseStart"
+        @slide-open-end="handleOpenEnd"
+        @slide-close-end="handleCloseEnd"
+      >
+          {{content}}
+      </mc-slide-up-down>
+  </div>`,
+})
+

package/src/elements/McSlideUpDown/McSlideUpDown.vue

@@ -0,0 +1,157 @@
+<script>
+/**
+ * Используется исключительно для mc-collapse
+ */
+export default {
+    name: 'McSlideUpDown',
+    props: {
+        /*
+         * Состояние
+         */
+        active: {
+            type: Boolean,
+            default: false,
+        },
+        /*
+         * Продолжительность тоггла
+         */
+        duration: {
+            type: Number,
+            default: 500,
+        },
+        /*
+         * Если нужен другой тег
+         */
+        tag: {
+            type: String,
+            default: 'div',
+        },
+        /*
+         * Применять ли атрибут hidden
+         * к элементы при закрытии
+         */
+        useHidden: {
+            type: Boolean,
+            default: true,
+        },
+    },
+
+    data: () => ({
+        style: {},
+        initial: false,
+        hidden: false,
+    }),
+
+    computed: {
+        el() {
+            return this.$refs.container
+        },
+
+        attrs() {
+            const attrs = {
+                'aria-hidden': !this.active,
+                'aria-expanded': this.active,
+            }
+
+            if (this.useHidden) {
+                attrs.hidden = this.hidden
+            }
+
+            return attrs
+        },
+    },
+
+    watch: {
+        active() {
+            this.layout()
+        },
+    },
+
+    mounted() {
+        this.layout()
+        this.initial = true
+    },
+
+    created() {
+        this.hidden = !this.active
+    },
+
+    methods: {
+        layout() {
+            if (this.active) {
+                this.hidden = false
+                /**
+                 * Событие перед началом открытия
+                 */
+                this.$emit('slide-open-start')
+                if (this.initial) {
+                    this.setHeight('0px', () => `${this.el.scrollHeight}px`)
+                }
+            } else {
+                /**
+                 * Событие перед началом закрытия
+                 */
+                this.$emit('slide-close-start')
+                this.setHeight(`${this.el.scrollHeight}px`, () => '0px')
+            }
+        },
+
+        asap(callback) {
+            if (!this.initial) {
+                callback()
+            } else {
+                this.$nextTick(callback)
+            }
+        },
+
+        setHeight(temp, afterRelayout) {
+            this.style = { height: temp }
+
+            this.asap(() => {
+                // force relayout so the animation will run
+                this.__ = this.el.scrollHeight
+
+                this.style = {
+                    height: afterRelayout(),
+                    overflow: 'hidden',
+                    'transition-property': 'height',
+                    'transition-duration': this.duration + 'ms',
+                }
+            })
+        },
+
+        onTransitionEnd() {
+            if (this.active) {
+                this.style = {}
+                /**
+                 * Событие после открытия
+                 */
+                this.$emit('slide-open-end')
+            } else {
+                this.style = {
+                    height: '0',
+                    overflow: 'hidden',
+                }
+                this.hidden = true
+                /**
+                 * Событие после закрытия
+                 */
+                this.$emit('slide-close-end')
+            }
+        },
+    },
+
+    render(h) {
+        return h(
+            this.tag,
+            {
+                style: this.style,
+                attrs: this.attrs,
+                ref: 'container',
+                on: { transitionend: this.onTransitionEnd },
+            },
+            this.$slots.default,
+        )
+    },
+}
+</script>

package/src/elements/McSvgIcon/McSvgIcon.stories.js

@@ -0,0 +1,44 @@
+import svgIcons from '../../utils/load-icons'
+import { text, select, number } from '@storybook/addon-knobs'
+
+import McSvgIcon from './McSvgIcon'
+import { getTokensByType, getTokenGroup } from '../../utils/getTokens'
+
+export default {
+  title: 'Elements/McSvgIcon',
+  component: McSvgIcon,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    // design: {
+    //   type: 'figma',
+    //   url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
+    // },
+  },
+}
+
+const names = svgIcons.map(icon => icon.name.slice(2, -4))
+const iconSizes = getTokenGroup('icon-sizes')
+const colors = getTokensByType('color')
+
+export const Icon = () => ({
+  components: { McSvgIcon },
+  props: {
+    name: {
+      default: select('name', names, 'add'),
+    },
+    color: {
+      default: select('color', colors, 'red'),
+    },
+    fill: {
+      default: text('fill', 'currentColor'),
+    },
+    size: {
+      default: select('size', iconSizes, '300'),
+    },
+    weight: {
+      default: number('weight', 0, {}),
+    },
+  },
+  template:
+    '<mc-svg-icon :name="name" :size="size" :fill="fill" :color="color" :weight="weight" />',
+})