From 7470fd78703a20d631992d8e033d681f6f429760 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Fri, 17 May 2019 13:01:08 +0100
Subject: [PATCH 1/4] Configure Gatsby to Ignore Storybook and package source
 files

---
 tools/x-docs/gatsby-config.js                    | 5 ++++-
 tools/x-docs/src/lib/create-npm-package-pages.js | 5 ++++-
 tools/x-docs/src/lib/decorate-nodes.js           | 9 ++++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/tools/x-docs/gatsby-config.js b/tools/x-docs/gatsby-config.js
index cb35d20d3..fd2ed24c7 100644
--- a/tools/x-docs/gatsby-config.js
+++ b/tools/x-docs/gatsby-config.js
@@ -26,7 +26,10 @@ module.exports = {
 			resolve: 'gatsby-source-filesystem',
 			options: {
 				name: 'components',
-				path: '../../components'
+				path: '../../components',
+				// Don't attempt to load any Storybook or source files, as these may
+				// contain syntax and/or features we cannot parse.
+				ignore: [/stories/, /src/]
 			},
 		},
 		{
diff --git a/tools/x-docs/src/lib/create-npm-package-pages.js b/tools/x-docs/src/lib/create-npm-package-pages.js
index a8e5cba60..983c3f92b 100644
--- a/tools/x-docs/src/lib/create-npm-package-pages.js
+++ b/tools/x-docs/src/lib/create-npm-package-pages.js
@@ -1,3 +1,4 @@
+const fs = require('fs');
 const path = require('path');
 
 module.exports = async (actions, graphql) => {
@@ -9,6 +10,7 @@ module.exports = async (actions, graphql) => {
 						name
 						manifest
 						fields {
+							dir
 							slug
 							source
 						}
@@ -37,8 +39,9 @@ module.exports = async (actions, graphql) => {
 				source: node.fields.source,
 				packageName: node.manifest.name,
 				packageDescription: node.manifest.description,
+				// Flag if Storybook demos are available for this package
+				storybook: fs.existsSync(path.join(node.fields.dir, 'stories', 'index.js')),
 				// Associate readme and story nodes via slug
-				storiesPath: path.join(pagePath, 'stories'),
 				packagePath: path.join(pagePath, 'package'),
 				readmePath: path.join(pagePath, 'readme')
 			}
diff --git a/tools/x-docs/src/lib/decorate-nodes.js b/tools/x-docs/src/lib/decorate-nodes.js
index bb9ab50d1..1b162c1f5 100644
--- a/tools/x-docs/src/lib/decorate-nodes.js
+++ b/tools/x-docs/src/lib/decorate-nodes.js
@@ -1,6 +1,6 @@
 const path = require('path');
 
-const nodeTypesToSlug = new Set(['MarkdownRemark', 'NpmPackage', 'Stories']);
+const nodeTypesToSlug = new Set(['MarkdownRemark', 'NpmPackage']);
 
 const repoRoot = path.resolve('../../');
 
@@ -17,12 +17,19 @@ module.exports = (node, actions, getNode) => {
 		const file = getNode(node.parent);
 
 		// Group files by source type (currently: docs, components, packages)
+		// "Source" meaning the name of the filesystem plugin instance
 		actions.createNodeField({
 			node,
 			name: 'source',
 			value: file.sourceInstanceName
 		});
 
+		actions.createNodeField({
+			node,
+			name: 'dir',
+			value: file.dir
+		});
+
 		actions.createNodeField({
 			node,
 			name: 'slug',

From 17c698d4fee6642513bdddcc687b247d82055df0 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Fri, 17 May 2019 13:02:54 +0100
Subject: [PATCH 2/4] Remove story selector tabs from package story viewer
 component

---
 .../src/components/story-viewer/index.jsx     | 58 +++++--------------
 tools/x-docs/static/main.css                  | 29 ----------
 2 files changed, 14 insertions(+), 73 deletions(-)

diff --git a/tools/x-docs/src/components/story-viewer/index.jsx b/tools/x-docs/src/components/story-viewer/index.jsx
index 109e1380b..ab8044b92 100644
--- a/tools/x-docs/src/components/story-viewer/index.jsx
+++ b/tools/x-docs/src/components/story-viewer/index.jsx
@@ -1,52 +1,22 @@
 import React from 'react';
 import { withPrefix } from 'gatsby';
 
-class StoryViewer extends React.Component {
-	constructor(props) {
-		super(props);
+const StoryViewer = ({ name }) => {
+	const queryString = `?path=/story/${name}--*`;
+	const iframeUrl = withPrefix(`/storybook/iframe.html${queryString}`);
+	const linkUrl = withPrefix(`/storybook/index.html${queryString}`);
 
-		this.state = {
-			selected: 0
-		};
-	}
-
-	onClick(index) {
-		if (this.state.selected !== index) {
-			this.setState({ selected: index });
-		}
-	}
-
-	render() {
-		const story = this.props.stories[this.state.selected];
-		const queryString = `?selectedKind=${this.props.name}&selectedStory=${story}`;
-		const iframeUrl = withPrefix(`/storybook/iframe.html${queryString}`);
-		const linkUrl = withPrefix(`/storybook/index.html${queryString}`);
-
-		return (
-			<div id="component-demos" className="story-viewer">
-				<h2 className="story-viewer__heading">Component demos</h2>
-				<ul className="story-viewer__list" role="tablist">
-					{this.props.stories.map((story, i) => (
-						<li key={`story-${i}`} className="story-viewer__item">
-							<button
-								role="tab"
-								className="story-viewer__button"
-								aria-selected={this.state.selected === i}
-								onClick={this.onClick.bind(this, i)}>
-								{story}
-							</button>
-						</li>
-					))}
-				</ul>
-				<div className="story-viewer__panel" role="tabpanel">
-					<iframe title={`${story} demo`} src={iframeUrl}></iframe>
-				</div>
-				<p className="story-viewer__footer">
-					<a href={linkUrl}>View in Storybook</a>
-				</p>
+	return (
+		<div id="component-demos" className="story-viewer">
+			<h2 className="story-viewer__heading">Component demos</h2>
+			<div className="story-viewer__panel">
+				<iframe title={`${name} demo`} src={iframeUrl}></iframe>
 			</div>
-		);
-	}
+			<p className="story-viewer__footer">
+				<a href={linkUrl}>View in Storybook</a>
+			</p>
+		</div>
+	)
 }
 
 export default StoryViewer;
diff --git a/tools/x-docs/static/main.css b/tools/x-docs/static/main.css
index cd809c1e4..485faa001 100644
--- a/tools/x-docs/static/main.css
+++ b/tools/x-docs/static/main.css
@@ -681,35 +681,6 @@ td:first-child {
 	padding-left: 0;
 }
 
-.story-viewer__item {
-	margin-left: 0.5rem;
-}
-
-.story-viewer__item:first-child {
-	margin-left: 0;
-}
-
-.story-viewer__button {
-	padding: 0.25rem 0.5rem;
-	font: inherit;
-	font-size: 0.95rem;
-	border: 1px solid;
-	color: var(--o-colors-oxford);
-	background: none;
-	cursor: pointer;
-}
-
-.story-viewer__button:hover,
-.story-viewer__button:focus {
-	color: var(--o-colors-oxford-100);
-}
-
-.story-viewer__button[aria-selected=true] {
-	border: 1px solid transparent;
-	color: var(--o-colors-white);
-	background: var(--o-colors-oxford);
-}
-
 .story-viewer__panel {
 	height: 20rem;
 	resize: vertical;

From 45c5ddb2789fb2582a288d620c7b3cadacf0f458 Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Fri, 17 May 2019 13:16:15 +0100
Subject: [PATCH 3/4] Update package page links to link to the first available
 component story

---
 tools/x-docs/src/components/tertiary/links.jsx |  2 +-
 tools/x-docs/src/templates/npm-package.jsx     | 13 ++++---------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/tools/x-docs/src/components/tertiary/links.jsx b/tools/x-docs/src/components/tertiary/links.jsx
index f1ed0c28b..f7f2c6891 100644
--- a/tools/x-docs/src/components/tertiary/links.jsx
+++ b/tools/x-docs/src/components/tertiary/links.jsx
@@ -22,7 +22,7 @@ export default ({ name, manifest, storybook }) => (
 			</li>
 			{storybook ? (
 				<li className="tertiary-menu__item">
-					<Link to={`/storybook/index.html?selectedKind=${name}`} {...linkProps}>
+					<Link to={`/storybook/index.html?path=/story/${name}--*`} {...linkProps}>
 						Storybook
 					</Link>
 				</li>
diff --git a/tools/x-docs/src/templates/npm-package.jsx b/tools/x-docs/src/templates/npm-package.jsx
index 0be87644a..a4d8b701f 100644
--- a/tools/x-docs/src/templates/npm-package.jsx
+++ b/tools/x-docs/src/templates/npm-package.jsx
@@ -20,9 +20,7 @@ export default ({ pageContext, data, location }) => (
 			<main className="content-layout__main" role="main">
 				<div className="content-layout__main-inner">
 					<div className="markdown" dangerouslySetInnerHTML={{ __html: data.markdown.html }} />
-					{data.storybook ? (
-						<StoryViewer name={pageContext.title} stories={data.storybook.stories} />
-					) : null}
+					{pageContext.storybook ? <StoryViewer name={pageContext.title} /> : null}
 				</div>
 			</main>
 			<div className="content-layout__tertiary">
@@ -30,9 +28,9 @@ export default ({ pageContext, data, location }) => (
 					<Links
 						name={pageContext.title}
 						manifest={data.npm.manifest}
-						storybook={Boolean(data.storybook)}
+						storybook={pageContext.storybook}
 					/>
-					<Subheadings items={data.markdown.headings} demos={Boolean(data.storybook)} />
+					<Subheadings items={data.markdown.headings} demos={pageContext.storybook} />
 				</div>
 			</div>
 		</div>
@@ -40,7 +38,7 @@ export default ({ pageContext, data, location }) => (
 );
 
 export const pageQuery = graphql`
-	query($type: String!, $packagePath: String!, $readmePath: String!, $storiesPath: String!) {
+	query($type: String!, $packagePath: String!, $readmePath: String!) {
 		npm: npmPackage(fields: { slug: { eq: $packagePath } }) {
 			manifest
 		}
@@ -51,9 +49,6 @@ export const pageQuery = graphql`
 				depth
 			}
 		}
-		storybook: stories(fields: { slug: { eq: $storiesPath } }) {
-			stories
-		}
 		modules: allSitePage(filter: { context: { type: { eq: $type } } }) {
 			edges {
 				node {

From 93c645bd556d0c6ddf19324d8111b75873f2300e Mon Sep 17 00:00:00 2001
From: Matt Hinchliffe <matt.hinchliffe@ft.com>
Date: Fri, 17 May 2019 13:34:29 +0100
Subject: [PATCH 4/4] Refactor npm package page generator to use default file
 node information

---
 tools/x-docs/src/lib/create-npm-package-pages.js | 5 +++--
 tools/x-docs/src/lib/decorate-nodes.js           | 6 ------
 2 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/tools/x-docs/src/lib/create-npm-package-pages.js b/tools/x-docs/src/lib/create-npm-package-pages.js
index 983c3f92b..cd331da56 100644
--- a/tools/x-docs/src/lib/create-npm-package-pages.js
+++ b/tools/x-docs/src/lib/create-npm-package-pages.js
@@ -9,8 +9,8 @@ module.exports = async (actions, graphql) => {
 					node {
 						name
 						manifest
+						fileAbsolutePath
 						fields {
-							dir
 							slug
 							source
 						}
@@ -27,6 +27,7 @@ module.exports = async (actions, graphql) => {
 	result.data.npmPackages.edges.map(({ node }) => {
 		// Package manifest slug will be /package so remove it
 		const pagePath = path.dirname(node.fields.slug);
+		const relPath = path.dirname(node.fileAbsolutePath);
 
 		actions.createPage({
 			component: path.resolve('src/templates/npm-package.jsx'),
@@ -40,7 +41,7 @@ module.exports = async (actions, graphql) => {
 				packageName: node.manifest.name,
 				packageDescription: node.manifest.description,
 				// Flag if Storybook demos are available for this package
-				storybook: fs.existsSync(path.join(node.fields.dir, 'stories', 'index.js')),
+				storybook: fs.existsSync(path.join(relPath, 'stories', 'index.js')),
 				// Associate readme and story nodes via slug
 				packagePath: path.join(pagePath, 'package'),
 				readmePath: path.join(pagePath, 'readme')
diff --git a/tools/x-docs/src/lib/decorate-nodes.js b/tools/x-docs/src/lib/decorate-nodes.js
index 1b162c1f5..6de6662c3 100644
--- a/tools/x-docs/src/lib/decorate-nodes.js
+++ b/tools/x-docs/src/lib/decorate-nodes.js
@@ -24,12 +24,6 @@ module.exports = (node, actions, getNode) => {
 			value: file.sourceInstanceName
 		});
 
-		actions.createNodeField({
-			node,
-			name: 'dir',
-			value: file.dir
-		});
-
 		actions.createNodeField({
 			node,
 			name: 'slug',