Fix documentation page

.gitignore

@@ -2,7 +2,7 @@ node_modules/
 /examples/**/styleguide/build
 /examples/**/styleguide/index.html
 /.publish/
-/lib
+/lib/
 /coverage/
 Changelog.md
 .DS_Store

examples/customised/styleguide/components/ReactComponentRenderer.js

@@ -22,7 +22,7 @@ const styles = ({ color, fontSize, fontFamily, space, borderRadius }) => ({
 	},
 	isolatedLink: {
 		position: 'absolute',
-		top: 0,
+		top: 40,
 		right: 0,
 		fontFamily: fontFamily.base,
 		fontSize: fontSize.base,

examples/policygenius/Readme.md

@@ -0,0 +1,14 @@
+# React Styleguidist example style guide with sections
+
+![](http://wow.sapegin.me/3F1u0m1g2w07/Image%202016-04-20%20at%209.15.24%20AM.png)
+
+How to start locally:
+
+```
+git clone https://github.com/styleguidist/react-styleguidist.git
+cd react-styleguidist/examples/sections
+npm install
+npm run styleguide
+```
+
+Then open [http://localhost:6060](http://localhost:6060) in your browser.

examples/policygenius/docs/One.md

@@ -0,0 +1,73 @@
+# Heading 1
+
+## Heading 2
+
+### Heading 3
+
+#### Heading 4
+
+##### Heading 5
+
+###### Heading 6
+
+There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, “Oh dear! Oh dear! I shall be late!” (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually *took a watch out of its waistcoat-pocket*, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.
+
+> In another moment down went Alice after it, never once considering how in the world she was to get out again.
+
+Text attributes: _italic_, **bold**, `monospace`.
+
+Bullet list:
+
+* coffee
+* croissant
+
+Numbered list:
+
+1. coffee
+2. croissant
+
+Nested list:
+
+* coffee
+* food
+  1. croissant
+  1. pizza
+* dog
+
+List with checkboxes:
+
+* [x] Coffee
+* [x] Croissant
+* [ ] Pizza
+
+Table:
+
+Foo | Bar
+-|-
+1 | 2
+
+
+A [link](http://example.com).
+
+---
+
+![React](http://morning.photos/photos/thumb/2014-09-27-3218-thumb.jpg)
+
+```js
+function eatFood(food) {
+    if (!food.length) {
+        return ['No food'];
+    }
+
+    return food.map(dish => `No ${dish.toLowerCase()}`);
+}
+
+const food = [
+  'Pizza',
+  'Buger',
+  'Coffee',
+];
+console.log(eatFood(food));
+```
+
+Some more text here.

examples/policygenius/docs/Two.md

@@ -0,0 +1 @@
+Hello world!

examples/policygenius/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "react-styleguidist-example-sections",
+  "description": "React styleguidist sections example",
+  "version": "1.0.0",
+  "private": true,
+  "homepage": "https://github.com/styleguidist/react-styleguidist",
+  "author": {
+    "name": "Artem Sapegin",
+    "url": "http://sapegin.me/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/styleguidist/react-styleguidist.git"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=4"
+  },
+  "dependencies": {
+    "dog-names": "^1.0.2",
+    "loaders": "^1.1.2",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-modal": "^1.6.5",
+    "react-styleguidist": "^5.0.0",
+    "webpack": "^2.2.1"
+  },
+  "scripts": {
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
+  }
+}

examples/policygenius/src/components/Button/Button.css

@@ -0,0 +1,10 @@
+.button {
+	padding: .5em 1.5em;
+	color: #666;
+	background-color: #fff;
+	border: 1px solid currentColor;
+	border-radius: .3em;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+}

examples/policygenius/src/components/Button/Button.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import './Button.css';
+
+/**
+ * The only true button.
+ */
+export default function Button({ color, size, children }) {
+	const styles = {
+		color,
+		fontSize: Button.sizes[size],
+	};
+
+	return <button className="button" style={styles}>{children}</button>;
+}
+Button.propTypes = {
+	/**
+	 * Button label.
+	 */
+	children: PropTypes.string.isRequired,
+	color: PropTypes.string,
+	size: PropTypes.oneOf(['small', 'normal', 'large']),
+};
+Button.defaultProps = {
+	color: '#333',
+	size: 'normal',
+};
+Button.sizes = {
+	small: '10px',
+	normal: '14px',
+	large: '18px',
+};

examples/policygenius/src/components/Button/Readme.md

@@ -0,0 +1,15 @@
+Basic button:
+
+    <Button>Push Me</Button>
+
+Big pink button:
+
+    <Button size="large" color="deeppink">Lick Me</Button>
+
+And you *can* **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.
+
+If you define a fenced code block with a language flag it will be rendered as a regular Markdown code snippet:
+
+```javascript
+import React from 'react';
+```

examples/policygenius/src/components/Button/index.js

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

examples/policygenius/src/components/Label/Label.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+/**
+ * Simple text label.
+ */
+export default function Label() {
+	return <span>Hello React!</span>;
+}

examples/policygenius/src/components/Label/Readme.md

@@ -0,0 +1,3 @@
+Should use the `fantasy` font inherited from `body`:
+
+    <Label />

examples/policygenius/src/components/Label/index.js

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

examples/policygenius/src/components/Placeholder/Example.md

@@ -0,0 +1,3 @@
+Extra example file linked via `@example` doclet:
+
+    <Placeholder type="bear"/>

examples/policygenius/src/components/Placeholder/Placeholder.css

@@ -0,0 +1,3 @@
+.placeholder {
+	background: #ccc;
+}

examples/policygenius/src/components/Placeholder/Placeholder.js

@@ -0,0 +1,54 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import './Placeholder.css';
+
+/**
+ * Image placeholders.
+ *
+ * @example ./Example.md
+ */
+export default class Placeholder extends Component {
+	static propTypes = {
+		type: PropTypes.oneOf([
+			'animal',
+			'bacon',
+			'beard',
+			'bear',
+			'cat',
+			'food',
+			'city',
+			'nature',
+			'people',
+		]),
+		width: PropTypes.number,
+		height: PropTypes.number,
+	};
+
+	static defaultProps = {
+		type: 'animal',
+		width: 150,
+		height: 150,
+	};
+
+	getImageUrl() {
+		const { type, width, height } = this.props;
+		const types = {
+			animal: `http://placeimg.com/${width}/${height}/animals`,
+			bacon: `http://baconmockup.com/${width}/${height}`,
+			bear: `http://www.placebear.com/${width}/${height}`,
+			beard: `http://placebeard.it/${width}/${height}`,
+			cat: `http://lorempixel.com/${width}/${height}/cats`,
+			city: `http://lorempixel.com/${width}/${height}/city`,
+			food: `http://lorempixel.com/${width}/${height}/food`,
+			nature: `http://lorempixel.com/${width}/${height}/nature`,
+			people: `http://lorempixel.com/${width}/${height}/people`,
+		};
+		return types[type];
+	}
+
+	render() {
+		const { width, height } = this.props;
+		return <img className="placeholder" src={this.getImageUrl()} width={width} height={height} />;
+	}
+}

examples/policygenius/src/components/Placeholder/_Readme.md

@@ -0,0 +1 @@
+    <Placeholder type="beard"/>

examples/policygenius/src/components/Placeholder/index.js

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

examples/policygenius/src/components/RandomButton/RandomButton.css

@@ -0,0 +1,12 @@
+.random-button {
+	padding: .5em 1.5em;
+	color: #666;
+	background-color: #fff;
+	border: 1px solid currentColor;
+	border-radius: .3em;
+	font-size: 16px;
+	font-weight: bold;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+}

examples/policygenius/src/components/RandomButton/RandomButton.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import sample from 'lodash/sample';
+
+import './RandomButton.css';
+
+/**
+ * Button that changes label on every click.
+ */
+export default class RandomButton extends Component {
+	static propTypes = {
+		/**
+		 * List of possible labels.
+		 */
+		variants: PropTypes.array.isRequired,
+	};
+
+	constructor(props) {
+		super();
+		this.state = {
+			label: sample(props.variants),
+		};
+	}
+
+	handleClick() {
+		this.setState({
+			label: sample(this.props.variants),
+		});
+	}
+
+	render() {
+		return (
+			<button className="random-button" onClick={this.handleClick.bind(this)}>
+				{this.state.label}
+			</button>
+		);
+	}
+}

examples/policygenius/src/components/RandomButton/index.js

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