chore(flex-grow): add story to showcase flexgrow and border style props

Author: codebender828

packages/chakra-ui-core/src/CFlex/CFlex.stories.js

@@ -25,15 +25,16 @@ storiesOf('UI | Flex', module)
   .add('Flex grow', () => ({
     components: { CFlex, CBox, CText },
     template: `
-      <CFlex align="center">
-        <CBox rounded-top="lg" p="3" w="20" mr="3" h="20" bg="blue.100">1</CBox>
-        <CBox rounded-right="lg" p="3" w="20" mr="3" h="20" bg="blue.100">2</CBox>
-        <CBox rounded-bottom="lg" p="3" w="20" mr="3" h="20" bg="blue.100">3</CBox>
-        <CBox rounded-right="lg" p="3" w="20" mr="3" h="20" bg="blue.100">4</CBox>
-        <CBox border-top-right-radius="lg" p="3" w="20" mr="3" h="20" bg="blue.100">5</CBox>
-        <CBox border-top-left-radius="lg" p="3" w="20" mr="3" h="20" bg="blue.100">6</CBox>
-        <CBox border-bottom-right-radius="lg" p="3" w="20" mr="3" h="20" bg="blue.100">7</CBox>
-        <CBox border-bottom-left-radius="lg" p="3" w="20" h="20" bg="blue.100">8</CBox>
+      <CFlex w="600px" align="center">
+        <CBox flex-grow="2" w="10" mr="3" h="10" bg="blue.100">1</CBox>
+        <CBox rounded-top="lg" w="10" mr="3" h="10" bg="blue.100">1</CBox>
+        <CBox rounded-right="lg" w="10" mr="3" h="10" bg="blue.100">2</CBox>
+        <CBox rounded-bottom="lg" w="10" mr="3" h="10" bg="blue.100">3</CBox>
+        <CBox rounded-right="lg" w="10" mr="3" h="10" bg="blue.100">4</CBox>
+        <CBox border-top-right-radius="lg" w="10" mr="3" h="10" bg="blue.100">5</CBox>
+        <CBox border-top-left-radius="lg" w="10" mr="3" h="10" bg="blue.100">6</CBox>
+        <CBox border-bottom-right-radius="lg" w="10" mr="3" h="10" bg="blue.100">7</CBox>
+        <CBox border-bottom-left-radius="lg" w="10" h="10" bg="blue.100">8</CBox>
       </CFlex>
     `
   }))