feat: update sys-form-button styles (#7)

* feat: add button direction and new storybook example

* fix: update spacing between two children in a sys-form-button

* docs: use storybook docs for documentation

* fix: update line-height of sys-form-button

.storybook/main.js

@@ -1,9 +1,11 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
+  stories: ['../src/**/*.stories.(js|mdx)'],
   addons: [
     '@storybook/addon-a11y/register',
     '@storybook/addon-backgrounds/register',
+    '@storybook/addon-docs',
     '@storybook/addon-knobs/register',
-    '@storybook/addon-viewport/register'
+    '@storybook/addon-viewport/register',
+    'storybook-addon-vue-info/lib/register'
   ]
 };

.storybook/preview.js

@@ -4,11 +4,13 @@ import '../src/assets/styles/main.css'
 import centered from '@storybook/addon-centered/vue'
 import { withA11y } from '@storybook/addon-a11y'
 import { addDecorator, addParameters } from '@storybook/vue'
+import { withInfo } from 'storybook-addon-vue-info'
 
 import { theme } from './theme'
 
 addDecorator(centered)
 addDecorator(withA11y)
+addDecorator(withInfo)
 addParameters({
   options: { theme }
 })

.storybook/webpack.config.js

@@ -1,6 +1,12 @@
 const { resolve } = require('path')
 
 module.exports = async ({ config, mode }) => {
+  config.module.rules.push({
+    test: /\.vue$/,
+    loader: 'vue-docgen-loader',
+    enforce: 'post'
+  })
+
   const cssRule = config.module.rules.find((rule) => {
     return rule.test.test('main.css')
   })

README.md

@@ -72,6 +72,17 @@ build: {
 
 5) Start hacking
 
+### Documenting
+
+We use styleguide to document our components. Please write your own stories
+and documentation in markdown format like the other `.mdx` files. Along with
+storybook, we also use styleguidist for documentation in the component file.
+This gets outputted in the form of nice prop tables in storybook. Here are some
+resources on how to get started:
+
+- [Storybook markdown syntax](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/mdx.md)
+- [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#full-example)
+
 ## Deployment
 
 To [trigger a release](https://semantic-release.gitbook.io/semantic-release/#triggering-a-release),