From 0375504f50fda31f5f9a9af945e8de261f32f4a7 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tkp@kirkdesigns.co.uk>
Date: Mon, 5 Nov 2018 13:49:43 +0100
Subject: [PATCH] style(ui): support right justify in dropdown

---
 app/components/UI/Dropdown.js                       | 13 +++++++------
 .../UI/__snapshots__/Dropdown.spec.js.snap          |  1 -
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/UI/Dropdown.js b/app/components/UI/Dropdown.js
index c1862a8e..00f6ac86 100644
--- a/app/components/UI/Dropdown.js
+++ b/app/components/UI/Dropdown.js
@@ -14,7 +14,7 @@ const DropdownContainer = styled(Flex)({})
 DropdownContainer.defaultProps = {
   flexDirection: 'column',
   flexWrap: 'none',
-  display: 'relative'
+  position: 'relative'
 }
 
 /**
@@ -36,14 +36,15 @@ DropdownButton.defaultProps = {
   as: 'button',
   m: 0,
   p: 0,
-  textAlign: 'left'
+  textAlign: 'left',
+  justify: 'left'
 }
 
 /**
  * Menu
  */
 const MenuContainer = styled(Box)({
-  display: 'relative'
+  position: 'relative'
 })
 
 const Menu = styled(Box)({
@@ -138,7 +139,7 @@ class Dropdown extends React.Component {
 
   render() {
     const { isOpen } = this.state
-    let { activeKey, items, theme, ...rest } = this.props
+    let { activeKey, items, justify, theme, ...rest } = this.props
     // coerce array of strings into array of objects.
     items = items.map(item => {
       if (typeof item === 'string') {
@@ -160,12 +161,12 @@ class Dropdown extends React.Component {
         </DropdownButton>
         {isOpen && (
           <MenuContainer>
-            <Menu>
+            <Menu css={justify === 'right' ? { right: 0 } : null}>
               {items.map(item => {
                 return (
                   <MenuItem key={item.key} onClick={() => this.onChange(item.key)}>
                     <Flex alignItems="center">
-                      <Text width="18px">
+                      <Text width="20px" textAlign="center">
                         {activeKey === item.key && (
                           <Check height="0.95em" color={theme.colors.superGreen} />
                         )}
diff --git a/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap b/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap
index f356667c..be5bf0eb 100644
--- a/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap
+++ b/test/unit/components/UI/__snapshots__/Dropdown.spec.js.snap
@@ -41,7 +41,6 @@ exports[`component.Dropdown should render correctly 1`] = `
 
 <div
   className="c0"
-  display="relative"
   onClick={[MockFunction]}
 >
   <button