From 5ff828d9f07f52fa432b036ffeb6c386016ac67c Mon Sep 17 00:00:00 2001
From: Angus Fretwell <angusfretwell@me.com>
Date: Sun, 10 Feb 2019 18:33:28 +1100
Subject: [PATCH] [rebass] add ExtendedBox to test, add prop to CustomComponent
 example

---
 types/rebass/rebass-tests.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/types/rebass/rebass-tests.tsx b/types/rebass/rebass-tests.tsx
index 52e3e7de28..87df64f323 100644
--- a/types/rebass/rebass-tests.tsx
+++ b/types/rebass/rebass-tests.tsx
@@ -1,10 +1,19 @@
 import * as React from "react";
+import styled from "styled-components";
 import { Box, Flex, Text, Heading, Button, Link, Image, Card } from "rebass";
 
 const CustomComponent: React.FunctionComponent = ({ children }) => {
     return <div>{children}</div>;
 };
 
+const ExtendedBox = styled(Box)`
+    color: red;
+`;
+
+ExtendedBox.defaultProps = {
+    p: 3
+};
+
 () => (
     <Box width={1} css={{ height: "100vh" }} py={[1, 2, 3]} ml="1em">
         <Flex width={1} alignItems="center" justifyContent="center">
@@ -33,10 +42,13 @@ const CustomComponent: React.FunctionComponent = ({ children }) => {
             <Link href="https://rebassjs.org" title="Rebass" target="_blank">
                 Link
             </Link>
-            <Box as={CustomComponent}>CustomComponent</Box>
             <Button bg="magenta" border="1em" borderRadius="1em">
                 Button
             </Button>
+            <Box as={CustomComponent} bg="red">
+                CustomComponent
+            </Box>
+            <ExtendedBox m={2}>ExtendedBox</ExtendedBox>
         </Flex>
     </Box>
 );