Merge pull request #225 from Financial-Times/css-fix

Fix layout issue now we have 1 extra item
Financial-Times · Dec 3, 2018 · 145e87e · 145e87e
2 parents 206258d + 3fe649d
commit 145e87e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 17 deletions.
diff --git a/tools/x-docs/src/components/story-viewer/index.jsx b/tools/x-docs/src/components/story-viewer/index.jsx
@@ -25,18 +25,19 @@ class StoryViewer extends React.Component {
 		return (
 			<div id="component-demos" className="story-viewer">
 				<h2 className="story-viewer__heading">Component demos</h2>
-				<div className="story-viewer__list" role="tablist">
+				<ul className="story-viewer__list" role="tablist">
 					{this.props.stories.map((story, i) => (
-						<button
-							key={`story-${i}`}
-							role="tab"
-							className="story-viewer__item"
-							aria-selected={this.state.selected === i}
-							onClick={this.onClick.bind(this, i)}>
-							{story}
-						</button>
+						<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>
 					))}
-				</div>
+				</ul>
 				<div className="story-viewer__panel" role="tabpanel">
 					<iframe title={`${story} demo`} src={iframeUrl}></iframe>
 				</div>

diff --git a/tools/x-docs/static/main.css b/tools/x-docs/static/main.css
@@ -676,27 +676,35 @@ td:first-child {
 
 .story-viewer__list {
 	margin: 1.5rem 0;
+	display: flex;
+	list-style: none;
+	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__item:hover,
-.story-viewer__item:focus {
+.story-viewer__button:hover,
+.story-viewer__button:focus {
 	color: var(--o-colors-oxford-100);
 }
 
-.story-viewer__item:first-child {
-	margin-left: 0;
-}
-
-.story-viewer__item[aria-selected=true] {
+.story-viewer__button[aria-selected=true] {
 	border: 1px solid transparent;
 	color: var(--o-colors-white);
 	background: var(--o-colors-oxford);