From 6d0de2a0727f993ff2b2681a5f1f2ae55d740a53 Mon Sep 17 00:00:00 2001
From: Jake Moxey <jakemoxey@gmail.com>
Date: Tue, 4 Aug 2020 12:53:51 +1000
Subject: [PATCH] Add orientation prop to Level

---
 packages/bumbag/src/Level/Level.tsx |  2 ++
 packages/bumbag/src/Level/styles.ts | 31 ++++++++++++++++++++---------
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/bumbag/src/Level/Level.tsx b/packages/bumbag/src/Level/Level.tsx
index 6a6ae35bb..cad0f7e27 100644
--- a/packages/bumbag/src/Level/Level.tsx
+++ b/packages/bumbag/src/Level/Level.tsx
@@ -7,6 +7,8 @@ import { Flex, FlexProps } from '../Flex';
 import * as styles from './styles';
 
 export type LocalLevelProps = {
+  /** Sets the orientation of the level. */
+  orientation?: 'vertical' | 'horizontal';
   /** Sets the spacing of the level when it snaps to a vertical orientation. */
   spacing?: string;
   /** Sets the breakpoint at which the level should become vertical. */
diff --git a/packages/bumbag/src/Level/styles.ts b/packages/bumbag/src/Level/styles.ts
index 9df9a9028..97d623849 100644
--- a/packages/bumbag/src/Level/styles.ts
+++ b/packages/bumbag/src/Level/styles.ts
@@ -11,17 +11,30 @@ const verticalBreakpoints = {
 
 export const Level = (styleProps) => cssClass`
   &&& {
-    ${breakpoint(styleProps.verticalBelow ? `max-${verticalBreakpoints[styleProps.verticalBelow]}` : null, css`
-    flex-direction: column;
+    ${breakpoint(
+      styleProps.orientation === 'horizontal' && styleProps.verticalBelow
+        ? `max-${verticalBreakpoints[styleProps.verticalBelow]}`
+        : null,
+      css`
+        flex-direction: column;
 
-    & > *:not(:last-child) {
-      margin-bottom: ${space(styleProps.spacing)(styleProps)}rem;
-    }
+        & > *:not(:last-child) {
+          margin-bottom: ${space(styleProps.spacing)(styleProps)}rem;
+        }
 
-    ${getAlignmentAttributes(styleProps)}
-    `, { else: css`
-    justify-content: space-between;
-    ` })(styleProps)};
+        ${getAlignmentAttributes(styleProps)}
+      `,
+      {
+        else: css`
+          justify-content: space-between;
+
+          ${styleProps.orientation === 'vertical' &&
+          css`
+            flex-direction: column;
+          `}
+        `,
+      }
+    )(styleProps)};
   }