Add orientation prop to Level

jxom · Aug 4, 2020 · 6d0de2a · 6d0de2a
1 parent 7b8933a
commit 6d0de2a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git 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
@@ -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)};
   }