feat(lsg): margins for layout pattern

src/lsg/patterns/layout/demo.tsx

@@ -15,7 +15,7 @@ const StyledTestDiv = styled.div`
 
 const LayoutDemo: React.StatelessComponent<void> = (): JSX.Element => (
 	<div>
-		<Layout directionVertical={true}>
+		<Layout directionVertical>
 			<StyledTestDiv>Vertical</StyledTestDiv>
 			<StyledTestDiv>Vertical</StyledTestDiv>
 			<StyledTestDiv>Vertical</StyledTestDiv>
@@ -25,6 +25,11 @@ const LayoutDemo: React.StatelessComponent<void> = (): JSX.Element => (
 			<StyledTestDiv>Horizontal</StyledTestDiv>
 			<StyledTestDiv>Horizontal</StyledTestDiv>
 		</Layout>
+		<Layout directionVertical hasMargins>
+			<StyledTestDiv>Vertical with margins</StyledTestDiv>
+			<StyledTestDiv>Vertical with margins</StyledTestDiv>
+			<StyledTestDiv>Vertical with margins</StyledTestDiv>
+		</Layout>
 	</div>
 );
 

src/lsg/patterns/layout/index.tsx

@@ -1,22 +1,26 @@
+import { getSpace, Size } from '../space/index';
 import * as React from 'react';
 import styled from 'styled-components';
 
 export interface LayoutProps {
 	className?: string;
 	directionVertical?: boolean;
+	hasMargins?: boolean;
 }
 
 const StyledLayout = styled.div`
 	display: flex;
 	justify-content: space-between;
-	${(props: LayoutProps) => props.directionVertical
-		? 'flex-direction: column;'
-		: ''
-	}
+	${(props: LayoutProps) => (props.directionVertical ? 'flex-direction: column;' : '')};
+	${(props: LayoutProps) => (props.hasMargins ? `margin: 0 ${getSpace(Size.L)}px` : '')};
 `;
 
 const Layout: React.StatelessComponent<LayoutProps> = props => (
-	<StyledLayout className={props.className} directionVertical={props.directionVertical}>
+	<StyledLayout
+		className={props.className}
+		directionVertical={props.directionVertical}
+		hasMargins={props.hasMargins}
+	>
 		{props.children}
 	</StyledLayout>
 );