mediacube-ui 0.1.7

package/src/elements/McAvatar/McAvatar.stories.js

@@ -0,0 +1,122 @@
+import { text, select, boolean } from '@storybook/addon-knobs'
+import { withDesign } from 'storybook-addon-designs'
+
+import McAvatar from './McAvatar'
+import {getTokenGroup, getTokensByType} from "../../utils/getTokens"
+
+export default {
+  title: 'Elements/McAvatar',
+  component: McAvatar,
+  decorators: [withDesign],
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=127%3A1390',
+    },
+  },
+};
+
+const avatarSizes = getTokenGroup('avatar-sizes')
+const colors = getTokensByType('color')
+
+const getUniqueProps = key => {
+  return {
+    src: {
+      default: text('src', 'https://avatars3.githubusercontent.com/u/43079603?s=460&v=4', key),
+    },
+    alt: {
+      default: text('alt', 'alt text', key),
+    },
+    size: {
+      default: select('size', avatarSizes, '600', key)
+    },
+    shadow: {
+      default: boolean('shadow', true, key)
+    },
+    draggable: {
+      default: boolean('draggable', true, key)
+    },
+  }
+}
+
+const getCommonTags = ctx => {
+  return {
+    src: ctx.src,
+    alt: ctx.alt,
+    size: ctx.size,
+    rounded: ctx.rounded,
+    lazy: ctx.lazy,
+    shadow: ctx.shadow,
+    draggable: ctx.draggable,
+  }
+}
+
+
+export const Default = () => ({
+  components: { McAvatar },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    ...getUniqueProps('default'),
+    rounded: {
+      default: boolean('rounded', false, 'default')
+    },
+    lazy: {
+      default: boolean('lazy', false, 'default')
+    },
+  },
+  template: '<mc-avatar v-bind="tagBind" />',
+})
+
+export const Lazy = () => ({
+  components: { McAvatar },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    ...getUniqueProps('lazy'),
+    rounded: {
+      default: boolean('rounded', true, 'lazy')
+    },
+    lazy: {
+      default: boolean('lazy', true, 'lazy')
+    },
+  },
+  template: `<div>
+      <div style="height: 2000px">&#11015; &#11015; &#11015; Scroll to bottom &#11015; &#11015; &#11015;</div>
+      <mc-avatar v-bind="tagBind" /> 
+  </div>`,
+})
+
+export const Status = () => ({
+  components: { McAvatar },
+  computed: {
+    tagBind() {
+      return {
+        ...getCommonTags(this),
+        'border-color': this.borderColor,
+        'dot-color': this.dotColor,
+        rounded: true,
+      }
+    }
+  },
+  props: {
+    ...getUniqueProps('status'),
+    lazy: {
+      default: boolean('lazy', true, 'status'),
+    },
+    borderColor: {
+      default: select('borderColor', colors, 'light-green', 'status')
+    },
+    dotColor: {
+      default: select('dotColor', colors, 'orange', 'status')
+    },
+  },
+  template: `<mc-avatar v-bind="tagBind" />`,
+})

package/src/elements/McAvatar/McAvatar.vue

