feat: Add cards

README.md

@@ -16,6 +16,7 @@ Opinionated design system for React, based on Chakra UI + Next.js.
 - Components:
   - 🔗 [Links](#links)
   - 🗜 [Containers](#containers)
+  - ◻️ [Cards](#cards)
   - 🧪 _More to come_
 
 ## Installation
@@ -168,6 +169,34 @@ export default () => (
 )
 ```
 
+### Cards
+
+```tsx
+import { Card, FlexCard, StackCard } from '@47ng/chakra-next'
+
+export default () => (
+  <>
+    {/* Card as Box */}
+    <Card>I'm in a card</Card>
+
+    {/* Card + Flex */}
+    <FlexCard>
+      <Box>Direction is column by default</Box>
+      <Box>Foo</Box>
+      <Box>Bar</Box>
+      <Box>Egg</Box>
+    </FlexCard>
+
+    {/* Card + Stack */}
+    <StackCard spacing={8}>
+      <Box>Foo</Box>
+      <Box>Bar</Box>
+      <Box>Egg</Box>
+    </StackCard>
+  </>
+)
+```
+
 ## License
 
 [MIT](https://github.com/47ng/chakra-next/blob/next/LICENSE) - Made with ❤️ by [François Best](https://francoisbest.com).

src/components/cards.test.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { render } from '../../test/render'
+import '@testing-library/jest-dom/extend-expect'
+import { Card, FlexCard, StackCard } from './cards'
+
+describe('Cards', () => {
+  test('Card', () => {
+    const { getByTestId } = render(<Card data-testid="card" />)
+    const element = getByTestId('card')
+    expect(element.tagName).toEqual('DIV')
+    const style = getComputedStyle(element)
+    expect(style.display).toEqual('block')
+    expect(style.backgroundColor).toEqual('rgb(255, 255, 255)')
+    expect(style.borderRadius).toEqual('4px')
+    expect(style.padding).toEqual('1rem')
+    expect(style.boxShadow).toEqual(
+      '0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)'
+    )
+  })
+  test('FlexCard', () => {
+    const { getByTestId } = render(<FlexCard data-testid="card" />)
+    const element = getByTestId('card')
+    expect(element.tagName).toEqual('DIV')
+    const style = getComputedStyle(element)
+    expect(style.display).toEqual('flex')
+    expect(style.backgroundColor).toEqual('rgb(255, 255, 255)')
+    expect(style.borderRadius).toEqual('4px')
+    expect(style.padding).toEqual('1rem')
+    expect(style.boxShadow).toEqual(
+      '0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)'
+    )
+  })
+
+  test('StackCard', () => {
+    const { getByTestId } = render(<StackCard data-testid="card" />)
+    const element = getByTestId('card')
+    expect(element.tagName).toEqual('DIV')
+    const style = getComputedStyle(element)
+    expect(style.display).toEqual('flex')
+    expect(style.backgroundColor).toEqual('rgb(255, 255, 255)')
+    expect(style.borderRadius).toEqual('4px')
+    expect(style.padding).toEqual('1rem')
+    expect(style.boxShadow).toEqual(
+      '0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06)'
+    )
+  })
+})

src/components/cards.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {
+  Box,
+  Flex,
+  Stack,
+  BoxProps,
+  FlexProps,
+  StackProps
+} from '@chakra-ui/core'
+
+// --
+
+const baseProps: BoxProps = {
+  p: 4,
+  borderRadius: 4,
+  bg: 'white',
+  shadow: 'md'
+}
+
+export interface CardProps extends BoxProps {}
+
+export const Card: React.FC<CardProps> = ({ ...props }) => {
+  return <Box {...baseProps} {...props} />
+}
+
+// --
+
+export interface FlexCardProps extends FlexProps {}
+
+export const FlexCard: React.FC<FlexCardProps> = ({ ...props }) => {
+  return <Flex {...baseProps} {...props} />
+}
+
+// --
+
+export interface StackCardProps extends StackProps {}
+
+export const StackCard: React.FC<StackCardProps> = ({ ...props }) => {
+  return <Stack {...baseProps} {...props} />
+}