Feature/57781

.eslintignore

@@ -1,4 +1,4 @@
 node_modules
 /index.js
-!/.storybook
+.storybook/*
 src/atoms/icon/templates/*

.node-version

@@ -1 +1 @@
->=10.0.0 <=11.1.0
+>=12.13.0 <13.0.0

.storybook/main.js

@@ -0,0 +1,20 @@
+const path = require('path');
+
+module.exports = {
+  stories: ['../src/**/*.stories.js'],
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-knobs',
+    '@storybook/addon-actions',
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        vueDocgenOptions: {
+          alias: {
+            '@': path.resolve(__dirname, '../')
+          },
+        },
+      },
+    },
+  ]
+}

.storybook/config.js → .storybook/preview.js

@@ -1,21 +1,16 @@
-// Storybook
-import { configure, addDecorator, addParameters } from '@storybook/vue'
-
-// Polyfills
-import 'focus-visible'
-import 'svgxuse'
-
-// Addons
-import { withInfo } from 'storybook-addon-vue-info'
+import { addDecorator, addParameters } from '@storybook/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { withKnobs } from '@storybook/addon-knobs'
 
-// Wrap every story in Alpaca App component
 import AApp from '../src/templates/app/App.vue'
 
-addDecorator(withInfo)
+// Polyfills
+import 'focus-visible'
+import 'svgxuse'
+
 addDecorator(withA11y)
 addDecorator(withKnobs)
