Merge pull request #8291 from jxtx/styleguide-components

Make styleguide work for vue components.

client/galaxy/scripts/components/Alert.md

@@ -0,0 +1,21 @@
+### 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/galaxy/scripts/components/Tags/StatelessTags.md

@@ -0,0 +1,11 @@
+### Default behavior with four simple tags
+
+```js
+<StatelessTags :value="['foo', 'bar', 'baz', 'quux']" />
+```
+
+### Limiting maximum tags to two
+
+```js
+<StatelessTags :value="['foo', 'bar', 'baz', 'quux']" maxVisibleTags=2 />
+```

client/styleguide.config.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const glob = require("glob");
+const fs = require("fs");
 const merge = require("webpack-merge");
 
 let webpackConfig = require("./webpack.config.js");
@@ -36,30 +37,43 @@ 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 that are directories will get their own section
+	sections: glob.sync("./galaxy/scripts/components/*").map(file => {
+	    if (fs.lstatSync(file).isDirectory()) {
+		return {
+		    name: path.basename(file),
+		    components: file + "/**/*.vue"
+		};
+	    }
+	}).filter( v => v ),
+	// ...while top level components are handled here.
+	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"
 };