Skip to content
Permalink
Browse files

feat(core-card): upgrade to styled components

BREAKING CHANGE: styled-components now a peer dependency
  • Loading branch information...
marcod1419 authored and jraff committed Jun 14, 2019
1 parent 3aa8d4e commit a7d7b6dc93fcad9288bc0bb897968438b16f2d3b
@@ -1,20 +1,35 @@
import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'

import Box from '@tds/core-box'
import { colorWhite, colorWhiteLilac, colorAthensGrey } from '@tds/core-colours'
import { borders } from '@tds/shared-styles'
import safeRest from '../../shared/utils/safeRest'

import styles from './Card.modules.scss'

const StyledCard = styled(({ variant, ...rest }) => <Box {...rest} />)(({ variant }) => ({
...borders.none,
...borders.rounded,
...(variant === 'white' && {
boxShadow: '0 0 16px 0 rgba(213, 213, 213, 0.5)',
backgroundColor: colorWhite,
}),
...(variant === 'lavender' && {
backgroundColor: colorWhiteLilac,
}),
...(variant === 'grey' && {
backgroundColor: colorAthensGrey,
}),
}))
/**
* A content container.
*
* @version ./package.json
*/
const Card = ({ variant, children, ...rest }) => (
<Box {...safeRest(rest)} horizontal={4} vertical={5} className={styles[variant]}>
<StyledCard {...safeRest(rest)} horizontal={4} vertical={5} variant={variant}>
{children}
</Box>
</StyledCard>
)

Card.propTypes = {

This file was deleted.

@@ -1,10 +1,11 @@
import React from 'react'
import { shallow, render } from 'enzyme'
import { shallow, mount, render } from 'enzyme'

import Card from '../Card'

describe('<Card />', () => {
const doShallow = (props = {}) => shallow(<Card {...props}>Some content</Card>)
const doMount = (props = {}) => mount(<Card {...props}>Some content</Card>)

it('renders', () => {
const card = render(<Card>Children</Card>)
@@ -13,17 +14,17 @@ describe('<Card />', () => {
})

it('can be presented as one of the allowed variants', () => {
let card = doShallow()
expect(card.dive()).toHaveClassName('white')
let card = doMount()
expect(card).toMatchSnapshot()

card = doShallow({ variant: 'white' })
expect(card.dive()).toHaveClassName('white')
card = doMount({ variant: 'white' })
expect(card).toMatchSnapshot()

card = doShallow({ variant: 'lavender' })
expect(card.dive()).toHaveClassName('lavender')
card = doMount({ variant: 'lavender' })
expect(card).toMatchSnapshot()

card = doShallow({ variant: 'grey' })
expect(card.dive()).toHaveClassName('grey')
card = doMount({ variant: 'grey' })
expect(card).toMatchSnapshot()
})

it('passes additional attributes to the input element', () => {
@@ -1,8 +1,289 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Card /> can be presented as one of the allowed variants 1`] = `
.c0 {
border-width: 0;
border-radius: 4px;
box-shadow: 0 0 16px 0 rgba(213,213,213,0.5);
background-color: #fff;
}

<Card
variant="white"
>
<Styled(Component)
horizontal={4}
variant="white"
vertical={5}
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
[Function],
],
},
"displayName": "Styled(Component)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
horizontal={4}
variant="white"
vertical={5}
>
<Component
className="c0"
horizontal={4}
variant="white"
vertical={5}
>
<Box
className="c0"
horizontal={4}
inline={false}
tag="div"
vertical={5}
>
<div
className="TDS_Box-modules__horizontalPadding-4___3W1-P TDS_Box-modules__verticalPadding-5___m0Okg c0"
>
Some content
</div>
</Box>
</Component>
</StyledComponent>
</Styled(Component)>
</Card>
`;

exports[`<Card /> can be presented as one of the allowed variants 2`] = `
.c0 {
border-width: 0;
border-radius: 4px;
box-shadow: 0 0 16px 0 rgba(213,213,213,0.5);
background-color: #fff;
}

<Card
variant="white"
>
<Styled(Component)
horizontal={4}
variant="white"
vertical={5}
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
[Function],
],
},
"displayName": "Styled(Component)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
horizontal={4}
variant="white"
vertical={5}
>
<Component
className="c0"
horizontal={4}
variant="white"
vertical={5}
>
<Box
className="c0"
horizontal={4}
inline={false}
tag="div"
vertical={5}
>
<div
className="TDS_Box-modules__horizontalPadding-4___3W1-P TDS_Box-modules__verticalPadding-5___m0Okg c0"
>
Some content
</div>
</Box>
</Component>
</StyledComponent>
</Styled(Component)>
</Card>
`;

exports[`<Card /> can be presented as one of the allowed variants 3`] = `
.c0 {
border-width: 0;
border-radius: 4px;
background-color: #f2eff4;
}

<Card
variant="lavender"
>
<Styled(Component)
horizontal={4}
variant="lavender"
vertical={5}
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
[Function],
],
},
"displayName": "Styled(Component)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
horizontal={4}
variant="lavender"
vertical={5}
>
<Component
className="c0"
horizontal={4}
variant="lavender"
vertical={5}
>
<Box
className="c0"
horizontal={4}
inline={false}
tag="div"
vertical={5}
>
<div
className="TDS_Box-modules__horizontalPadding-4___3W1-P TDS_Box-modules__verticalPadding-5___m0Okg c0"
>
Some content
</div>
</Box>
</Component>
</StyledComponent>
</Styled(Component)>
</Card>
`;

exports[`<Card /> can be presented as one of the allowed variants 4`] = `
.c0 {
border-width: 0;
border-radius: 4px;
background-color: #f7f7f8;
}

<Card
variant="grey"
>
<Styled(Component)
horizontal={4}
variant="grey"
vertical={5}
>
<StyledComponent
forwardedComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bdVaJa",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
[Function],
],
},
"displayName": "Styled(Component)",
"foldedComponentIds": Array [],
"render": [Function],
"styledComponentId": "sc-bdVaJa",
"target": [Function],
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
horizontal={4}
variant="grey"
vertical={5}
>
<Component
className="c0"
horizontal={4}
variant="grey"
vertical={5}
>
<Box
className="c0"
horizontal={4}
inline={false}
tag="div"
vertical={5}
>
<div
className="TDS_Box-modules__horizontalPadding-4___3W1-P TDS_Box-modules__verticalPadding-5___m0Okg c0"
>
Some content
</div>
</Box>
</Component>
</StyledComponent>
</Styled(Component)>
</Card>
`;

exports[`<Card /> renders 1`] = `
.c0 {
border-width: 0;
border-radius: 4px;
box-shadow: 0 0 16px 0 rgba(213,213,213,0.5);
background-color: #fff;
}

<div
class="TDS_Box-modules__horizontalPadding-4___3W1-P TDS_Box-modules__verticalPadding-5___m0Okg white"
class="TDS_Box-modules__horizontalPadding-4___3W1-P TDS_Box-modules__verticalPadding-5___m0Okg c0"
>
Children
</div>
@@ -1,4 +1,3 @@
require('./dist/index.css')
const Card = require('./dist/index.cjs')

module.exports = Card

0 comments on commit a7d7b6d

Please sign in to comment.
You can’t perform that action at this time.