diff --git a/.gitignore b/.gitignore index 799f410e4..e21d8b3f3 100644 --- a/.gitignore +++ b/.gitignore @@ -2,7 +2,7 @@ node_modules/ /examples/**/styleguide/build /examples/**/styleguide/index.html /.publish/ -/lib +/lib/ /coverage/ Changelog.md .DS_Store diff --git a/examples/customised/styleguide/components/ReactComponentRenderer.js b/examples/customised/styleguide/components/ReactComponentRenderer.js index 8e91e0de5..1e58f439d 100644 --- a/examples/customised/styleguide/components/ReactComponentRenderer.js +++ b/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, diff --git a/examples/policygenius/Readme.md b/examples/policygenius/Readme.md new file mode 100644 index 000000000..9e5ba1a72 --- /dev/null +++ b/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. diff --git a/examples/policygenius/docs/One.md b/examples/policygenius/docs/One.md new file mode 100644 index 000000000..2bec5126c --- /dev/null +++ b/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. diff --git a/examples/policygenius/docs/Two.md b/examples/policygenius/docs/Two.md new file mode 100644 index 000000000..cd0875583 --- /dev/null +++ b/examples/policygenius/docs/Two.md @@ -0,0 +1 @@ +Hello world! diff --git a/examples/policygenius/package.json b/examples/policygenius/package.json new file mode 100644 index 000000000..419a04eb4 --- /dev/null +++ b/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" + } +} diff --git a/examples/policygenius/src/components/Button/Button.css b/examples/policygenius/src/components/Button/Button.css new file mode 100644 index 000000000..00b72752e --- /dev/null +++ b/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; +} diff --git a/examples/policygenius/src/components/Button/Button.js b/examples/policygenius/src/components/Button/Button.js new file mode 100644 index 000000000..629e597be --- /dev/null +++ b/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.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', +}; diff --git a/examples/policygenius/src/components/Button/Readme.md b/examples/policygenius/src/components/Button/Readme.md new file mode 100644 index 000000000..a584ff0c5 --- /dev/null +++ b/examples/policygenius/src/components/Button/Readme.md @@ -0,0 +1,15 @@ +Basic button: + + + +Big pink 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'; +``` diff --git a/examples/policygenius/src/components/Button/index.js b/examples/policygenius/src/components/Button/index.js new file mode 100644 index 000000000..d6b70009b --- /dev/null +++ b/examples/policygenius/src/components/Button/index.js @@ -0,0 +1 @@ +export { default } from './Button.js'; diff --git a/examples/policygenius/src/components/Label/Label.js b/examples/policygenius/src/components/Label/Label.js new file mode 100644 index 000000000..a9fff1b6d --- /dev/null +++ b/examples/policygenius/src/components/Label/Label.js @@ -0,0 +1,8 @@ +import React from 'react'; + +/** + * Simple text label. + */ +export default function Label() { + return Hello React!; +} diff --git a/examples/policygenius/src/components/Label/Readme.md b/examples/policygenius/src/components/Label/Readme.md new file mode 100644 index 000000000..4ca9f30fc --- /dev/null +++ b/examples/policygenius/src/components/Label/Readme.md @@ -0,0 +1,3 @@ +Should use the `fantasy` font inherited from `body`: + +