mediacube-ui 0.1.7

package/src/elements/McTooltip/McTooltip.vue

@@ -0,0 +1,288 @@
+<template>
+    <div
+        v-tooltip="{ content, placement, classes: tooltipClasses, trigger, show, container }"
+        class="mc-tooltip-target"
+    >
+        <!-- @slot Слот для элемента, у которого будет всплывать тултип -->
+        <slot />
+    </div>
+</template>
+
+<script>
+import { VTooltip } from 'v-tooltip'
+
+VTooltip.options.defaultBoundariesElement = 'window'
+
+export default {
+    name: 'McTooltip',
+    directives: {
+        tooltip: VTooltip,
+    },
+    props: {
+        /**
+         *  Текст подсказки:
+         */
+        content: {
+            type: String,
+            required: true,
+        },
+        /**
+         *  Расположение:
+         */
+        placement: {
+            type: String,
+            default: 'bottom',
+        },
+        /**
+         *  Цвет:
+         */
+        color: {
+            type: String,
+            default: 'default',
+        },
+        /**
+         *  Максимальная ширина
+         */
+        maxWidth: {
+            type: String,
+            default: 's',
+        },
+        /**
+         *  Отключить стрелку
+         */
+        arrowDisabled: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  Размеры:
+         *  `s, m`
+         */
+        size: {
+            type: String,
+            default: 'm',
+        },
+        /**
+         *  Событие по отображению:
+         *  'hover', 'click', 'focus' or 'manual'
+         *  (можно комбинировать)
+         */
+        trigger: {
+            type: String,
+            default: 'hover focus',
+        },
+        /**
+         *  Ручное отображение
+         */
+        show: {
+            type: Boolean,
+            default: false,
+        },
+        /**
+         *  В каком контенере отображать
+         */
+        container: {
+            default: 'body', //Boolean, String, HTMLElement,
+        },
+        disablePointerEvents: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        tooltipClasses() {
+            return [
+                'mc-tooltip',
+                `mc-tooltip--color-${this.color}`,
+                `mc-tooltip--width-${this.maxWidth}`,
+                `mc-tooltip--size-${this.size}`,
+                this.arrowDisabled ? 'mc-tooltip--arrow-disabled' : '',
+            ]
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.mc-tooltip-target {
+    display: inline-flex;
+}
+
+.mc-tooltip {
+    $arrow-size: $space-100 - 1;
+
+    &.tooltip {
+        display: block !important;
+        z-index: 10005 !important;
+
+        .tooltip-inner {
+            @include inset-squish-space($space-300);
+            background: $color-black;
+            color: $color-white;
+            border-radius: $radius-100;
+            font-family: $font-family-main;
+            line-height: $line-height-250;
+            font-size: $font-size-300;
+            box-shadow: $shadow-s;
+            padding: $space-100 $space-150;
+        }
+
+        .tooltip-arrow {
+            @include size(0);
+            border-style: solid;
+            position: absolute;
+            margin: $arrow-size;
+            border-color: $color-black;
+            z-index: 1;
+        }
+
+        &[x-placement^='top'] {
+            margin-bottom: $arrow-size;
+
+            .tooltip-arrow {
+                border-width: $arrow-size $arrow-size 0 $arrow-size;
+                border-left-color: transparent !important;
+                border-right-color: transparent !important;
+                border-bottom-color: transparent !important;
+                bottom: -$arrow-size;
+                left: calc(50% - #{$arrow-size});
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+        }
+
+        &[x-placement^='bottom'] {
+            margin-top: $arrow-size;
+
+            .tooltip-arrow {
+                border-width: 0 $arrow-size $arrow-size $arrow-size;
+                border-left-color: transparent !important;
+                border-right-color: transparent !important;
+                border-top-color: transparent !important;
+                top: -$arrow-size;
+                left: calc(50% - #{$arrow-size});
+                margin-top: 0;
+                margin-bottom: 0;
+            }
+        }
+
+        &[x-placement^='right'] {
+            margin-left: $arrow-size;
+
+            .tooltip-arrow {
+                border-width: $arrow-size $arrow-size $arrow-size 0;
+                border-left-color: transparent !important;
+                border-top-color: transparent !important;
+                border-bottom-color: transparent !important;
+                left: -$arrow-size;
+                top: calc(50% - #{$arrow-size});
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+
+        &[x-placement^='left'] {
+            margin-right: $arrow-size;
+
+            .tooltip-arrow {
+                border-width: $arrow-size 0 $arrow-size $arrow-size;
+                border-top-color: transparent !important;
+                border-right-color: transparent !important;
+                border-bottom-color: transparent !important;
+                right: -$arrow-size;
+                top: calc(50% - #{$arrow-size});
+                margin-left: 0;
+                margin-right: 0;
+            }
+        }
+
+        &[aria-hidden='true'] {
+            visibility: hidden;
+            opacity: 0;
+            transition: opacity $duration-s, visibility $duration-s;
+        }
+
+        &[aria-hidden='false'] {
+            visibility: visible;
+            opacity: 1;
+            transition: opacity $duration-s;
+        }
+    }
+
+    &--width-s {
+        &.tooltip {
+            max-width: 250px;
+        }
+    }
+
+    &--width-m {
+        &.tooltip {
+            max-width: 320px;
+        }
+    }
+
+    &--width-l {
+        &.tooltip {
+            max-width: 380px;
+        }
+    }
+
+    &--width-xl {
+        &.tooltip {
+            max-width: 500px;
+        }
+    }
+
+    &--size {
+        &-s {
+            &.tooltip {
+                .tooltip-inner {
+                    @include inset-squish-space($space-200);
+                    font-size: $font-size-200;
+                }
+            }
+        }
+        &-m {
+            &.tooltip {
+                .tooltip-inner {
+                    @include inset-squish-space($space-300);
+                    font-size: $font-size-300;
+                }
+            }
+        }
+    }
+
+    &--arrow-disabled {
+        &.tooltip {
+            .tooltip-arrow {
+                display: none;
+            }
+        }
+    }
+
+    @each $color, $value in $token-colors {
+        &--color-#{$color} {
+            @if $color == 'white' {
+                &.tooltip {
+                    .tooltip-inner {
+                        color: $color-black;
+                        background-color: $value;
+                    }
+                    .tooltip-arrow {
+                        border-color: $value;
+                    }
+                }
+            } @else {
+                &.tooltip {
+                    .tooltip-inner {
+                        background-color: $value;
+                    }
+                    .tooltip-arrow {
+                        border-color: $value;
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

package/src/examples/Welcome.js

@@ -0,0 +1,131 @@
+// eslint-disable-next-line no-console
+const log = () => console.log('Welcome to storybook!')
+
+export default {
+    name: 'welcome',
+
+    props: {
+        showApp: {
+            type: Function,
+            default: log,
+        },
+    },
+
+    data() {
+        return {
+            main: {
+                padding: 15,
+                lineHeight: 1.4,
+                fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+                backgroundColor: '#ffffff',
+            },
+
+            logo: {
+                width: 200,
+            },
+
+            link: {
+                color: '#1474f3',
+                textDecoration: 'none',
+                borderBottom: '1px solid #1474f3',
+                paddingBottom: 2,
+                cursor: 'pointer',
+            },
+
+            code: {
+                fontSize: 15,
+                fontWeight: 600,
+                padding: '2px 5px',
+                border: '1px solid #eae9e9',
+                borderRadius: 4,
+                backgroundColor: '#f3f2f2',
+                color: '#3a3a3a',
+            },
+
+            note: {
+                opacity: 0.5,
+            },
+        }
+    },
+
+    template: `
+    <div :style="main">
+      <h1>Welcome to STORYBOOK</h1>
+      <p>
+        This is a UI component dev environment for your app.
+      </p>
+      <p>
+        We've added some basic stories inside the
+        <br />
+        <code :style="code">src/examples</code>
+        <br />
+        directory.
+        <br />
+        A story is a single state of one or more UI components. You can have as many stories as
+        you want.
+        <br />
+        (Basically a story is like a visual test case.)
+      </p>
+      <p>
+        See these sample
+        <br />
+        <a :style="link" @click="onClick" role="button" tabIndex="0">stories</a>
+        <br />
+        for a component called
+        <br />
+        <code :style="code">MyElButton</code>
+        .
+      </p>
+      <p>
+        Just like that, you can add your own components as stories.
+        <br />
+        You can also edit those components and see changes right away.
+        <br />
+        (Try editing the <code :style="code">MyElButton</code> component
+        located at <code :style="code">src/examples/elements/Button.js</code>.)
+      </p>
+      <p>
+        This is just one thing you can do with Storybook.
+        <br />
+        Have a look at the
+        <br />
+        <a
+          :style="link"
+          href="https://github.com/storybookjs/storybook"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Storybook
+        </a>
+        <br />
+        repo for more information, and
+        <br />
+        <a
+          :style="link"
+          href="https://github.com/UX-and-I/storybook-design-token"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Storybook Design Token Addon
+        </a>
+      </p>
+      <p :style="note">
+        <b>NOTE:</b>
+        <br />
+        Have a look at the
+        <br />
+        <code :style="code">.storybook/webpack.config.js</code>
+        <br />
+        to add webpack
+        loaders and plugins you are using in this project.
+      </p>
+    </div>
+  `,
+
+    methods: {
+        onClick(event) {
+            event.preventDefault()
+            this.showApp()
+        },
+    },
+}

package/src/examples/Welcome.stories.js

@@ -0,0 +1,18 @@
+import { linkTo } from '@storybook/addon-links'
+
+import Welcome from './Welcome'
+
+export default {
+    title: 'Examples',
+    component: Welcome,
+}
+
+export const ToStorybook = () => ({
+    components: { Welcome },
+    template: '<welcome :showApp="action" />',
+    methods: { action: linkTo('Examples/MyElButton') },
+})
+
+ToStorybook.story = {
+    name: 'Description',
+}

package/src/examples/elements/MyElButton/MyElButton.js

@@ -0,0 +1,36 @@
+export default {
+  name: 'my-el-button',
+
+  data() {
+    return {
+      buttonStyles: {
+        border: '1px solid #eee',
+        borderRadius: 3,
+        backgroundColor: '#FFFFFF',
+        cursor: 'pointer',
+        fontSize: 15,
+        padding: '3px 10px',
+        margin: 10,
+      },
+    };
+  },
+
+  template: `
+    <button :disabled="isDisabled" :style="buttonStyles" @click="onClick">
+      <slot />
+    </button>
+  `,
+
+  props: {
+    isDisabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};

package/src/examples/elements/MyElButton/MyElButton.stories.js

@@ -0,0 +1,52 @@
+import { action } from '@storybook/addon-actions'
+import { text, boolean } from '@storybook/addon-knobs'
+
+import MyElButton from './MyElButton'
+
+export default {
+  title: 'Examples/MyElButton',
+  component: MyElButton,
+};
+
+export const Text = () => ({
+  components: { MyElButton },
+  props: {
+    isDisabled: {
+      default: boolean('Disabled', false)
+    },
+    text: {
+      default: text('Text', 'Hello Storybook')
+    }
+  },
+  template: '<my-el-button :isDisabled="isDisabled" @click="action">{{ text }}</my-el-button>',
+  methods: { action: action('clicked') },
+});
+
+export const RenderFunction = () => ({
+  components: { MyElButton },
+  render(h) {
+    return h('my-el-button',
+      {
+        on: {
+          click: this.action,
+        }
+      },
+      'With render-function',
+      )
+  },
+  methods: { action: action('clicked') },
+});
+
+// export const Jsx = () => ({
+//   components: { MyElButton },
+//   render(h) {
+//     return <my-el-button onClick={this.action}>With JSX</my-el-button>;
+//   },
+//   methods: { action: action('clicked') },
+// });
+
+export const Emoji = () => ({
+  components: { MyElButton },
+  template: '<my-el-button @click="action">😀 😎 👍 💯</my-el-button>',
+  methods: { action: action('clicked') },
+});

package/src/examples/elements/MyElTask/MyElTask.stories.js

@@ -0,0 +1,61 @@
+import { action } from '@storybook/addon-actions'
+import MyElTask from './MyElTask'
+
+export default {
+  title: 'Examples/MyElTask',
+  // Our exports that end in "Data" are not stories.
+  excludeStories: /.*Data$/,
+}
+export const actionsData = {
+  onPinTask: action('onPinTask'),
+  onArchiveTask: action('onArchiveTask'),
+}
+
+export const taskData = {
+  id: '1',
+  title: 'Test Task',
+  state: 'Task_INBOX',
+  updated_at: new Date(2019, 0, 1, 9, 0),
+};
+
+const taskTemplate = `<my-el-task :task="task" @archiveTask="onArchiveTask" @pinTask="onPinTask" />`;
+
+// default task state
+export const Default = () => ({
+  components: { MyElTask },
+  template: taskTemplate,
+  props: {
+    task: {
+      default: () => taskData,
+    },
+  },
+  methods: actionsData,
+});
+// pinned task state
+export const Pinned = () => ({
+  components: { MyElTask },
+  template: taskTemplate,
+  props: {
+    task: {
+      default: () => ({
+        ...taskData,
+        state: 'TASK_PINNED',
+      }),
+    },
+  },
+  methods: actionsData,
+});
+// archived task state
+export const Archived = () => ({
+  components: { MyElTask },
+  template: taskTemplate,
+  props: {
+    task: {
+      default: () => ({
+        ...taskData,
+        state: 'TASK_ARCHIVED',
+      }),
+    },
+  },
+  methods: actionsData,
+});

package/src/examples/elements/MyElTask/MyElTask.vue

@@ -0,0 +1,113 @@
+<template>
+    <div :class="taskClass">
+        <label class="my-pt-task__checkbox">
+            <input type="checkbox" :checked="isChecked" :disabled="true" name="checked" />
+            <span class="my-pt-task__checkbox-custom" @click="$emit('archiveTask', task.id)" />
+        </label>
+        <div class="my-pt-task__title">
+            <input type="text" :readonly="true" :value="task.title" placeholder="Input title" />
+        </div>
+        <div class="my-pt-task__actions">
+            <a v-if="!isChecked" @click="$emit('pinTask', task.id)">
+                <span class="my-pt-task__actions-icon" />
+            </a>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'MyElTask',
+    props: {
+        task: {
+            type: Object,
+            required: true,
+            default: () => ({
+                id: '',
+                state: '',
+                title: '',
+            }),
+        },
+    },
+    computed: {
+        taskClass() {
+            return `my-pt-task ${this.task.state}`
+        },
+        isChecked() {
+            return this.task.state === 'TASK_ARCHIVED'
+        },
+    },
+}
+</script>
+
+<style lang="scss">
+.my-pt-task {
+    $block-name: &;
+    font-size: $font-size-200;
+    line-height: $line-height-250;
+    display: flex;
+    flex-wrap: wrap;
+    @include size(100%, 3rem);
+    background: $color-white;
+    transition: all ease-out 150ms;
+
+    &__checkbox {
+        margin: 0 $space-150;
+    }
+
+    &__title {
+        position: relative;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+    }
+
+    input[type='text'] {
+        width: 100%;
+
+        &:focus {
+            cursor: text;
+        }
+    }
+
+    &__actions {
+        transition: all 200ms ease-in;
+        padding-right: $space-200;
+
+        a {
+            display: inline-block;
+            vertical-align: top;
+            text-align: center;
+            color: #eee;
+
+            &:hover {
+                color: $color-purple;
+            }
+            &:active {
+                color: $color-gray;
+            }
+        }
+
+        &-icon {
+            font-size: $font-size-300;
+            line-height: $line-height-250;
+            text-align: center;
+            margin-left: $space-200;
+            &::before {
+                content: '*';
+            }
+        }
+    }
+
+    &.TASK_PINNED {
+        a {
+            color: $color-purple;
+        }
+    }
+    &.TASK_ARCHIVED {
+        input[type='text'] {
+            color: #aaa;
+        }
+    }
+}
+</style>