Feat: Forkme ribbon option

docs/Configuration.md

@@ -24,6 +24,7 @@ By default, Styleguidist will look for `styleguide.config.js` file in your proje
 - [`propsParser`](#propsparser)
 - [`require`](#require)
 - [`resolver`](#resolver)
+- [`ribbon`](#ribbon)
 - [`sections`](#sections)
 - [`serverHost`](#serverhost)
 - [`serverPort`](#serverport)
@@ -323,6 +324,23 @@ module.exports = {
 };
 ```
 
+#### `ribbon`
+
+Type: `Object`, optional
+
+Shows 'Fork Me' ribbon in the top-right corner. If `ribbon` key is present, then it's required to add `url` property. `text`, `color`, and `background` are optional.
+
+```javascript
+module.exports = {
+  ribbon: {
+    url: 'http://example.com/',
+    text: 'Fork me on GitHub',
+    color: '#bbb',
+    background: '#aa0000',
+  }
+};
+```
+
 #### `sections`
 
 Type: `Array`, optional

loaders/styleguide-loader.js

@@ -23,6 +23,7 @@ const CLIENT_CONFIG_OPTIONS = [
 	'theme',
 	'styles',
 	'compilerConfig',
+	'ribbon',
 ];
 
 module.exports = function() {};

scripts/schemas/config.js

@@ -109,6 +109,15 @@ module.exports = {
 		type: 'function',
 		default: reactDocgen.resolver.findAllExportedComponentDefinitions,
 	},
+	ribbon: {
+		type: 'object',
+		example: {
+			url: 'http://example.com/',
+			text: 'Fork me on GitHub',
+			color: '#fff',
+			background: '#24292e',
+		},
+	},
 	sections: {
 		type: 'array',
 		default: [],

src/rsg-components/Ribbon/Ribbon.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import RibbonRenderer from 'rsg-components/Ribbon/RibbonRenderer';
+
+export default function Ribbon({}, { config }) {
+	return <RibbonRenderer {...config.ribbon} />;
+}
+
+Ribbon.contextTypes = {
+	config: PropTypes.object,
+};

src/rsg-components/Ribbon/Ribbon.spec.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { RibbonRenderer, styles } from './RibbonRenderer';
+
+const props = {
+	classes: classes(styles),
+};
+
+it('should render ribbon with url', () => {
+	const actual = shallow(<RibbonRenderer {...props} url="http://example.com" />);
+
+	expect(actual).toMatchSnapshot();
+});
+
+it('should render ribbon with a text', () => {
+	const actual = shallow(
+		<RibbonRenderer {...props} url="http://example.com" text="Share the repo" />
+	);
+
+	expect(actual).toMatchSnapshot();
+});
+
+it('should render ribbon with custom background and color', () => {
+	const actual = shallow(
+		<RibbonRenderer
+			{...props}
+			url="http://example.com"
+			text="Share the repo"
+			background="#cdcdcd"
+			color="#aa00bb"
+		/>
+	);
+
+	expect(actual).toMatchSnapshot();
+});

src/rsg-components/Ribbon/RibbonRenderer.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Styled from 'rsg-components/Styled';
+
+export const styles = ({ color, fontSize, fontFamily }) => ({
+	root: {
+		position: 'fixed',
+		top: 0,
+		right: 0,
+		width: '149px',
+		height: '149px',
+		zIndex: 999,
+	},
+	link: {
+		fontFamily: fontFamily.base,
+		position: 'relative',
+		right: -37,
+		top: -22,
+		display: 'block',
+		width: 190,
+		padding: '5px 15px',
+		textAlign: 'center',
+		color: 'white',
+		fontSize: fontSize.base,
+		background: color.ribbonBackground,
+		textDecoration: 'none',
+		textShadow: '0 -1px 0 rgba(0,0,0,.15)',
+		transformOrigin: '0 0',
+		transform: 'rotate(45deg)',
+	},
+});
+
+export function RibbonRenderer({ classes, url, text, color, background }) {
+	return (
+		<div className={classes.root}>
+			<a href={url} className={classes.link} style={{ color, background }}>
+				{text || 'Fork me on GitHub'}
+			</a>
+		</div>
+	);
+}
+
+RibbonRenderer.propTypes = {
+	classes: PropTypes.object.isRequired,
+	url: PropTypes.string.isRequired,
+	text: PropTypes.string,
+	color: PropTypes.string,
+	background: PropTypes.string,
+};
+
+export default Styled(styles)(RibbonRenderer);

src/rsg-components/Ribbon/__snapshots__/Ribbon.spec.js.snap

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render ribbon with a text 1`] = `
+<div
+  className="root"
+>
+  <a
+    className="link"
+    href="http://example.com"
+    style={
+      Object {
+        "background": undefined,
+        "color": undefined,
+      }
+    }
+  >
+    Share the repo
+  </a>
+</div>
+`;
+
+exports[`should render ribbon with custom background and color 1`] = `
+<div
+  className="root"
+>
+  <a
+    className="link"
+    href="http://example.com"
+    style={
+      Object {
+        "background": "#cdcdcd",
+        "color": "#aa00bb",
+      }
+    }
+  >
+    Share the repo
+  </a>
+</div>
+`;
+
+exports[`should render ribbon with url 1`] = `
+<div
+  className="root"
+>
+  <a
+    className="link"
+    href="http://example.com"
+    style={
+      Object {
+        "background": undefined,
+        "color": undefined,
+      }
+    }
+  >
+    Fork me on GitHub
+  </a>
+</div>
+`;

src/rsg-components/Ribbon/index.js

@@ -0,0 +1 @@
+export { default } from './Ribbon.js';

src/rsg-components/StyleGuide/StyleGuide.js

@@ -73,6 +73,7 @@ export default class StyleGuide extends Component {
 				homepageUrl={HOMEPAGE}
 				toc={<TableOfContents sections={sections} />}
 				hasSidebar={config.showSidebar && !isolatedComponent}
+				ribbon={config.ribbon}
 			>
 				<Sections sections={sections} depth={1} />
 			</StyleGuideRenderer>

src/rsg-components/StyleGuide/StyleGuideRenderer.js

@@ -4,6 +4,7 @@ import Logo from 'rsg-components/Logo';
 import Markdown from 'rsg-components/Markdown';
 import Styled from 'rsg-components/Styled';
 import cx from 'classnames';
+import Ribbon from '../Ribbon';
 
 const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth }) => ({
 	root: {
@@ -54,7 +55,15 @@ const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth
 	},
 });
 
-export function StyleGuideRenderer({ classes, title, homepageUrl, children, toc, hasSidebar }) {
+export function StyleGuideRenderer({
+	classes,
+	title,
+	homepageUrl,
+	children,
+	toc,
+	hasSidebar,
+	ribbon,
+}) {
 	return (
 		<div className={cx(classes.root, hasSidebar && classes.hasSidebar)}>
 			<main className={classes.content}>
@@ -71,6 +80,7 @@ export function StyleGuideRenderer({ classes, title, homepageUrl, children, toc,
 					{toc}
 				</div>
 			)}
+			{ribbon && <Ribbon />}
 		</div>
 	);
 }
@@ -82,6 +92,7 @@ StyleGuideRenderer.propTypes = {
 	children: PropTypes.node.isRequired,
 	toc: PropTypes.node.isRequired,
 	hasSidebar: PropTypes.bool,
+	ribbon: PropTypes.object,
 };
 
 export default Styled(styles)(StyleGuideRenderer);

src/styles/theme.js

@@ -23,6 +23,7 @@ export const color = {
 	errorBackground: '#c00',
 	codeBackground: '#f5f5f5',
 	sidebarBackground: '#f5f5f5',
+	ribbonBackground: '#f9970d',
 };
 
 export const fontFamily = {