mediacube-ui 0.1.7

package/src/patterns/McSideBar/McSideBarBottom/McSideBarBottom.stories.js

@@ -0,0 +1,65 @@
+import { text, boolean } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+
+import McSideBarBottom from './McSideBarBottom'
+import McSideBarButton from '../McSideBarButton/McSideBarButton'
+
+const wrapper = () => {
+    return {
+        template: `<div 
+            style="display: flex; flex-direction: column; height: 600px; background-color: #202427; width: 216px;"
+        >
+        <story />
+    </div>`,
+    }
+}
+
+export default {
+    title: 'Patterns/McSideBar/McSideBarBottom',
+    component: McSideBarBottom,
+    subcomponents: { McSideBarButton },
+    parameters: {
+        componentSubtitle: 'Status: In progress',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=350%3A0',
+        },
+    },
+    decorators: [wrapper],
+}
+
+const getUniqueProps = key => {
+    return {
+        hideText: {
+            default: text('hideText', 'Hide', key),
+        },
+        compact: {
+            default: boolean('compact', false, key),
+        },
+    }
+}
+
+const getCommonTags = ctx => {
+    return {
+        hideText: ctx.hideText,
+        compact: ctx.compact,
+    }
+}
+
+const actionsData = {
+    handleToggleSize: action('toggle-size'),
+}
+
+export const Default = () => ({
+    components: { McSideBarBottom },
+    computed: {
+        tagBind() {
+            return getCommonTags(this)
+        },
+    },
+    props: {
+        ...getUniqueProps('default'),
+    },
+    methods: actionsData,
+    template: `<mc-side-bar-bottom v-bind="tagBind" @toggle-size="handleToggleSize" />`,
+})

package/src/patterns/McSideBar/McSideBarBottom/McSideBarBottom.vue

