Refactor Card Component

src/components/Card/Card.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Box } from 'theme-ui'
+
+const Card = ({ children, ...props }) => {
+  return (
+    <Box
+      variant="default"
+      {...props}
+      __css={{
+        borderRadius: 'card',
+        px: 'small',
+        py: 'medium',
+        textAlign: 'center',
+      }}
+      __themeKey="cards"
+    >
+      {children}
+    </Box>
+  )
+}
+
+Card.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default Card

src/components/Card/CardContent.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Box } from 'theme-ui'
+
+const CardContent = ({ children, ...props }) => {
+  return <Box {...props}>{children}</Box>
+}
+
+CardContent.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default CardContent

src/components/Card/CardFooter.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Box } from 'theme-ui'
+
+const CardFooter = ({ children, ...props }) => {
+  return (
+    <Box as="footer" {...props} __css={{ mt: 'small' }}>
+      {children}
+    </Box>
+  )
+}
+
+CardFooter.propTypes = {
+  children: PropTypes.node.isRequired,
+}
+
+export default CardFooter

src/components/Card/CardImage.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Box } from 'theme-ui'
+
+import { imagePropTypes } from '../../utils/prop-types'
+
+const CardImage = ({ image, ...props }) => {
+  const { url, alt, dimensions } = image
+  return (
+    <Box
+      as="img"
+      __css={{ m: '0 auto', maxWidth: 'full', mb: 'medium' }}
+      src={url}
+      alt={alt}
+      width={dimensions.width}
+      {...props}
+    />
+  )
+}
+
+CardImage.propTypes = {
+  image: imagePropTypes.isRequired,
+}
+
+export default CardImage

src/components/Card/index.js

@@ -1,50 +1,10 @@
-import React from 'react'
-import { Box } from 'theme-ui'
-import { RichText } from 'prismic-reactjs'
-
-import { structuredTextPropTypes, imagePropTypes } from '../../utils/prop-types'
-
-const Card = ({ image, title, content, ...props }) => {
-  return (
-    <Box
-      variant="default"
-      {...props}
-      __css={{
-        borderRadius: 'card',
-        px: 'small',
-        py: 'medium',
-        textAlign: 'center',
-      }}
-      __themeKey="cards"
-    >
-      <Box
-        as="img"
-        __css={{ m: '0 auto', maxWidth: 'full', mb: 'medium' }}
-        src={image.url}
-        alt={image.alt}
-        width={image.dimensions.width}
-      />
-      <div>
-        <Box as="h3" __css={{ fontSize: 'base', mb: 'small' }}>
-          {RichText.asText(title)}
-        </Box>
-        <Box sx={{ fontWeight: 'lean' }}>
-          <RichText render={content} />
-        </Box>
-      </div>
-    </Box>
-  )
-}
-
-Card.defaultProps = {
-  content: [],
-  image: [],
-}
-
-Card.propTypes = {
-  content: structuredTextPropTypes,
-  image: imagePropTypes,
-  title: structuredTextPropTypes.isRequired,
-}
+import Card from './Card'
+import CardContent from './CardContent'
+import CardFooter from './CardFooter'
+import CardImage from './CardImage'
+
+Card.Content = CardContent
+Card.Footer = CardFooter
+Card.Image = CardImage
 
 export default Card

src/components/Card/index.stories.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Box } from 'theme-ui'
+import { RichText } from 'prismic-reactjs'
 
 import Card from '.'
 import mock from './mock.json'
@@ -11,7 +12,30 @@ export default {
 
 export const Default = () => (
   <Box sx={{ maxWidth: '15rem', mx: 'auto', my: 'xlarge' }}>
-    <Card {...mock} />
+    <Card>
+      <Card.Image image={mock.image} />
+      <Card.Content>
+        <Box as="h3" __css={{ fontSize: 'base', mb: 'small' }}>
+          {RichText.asText(mock.title)}
+        </Box>
+        <Box sx={{ fontWeight: 'lean' }}>
+          <RichText render={mock.content} />
+        </Box>
+      </Card.Content>
+      <Card.Footer>
+        <Box
+          as="span"
+          __css={{
+            fontSize: 'tiny',
+            fontWeight: 'heading',
+            mb: 'xsmall',
+            display: 'block',
+          }}
+        >
+          {mock.footer}
+        </Box>
+      </Card.Footer>
+    </Card>
   </Box>
 )
 

src/components/Card/mock.json

@@ -28,5 +28,6 @@
       "text": "",
       "spans": []
     }
-  ]
+  ],
+  "footer": "Footer"
 }

src/slices/CardsCarousel/index.js

@@ -67,7 +67,17 @@ const CardsCarousel = ({ slice }) => {
           >
             {items.map((item) => (
               <Box key={uuid()} px={[null, 'small']}>
-                <Card key={item.toString()} {...item} />
+                <Card key={item.toString()}>
+                  <Card.Image image={item.image} />
+                  <Card.Content>
+                    <Box as="h3" __css={{ fontSize: 'base', mb: 'small' }}>
+                      {RichText.asText(item.title)}
+                    </Box>
+                    <Box sx={{ fontWeight: 'lean' }}>
+                      <RichText render={item.content} />
+                    </Box>
+                  </Card.Content>
+                </Card>
               </Box>
             ))}
           </Slider>