refactor: ability to disable sidebar shadow

renderer/components/UI/Sidebar.js

@@ -1,25 +1,30 @@
 import React from 'react'
-import styled from 'styled-components'
-import { themeGet } from '@styled-system/theme-get'
+import PropTypes from 'prop-types'
 import { Flex } from 'rebass/styled-components'
 
-const SidebarBox = styled(Flex)`
-  overflow: hidden;
-  box-shadow: ${themeGet('shadows.m')};
-  z-index: 1;
-`
-
-const Sidebar = ({ ...props }) => (
-  <SidebarBox
+const Sidebar = ({ hasShadow, ...rest }) => (
+  <Flex
     as="aside"
-    bg="primaryColor"
     color="primaryText"
     flexDirection="column"
     width={4 / 12}
-    {...props}
+    {...rest}
+    sx={{
+      overflow: 'hidden',
+      boxShadow: hasShadow ? 'm' : null,
+      zIndex: 1,
+    }}
   />
 )
 
+Sidebar.propTypes = {
+  hasShadow: PropTypes.bool,
+}
+
+Sidebar.defaultProps = {
+  hasShadow: true,
+}
+
 Sidebar.small = props => <Sidebar {...props} width={3 / 16} />
 Sidebar.medium = props => <Sidebar {...props} width={4 / 16} />
 Sidebar.large = props => <Sidebar {...props} width={6 / 16} />

test/unit/components/UI/__snapshots__/Sidebar.spec.js.snap

@@ -5,7 +5,9 @@ exports[`component.UI.Sidebar should render correctly 1`] = `
   box-sizing: border-box;
   margin: 0;
   min-width: 0;
-  background-color: primaryColor;
+  overflow: hidden;
+  box-shadow: m;
+  z-index: 1;
   color: primaryText;
   -webkit-flex-direction: column;
   -ms-flex-direction: column;
@@ -15,8 +17,6 @@ exports[`component.UI.Sidebar should render correctly 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  overflow: hidden;
-  z-index: 1;
 }
 
 <aside