Skip to content

Commit c9c8ab4

Browse files
adamkudrnaadamkudrna
committed
Create Toolbar layout
1 parent b029265 commit c9c8ab4

20 files changed

+257
-10
lines changed

‎demo/generated/demo.js

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/lib.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-ui-org/react-ui",
3-
"version": "0.24.0",
3+
"version": "0.25.0",
44
"license": "MIT",
55
"main": "dist/lib.js",
66
"repository": {

‎src/demo/pages/DemoContainer.jsx

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,9 @@ import {
4242
TextField,
4343
TextArea,
4444
Toggle,
45+
Toolbar,
46+
ToolbarItem,
47+
ToolbarSpacer,
4548
} from '../../lib';
4649

4750
// React UI utility CSS classes
@@ -380,6 +383,31 @@ class DemoContainer extends React.Component {
380383
</Row>
381384
)}
382385
/>
386+
<h3 id="layout-components-toolbar" className="typography-size-4 mb-6">Toolbar</h3>
387+
<Documentation
388+
name="Default layout"
389+
component={(
390+
<Toolbar>
391+
<ToolbarItem>
392+
<DocumentationPlaceholder text="item" />
393+
</ToolbarItem>
394+
<ToolbarItem>
395+
<DocumentationPlaceholder text="item" />
396+
</ToolbarItem>
397+
<ToolbarItem>
398+
<DocumentationPlaceholder text="item" />
399+
</ToolbarItem>
400+
<ToolbarSpacer />
401+
<ToolbarItem>
402+
<DocumentationPlaceholder text="item" />
403+
</ToolbarItem>
404+
<ToolbarSpacer />
405+
<ToolbarItem>
406+
<DocumentationPlaceholder text="item" />
407+
</ToolbarItem>
408+
</Toolbar>
409+
)}
410+
/>
383411
</section>
384412
<hr />
385413
<section id="ui-components" className="mb-7">

‎src/demo/pages/navigation.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,10 @@ export default [
4747
link: '#layout-components-row',
4848
title: 'Row',
4949
},
50+
{
51+
link: '#layout-components-toolbar',
52+
title: 'Toolbar',
53+
},
5054
],
5155
link: '#layout-components',
5256
title: 'Layout Components',

‎src/lib/components/layout/Toolbar/Toolbar.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import styles from './Toolbar.scss';
4+
5+
const Toolbar = (props) => {
6+
const {
7+
children,
8+
} = props;
9+
10+
return (
11+
<div className={styles.toolbar}>
12+
{children}
13+
</div>
14+
);
15+
};
16+
17+
Toolbar.propTypes = {
18+
children: PropTypes.oneOfType([
19+
PropTypes.arrayOf(PropTypes.node),
20+
PropTypes.node,
21+
]).isRequired,
22+
};
23+
24+
export default Toolbar;