+
 addDecorator(() => ({
   components: {
     AApp
@@ -36,10 +31,3 @@ addParameters({
     }
   }
 })
-
-function loadStories () {
-  const req = require.context('../src', true, /.stories.js$/)
-  req.keys().forEach(filename => req(filename))
-}
-
-configure(loadStories, module)

.storybook/webpack.config.js

@@ -2,18 +2,6 @@ const StyleLintPlugin = require('stylelint-webpack-plugin')
 const path = require('path')
 
 module.exports = ({ config }) => {
-  config.module.rules.push({
-    test: /\.stories\.jsx?$/,
-    loaders: [require.resolve('@storybook/addon-storysource/loader')],
-    enforce: 'pre'
-  })
-
-  config.module.rules.push({
-    test: /\.vue$/,
-    loader: 'storybook-addon-vue-info/loader',
-    enforce: 'post'
-  })
-
   config.module.rules.push({
     test: /\.scss$/,
     use: [
@@ -26,6 +14,7 @@ module.exports = ({ config }) => {
   config.module.rules.push({
     enforce: 'pre',
     test: /\.(js|vue)$/,
+    exclude: /node_modules/,
     loader: 'eslint-loader'
   })
 

package.json

@@ -13,49 +13,34 @@
     "codcov": "./node_modules/codcov/bin/codcov"
   },
   "dependencies": {
+    "focus-visible": "^5.0.2",
     "normalize.css": "^8.0.1",
-    "vue": "^2.6.8",
+    "vue": "^2.6.11",
     "vue-carousel": "^0.18.0-alpha",
     "vue-router": "^3.1.3",
     "vue-slider-component": "^3.0.40"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^5.2.1",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-knobs": "^5.2.1",
-    "@storybook/addon-notes": "^5.2.1",
-    "@storybook/addon-storysource": "^5.2.1",
-    "@storybook/addon-viewport": "5.2.1",
-    "@storybook/addons": "5.2.1",
-    "@storybook/vue": "^5.2.1",
-    "@vue/babel-preset-app": "^3.11.0",
-    "@vue/test-utils": "^1.0.0-beta.29",
-    "babel-core": "^6.26.3",
+    "@babel/core": "^7.9.0",
+    "@storybook/addon-a11y": "^5.3.17",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-docs": "^5.3.17",
+    "@storybook/addon-knobs": "^5.3.17",
+    "@storybook/vue": "^5.3.17",
+    "babel-loader": "^8.1.0",
     "babel-eslint": "^10.0.3",
-    "babel-jest": "^24.9.0",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-preset-env": "^1.7.0",
     "babel-preset-vue": "^2.0.2",
-    "codecov": "^3.5.0",
     "css-loader": "^3.2.0",
     "eslint": "^6.4.0",
     "eslint-config-standard": "^14.1.0",
-    "eslint-loader": "3.0.0",
+    "eslint-loader": "3.0.2",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^5.2.3",
-    "focus-visible": "^5.0.2",
-    "fs-extra": "^8.1.0",
-    "glob": "^7.1.4",
-    "jest": "^24.9.0",
-    "jest-vue-preprocessor": "^1.5.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^8.0.0",
-    "storybook-addon-vue-info": "^1.3.1",
-    "storybook-readme": "^5.0.8",
     "storybook-vue-router": "^1.0.7",
     "stylelint": "^11.0.0",
     "stylelint-config-rational-order": "^0.1.2",
@@ -64,8 +49,7 @@
     "stylelint-webpack-plugin": "^0.10.5",
     "svgxuse": "^1.2.6",
     "vue-eslint-parser": "^6.0.4",
-    "vue-loader": "^15.7.1",
-    "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.8"
+    "vue-loader": "^15.9.1",
+    "vue-template-compiler": "^2.6.11"
   }
 }

src/atoms/button/Button.stories.js

@@ -1,54 +1,54 @@
-import { storiesOf } from '@storybook/vue'
 import { select, text } from '@storybook/addon-knobs'
 
-import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
+// import generateVueInfoTable from '@utils/helpers/generate-vue-info-table.js'
 import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
 import selectorsConfig from './Button.selectors.json'
 
 import AButton from './Button.vue'
 import AIcon from '../icon/Icon.vue'
 import AIconSearch from '../icon/templates/IconSearch.vue'
 
-const info = `
-  <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p><br>
-  ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
-`
+// const info = `
+//   <p>Check <b>Knobs</b> tab to edit component properties dynamically.</p><br>
+//   ${generateVueInfoTable(selectorsConfig, 'BEM modifiers')}
+// `
 
 const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
 
-storiesOf('Atoms/Button', module)
-  .addParameters({ info })
-  .add('Default', () => ({
-    components: { AButton },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      },
-      textKnobs: {
-        default: text('Text', 'Button text')
-      }
-    },
-    template: `
-      <a-button :class="classKnobs">
-        {{ textKnobs }}
-      </a-button>
-    `
-  }))
-  .add('With slot', () => ({
-    components: { AButton, AIcon, AIconSearch },
-    props: {
-      classKnobs: {
-        default: select('BEM Modifier', classKnobsConfig)
-      }
+export default { title: 'Button' }
+
+export const Default = () => ({
+  components: { AButton },
+  props: {
+    classKnobs: {
+      default: select('BEM Modifier', classKnobsConfig)
     },
-    template: `
-      <a-button
-        :class="classKnobs"
-        style="padding: 0;"
-      >
-        <a-icon title="Search icon">
-          <a-icon-search />
-        </a-icon>
-      </a-button>
-    `
-  }))
+    textKnobs: {
+      default: text('Text', 'Button text')
+    }
+  },
+  template: `
+    <a-button :class="classKnobs">
+      {{ textKnobs }}
+    </a-button>
+  `
+})
+
+export const WithIcon = () => ({
+  components: { AButton, AIcon, AIconSearch },
+  props: {
+    classKnobs: {
+      default: select('BEM Modifier', classKnobsConfig)
+    }
+  },
+  template: `
+    <a-button
+      :class="classKnobs"
+      style="padding: 0;"
+    >
+      <a-icon title="Search icon">
+        <a-icon-search />
+      </a-icon>
+    </a-button>
+  `
+})

src/atoms/button/Button.vue

@@ -5,7 +5,6 @@ import AButton from './Button.js'
 
 export default {
   name: 'AlpacaButton',
-
   mixins: [AButton]
 }
 </script>

src/atoms/fieldset/Fieldset.scss

@@ -1,6 +1,7 @@
 @import '../../../assets/styles/_globals.scss';
 
 $fieldset__border            : none !default;
+
 $fieldset__legend-margin     : 0 0 25px !default;
 $fieldset__legend-font-size  : $font-size-large !default;
 $fieldset__legend-line-height: 1.2 !default;