diff --git a/.eslintignore b/.eslintignore
index 212d41268..5a35b1183 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,4 @@
node_modules
/index.js
-!/.storybook
+.storybook/*
src/atoms/icon/templates/*
diff --git a/.node-version b/.node-version
index 6695c0939..21cce914a 100644
--- a/.node-version
+++ b/.node-version
@@ -1 +1 @@
->=10.0.0 <=11.1.0
+>=12.13.0 <13.0.0
diff --git a/.storybook/addons.js b/.storybook/addons.js
deleted file mode 100644
index 563a43b8e..000000000
--- a/.storybook/addons.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import 'storybook-addon-vue-info/lib/register'
-import '@storybook/addon-knobs/register'
-import '@storybook/addon-actions/register'
-import '@storybook/addon-a11y/register'
diff --git a/.storybook/config.js b/.storybook/config.js
deleted file mode 100644
index 2666c0b51..000000000
--- a/.storybook/config.js
+++ /dev/null
@@ -1,45 +0,0 @@
-// Storybook
-import { configure, addDecorator, addParameters } from '@storybook/vue'
-
-// Polyfills
-import 'focus-visible'
-import 'svgxuse'
-
-// Addons
-import { withInfo } from 'storybook-addon-vue-info'
-import { withA11y } from '@storybook/addon-a11y'
-import { withKnobs } from '@storybook/addon-knobs'
-
-// Wrap every story in Alpaca App component
-import AApp from '../src/atoms/app/App.vue'
-
-addDecorator(withInfo)
-addDecorator(withA11y)
-addDecorator(withKnobs)
-addDecorator(() => ({
- components: {
- AApp
- },
- template: `
-
-
-
- `
-}))
-
-addParameters({
- options: {
- theme: {
- brandTitle: 'Alpaca UI',
- brandImage: 'assets/icons/alpaca.svg',
- brandUrl: 'https://github.com/SnowdogApps/alpaca-ui'
- }
- }
-})
-
-function loadStories () {
- const req = require.context('../src/atoms/', true, /.stories.js$/)
- req.keys().forEach(filename => req(filename))
-}
-
-configure(loadStories, module)
diff --git a/.storybook/main.js b/.storybook/main.js
new file mode 100644
index 000000000..cd7dca653
--- /dev/null
+++ b/.storybook/main.js
@@ -0,0 +1,12 @@
+const path = require('path');
+
+module.exports = {
+ stories: ['../src/**/*.stories.@(js|mdx)'],
+ addons: [
+ '@storybook/addon-docs',
+ '@storybook/addon-a11y',
+ '@storybook/addon-storysource',
+ '@storybook/addon-knobs',
+ '@storybook/addon-actions'
+ ]
+}
diff --git a/.storybook/manager.js b/.storybook/manager.js
new file mode 100644
index 000000000..44979a7ca
--- /dev/null
+++ b/.storybook/manager.js
@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+ base: 'light',
+ brandTitle: 'Alpaca UI',
+ brandImage: 'assets/icons/alpaca.svg',
+ brandUrl: 'https://github.com/SnowdogApps/alpaca-ui'
+})
diff --git a/.storybook/preview.js b/.storybook/preview.js
new file mode 100644
index 000000000..d2eedb67b
--- /dev/null
+++ b/.storybook/preview.js
@@ -0,0 +1,27 @@
+import { addDecorator, addParameters } from '@storybook/vue'
+
+import 'focus-visible'
+import 'svgxuse'
+
+import { withA11y } from '@storybook/addon-a11y'
+import { withKnobs } from '@storybook/addon-knobs'
+
+// Wrap every story in Alpaca App component
+import AApp from '../src/atoms/app/App.vue'
+
+addDecorator(withA11y)
+addDecorator(withKnobs)
+addDecorator(() => ({
+ components: { AApp },
+ template: `
+
+
+
+ `
+}))
+
+addParameters({
+ docs: {
+ iframeHeight: '60px'
+ }
+});
diff --git a/.storybook/webpack.config.js b/.storybook/webpack.config.js
index 6e7236ff6..24bd09204 100644
--- a/.storybook/webpack.config.js
+++ b/.storybook/webpack.config.js
@@ -2,12 +2,6 @@ const StyleLintPlugin = require('stylelint-webpack-plugin')
const path = require('path')
module.exports = ({ config }) => {
- config.module.rules.push({
- test: /\.vue$/,
- loader: 'storybook-addon-vue-info/loader',
- enforce: 'post'
- })
-
config.module.rules.push({
test: /\.scss$/,
use: [
@@ -17,7 +11,6 @@ module.exports = ({ config }) => {
]
})
- /* PostCSS Support */
config.module.rules.push({
test: /\.scss$/,
use: [
diff --git a/package.json b/package.json
index b77db85be..8f3aac2fa 100644
--- a/package.json
+++ b/package.json
@@ -22,10 +22,12 @@
"vue-slider-component": "^3.0.40"
},
"devDependencies": {
- "@storybook/addon-a11y": "^5.3.17",
- "@storybook/addon-actions": "^5.3.17",
- "@storybook/addon-knobs": "^5.3.17",
- "@storybook/vue": "^5.3.17",
+ "@storybook/addon-a11y": "6.0.0-beta.31",
+ "@storybook/addon-actions": "6.0.0-beta.31",
+ "@storybook/addon-docs": "6.0.0-beta.31",
+ "@storybook/addon-knobs": "6.0.0-beta.31",
+ "@storybook/addon-storysource": "6.0.0-beta.31",
+ "@storybook/vue": "6.0.0-beta.31",
"@vue/babel-preset-app": "^3.11.0",
"@vue/test-utils": "^1.0.0-beta.29",
"babel-core": "^6.26.3",
diff --git a/src/atoms/button/Button.html b/src/atoms/button/Button.html
index f4178bb0c..203942c45 100644
--- a/src/atoms/button/Button.html
+++ b/src/atoms/button/Button.html
@@ -1,6 +1,8 @@