mediacube-ui 0.1.7

package/src/elements/McTitle/McTitle.vue

@@ -0,0 +1,462 @@
+<script>
+import _upperFirst from 'lodash/upperFirst'
+
+const values = ['variation', 'weight']
+const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl']
+const variationProps = {}
+
+values.forEach(value => {
+    sizes.forEach(size => {
+        variationProps[`${value}-${size}`] = { type: String }
+    })
+})
+export default {
+    name: 'McTitle',
+    functional: true,
+    props: {
+        ...variationProps,
+        /**
+         * Уровень: `h1`, `h2`, `h3`, `h4`, `subtitle`, `body`, `overline`, `article`, 'info'.
+         */
+        variation: {
+            type: String,
+            default: 'body',
+        },
+        /**
+         * В одну строку с точками в конце, если не вмещается
+         */
+        ellipsis: {
+            type: Boolean,
+            default: true,
+        },
+        /**
+         * Если нужен другой тэг
+         */
+        tagName: {
+            type: String,
+            default: 'div',
+        },
+        /**
+         * Заглавные буквы
+         */
+        uppercase: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         * Цвет
+         */
+        color: {
+            type: String,
+            default: 'black',
+        },
+        /**
+         *  Позиция текста:
+         *  `left, center, right`
+         */
+        textAlign: {
+            type: String,
+            default: 'left',
+        },
+        /**
+         * Если нужна иная высота строки: `100`, `200`, `300` и т.д.
+         */
+        lineHeight: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Толщина текста:
+         * normal, medium, semi-bold
+         */
+        weight: {
+            type: String,
+            default: '',
+        },
+        /**
+         * Если нужно указать свою
+         * максимальную ширину
+         */
+        maxWidth: {
+            type: String,
+            default: '',
+        },
+        preLine: {
+            type: Boolean,
+            default: false,
+        },
+        nowrap: {
+            type: Boolean,
+            default: false,
+        },
+        plainText: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    render(h, { props, slots, data, listeners }) {
+        let contentStyle = {}
+        if (props.maxWidth) {
+            contentStyle = { 'max-width': props.maxWidth }
+        }
+        const contentOptions = {
+            class: 'mc-title__text',
+            style: contentStyle,
+            is: props.tagName,
+        }
+        if (data.domProps && data.domProps.innerHTML) {
+            contentOptions.domProps = {
+                innerHTML: data.domProps.innerHTML,
+            }
+        }
+        const responsivePropsClasses = {}
+        values.forEach(value => {
+            responsivePropsClasses[`mc-title--${value}-${props[value]}`] = props[value]
+            sizes.forEach(size => {
+                const sizeValue = props[`${value}${_upperFirst(size)}`]
+                responsivePropsClasses[`mc-title--${value}-${size}-${sizeValue}`] = sizeValue
+            })
+        })
+        const classes = {
+            'mc-title': true,
+            [`mc-title--line-height-${props.lineHeight}`]: props.lineHeight,
+            ['mc-title--ellipsis']: props.ellipsis,
+            [`mc-title--color-${props.color}`]: props.color,
+            [`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--plain-text': props.plainText,
+            ...(data.class || {}),
+            ...responsivePropsClasses,
+        }
+
+        if (data.staticClass) {
+            const staticClasses = data.staticClass.split(' ')
+            staticClasses.forEach(c => {
+                if (c) {
+                    classes[c] = true
+                }
+            })
+        }
+        let style = {}
+        if (data.staticStyle) {
+            style = data.staticStyle
+        }
+        return h(
+            'div',
+            {
+                class: classes,
+                style,
+                on: listeners,
+            },
+            [slots()['icon-prepend'], h('component', contentOptions, slots()['default']), slots()['icon-append']],
+        )
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-title {
+    $block-name: &;
+    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) {
+            margin-left: $space-50;
+        }
+        *:not(:empty) + & {
+            margin-left: $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 {
+        font-family: $font-family-main;
+        &-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;
+            }
+        }
+    }
+
+    @each $media, $value in $token-media-queries {
+        @media #{$value} {
+            &--variation-#{$media} {
+                font-family: $font-family-main;
+                &-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;
+                    }
+                }
+            }
+        }
+    }
+
+    @each $line-height, $value in $token-line-heights {
+        &--line-height-#{$line-height} {
+            line-height: $value;
+        }
+    }
+
+    &--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;
+            }
+        }
+    }
+
+    &--color {
+        @each $color, $value in $token-colors {
+            &-#{$color} {
+                color: $value;
+            }
+        }
+    }
+
+    &--text-align {
+        &-left {
+            justify-content: flex-start;
+            text-align: left;
+        }
+        &-center {
+            justify-content: center;
+            text-align: center;
+        }
+        &-right {
+            justify-content: flex-end;
+            text-align: right;
+        }
+    }
+    &--weight {
+        &-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;
+        }
+    }
+    @each $media, $value in $token-media-queries {
+        @media #{$value} {
+            &--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;
+    }
+}
+html[direction='rtl'] {
+    .mc-title {
+        &__text {
+            & + *:not(:empty) {
+                margin-left: unset;
+                margin-right: $space-50;
+            }
+            *:not(:empty) + & {
+                margin-left: unset;
+                margin-right: $space-50;
+            }
+        }
+        &--text-align {
+            &-left {
+                text-align: right;
+            }
+            &-right {
+                text-align: left;
+            }
+        }
+    }
+}
+</style>

package/src/elements/McTooltip/McTooltip.stories.js

@@ -0,0 +1,130 @@
+import { text, select, boolean } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+
+import McTooltip from './McTooltip'
+import McButton from '../McButton/McButton'
+import { getTokensByType } from '../../utils/getTokens'
+
+const wrapper = () => {
+    return {
+        template: `<div style="display: flex; align-items: center; justify-content: center; height: 200px;">
+        <story />
+    </div>`,
+    }
+}
+
+export default {
+    title: 'Elements/McTooltip',
+    component: McTooltip,
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=108%3A322',
+        },
+    },
+    decorators: [wrapper],
+}
+
+const colors = getTokensByType('color')
+
+const positions = ['auto', 'top', 'right', 'bottom', 'left']
+let placements = {}
+positions.forEach(p => {
+    const posVariations = {
+        [p]: p,
+        [`${p}-start`]: `${p}-start`,
+        [`${p}-end`]: `${p}-end`,
+    }
+    placements = {
+        ...placements,
+        ...posVariations,
+    }
+})
+
+const widths = {
+    s: 's',
+    m: 'm',
+    l: 'l',
+}
+
+const sizes = {
+    s: 's',
+    m: 'm',
+}
+const triggers = {
+    hover: 'hover',
+    click: 'click',
+    focus: 'focus',
+    manual: 'manual',
+}
+
+const getUniqueProps = key => {
+    return {
+        content: {
+            default: text(
+                'content',
+                'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, exercitationem.',
+                key,
+            ),
+        },
+        placement: {
+            default: select('placement', placements, 'auto', key),
+        },
+        color: {
+            default: select('color', colors, 'black', key),
+        },
+        maxWidth: {
+            default: select('maxWidth', widths, 's', key),
+        },
+        arrowDisabled: {
+            default: boolean('arrowDisabled', false, key),
+        },
+        size: {
+            default: select('size', sizes, 'm', key),
+        },
+        trigger: {
+            default: select('trigger', triggers, 'hover', key),
+        },
+        show: {
+            default: boolean('show', false, key),
+        },
+        container: {
+            default: text('container', 'body', key),
+        },
+    }
+}
+
+const getCommonTags = ctx => {
+    return {
+        content: ctx.content,
+        placement: ctx.placement,
+        color: ctx.color,
+        'max-width': ctx.maxWidth,
+        'arrow-disabled': ctx.arrowDisabled,
+        size: ctx.size,
+        trigger: ctx.trigger,
+        show: ctx.show,
+        container: ctx.container,
+    }
+}
+
+const actionsData = {
+    handleClick: action('clicked'),
+}
+
+export const Default = () => ({
+    components: { McTooltip, McButton },
+    computed: {
+        tagBind() {
+            return getCommonTags(this)
+        },
+    },
+    props: {
+        ...getUniqueProps('default'),
+    },
+    methods: actionsData,
+    template: `<mc-tooltip v-bind="tagBind">
+      <mc-button @click="handleClick"> Tooltip </mc-button>
+  </mc-tooltip>`,
+})