import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";

export const justifyChoices = {
  start: "flex-start",
  end: "flex-end",
  center: "center",
  around: "space-around",
  between: "space-between",
  none: "flex-start"
};

const pullLeft = css`
  margin-left: ${props => props.theme.spacingBase(s => -s / 4)};
`;
const pullRight = css`
  margin-right: ${props => props.theme.spacingBase(s => -s / 4)};
`;
const pullBoth = css`
  margin-left: ${props => props.theme.spacingBase(s => -s / 4)};
  margin-right: ${props => props.theme.spacingBase(s => -s / 4)};
`;

const margins = {
  start: pullLeft,
  end: pullRight,
  center: pullBoth,
  around: pullBoth,
  between: pullBoth,
  none: ""
};

const ButtonPanel = styled.div`
  display: ${props => (props.justify === "none" ? "block" : "flex")};
  justify-content: ${props => justifyChoices[props.justify]};
  ${props => margins[props.justify]};

  & > * {
    margin: 0
      ${props =>
        props.justify === "none" ? "0" : props.theme.spacingBase(s => s / 4)};
  }
`;
ButtonPanel.displayName = "ButtonPanel";
ButtonPanel.propTypes = {
  justify: PropTypes.oneOf(Object.keys(justifyChoices)).isRequired
};
ButtonPanel.defaultProps = {
  justify: "start"
};

export default ButtonPanel;

@@ -106,16 +106,67 @@
 ents%22;%0A%0A
+import %7B maxWidth, minWidth %7D from %22../../media%22;%0A%0A
 export c
@@ -902,16 +902,42 @@
 lex%22)%7D;%0A
+  flex-direction: column;%0A
   justif
@@ -990,16 +990,161 @@
 tify%5D%7D;%0A
+%0A  $%7BmaxWidth.medium%60%0A    & %3E * %7B margin-bottom: $%7Bprops =%3E props.theme.spacingBase()%7D; %7D%0A  %60%7D;%0A%0A  $%7BminWidth.medium%60%0A    flex-direction: row;%0A  
   $%7Bprop
@@ -1174,16 +1174,18 @@
 ify%5D%7D;%0A%0A
+  
   & %3E * 
@@ -1186,16 +1186,18 @@
 & %3E * %7B%0A
+  
     marg
@@ -1202,12 +1202,137 @@
 rgin
-: 0%0A
+-left:%0A        $%7Bprops =%3E%0A          props.justify === %22none%22 ? %220%22 : props.theme.spacingBase(s =%3E s / 4)%7D;%0A      margin-right:%0A  
     
@@ -1336,32 +1336,34 @@
      $%7Bprops =%3E%0A
+  
         props.ju
@@ -1427,17 +1427,25 @@
  4)%7D;%0A  
-%7D
+  %7D%0A  %60%7D;
 %0A%60;%0AButt

make button panel mobile first and responsive-friendly