Make Block shadow prop accept "small" instead of true

examples/component-examples/Box.js

@@ -1,19 +1,30 @@
 import React from 'react'
-import { Box } from '../../src'
+import ExampleHeading from '../doc-components/ExampleHeading'
+import {Block, Box, Text} from '../../src'
 
 const BoxExample =
   {
     name: 'Box',
     element: (
-      <div>
-        <Box m={2}>This is a box</Box>
-        <Box p={2} m={2}>This is a box with padding.</Box>
-        <Box shadow p={2} m={2}>This is a box with shadow.</Box>
-        <Box shadow='medium' p={2} m={2}>This is a box with a medium shadow.</Box>
-        <Box shadow='large' p={2} m={2}>This is a box with a large shadow.</Box>
-        <Box shadow='extra-large' p={2} m={2}>This is a box with an extra-large shadow.</Box>
-        <Box border={[true, 'green']} p={2} m={2}>This is a box with a green border.</Box>
-      </div>
+      <Block p={4}>
+        <Box my={4}>Box</Box>
+        <Box p={2} my={4}>Box with padding</Box>
+
+        <ExampleHeading>shadows</ExampleHeading>
+        {['small', 'medium', 'large', 'extra-large'].map(shadow => (
+          <Box shadow={shadow} p={2} my={4}>Box with <Text mono>shadow='{shadow}'</Text></Box>
+        ))}
+
+        <ExampleHeading>borders</ExampleHeading>
+        {['blue', 'red', 'green', 'gray'].map(borderColor => (
+          <Box border={[true, borderColor]} p={2} my={4}>Box with <Text mono>borderColor='{borderColor}'</Text></Box>
+        ))}
+
+        <ExampleHeading>rounded corners</ExampleHeading>
+        {[0, 1, 2, 3].map(borderRadius => (
+          <Box border round={borderRadius} p={2} my={4}>Box with <Text mono>border borderRadius={`{${borderRadius}}`}</Text></Box>
+        ))}
+      </Block>
     )
   }
 

examples/component-examples/Caret.js

@@ -7,7 +7,7 @@ const CaretExample =
     element: (
       <Block p={4}>
         {Caret.locations.map((loc, i) => (
-          <Box p={2} mb={4} position='relative' maxWidth={300} minHeight={96} shadow key={i}>
+          <Box p={2} mb={4} position='relative' maxWidth={300} minHeight={96} shadow='small' key={i}>
             <Text fontSize={1} mono>location='{loc}'</Text>
             <Caret location={loc} />
           </Box>

src/Block.js

@@ -54,7 +54,7 @@ const Block = props => {
         fg && `text-${fg}`,
         typeof borderRadius === 'number' && `rounded-${borderRadius}`,
         position && `position-${position}`,
-        shadow && (shadow === true ? 'box-shadow' : `box-shadow-${shadow}`)
+        shadow && (shadow === 'small' ? 'box-shadow' : `box-shadow-${shadow}`)
       )}
       style={style}
     >
@@ -72,7 +72,7 @@ Block.propTypes = {
   display: PropTypes.oneOf(['inline', 'inline-block']),
   fg: PropTypes.string,
   position: PropTypes.oneOf(['absolute', 'fixed', 'relative']),
-  shadow: PropTypes.oneOf([true, 'medium', 'large', 'extra-large']),
+  shadow: PropTypes.oneOf(['small', 'medium', 'large', 'extra-large']),
   ...mapWhitespaceProps.propTypes
 }
 

src/__tests__/Block.js

@@ -55,7 +55,7 @@ describe('Block', () => {
   })
 
   it('renders shadow', () => {
-    expect(renderClasses(<Block shadow />)).toEqual(['box-shadow'])
+    expect(renderClasses(<Block shadow="small" />)).toEqual(['box-shadow'])
     expect(renderClasses(<Block shadow="medium" />)).toEqual(['box-shadow-medium'])
     expect(renderClasses(<Block shadow="large" />)).toEqual(['box-shadow-large'])
     expect(renderClasses(<Block shadow="extra-large" />)).toEqual(['box-shadow-extra-large'])