Update stories (#15)

* update stories
* add toolbar
* translate stories to English

.storybook/locales/en.js

@@ -0,0 +1,8 @@
+export default {
+  qBreadcrumbsStories: {
+    routeA: 'Route A',
+    routeB: 'Route B',
+    routeC: 'Route C',
+    routeD: 'Route D'
+  }
+};

.storybook/locales/index.js

@@ -0,0 +1,17 @@
+import en from './en';
+import ru from './ru';
+import {
+  en as qMessagesEn,
+  ru as qMessagesRu
+} from '../../src/qComponents/constants/locales';
+
+export default {
+  en: {
+    ...en,
+    ...qMessagesEn
+  },
+  ru: {
+    ...ru,
+    ...qMessagesRu
+  }
+};

.storybook/locales/ru.js

@@ -0,0 +1,8 @@
+export default {
+  qBreadcrumbsStories: {
+    routeA: 'Роут А',
+    routeB: 'Очень длинный маршрут Б',
+    routeC: 'Роут С',
+    routeD: 'Роут D'
+  }
+};

.storybook/main.js

@@ -5,6 +5,7 @@ module.exports = {
     '@storybook/addon-docs',
     '@storybook/addon-controls',
     '@storybook/addon-storysource',
-    '@storybook/preset-scss'
+    '@storybook/preset-scss',
+    '@storybook/addon-toolbars'
   ]
 };

.storybook/manager.js

@@ -0,0 +1,6 @@
+import addons from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme
+});

.storybook/preview.js

@@ -1,22 +1,53 @@
 import Vue from 'vue';
-import { addParameters } from '@storybook/vue';
-
 import Qui from '../src/qComponents';
-import theme from './theme';
+import VueI18n from 'vue-i18n';
+import messages from './locales';
 
+Vue.use(VueI18n);
 Vue.use(Qui, {
   localization: {
     locale: 'en'
   }
 });
 
-addParameters({
+export const parameters = {
   layout: 'centered',
   controls: { expanded: true },
-  options: {
-    theme
-  },
   docs: {
     inlineStories: true
   }
+};
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Internationalization locale',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        { value: 'en', right: '🇺🇸', title: 'English' },
+        { value: 'ru', right: '🇷🇺', title: 'Русский' }
+      ]
+    }
+  }
+};
+
+const i18n = new VueI18n({
+  locale: 'en',
+  messages,
+  silentTranslationWarn: true,
+  silentFallbackWarn: true,
+  fallbackRoot: true
 });
+
+export const decorators = [
+  (args, { globals: { locale } }) => ({
+    i18n,
+    beforeCreate: function() {
+      i18n.locale = locale;
+      this.$root._i18n = i18n;
+    },
+    template: '<story />'
+  })
+];

.storybook/theme.js

@@ -2,6 +2,7 @@ import { create } from '@storybook/theming/create';
 import logo from '../.readme-assets/qui-logo.svg';
 
 export default create({
+  name: 'Theme',
   base: 'light',
 
   brandTitle: 'QUI',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qvant/qui",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "private": false,
   "description": "A Vue.js Design system for Web.",
   "author": {
@@ -30,13 +30,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.10.4",
-    "@storybook/addon-controls": "^6.0.21",
-    "@storybook/addon-docs": "^6.0.21",
-    "@storybook/addon-storysource": "^6.0.21",
-    "@storybook/preset-scss": "^1.0.2",
+    "@storybook/addon-controls": "^6.1.10",
+    "@storybook/addon-docs": "^6.1.10",
+    "@storybook/addon-storysource": "^6.1.10",
+    "@storybook/addon-toolbars": "^6.1.11",
+    "@storybook/preset-scss": "^1.0.3",
     "@storybook/storybook-deployer": "^2.8.7",
-    "@storybook/theming": "^6.1.9",
-    "@storybook/vue": "^6.0.21",
+    "@storybook/theming": "^6.1.10",
+    "@storybook/vue": "^6.1.10",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "~4.5.0",
@@ -63,7 +64,7 @@
     "vue-loader": "^15.9.3",
     "vue-template-compiler": "^2.6.11"
   },
-  "_id": "@qvant/[email protected].7",
+  "_id": "@qvant/[email protected].8",
   "bugs": {
     "url": "https://github.com/Qvant-lab/qui/issues"
   },

src/qComponents/QCascader/src/q-cascader.scss

@@ -95,7 +95,7 @@
         }
 
         &::before {
-          font-size: 20px;
+          font-size: 16px;
         }
       }
     }

