Create Toolbar layout

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-ui-org/react-ui",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "license": "MIT",
   "main": "dist/lib.js",
   "repository": {

src/demo/pages/DemoContainer.jsx

@@ -42,6 +42,9 @@ import {
   TextField,
   TextArea,
   Toggle,
+  Toolbar,
+  ToolbarItem,
+  ToolbarSpacer,
 } from '../../lib';
 
 // React UI utility CSS classes
@@ -380,6 +383,31 @@ class DemoContainer extends React.Component {
                 </Row>
               )}
             />
+            <h3 id="layout-components-toolbar" className="typography-size-4 mb-6">Toolbar</h3>
+            <Documentation
+              name="Default layout"
+              component={(
+                <Toolbar>
+                  <ToolbarItem>
+                    <DocumentationPlaceholder text="item" />
+                  </ToolbarItem>
+                  <ToolbarItem>
+                    <DocumentationPlaceholder text="item" />
+                  </ToolbarItem>
+                  <ToolbarItem>
+                    <DocumentationPlaceholder text="item" />
+                  </ToolbarItem>
+                  <ToolbarSpacer />
+                  <ToolbarItem>
+                    <DocumentationPlaceholder text="item" />
+                  </ToolbarItem>
+                  <ToolbarSpacer />
+                  <ToolbarItem>
+                    <DocumentationPlaceholder text="item" />
+                  </ToolbarItem>
+                </Toolbar>
+              )}
+            />
           </section>
           <hr />
           <section id="ui-components" className="mb-7">

src/demo/pages/navigation.js

@@ -47,6 +47,10 @@ export default [
         link: '#layout-components-row',
         title: 'Row',
       },
+      {
+        link: '#layout-components-toolbar',
+        title: 'Toolbar',
+      },
     ],
     link: '#layout-components',
     title: 'Layout Components',

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

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './Toolbar.scss';
+
+const Toolbar = (props) => {
+  const {
+    children,
+  } = props;
+
+  return (
+    <div className={styles.toolbar}>
+      {children}
+    </div>
+  );
+};
+
+Toolbar.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default Toolbar;

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

@@ -0,0 +1,18 @@
+@import '../../../styles/tools/offset';
+@import 'theme';
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  margin: calc(-1 * #{$toolbar-spacing});
+}
+
+.item {
+  flex: none;
+  margin: $toolbar-spacing;
+}
+
+.spacer {
+  flex: 1 1 auto;
+}

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

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import styles from './Toolbar.scss';
+
+const ToolbarItem = (props) => {
+  const {
+    children,
+  } = props;
+
+  return (
+    <div className={styles.item}>
+      {children}
+    </div>
+  );
+};
+
+ToolbarItem.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};
+
+export default ToolbarItem;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './Toolbar.scss';
+
+const ToolbarSpacer = () => (
+  <div className={styles.spacer} />
+);
+
+export default ToolbarSpacer;

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Toolbar from '../Toolbar';
+
+describe('rendering', () => {
+  it('renders correctly with a single child', () => {
+    const tree = shallow((
+      <Toolbar>
+        <span>content</span>
+      </Toolbar>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with multiple children', () => {
+    const tree = shallow((
+      <Toolbar>
+        <span>content 1</span>
+        <span>content 2</span>
+        <span>content 3</span>
+      </Toolbar>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ToolbarItem from '../ToolbarItem';
+
+describe('rendering', () => {
+  it('renders correctly with a single child', () => {
+    const tree = shallow((
+      <ToolbarItem>
+        <span>content</span>
+      </ToolbarItem>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly with multiple children', () => {
+    const tree = shallow((
+      <ToolbarItem>
+        <span>content 1</span>
+        <span>content 2</span>
+        <span>content 3</span>
+      </ToolbarItem>
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import ToolbarSpacer from '../ToolbarSpacer';
+
+describe('rendering', () => {
+  it('renders correctly', () => {
+    const tree = shallow((
+      <ToolbarSpacer />
+    ));
+
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly with a single child 1`] = `
+<div
+  className="toolbar"
+>
+  <span>
+    content
+  </span>
+</div>
+`;
+
+exports[`rendering renders correctly with multiple children 1`] = `
+<div
+  className="toolbar"
+>
+  <span>
+    content 1
+  </span>
+  <span>
+    content 2
+  </span>
+  <span>
+    content 3
+  </span>
+</div>
+`;

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

@@ -0,0 +1,27 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly with a single child 1`] = `
+<div
+  className="item"
+>
+  <span>
+    content
+  </span>
+</div>
+`;
+
+exports[`rendering renders correctly with multiple children 1`] = `
+<div
+  className="item"
+>
+  <span>
+    content 1
+  </span>
+  <span>
+    content 2
+  </span>
+  <span>
+    content 3
+  </span>
+</div>
+`;

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

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`rendering renders correctly 1`] = `
+<div
+  className="spacer"
+/>
+`;

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

@@ -0,0 +1 @@
+$toolbar-spacing: var(--rui-toolbar-spacing);

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

@@ -0,0 +1,3 @@
+export { default as Toolbar } from './Toolbar';
+export { default as ToolbarItem } from './ToolbarItem';
+export { default as ToolbarSpacer } from './ToolbarSpacer';

src/lib/index.js

@@ -18,6 +18,9 @@ export { MediaObject } from './components/layout/Media';
 export { Row } from './components/layout/Row';
 export { RowLeft } from './components/layout/Row';
 export { RowRight } from './components/layout/Row';
+export { Toolbar } from './components/layout/Toolbar';
+export { ToolbarItem } from './components/layout/Toolbar';
+export { ToolbarSpacer } from './components/layout/Toolbar';
 
 // Screens
 export { default as ForgotPassword } from './components/screens/Login/ForgotPassword';

src/lib/theme.scss

@@ -539,4 +539,10 @@
   --rui-modal-box-shadow: none;
   --rui-modal-footer-background: var(--rui-color-gray-100);
   --rui-modal-overlay-background: rgba(0, 0, 0, 0.5);
+
+  //
+  // Toolbar
+  // =======
+
+  --rui-toolbar-spacing: var(--rui-offset-1);
 }