@@ -0,0 +1,124 @@
+<template>
+    <div class="mc-side-bar-bottom" :class="classes">
+        <div
+            v-if="!compact && $slots['bottom-message']"
+            class="mc-side-bar-bottom__slot-message"
+            :style="messageStyles"
+        >
+            <slot name="bottom-message" />
+        </div>
+        <mc-side-bar-button
+            v-if="!hiddenMode"
+            class="mc-side-bar-bottom__hide-button"
+            icon="arrow_backward"
+            :title="hideText"
+            :compact="compact"
+            :variation="closeButtonProps.variable"
+            :secondary-color="closeButtonProps.secondaryColor"
+            @click="handleClick"
+        />
+    </div>
+</template>
+
+<script>
+import McSideBarButton from '../McSideBarButton/McSideBarButton'
+export default {
+    name: 'McSideBarBottom',
+    components: {
+        McSideBarButton,
+    },
+    inject: ['provideData'],
+    props: {
+        /**
+         *  Текст кнопки
+         *  сворачивания меню
+         */
+        hideText: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Компактный вид
+         */
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+        hiddenMode: {
+            type: Boolean,
+            default: false,
+        },
+        sidebarWidth: {
+            type: String,
+            default: null,
+        },
+    },
+    data() {
+        return {
+            hasCompactClass: this.compact,
+        }
+    },
+    computed: {
+        closeButtonProps() {
+            return this.provideData?.currentThemeConfig?.closeButton || {}
+        },
+        classes() {
+            return {
+                'mc-side-bar-bottom--compact': this.hasCompactClass,
+            }
+        },
+        messageStyles() {
+            return {
+                minWidth: this.sidebarWidth,
+            }
+        },
+    },
+    watch: {
+        compact(newValue) {
+            this.hasCompactClass = newValue
+        },
+    },
+    methods: {
+        handleClick() {
+            if (this.hasCompactClass !== this.compact) return
+            this.$emit('toggle-size', !this.compact)
+            this.hasCompactClass = !this.hasCompactClass
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-side-bar-bottom {
+    $block-name: &;
+
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    justify-content: flex-end;
+    min-height: max-content;
+
+    &__hide-button {
+        .mc-side-bar-button__icon {
+            transition: transform $duration-s;
+        }
+    }
+
+    &--compact {
+        #{$block-name}__hide-button {
+            .mc-side-bar-button__icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    &__slot-message {
+        margin-left: -$space-100;
+        margin-right: -$space-100;
+        padding-left: $space-100;
+        padding-right: $space-100;
+        & + * {
+            margin-top: $space-500;
+        }
+    }
+}
+</style>

package/src/patterns/McSideBar/McSideBarButton/McSideBarButton.stories.js

@@ -0,0 +1,89 @@
+import { text, boolean, object } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
+
+import McSideBarButton from './McSideBarButton'
+
+const wrapper = () => {
+    return {
+        template: `<div style="background-color: #202427; width: 216px;">
+        <story />
+    </div>`,
+    }
+}
+
+export default {
+    title: 'patterns/McSideBar/McSideBarButton',
+    component: McSideBarButton,
+    parameters: {
+        componentSubtitle: 'Status: In Progress',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=350%3A0',
+        },
+    },
+    decorators: [wrapper],
+}
+
+const getUniqueProps = key => {
+    return {
+        to: {
+            default: object('to', { name: 'test', params: { id: 123 } }, key),
+        },
+        href: {
+            default: text('href', 'https://mediacube.agency/', key),
+        },
+        icon: {
+            default: text('icon', 'group', key),
+        },
+        iconColor: {
+            default: text('iconColor', 'currentColor', key),
+        },
+        title: {
+            default: text('title', 'Users', key),
+        },
+        compact: {
+            default: boolean('compact', false, key),
+        },
+        info: {
+            default: text('info', '1234', key),
+        },
+        exact: {
+            default: boolean('exact', false, key),
+        },
+        disabled: {
+            default: boolean('disabled', false, key),
+        },
+    }
+}
+
+const getCommonTags = ctx => {
+    return {
+        to: ctx.to,
+        href: ctx.href,
+        icon: ctx.icon,
+        iconColor: ctx.iconColor,
+        title: ctx.title,
+        compact: ctx.compact,
+        info: ctx.info,
+        exact: ctx.exact,
+        disabled: ctx.disabled,
+    }
+}
+
+const actionsData = {
+    handleClick: action('clicked'),
+}
+
+export const Default = () => ({
+    components: { McSideBarButton },
+    computed: {
+        tagBind() {
+            return getCommonTags(this)
+        },
+    },
+    props: {
+        ...getUniqueProps('default'),
+    },
+    methods: actionsData,
+    template: `<mc-side-bar-button v-bind="tagBind" @click="handleClick" />`,
+})

package/src/patterns/McSideBar/McSideBarButton/McSideBarButton.vue

@@ -0,0 +1,277 @@
+<template>
+    <mc-tooltip
+        class="mc-side-bar-button__tooltip"
+        :content="compact && withTooltip ? title : ''"
+        size="s"
+        placement="right"
+    >
+        <mc-button v-bind="btnAttrs" v-on="$listeners">
+            <mc-svg-icon
+                v-if="icon"
+                slot="icon-prepend"
+                :fill="iconColor"
+                class="mc-side-bar-button__icon"
+                :name="icon"
+            />
+            <span
+                v-if="icon && compact && (info || withIndicator)"
+                slot="icon-prepend"
+                class="mc-side-bar-button__dot"
+            />
+            <template v-if="!compact">
+                {{ title }}
+                <mc-chip
+                    v-if="info || withIndicator"
+                    slot="icon-append"
+                    variation="purple"
+                    class="mc-side-bar-button__chip"
+                    :class="{ indicator: withIndicator }"
+                >
+                    {{ withIndicator ? '' : info }}
+                </mc-chip>
+            </template>
+        </mc-button>
+    </mc-tooltip>
+</template>
+
+<script>
+import McButton from '../../../elements/McButton/McButton'
+import McSvgIcon from '../../../elements/McSvgIcon/McSvgIcon'
+import McChip from '../../../elements/McChip/McChip'
+import McTooltip from '../../../elements/McTooltip/McTooltip'
+export default {
+    name: 'McSideBarButton',
+    components: {
+        McButton,
+        McSvgIcon,
+        McChip,
+        McTooltip,
+    },
+    inject: ['provideData'],
+    props: {
+        /**
+         *  Если нужна ссылка внутри приложения:
+         * `{name: 'test', params: { id: test.id }}`
+         */
+        to: {
+            default: null,
+        },
+        /**
+         *  Если нужна обычная ссылка:
+         * `https://mediacube.agency/`
+         */
+        href: {
+            default: null,
+        },
+        /**
+         *  Если нужна иконка
+         */
+        icon: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Если нужен конкретный
+         *  цвет иконки
+         */
+        iconColor: {
+            type: String,
+            default: 'currentColor',
+        },
+        /**
+         *  Тайтл кнопки
+         */
+        title: {
+            type: String,
+            default: '',
+        },
+        /**
+         *  Compact size
+         */
+        compact: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Дизайн:
+         *  `purple, red, purple-outline, purple-invert, purple-flat и т.д.`
+         */
+        variation: {
+            type: String,
+        },
+        /**
+         * Если нужен другой цвет при взаимодействии
+         */
+        secondaryColor: {
+            type: String,
+        },
+        withTooltip: {
+            type: Boolean,
+            default: false,
+        },
+        withSubmenu: {
+            type: Boolean,
+            default: false,
+        },
+        withIndicator: {
+            type: Boolean,
+            default: false,
+        },
+        isActive: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Additional info
+         */
+        info: {
+            type: [String, Number],
+            default: '',
+        },
+        /**
+         *  Exact
+         *
+         */
+        exact: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Отключенное состояние
+         *
+         */
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        themeConfig() {
+            return this.provideData
+                ? this.provideData.currentThemeConfig
+                : {
+                      mode: 'black',
+                      className: 'mc-side-bar--color-theme-black',
+                      dropdownActivator: 'white',
+                      mainMenuLinks: {
+                          variable: 'gray-flat',
+                          secondaryColor: 'white',
+                      },
+                  }
+        },
+        classes() {
+            return {
+                'mc-side-bar-button': true,
+                'mc-side-bar-button__with-submenu': this.withSubmenu,
+                [`mc-side-bar--${this.themeConfig.mode || 'black'}__button`]: true,
+                'purple-hover': !this.secondaryColor && this.themeConfig.mainMenuLinks.variable === 'black-flat',
+            }
+        },
+        btnAttrs() {
+            return {
+                variation: this.variation || this.themeConfig.mainMenuLinks.variable,
+                'secondary-color': this.secondaryColor || this.themeConfig.mainMenuLinks.secondaryColor,
+                class: this.classes,
+                'text-align': 'left',
+                'full-width': true,
+                size: this.compact ? 's-compact' : 's',
+                href: this.href,
+                to: this.to,
+                exact: this.exact,
+                disabled: this.disabled,
+                'is-active': this.isActive,
+            }
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-side-bar-button {
+    $block-name: &;
+    &__tooltip {
+        width: 100%;
+    }
+    &__dot {
+        @include position(absolute, $space-100 6px null null);
+        @include size($size-100);
+        background-color: $color-purple;
+        border-radius: $radius-circle;
+    }
+    &__chip {
+        &.indicator {
+            margin: 6px;
+            padding: 0 !important;
+            width: $size-150;
+            min-height: $size-150;
+        }
+    }
+    &.mc-button {
+        padding: $space-100;
+        opacity: 1;
+        height: auto;
+        border-radius: $space-50;
+        justify-content: flex-start;
+        .mc-svg-icon {
+            @include size($size-300);
+        }
+        &.purple-hover:hover {
+            background-color: $color-lighter-purple;
+        }
+
+        .mc-button__text {
+            margin-right: $space-100;
+        }
+        .mc-button__prepend {
+            margin-right: $space-100;
+        }
+        .mc-button__append {
+            margin-left: auto;
+        }
+        .mc-chip {
+            height: auto;
+            padding: $space-50 $space-100;
+            font-variant-numeric: tabular-nums;
+        }
+    }
+}
+.mc-side-bar {
+    &--black__button {
+        &.mc-button--is-active,
+        &.mc-button.nuxt-link-active {
+            color: $color-white;
+            background-color: rgba(92, 102, 112, 0.4);
+            pointer-events: auto;
+        }
+    }
+    &--white__button {
+        &.mc-button--is-active,
+        &.mc-button.nuxt-link-active {
+            color: $color-purple;
+            background-color: $color-lighter-purple;
+            pointer-events: auto;
+        }
+    }
+}
+html[direction='rtl'] {
+    .mc-side-bar-button {
+        &__dot {
+            @include position(absolute, $space-100 null null 6px);
+        }
+        &.mc-button {
+            .mc-button__text {
+                margin-right: 0;
+                margin-left: $space-100;
+            }
+            .mc-button__prepend {
+                margin-right: 0;
+                margin-left: $space-100;
+            }
+            .mc-button__append {
+                margin-left: unset;
+                margin-right: auto;
+            }
+        }
+    }
+}
+</style>

package/src/patterns/McSideBar/McSideBarCenter/McSideBarCenter.stories.js

@@ -0,0 +1,88 @@
+import { text, object, boolean } from '@storybook/addon-knobs'
+import menuMain from '../../../mocks/menuMain'
+import authUser from '../../../mocks/authUser'
+
+import McSideBarCenter from './McSideBarCenter'
+import McSideBarButton from '../McSideBarButton/McSideBarButton'
+
+const wrapper = () => {
+    return {
+        template: `<div style="background-color: #202427; width: 216px;">
+        <story />
+    </div>`,
+    }
+}
+
+export default {
+    title: 'Patterns/McSideBar/McSideBarCenter',
+    component: McSideBarCenter,
+    subcomponents: { McSideBarButton },
+    parameters: {
+        componentSubtitle: 'Status: In progress',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=350%3A0',
+        },
+    },
+    decorators: [wrapper],
+}
+
+const getUniqueProps = key => {
+    return {
+        title: {
+            default: text('title', 'Sections', key),
+        },
+        chatraConfig: {
+            default: object('chatraConfig', { id: 'dzDw7eBbL2ramxx25', title: 'Have questions?' }, key),
+        },
+        compact: {
+            default: boolean('compact', false, key),
+        },
+    }
+}
+
+const getCommonTags = ctx => {
+    return {
+        title: ctx.title,
+        menuMain: ctx.menuMain,
+        chatraConfig: ctx.chatraConfig,
+        userbackConfig: ctx.userbackConfig,
+        user: ctx.user,
+        compact: ctx.compact,
+    }
+}
+
+export const Default = () => ({
+    components: { McSideBarCenter },
+    computed: {
+        tagBind() {
+            return getCommonTags(this)
+        },
+        menuMain() {
+            return menuMain
+        },
+        userbackConfig() {
+            return {
+                title: 'Found a mistake?',
+                token: '8681|15392|h5ECyqaZJTTOk6kDQJmgij6b7db2iXwCuwM21iQ6HIcautJRR2',
+                // more info https://help.userback.io/hc/en-us/articles/115005681028-Javascript-API
+                settings: {
+                    lang: 'en',
+                    main_button_text: 'submit',
+                    rating_help_message: 'rate',
+                },
+                categories: 'Admin',
+            }
+        },
+        user() {
+            return {
+                ...authUser,
+                name: `${authUser.first_name}${authUser.last_name ? ` ${authUser.last_name}` : ''}`,
+            }
+        },
+    },
+    props: {
+        ...getUniqueProps('default'),
+    },
+    template: `<mc-side-bar-center v-bind="tagBind" />`,
+})