no in embeds

This commit is contained in:
Sérgio Ramos 2016-10-26 17:32:38 +01:00
parent 7e88e74095
commit f1917acae1
10 changed files with 62 additions and 97 deletions

View File

@ -24,10 +24,10 @@ module.exports = () => {
<Base> <Base>
<Container fluid> <Container fluid>
<Row> <Row>
<Column md={2} xs={12}> <Column md={2} sm={3} xs={12}>
<Navigation /> <Navigation />
</Column> </Column>
<Column md={10} xs={12}> <Column md={10} sm={9} xs={12}>
<Match <Match
component={Home} component={Home}
exactly exactly

View File

@ -1,7 +1,6 @@
const get = require('lodash.get'); const get = require('lodash.get');
const InnerHTML = require('dangerously-set-inner-html'); const InnerHTML = require('dangerously-set-inner-html');
const React = require('react'); const React = require('react');
const styles = require('./style.css');
const titleCase = require('title-case'); const titleCase = require('title-case');
const Docs = require('../../../src/docs'); const Docs = require('../../../src/docs');
@ -21,7 +20,7 @@ const Item = ({
); );
return ( return (
<div className={styles.item}> <div>
{item} {item}
</div> </div>
); );

View File

@ -1,10 +0,0 @@
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
@media (min-width: 48em) {
margin-left: 15rem;
}
}

View File

@ -14,25 +14,23 @@ const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString( nmodule.exports = ReactDOM.renderToString(
<Base> <Base>
<Container> <Row>
<Row> <Column>
<Column> <Button>
<Button> Create an Instance
Create an Instance </Button>
</Button> </Column>
</Column> <Column>
<Column> <Button secondary>
<Button secondary> Cancel
Cancel </Button>
</Button> </Column>
</Column> <Column>
<Column> <Button disabled>
<Button disabled> Inactive Button
Inactive Button </Button>
</Button> </Column>
</Column> </Row>
</Row>
</Container>
</Base> </Base>
); );
``` ```

View File

@ -14,29 +14,27 @@ const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString( nmodule.exports = ReactDOM.renderToString(
<Base> <Base>
<Container> <Row>
<Row> <Column>
<Column> <Checkbox checked>
<Checkbox checked> Checkbox checked
Checkbox checked </Checkbox>
</Checkbox> </Column>
</Column> </Row>
</Row> <Row>
<Row> <Column>
<Column> <Checkbox>
<Checkbox> Checkbox unchecked
Checkbox unchecked </Checkbox>
</Checkbox> </Column>
</Column> </Row>
</Row> <Row>
<Row> <Column>
<Column> <Checkbox disabled>
<Checkbox disabled> Checkbox disabled
Checkbox disabled </Checkbox>
</Checkbox> </Column>
</Column> </Row>
</Row>
</Container>
</Base> </Base>
); );
``` ```

View File

@ -11,7 +11,7 @@ const Row = require('../row');
const Column = require('./index'); const Column = require('./index');
const styles = { const styles = {
container: { base: {
backgroundColor: '#FFEBEE' backgroundColor: '#FFEBEE'
}, },
row: { row: {
@ -25,13 +25,13 @@ const styles = {
}; };
nmodule.exports = ReactDOM.renderToString( nmodule.exports = ReactDOM.renderToString(
<Container style={styles.container}> <Base style={styles.base}>
<Row style={styles.row} around> <Row style={styles.row} around>
<Column style={styles.column} xs={2}>1</Column> <Column style={styles.column} xs={2}>1</Column>
<Column style={styles.column} xs={2}>2</Column> <Column style={styles.column} xs={2}>2</Column>
<Column style={styles.column} xs={2}>3</Column> <Column style={styles.column} xs={2}>3</Column>
</Row> </Row>
</Container> </Base>
); );
``` ```
@ -45,13 +45,11 @@ const Column = require('ui/column');
module.exports = () => { module.exports = () => {
return ( return (
<Container> <Row around>
<Row around> <Column xs={2}>1</Column>
<Column xs={2}>1</Column> <Column xs={2}>2</Column>
<Column xs={2}>2</Column> <Column xs={2}>3</Column>
<Column xs={2}>3</Column> </Row>
</Row>
</Container>
); );
}; };
``` ```

View File

@ -1,18 +1,3 @@
# `<Container>` # `<Container>`
## demo
```embed
const React = require('react');
const ReactDOM = require('react-dom/server');
const Container = require('./index.js');
const Button = require('../button');
nmodule.exports = ReactDOM.renderToString(
<Container>
<Button>Hello World</Button>
</Container>
);
```
## usage ## usage

View File

@ -10,12 +10,10 @@ const Container = require('../container');
const Button = require('../button'); const Button = require('../button');
nmodule.exports = ReactDOM.renderToString( nmodule.exports = ReactDOM.renderToString(
<Container> <Row center='xs' start='sm'>
<Row center='xs' start='sm'> <Button>1</Button>
<Button>1</Button> <Button>2</Button>
<Button>2</Button> </Row>
</Row>
</Container>
); );
``` ```

View File

@ -14,16 +14,14 @@ const styles = require('./style.css');
nmodule.exports = ReactDOM.renderToString( nmodule.exports = ReactDOM.renderToString(
<Base> <Base>
<Container> <Row>
<Row> <Column>
<Column> <Toggle />
<Toggle /> </Column>
</Column> <Column>
<Column> <Toggle off />
<Toggle off /> </Column>
</Column> </Row>
</Row>
</Container>
</Base> </Base>
); );
``` ```

View File

@ -11,3 +11,4 @@ test('renders <Button> without exploding', (t) => {
const wrapper = shallow(<Button />); const wrapper = shallow(<Button />);
t.deepEqual(wrapper.length, 1); t.deepEqual(wrapper.length, 1);
}); });