Layout Update

README.md

@@ -9,7 +9,9 @@ A React based reusable component library.
 - React ^16.8
 
 ### Getting Started
-1. Install `npm install https://github.com/UnfocusedDrive/nurvus-design-system.git#main`, or add `"@nurvus/ui": "git+https://github.com/UnfocusedDrive/nurvus-design-system.git#main",` to `package.json` dependencies.
+1. NPM INSTALL Install `npm install https://github.com/UnfocusedDrive/nurvus-design-system.git#main`
+
+Manual Install: Or as alternative, add `"@nurvus/ui": "git+https://github.com/UnfocusedDrive/nurvus-design-system.git#main",` to `package.json` dependencies.
 
 ## Contribute
 ### Getting Started

src/components/Layout/Layout.jsx

@@ -4,11 +4,19 @@ import CONSTANT from '../../constants.js';
 import './Layout.scss';
 
 export default function Layout(props) {
-  const { className, itemDisplay, ...restProps } = props;
+  const {
+    alignItems,
+    className,
+    display = 'block',
+    itemDisplay,
+    ...restProps
+  } = props;
 
   return (
     <div
       className={ classNames(`${CONSTANT.CLASS_PREFIX}`, 'layout', className) }
+      data-align-items={ alignItems }
+      data-display={ display }
       data-item-display={ itemDisplay }
       { ...restProps }
     />

src/components/Layout/Layout.md

@@ -0,0 +1,32 @@
+Basic Example
+```jsx
+import { Button, Layout, Title } from '@nurvus/ui';
+import AddIcon from '@material-ui/icons/Add';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
+import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';
+import LockOpenIcon from '@material-ui/icons/LockOpen';
+
+<Layout>
+  <Title level={ 3 }>Layers</Title>
+  <Button>
+    <AddIcon />
+  </Button>
+</Layout>
+```
+
+Horizontal Example
+```jsx
+import { Button, Layout, Title } from '@nurvus/ui';
+import AddIcon from '@material-ui/icons/Add';
+import FileCopyIcon from '@material-ui/icons/FileCopy';
+import RemoveRedEyeIcon from '@material-ui/icons/RemoveRedEye';
+import LockOpenIcon from '@material-ui/icons/LockOpen';
+
+<Layout display="flex" alignItems="center">
+  <Title level={ 3 }>Layers</Title>
+  <Button>
+    <AddIcon />
+  </Button>
+</Layout>
+```
+

src/components/Layout/Layout.scss

@@ -1,14 +1,38 @@
 @import "../../styles/variables.scss";
 
 .#{$cls-prefix}.layout {
-  &[data-item-display="block"] {
-    > * {
-      display: block;
+
+  //
+  // DISPLAY
+  //
+  &[data-display="block"] {
+    display: block;
+
+    >  * + * {
+      margin-top: $spacing-medium;
     }
   }
 
+  &[data-display="flex"] {
+    display: flex;
+
+    >  * + * {
+      margin-left: $spacing-medium;
+    }
+  }
 
-  >  * + * {
-    margin-top: 20px;
+  // CHILDREN / ITEMS
+
+  &[data-align-items="center"] {
+    align-items: center;
+  }
+
+  //
+  // ITEM DISPLAY
+  //
+  &[data-item-display="block"] {
+    > * {
+      display: block;
+    }
   }
 }

src/components/Title/Title.scss

@@ -2,6 +2,8 @@
 
 .#{$cls-prefix}.title {
   // color: $white;
+  // CSS reset
+  margin: 0;
 
   @at-root {
     h1#{&} {

src/styles/variables.scss

@@ -5,6 +5,7 @@ $cls-prefix: nurvus;
 
 // Sizes
 $border-radius: 4px;
+$spacing-medium: 20px;
 
 // Colors
 $green-1: #4db391;