no in embeds
This commit is contained in:
parent
7e88e74095
commit
f1917acae1
@ -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
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
|
@ -1,10 +0,0 @@
|
|||||||
|
|
||||||
.item {
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-shrink: 1;
|
|
||||||
flex-basis: auto;
|
|
||||||
|
|
||||||
@media (min-width: 48em) {
|
|
||||||
margin-left: 15rem;
|
|
||||||
}
|
|
||||||
}
|
|
@ -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>
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
@ -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>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
```
|
```
|
@ -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
|
||||||
|
@ -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>
|
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
```
|
```
|
||||||
|
@ -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);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user