From 2ccf36626a39a236c48e11c432509034cd4cbf06 Mon Sep 17 00:00:00 2001
From: James Taylor <james@jamestaylor.org>
Date: Sun, 7 Jul 2019 19:05:23 +0200
Subject: [PATCH] Better organization in styleguide.

---
 client/galaxy/scripts/components/Alert.md           |  8 +++-----
 .../galaxy/scripts/components/Tags/StatelessTags.md | 11 +++++++++++
 client/styleguide.config.js                         | 13 ++++++++++++-
 3 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 client/galaxy/scripts/components/Tags/StatelessTags.md

diff --git a/client/galaxy/scripts/components/Alert.md b/client/galaxy/scripts/components/Alert.md
index 2e578282be3..021efd67e56 100644
--- a/client/galaxy/scripts/components/Alert.md
+++ b/client/galaxy/scripts/components/Alert.md
@@ -1,12 +1,10 @@
-# Basic alert types
-
-Default alert:
+### Default alert
 
 ```js
 <Alert>An alert with all defaults</Alert>
 ```
 
-Alert variants:
+### Alert variants
 
 ```js
 <div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
@@ -14,7 +12,7 @@ Alert variants:
 </div>
 ```
 
-Dismissible:
+### Dismissible
 
 ```js
 <div v-for="variant in [ 'success', 'info', 'warning', 'error' ]">
diff --git a/client/galaxy/scripts/components/Tags/StatelessTags.md b/client/galaxy/scripts/components/Tags/StatelessTags.md
new file mode 100644
index 00000000000..916362b0f33
--- /dev/null
+++ b/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 />
+```
diff --git a/client/styleguide.config.js b/client/styleguide.config.js
index 34a66424b2e..d3d7d64d7e9 100644
--- a/client/styleguide.config.js
+++ b/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");
@@ -47,7 +48,17 @@ glob.sync("./galaxy/docs/galaxy-*.md").forEach(file => {
 const sections = [
     {
 	name: 'Components',
-	components: './galaxy/scripts/components/**/*.vue'
+	// 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',