@@ -0,0 +1,325 @@
+<script>
+import defaultImage from '../../assets/img/no_user.png'
+export default {
+    name: 'McAvatar',
+    functional: true,
+    props: {
+        /**
+         *  Путь до изображения
+         *
+         */
+        src: {
+            type: String,
+            default: defaultImage,
+        },
+        /**
+         *  Отложенная подгрузка
+         *
+         */
+        lazy: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Атрибут alt
+         */
+        alt: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Размеры
+         */
+        size: {
+            type: String,
+            default: '300',
+        },
+        /**
+         *  Круглый
+         *
+         */
+        rounded: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Цвет рамки
+         *
+         */
+        borderColor: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Цвет точки
+         *
+         */
+        dotColor: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Цвет точки
+         *
+         */
+        shadow: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Перетаскивание изображения
+         *
+         */
+        draggable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    render(h, { props, data }) {
+        const hasStatus = props.borderColor || props.dotColor
+
+        const avatarClasses = {
+            'mc-avatar': true,
+            'mc-avatar--rounded': props.rounded,
+            'mc-avatar--shadow': props.shadow && !hasStatus,
+            [`mc-avatar--size-${props.size}`]: props.size,
+            ...(!hasStatus && data.class ? data.class : {}),
+        }
+        const wrapperClasses = {
+            'mc-avatar-status': true,
+            'mc-avatar-status--shadow': props.shadow,
+            [`mc-avatar-status--size-${props.size}`]: props.size,
+            [`mc-avatar-status--border-color-${props.borderColor}`]: props.borderColor,
+            [`mc-avatar-status--dot-color-${props.dotColor}`]: props.dotColor,
+            ...(data.class || {}),
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            const targetClasses = hasStatus ? wrapperClasses : avatarClasses
+            staticClasses.forEach(c => c && (targetClasses[c] = true))
+        }
+
+        let style = {}
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+
+        const lazyOptions = {
+            name: 'lazy',
+            value: {
+                src: props.src,
+                error: defaultImage,
+                attempt: 1,
+            },
+        }
+        const directives = props.lazy ? [lazyOptions] : []
+
+        const createAvatar = () => {
+            return h(
+                'figure',
+                {
+                    class: avatarClasses,
+                    style: {
+                        ...(!hasStatus ? style : {}),
+                    },
+                },
+                [
+                    h('img', {
+                        class: 'mc-avatar__img',
+                        attrs: {
+                            alt: props.alt,
+                            ...(!props.lazy ? { src: props.src || defaultImage } : {}),
+                            draggable: props.draggable,
+                        },
+                        directives,
+                        key: props.src,
+                        on: {
+                            error(e) {
+                                if (!e.target) return
+                                e.target.src = defaultImage
+                            },
+                        },
+                    }),
+                ],
+            )
+        }
+
+        const createWrapper = () => {
+            return h(
+                'section',
+                {
+                    class: wrapperClasses,
+                    style: {
+                        ...style,
+                    },
+                },
+                [createAvatar()],
+            )
+        }
+        return hasStatus ? createWrapper() : createAvatar()
+    },
+}
+</script>
+<style lang="scss">
+$color-borders: $token-colors;
+$dot-colors: $token-colors;
+
+.mc-avatar-status {
+    $status-name: &;
+
+    display: inline-flex;
+    border: 2px solid transparent;
+    padding: 1px;
+    position: relative;
+    border-radius: $radius-circle;
+
+    .mc-avatar {
+        border-radius: $radius-circle;
+    }
+
+    &::after {
+        @include size($size-100);
+        @include pseudo();
+        border: none;
+        position: absolute;
+        z-index: 2;
+        border-radius: 50%;
+    }
+
+    @each $color, $value in $color-borders {
+        &--border-color-#{$color} {
+            border-color: $value;
+            transition: box-shadow $duration-s;
+
+            &:hover,
+            &:focus {
+                .mc-avatar {
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+
+    &--shadow {
+        &:hover,
+        &:focus {
+            background-color: $color-hover-gray;
+            box-shadow: 0 0 0 $space-50 $color-hover-gray;
+        }
+    }
+
+    @each $color, $value in $dot-colors {
+        &--dot-color-#{$color} {
+            &::after {
+                border: 1px solid $color-white;
+                background-color: $value;
+                @if $color == 'transparent' {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    @each $size, $value in $token-avatar-sizes {
+        &--size-#{$size} {
+            @if $size == 300 {
+                &::after {
+                    bottom: -1px;
+                    left: -2px;
+                }
+            }
+            @if $size == 400 {
+                &::after {
+                    bottom: 0;
+                    left: -1px;
+                }
+            }
+            @if $size == 500 {
+                &::after {
+                    @include size($size-150);
+                    bottom: -1px;
+                    left: -2px;
+                }
+            }
+            @if $size == 600 {
+                &::after {
+                    @include size($size-150);
+                    bottom: -1px;
+                    left: 0;
+                }
+            }
+            @if $size == 700 {
+                &::after {
+                    @include size($size-200);
+                    border-width: 2px;
+                    bottom: -1px;
+                    left: -1px;
+                }
+            }
+            @if $size == 800 {
+                &::after {
+                    @include size($size-200);
+                    border-width: 2px;
+                    bottom: 0;
+                    left: -1px;
+                }
+            }
+            @if $size == 900 {
+                &::after {
+                    @include size($size-200);
+                    border-width: 2px;
+                    bottom: 1px;
+                    left: 0;
+                }
+            }
+            @if $size == 1000 {
+                &::after {
+                    @include size($size-200);
+                    border-width: 2px;
+                    bottom: 1px;
+                    left: 2px;
+                }
+            }
+        }
+    }
+}
+
+.mc-avatar {
+    $avatar-name: &;
+
+    @include reset();
+    position: relative;
+    display: inline-block;
+    border-radius: $radius-100;
+    overflow: hidden;
+    background-color: $color-hover-gray;
+    transition: box-shadow $duration-s;
+
+    &__img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    @each $size, $value in $token-avatar-sizes {
+        &--size-#{$size} {
+            @include size($value);
+            min-width: $value;
+            @if $size < 500 {
+                border-radius: $radius-50;
+            }
+        }
+    }
+    &--rounded {
+        border-radius: $radius-circle;
+    }
+
+    &--shadow {
+        &:hover,
+        &:focus {
+            box-shadow: 0 0 0 $space-100 $color-hover-gray;
+        }
+    }
+}
+</style>

package/src/elements/McBadge/McBadge.stories.js

@@ -0,0 +1,80 @@
+import {select, boolean, text} from "@storybook/addon-knobs"
+
+import McBadge from './McBadge'
+import { getTokensByType } from "../../utils/getTokens"
+
+export default {
+  title: 'Elements/McBadge',
+  component: McBadge,
+  parameters: {
+    componentSubtitle: 'Status: Ready',
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=1%3A2',
+    },
+  },
+}
+
+const tokenColors = getTokensByType('color')
+let variations = {}
+Object.keys(tokenColors).forEach(c => {
+  const colorVariations = {
+    [c]: c,
+    [`${c}-outline`]: `${c}-outline`,
+  }
+  variations = {
+    ...variations,
+    ...colorVariations,
+  }
+})
+
+const getCommonTags = ctx => {
+  return {
+    variation: ctx.variation,
+    verticalLine: ctx.verticalLine,
+  }
+}
+
+export const Default = () => ({
+  components: { McBadge },
+  data() {
+    return {
+      verticalLine: false,
+    }
+  },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    variation: {
+      default: select('variation', variations, 'dark-green', 'default')
+    },
+    value: {
+      default: text('slot default', 'badge content', 'default'),
+    },
+  },
+  template: '<mc-badge v-bind="tagBind">{{ value }}</mc-badge>',
+})
+
+export const VerticalLine = () => ({
+  components: { McBadge },
+  data() {
+    return {
+      verticalLine: true,
+    }
+  },
+  computed: {
+    tagBind() {
+      return getCommonTags(this)
+    }
+  },
+  props: {
+    variation: {
+      default: select('variation', variations, 'orange', 'verticalLine')
+    },
+  },
+  template: '<div style="display: flex; width: 50px; height: 100px;"><mc-badge v-bind="tagBind" /></div>',
+})
+

package/src/elements/McBadge/McBadge.vue

@@ -0,0 +1,120 @@
+<script>
+export default {
+    name: 'McBadge',
+    functional: true,
+    props: {
+        /**
+         *  Дизайн:
+         *  `purple, purple-outline т.д.`
+         */
+        variation: {
+            type: String,
+            default: 'transparent',
+        },
+        /**
+         *  Вертикальная черта (в таблице, к примеру)
+         */
+        verticalLine: {
+            type: Boolean,
+            default: false,
+        },
+        modern: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    render(h, { props, slots, data }) {
+        const classes = {
+            'mc-badge': true,
+            'mc-badge--vertical-line': props.verticalLine,
+            [`mc-badge--variation-${props.variation}${props.modern ? '-modern' : ''}`]: props.variation,
+            ...(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(
+            'section',
+            {
+                class: classes,
+                style,
+            },
+            [
+                h(
+                    'div',
+                    {
+                        class: 'mc-badge__text',
+                    },
+                    slots()['default'],
+                ),
+            ],
+        )
+    },
+}
+</script>
+
+<style lang="scss">
+$light-scale: 'hover-gray', 'white', 'lighter-blue', 'lighter-purple', 'toxic', 'transparent';
+.mc-badge {
+    $block-name: &;
+
+    @include ellipsis(100%, inline-flex);
+    align-items: center;
+    color: $color-white;
+    font-family: $font-family-main;
+    font-size: $font-size-100;
+    line-height: $line-height-150;
+    height: $line-height-200;
+    font-weight: $font-weight-medium;
+    text-transform: uppercase;
+    letter-spacing: $letter-spacing-m;
+    vertical-align: middle;
+    border-radius: $radius-50;
+    padding: 2px $space-100;
+    border: 1px solid transparent;
+
+    @each $color, $value in $token-colors {
+        &--variation-#{$color} {
+            background-color: $value;
+
+            @each $col-l in $light-scale {
+                @if $color == $col-l {
+                    color: $color-black;
+                }
+            }
+            &-invert {
+                background-color: fade-out($value, 0.9);
+                color: $value;
+            }
+            &-outline {
+                background-color: $color-white;
+                color: $value;
+                border-color: fade-out($value, 0.6);
+            }
+            &-modern {
+                background-color: rgba($value, 0.1);
+                color: $value;
+                border-radius: $radius-150;
+            }
+        }
+    }
+    &--vertical-line {
+        padding: 0;
+        border-radius: 0;
+        width: 5px;
+        #{$block-name} {
+            &__text {
+                display: none;
+            }
+        }
+    }
+}
+</style>