src/qComponents/QCheckboxGroup/src/QCheckboxGroup.vue

@@ -29,10 +29,25 @@ export default {
       type: Array,
       default: () => []
     },
+    /**
+     * disable all inner QCheckbox'es
+     */
     disabled: { type: Boolean, default: false },
+    /**
+     * minimum checked values
+     */
     min: { type: Number, default: 0 },
+    /**
+     * maximum checked values
+     */
     max: { type: Number, default: Infinity },
+    /**
+     * root tag
+     */
     tag: { type: String, default: 'div' },
+    /**
+     * vertical renders to column, horizontal to row
+     */
     direction: {
       type: String,
       default: 'vertical',

src/qComponents/QDatePicker/src/basic/year-table.vue

@@ -12,7 +12,6 @@
         v-for="(cell, index) in row"
         :key="index"
         class="q-year-table__cell-wrapper"
-        type="button"
         @mousemove="event => handleMouseMove(event, cell)"
         @click="event => handleYearTableClick(event, cell)"
       >

src/qComponents/QDialog/src/QDialog.vue

@@ -75,6 +75,9 @@ export default {
       type: Function,
       default: null
     },
+    /**
+     * pass props to child component
+     */
     componentProps: {
       type: Object,
       default: () => ({})

src/qComponents/QForm/src/QForm.vue

@@ -9,7 +9,7 @@ import { concat } from 'lodash-es';
 
 /**
  * Form consists of `input`, `radio`, `select`, `checkbox` and so on.
- * With form, you can collect, verify and submit data.
+ * With form, you can collect, verify and submit data. You must use QFormItem inside QForm
  */
 export default {
   name: 'QForm',

src/qComponents/QMessageBox/src/QMessageBox.vue

@@ -112,6 +112,9 @@ export default {
       type: String,
       default: ''
     },
+    /**
+     * whether message is treated as HTML string
+     */
     dangerouslyUseHTMLString: {
       type: Boolean,
       default: false
@@ -136,6 +139,9 @@ export default {
       type: Function,
       default: null
     },
+    /**
+     * pass props to child component
+     */
     componentProps: {
       type: Object,
       default: () => ({})

src/qComponents/QPopover/src/QPopover.vue

@@ -117,13 +117,15 @@ export default {
     },
     /**
      * delay before appearing, in milliseconds
+     * (works only when trigger is hover)
      */
     openDelay: {
       type: Number,
       default: 10
     },
     /**
      * delay before disappearing, in milliseconds
+     * (works only when trigger is hover)
      */
     closeDelay: {
       type: Number,

src/qComponents/QScrollbar/src/QScrollbar.vue

@@ -46,27 +46,47 @@ export default {
   components: { QBar },
 
   props: {
+    /**
+     * passing DOM element will scroll content to it (works dynamically)
+     */
     scrollTo: {
       type: HTMLElement,
       default: null
     },
-    native: { type: Boolean, default: false },
+    /**
+     * whether scrollbar is always visible
+     */
     visible: { type: Boolean, default: false },
+    /**
+     * changes style
+     */
     theme: {
       type: String,
       default: 'primary',
       validator: value => ['primary', 'secondary'].includes(value)
     },
+    /**
+     * custom wrapper content class (it helps you to style content)
+     */
     wrapClass: { type: [Object, String, Array], default: '' },
     /**
-     * custom element view tag
+     * custom inner content tag
      */
     viewTag: {
       type: String,
       default: 'div'
     },
+    /**
+     * custom inner content class
+     */
     viewClass: { type: [Object, String, Array], default: '' },
+    /**
+     * custom inner content class
+     */
     viewStyle: { type: Object, default: null },
+    /**
+     * whether is resizeListener will watch for parent
+     */
     noresize: { type: Boolean, default: false }
   },
 
@@ -113,8 +133,6 @@ export default {
   },
 
   mounted() {
-    if (this.native) return;
-
     this.$nextTick(this.update);
 
     if (!this.noresize) {
@@ -124,8 +142,6 @@ export default {
   },
 
   beforeDestroy() {
-    if (this.native) return;
-
     if (!this.noresize) {
       removeResizeListener(this.$refs.resize, this.update);
       removeResizeListener(this.$el.parentNode, this.update);