implement and

This commit is contained in:
Sérgio Ramos 2016-10-26 17:31:15 +01:00
parent df4c3d05e1
commit e91c28ad81
9 changed files with 215 additions and 2 deletions

View File

@ -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"
},

View File

@ -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 (
<div className={cn}>
<input
checked={checked}
className={styles.input}
defaultChecked={defaultChecked}
disabled={disabled}
id={tabId}
name={name}
type='radio'
/>
<label className={styles.label} htmlFor={tabId}>
{title}
</label>
<div className={styles.content}>
{children}
</div>
</div>
);
};
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;

View File

@ -0,0 +1,32 @@
# `<Tab>`
## 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(
<Base>
<Row>
<Column xs={12}>
<Tabs name='my-tab-group'>
<Tab title='Containers'>
<h1>Containers</h1>
</Tab>
<Tab title='Users'>
<h1>User</h1>
</Tab>
</Tabs>
</Column>
</Row>
</Base>
);
```

View File

@ -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;
}
}

View File

@ -0,0 +1,44 @@
const classNames = require('classnames');
const React = require('react');
const styles = require('./style.css');
const Tabs = ({
className,
children, // array of <Tab>
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 (
<div
className={cn}
id={id}
role='tablist'
style={style}
>
{_children}
</div>
);
};
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;

View File

@ -0,0 +1,31 @@
# `<Tabs>`
## 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(
<Base>
<Row>
<Column xs={12}>
<Tabs name='my-tab-group'>
<Tab title='Containers'>
<h1>Containers</h1>
</Tab>
<Tab title='Users'>
<h1>User</h1>
</Tab>
</Tabs>
</Column>
</Row>
</Base>
);
```

View File

@ -0,0 +1,6 @@
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}

View File

@ -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')
};

View File

@ -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')
};