diff --git a/ui/package.json b/ui/package.json index 63407399..b6f96318 100644 --- a/ui/package.json +++ b/ui/package.json @@ -14,6 +14,7 @@ "dependencies": { "classnames": "^2.2.5", "lodash.flatten": "^4.4.0", + "param-case": "^2.1.0", "react": "^15.3.2", "react-a11y": "^0.3.3" }, diff --git a/ui/src/components/tab/index.js b/ui/src/components/tab/index.js new file mode 100644 index 00000000..a3831599 --- /dev/null +++ b/ui/src/components/tab/index.js @@ -0,0 +1,57 @@ +const paramCase = require('param-case'); +const classNames = require('classnames'); +const React = require('react'); +const styles = require('./style.css'); + +const Tab = ({ + className, + children, + checked, + defaultChecked = true, + disabled = false, + id, + name, + title = '', + style +}) => { + const cn = classNames( + className, + styles.tab + ); + + const tabId = paramCase(title); + + return ( +
+ + +
+ {children} +
+
+ ); +}; + +Tab.propTypes = { + checked: React.PropTypes.bool, + children: React.PropTypes.node, + className: React.PropTypes.string, + defaultChecked: React.PropTypes.bool, + disabled: React.PropTypes.bool, + id: React.PropTypes.string, + name: React.PropTypes.string, + style: React.PropTypes.object, + title: React.PropTypes.string +}; + +module.exports = Tab; diff --git a/ui/src/components/tab/readme.md b/ui/src/components/tab/readme.md new file mode 100644 index 00000000..83bafbed --- /dev/null +++ b/ui/src/components/tab/readme.md @@ -0,0 +1,32 @@ +# `` + +## demo + +```embed +const React = require('react'); +const ReactDOM = require('react-dom/server'); +const Base = require('../base'); +const Container = require('../container'); +const Row = require('../row'); +const Column = require('../column'); +const Tabs = require('../tabs'); +const Tab = require('./index'); +const styles = require('./style.css'); + +nmodule.exports = ReactDOM.renderToString( + + + + + +

Containers

+
+ +

User

+
+
+
+
+ +); +``` diff --git a/ui/src/components/tab/style.css b/ui/src/components/tab/style.css new file mode 100644 index 00000000..acf9fec0 --- /dev/null +++ b/ui/src/components/tab/style.css @@ -0,0 +1,38 @@ +.tab { + float: left; + + & .label { + background: #eee; + padding: 10px; + border: 1px solid #ccc; + margin-left: -1px; + position: relative; + left: 1px; + } + + & .input[type=radio] { + visibility: hidden; + display: none; + } + + & .content { + position: absolute; + top: 28px; + left: 0; + background: white; + right: 0; + bottom: 0; + padding: 20px; + border: 1px solid #ccc; + } + + & .input[type=radio]:checked ~ .label { + background: white; + border-bottom: 1px solid white; + z-index: 2; + } + + & .input[type=radio]:checked ~ .label ~ .content { + z-index: 1; + } +} diff --git a/ui/src/components/tabs/index.js b/ui/src/components/tabs/index.js new file mode 100644 index 00000000..cab078da --- /dev/null +++ b/ui/src/components/tabs/index.js @@ -0,0 +1,44 @@ +const classNames = require('classnames'); +const React = require('react'); +const styles = require('./style.css'); + +const Tabs = ({ + className, + children, // array of + id, + name = '', + style +}) => { + const cn = classNames( + className, + styles.tabs + ); + + const _children = React.Children.map(children, (child, i) => { + return React.cloneElement(child, { + defaultChecked: i === 0, + name + }); + }); + + return ( +
+ {_children} +
+ ); +}; + +Tabs.propTypes = { + children: React.PropTypes.node, + className: React.PropTypes.string, + id: React.PropTypes.string, + name: React.PropTypes.string.isRequired, + style: React.PropTypes.object +}; + +module.exports = Tabs; diff --git a/ui/src/components/tabs/readme.md b/ui/src/components/tabs/readme.md new file mode 100644 index 00000000..25334479 --- /dev/null +++ b/ui/src/components/tabs/readme.md @@ -0,0 +1,31 @@ +# `` + +## demo + +```embed +const React = require('react'); +const ReactDOM = require('react-dom/server'); +const Base = require('../base'); +const Row = require('../row'); +const Column = require('../column'); +const Tabs = require('./index'); +const Tab = require('../tab'); +const styles = require('./style.css'); + +nmodule.exports = ReactDOM.renderToString( + + + + + +

Containers

+
+ +

User

+
+
+
+
+ +); +``` diff --git a/ui/src/components/tabs/style.css b/ui/src/components/tabs/style.css new file mode 100644 index 00000000..68922e51 --- /dev/null +++ b/ui/src/components/tabs/style.css @@ -0,0 +1,6 @@ +.tabs { + position: relative; + min-height: 200px; /* This part sucks */ + clear: both; + margin: 25px 0; +} diff --git a/ui/src/docs.js b/ui/src/docs.js index 00c55c78..fcea1f02 100644 --- a/ui/src/docs.js +++ b/ui/src/docs.js @@ -11,7 +11,9 @@ module.exports = { Column: require('./components/column/readme.md'), Button: require('./components/button/readme.md'), Toggle: require('./components/toggle/readme.md'), - Checkbox: require('./components/checkbox/readme.md') + Checkbox: require('./components/checkbox/readme.md'), + Tab: require('./components/tab/readme.md'), + Tabs: require('./components/tabs/readme.md') }, FAQ: require('./faq.md') }; diff --git a/ui/src/index.js b/ui/src/index.js index 3de7a107..c41bc86c 100644 --- a/ui/src/index.js +++ b/ui/src/index.js @@ -5,5 +5,7 @@ module.exports = { Column: require('./components/column'), Container: require('./components/container'), Row: require('./components/row'), - Toggle: require('./components/toggle') + Toggle: require('./components/toggle'), + Tab: require('./components/tab'), + Tabs: require('./components/tabs') };