p

package.json

@@ -1,7 +1,7 @@
 {
   "name": "policygenius-react-styleguidist",
   "description": "React components style guide generator",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "homepage": "https://github.com/styleguidist/react-styleguidist",
   "author": {
     "name": "Policygenius",

src/rsg-components/ComponentsList/ComponentsListRenderer.js

@@ -47,7 +47,9 @@ export function ComponentsListRenderer({ classes, items }) {
 					className={cx(classes.item, (!content || !content.props.items.length) && classes.isChild)}
 					key={name}
 				>
-					<Link className={cx(heading && classes.heading)} href={`#${slug}`}>{name}</Link>
+					<Link className={cx(heading && (classes.heading, 'toc-header'))} href={`#${slug}`}>
+						{name}
+					</Link>
 					{content}
 				</li>
 			))}

src/rsg-components/Playground/PlaygroundRenderer.js

@@ -51,7 +51,7 @@ const styles = ({ space, color, fontFamily, fontSize, borderRadius }) => ({
 	},
 	isolatedLink: {
 		position: 'absolute',
-		top: '1.8rem',
+		top: '-1.8rem',
 		right: 0,
 		padding: [[space[0], space[1]]],
 		fontFamily: fontFamily.base,

src/rsg-components/Section/SectionRenderer.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Styled from 'rsg-components/Styled';
 import Heading from 'rsg-components/Heading';
 import Link from 'rsg-components/Link';
@@ -19,7 +20,7 @@ const styles = ({ space, fontFamily, fontSize }) => ({
 	},
 	isolatedLink: {
 		position: 'absolute',
-		top: '-1.8rem',
+		top: '0',
 		right: 0,
 		fontFamily: fontFamily.base,
 		fontSize: fontSize.base,
@@ -42,7 +43,7 @@ export function SectionRenderer({
 }) {
 	return (
 		<section className={classes.root}>
-			<div className={classes.titleWrapper}>
+			<div className={cx(classes.titleWrapper, 'title-wrapper')}>
 				{name && <Heading level={1} slug={slug} className={classes.heading}>{name}</Heading>}
 				<div className={classes.isolatedLink}>
 					{name &&

src/rsg-components/Sections/Sections.js

@@ -6,7 +6,13 @@ import SectionsRenderer from 'rsg-components/Sections/SectionsRenderer';
 export default function Sections({ sections }) {
 	return (
 		<SectionsRenderer>
-			{sections.map((section, idx) => <Section key={idx} section={section} />)}
+			{sections.map((section, idx) => {
+				if (section.sections.length || section.components.length) {
+					return <Section key={idx} section={section} />;
+				}
+
+				return null;
+			})}
 		</SectionsRenderer>
 	);
 }

src/rsg-components/TableOfContents/TableOfContentsRenderer.js

@@ -27,8 +27,32 @@ const styles = ({ space, color, fontFamily, fontSize, borderRadius }) => ({
 			outline: 0,
 		},
 	},
+	tocFooter: {
+		color: '#fff',
+		paddingLeft: '1rem',
+		fontSize: 'small',
+		paddingBottom: '1rem',
+	},
+	link: {
+		color: '#fff',
+		fontSize: 'small',
+	},
 });
 
+function renderTOCFooter(classes) {
+	const year = new Date().getFullYear();
+
+	return (
+		<div className={classes.tocFooter}>
+			<p><a className={classes.link} href="https://github.com/policygenius/athenaeum">GitHub</a></p>
+			<p><a className={classes.link} href="https://www.npmjs.com/package/athenaeum">NPM</a></p>
+			<small>
+				<a className={classes.link} href="https://www.policygenius.com">© {year} PolicyGenius</a>
+			</small>
+		</div>
+	);
+}
+
 export function TableOfContentsRenderer(props) {
 	const { classes, children, onSearchTermChange, searchTerm } = props;
 
@@ -46,6 +70,7 @@ export function TableOfContentsRenderer(props) {
 					/>
 				</div>
 				{children}
+				{renderTOCFooter(classes)}
 			</div>
 		</div>
 	);

src/styles/jss-isolate/inherited.js

@@ -12,14 +12,12 @@ export default {
 	'cursor': 'auto',
 	'direction': 'initial',
 	'empty-cells': 'show',
-	'font': 'initial',
 	'font-size-adjust': 'none',
 	'font-family': 'initial',
 	'font-size': 'medium',
 	'font-style': 'normal',
 	'font-stretch': 'normal',
 	'font-variant': 'normal',
-	'font-weight': 'normal',
 	'letter-spacing': 'normal',
 	'line-height': 'normal',
 	'list-style-image': 'none',