Feat: Forkme ribbon option

Author: wkwiatek

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

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

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

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="forkme"
+>
+  <a
+    className="forkmeIcon"
+    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="forkme"
+>
+  <a
+    className="forkmeIcon"
+    href="http://example.com"
+    style={
+      Object {
+        "background": "#cdcdcd",
+        "color": "#aa00bb",
+      }
+    }
+  >
+    Share the repo
+  </a>
+</div>
+`;
+
+exports[`should render ribbon with url 1`] = `
+<div
+  className="forkme"
+>
+  <a
+    className="forkmeIcon"
+    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 {...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);