Create Toolbar layout

Author: adamkudrna

demo/generated/demo.js

@@ -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": {

dist/lib.js

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

package-lock.json

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

package.json

@@ -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/demo/pages/DemoContainer.jsx

@@ -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/demo/pages/navigation.js

@@ -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/Toolbar.jsx

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