Feat: 'Fork me' ribbon (#861)

Part of #195, closes #647.

Author: glebez

docs/Configuration.md

@@ -25,6 +25,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)
@@ -347,6 +348,21 @@ 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` property is optional. If you want to change styling of the ribbon, please, refer to the [theme section](#theme).
+
+```javascript
+module.exports = {
+  ribbon: {
+    url: 'http://example.com/',
+    text: 'Fork me on GitHub',
+  }
+};
+```
+
 #### `sections`
 
 Type: `Array`, optional

examples/basic/styleguide.config.js

@@ -1,6 +1,9 @@
 module.exports = {
 	components: 'src/components/**/[A-Z]*.js',
 	defaultExample: true,
+	ribbon: {
+		url: 'https://github.com/styleguidist/react-styleguidist',
+	},
 	webpackConfig: {
 		module: {
 			rules: [

loaders/styleguide-loader.js

@@ -24,6 +24,7 @@ const CLIENT_CONFIG_OPTIONS = [
 	'styles',
 	'compilerConfig',
 	'editorConfig',
+	'ribbon',
 	'pagePerSection',
 ];
 

scripts/schemas/config.js

@@ -150,6 +150,13 @@ module.exports = {
 			return annotatedComponents.concat(exportedComponents);
 		},
 	},
+	ribbon: {
+		type: 'object',
+		example: {
+			url: 'http://example.com/',
+			text: 'Fork me on GitHub',
+		},
+	},
 	sections: {
 		type: 'array',
 		default: [],

src/rsg-components/Ribbon/Ribbon.js

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

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import Ribbon from './Ribbon';
+import { RibbonRenderer, styles } from './RibbonRenderer';
+
+const props = {
+	classes: classes(styles),
+};
+
+describe('Ribbon', () => {
+	it('should render ribbon if the ribbon is present in the config', () => {
+		const actual = shallow(<Ribbon />, { context: { config: { ribbon: { url: 'foo.bar' } } } });
+
+		expect(actual).toMatchSnapshot();
+	});
+
+	it('should return null if the ribbon is not present in the config', () => {
+		const actual = shallow(<Ribbon />, { context: { config: {} } });
+
+		expect(actual.type()).toBeNull();
+	});
+});
+describe('RibbonRenderer', () => {
+	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();
+	});
+});

src/rsg-components/Ribbon/RibbonRenderer.js

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

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Ribbon should render ribbon if the ribbon is present in the config 1`] = `
+<Styled(Ribbon)
+  url="foo.bar"
+/>
+`;
+
+exports[`RibbonRenderer should render ribbon with a text 1`] = `
+<div
+  className="root"
+>
+  <a
+    className="link"
+    href="http://example.com"
+  >
+    Share the repo
+  </a>
+</div>
+`;
+
+exports[`RibbonRenderer should render ribbon with url 1`] = `
+<div
+  className="root"
+>
+  <a
+    className="link"
+    href="http://example.com"
+  >
+    Fork me on GitHub
+  </a>
+</div>
+`;

src/rsg-components/Ribbon/index.js

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

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

@@ -135,7 +135,7 @@ describe('sidebar rendering', () => {
 	});
 });
 
-it('renderer should render logo, table of contents and passed children', () => {
+it('renderer should render logo, table of contents, ribbon and passed children', () => {
 	const actual = shallow(
 		<StyleGuideRenderer
 			classes={{}}

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 'rsg-components/Ribbon';
 
 const styles = ({ color, fontFamily, fontSize, sidebarWidth, mq, space, maxWidth }) => ({
 	root: {
@@ -71,6 +72,7 @@ export function StyleGuideRenderer({ classes, title, homepageUrl, children, toc,
 					{toc}
 				</div>
 			)}
+			<Ribbon />
 		</div>
 	);
 }

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renderer should render logo, table of contents and passed children 1`] = `
+exports[`renderer should render logo, table of contents, ribbon and passed children 1`] = `
 <div
   className=""
 >
@@ -47,6 +47,7 @@ exports[`renderer should render logo, table of contents and passed children 1`]
       }
     />
   </div>
+  <Ribbon />
 </div>
 `;
 

src/styles/theme.js

@@ -22,6 +22,8 @@ export const color = {
 	baseBackground: '#fff',
 	codeBackground: '#f5f5f5',
 	sidebarBackground: '#f5f5f5',
+	ribbonBackground: '#f9970d',
+	ribbonText: '#fff',
 };
 
 export const fontFamily = {