Make styleguide work for vue components.

All components are now loaded in the styleguide, however to document
them jsdoc comments need to be added and `.md` files for examples. The
Alert component is now documented as an example.

Unfortunately many of our components use axios to access the API
immediately on creation. I'm not sure how to document these. It seems
like a bad thing that they do this...

client/galaxy/scripts/components/Alert.md

@@ -0,0 +1,23 @@
+# Basic alert types
+
+Default alert:
+
+```js
+<Alert>An alert with all defaults</Alert>
+```
+
+Alert variants:
+
+```js
+<div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
+	<Alert v-bind:variant="variant">A {{variant}} message</Alert>
+</div>
+```
+
+Dismissible:
+
+```js
+<div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
+	<Alert :variant="variant" dismissible>A {{variant}} message</Alert>
+</div>
+```

client/galaxy/scripts/components/Alert.vue

@@ -1,5 +1,6 @@
 <template>
     <b-alert :variant="galaxyKwdToBootstrap" :show="showP" v-bind="$props">
+        <!-- @slot Message to display in alert -->
         <slot> {{ message }} </slot>
     </b-alert>
 </template>
@@ -7,21 +8,34 @@
 <script>
 export default {
     props: {
+	/**
+         * Message to display in the alert
+         */
         message: {
             type: String,
             default: ""
         },
+	/**
+         * Alias for variant, takes precedence if both are set
+         */
         status: {
             type: String,
             default: ""
         },
+	/**
+         * Alert type, one of done/success, info, warning, error/danger
+         */
         variant: {
             type: String,
             default: "done"
         },
+	/** Display a close button in the alert that allows it to be dismissed */
         dismissible: Boolean,
+	/** Label for the close button, for aria */
         dismissLabel: String,
+	/** If a number, number of seconds to show before dismissing */
         show: [Boolean, Number],
+	/** Should the alert fade out */
         fade: Boolean
     },
     computed: {

client/styleguide.config.js

@@ -36,30 +36,33 @@ const fileLoaderConfigRule = { rules: [{ test: fileLoaderTest, use: ["file-loade
 webpackConfig.module = merge.smart(webpackConfig.module, fileLoaderConfigRule);
 webpackConfig.output.publicPath = "";
 
-const sections = [];
+webpackConfig.resolve.modules.push( path.join(__dirname, "galaxy/style/scss") );
 
-glob("./galaxy/docs/galaxy-*.md", (err, files) => {
-    files.forEach(file => {
-        const name = file.match(/galaxy-(\w+).md/)[1];
-        sections.push({ name: "Galaxy " + name, content: file });
-    });
-}),
-    sections.push(
-        ...[
-            {
-                name: "Basic Bootstrap Styles",
-                content: "./galaxy/docs/bootstrap.md"
-            }
-            // This will require additional configuration
-            // {
-            //     name: 'Components',
-            //     components: './galaxy/scripts/components/*.vue'
-            // }
-        ]
-    );
+galaxyStyleDocs = []
+glob.sync("./galaxy/docs/galaxy-*.md").forEach(file => {
+    const name = file.match(/galaxy-(\w+).md/)[1];
+    galaxyStyleDocs.push({ name: name, content: file });
+});
+
+const sections = [
+    {
+	name: 'Components',
+	components: './galaxy/scripts/components/**/*.vue'
+    },
+    {
+	name: 'Galaxy styles',
+	sections: galaxyStyleDocs
+    },
+    {
+	name: "Basic Bootstrap Styles",
+	content: "./galaxy/docs/bootstrap.md"
+    }
+];
 
 module.exports = {
     webpackConfig,
+    pagePerSection: true,
     sections,
-    require: ["./galaxy/style/scss/base.scss"]
+    require: ["./galaxy/style/scss/base.scss", "./galaxy/scripts/polyfills.js", "./galaxy/scripts/bundleEntries.js"],
+    vuex: "./galaxy/scripts/store/index.js"
 };