‎src/lib/components/layout/Toolbar/Toolbar.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import '../../../styles/tools/offset';
2+
@import 'theme';
3+
4+
.toolbar {
5+
display: flex;
6+
flex-wrap: wrap;
7+
align-items: flex-end;
8+
margin: calc(-1 * #{$toolbar-spacing});
9+
}
10+
11+
.item {
12+
flex: none;
13+
margin: $toolbar-spacing;
14+
}
15+
16+
.spacer {
17+
flex: 1 1 auto;
18+
}

‎src/lib/components/layout/Toolbar/ToolbarItem.jsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import styles from './Toolbar.scss';
4+
5+
const ToolbarItem = (props) => {
6+
const {
7+
children,
8+
} = props;
9+
10+
return (
11+
<div className={styles.item}>
12+
{children}
13+
</div>
14+
);
15+
};
16+
17+
ToolbarItem.propTypes = {
18+
children: PropTypes.oneOfType([
19+
PropTypes.arrayOf(PropTypes.node),
20+
PropTypes.node,
21+
]).isRequired,
22+
};
23+
24+
export default ToolbarItem;

‎src/lib/components/layout/Toolbar/ToolbarSpacer.jsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react';
2+
import styles from './Toolbar.scss';
3+
4+
const ToolbarSpacer = () => (
5+
<div className={styles.spacer} />
6+
);
7+
8+
export default ToolbarSpacer;

‎src/lib/components/layout/Toolbar/__tests__/Toolbar.test.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import Toolbar from '../Toolbar';
4+
5+
describe('rendering', () => {
6+
it('renders correctly with a single child', () => {
7+
const tree = shallow((
8+
<Toolbar>
9+
<span>content</span>
10+
</Toolbar>
11+
));
12+
13+
expect(tree).toMatchSnapshot();
14+
});
15+
16+
it('renders correctly with multiple children', () => {
17+
const tree = shallow((
18+
<Toolbar>
19+
<span>content 1</span>
20+
<span>content 2</span>
21+
<span>content 3</span>
22+
</Toolbar>
23+
));
24+
25+
expect(tree).toMatchSnapshot();
26+
});
27+
});

‎src/lib/components/layout/Toolbar/__tests__/ToolbarItem.test.jsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import ToolbarItem from '../ToolbarItem';
4+
5+
describe('rendering', () => {
6+
it('renders correctly with a single child', () => {
7+
const tree = shallow((
8+
<ToolbarItem>
9+
<span>content</span>
10+
</ToolbarItem>
11+
));
12+
13+
expect(tree).toMatchSnapshot();
14+
});
15+
16+
it('renders correctly with multiple children', () => {
17+
const tree = shallow((
18+
<ToolbarItem>
19+
<span>content 1</span>
20+
<span>content 2</span>
21+
<span>content 3</span>
22+
</ToolbarItem>
23+
));
24+
25+
expect(tree).toMatchSnapshot();
26+
});
27+
});

‎src/lib/components/layout/Toolbar/__tests__/ToolbarSpacer.test.jsx

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
import { shallow } from 'enzyme';
3+
import ToolbarSpacer from '../ToolbarSpacer';
4+
5+
describe('rendering', () => {
6+
it('renders correctly', () => {
7+
const tree = shallow((
8+
<ToolbarSpacer />
9+
));
10+
11+
expect(tree).toMatchSnapshot();
12+
});
13+
});

‎src/lib/components/layout/Toolbar/__tests__/__snapshots__/Toolbar.test.jsx.snap

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`rendering renders correctly with a single child 1`] = `
4+
<div
5+
className="toolbar"
6+
>
7+
<span>
8+
content
9+
</span>
10+
</div>
11+
`;
12+
13+
exports[`rendering renders correctly with multiple children 1`] = `
14+
<div
15+
className="toolbar"
16+
>
17+
<span>
18+
content 1
19+
</span>
20+
<span>
21+
content 2
22+
</span>
23+
<span>
24+
content 3
25+
</span>
26+
</div>
27+
`;

‎src/lib/components/layout/Toolbar/__tests__/__snapshots__/ToolbarItem.test.jsx.snap

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`rendering renders correctly with a single child 1`] = `
4+
<div
5+
className="item"
6+
>
7+
<span>
8+
content
9+
</span>
10+
</div>
11+
`;
12+
13+
exports[`rendering renders correctly with multiple children 1`] = `
14+
<div
15+
className="item"
16+
>
17+
<span>
18+
content 1
19+
</span>
20+
<span>
21+
content 2
22+
</span>
23+
<span>
24+
content 3
25+
</span>
26+
</div>
27+
`;

‎src/lib/components/layout/Toolbar/__tests__/__snapshots__/ToolbarSpacer.test.jsx.snap

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`rendering renders correctly 1`] = `
4+
<div
5+
className="spacer"
6+
/>
7+
`;

‎src/lib/components/layout/Toolbar/_theme.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
$toolbar-spacing: var(--rui-toolbar-spacing);

‎src/lib/components/layout/Toolbar/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export { default as Toolbar } from './Toolbar';
2+
export { default as ToolbarItem } from './ToolbarItem';
3+
export { default as ToolbarSpacer } from './ToolbarSpacer';

‎src/lib/index.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ export { MediaObject } from './components/layout/Media';
1818
export { Row } from './components/layout/Row';
1919
export { RowLeft } from './components/layout/Row';
2020
export { RowRight } from './components/layout/Row';
21+
export { Toolbar } from './components/layout/Toolbar';
22+
export { ToolbarItem } from './components/layout/Toolbar';
23+
export { ToolbarSpacer } from './components/layout/Toolbar';
2124

2225
// Screens
2326
export { default as ForgotPassword } from './components/screens/Login/ForgotPassword';

‎src/lib/theme.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -539,4 +539,10 @@
539539
--rui-modal-box-shadow: none;
540540
--rui-modal-footer-background: var(--rui-color-gray-100);
541541
--rui-modal-overlay-background: rgba(0, 0, 0, 0.5);
542+
543+
//
544+
// Toolbar
545+
// =======
546+
547+
--rui-toolbar-spacing: var(--rui-offset-1);
542548
}

0 commit comments

Comments
 (0)