From d5d8c965d80823080f2f333fc2a3f9be08338cca Mon Sep 17 00:00:00 2001 From: allyssonsantos Date: Tue, 4 Jun 2019 11:05:19 -0300 Subject: [PATCH] feat(Card): Add theme props in Card component --- components/Card/Card.jsx | 32 ++- .../__snapshots__/Card.unit.test.jsx.snap | 20 +- components/Card/sub-components/Content.jsx | 32 ++- .../Card/sub-components/Description.jsx | 25 ++- components/Card/sub-components/Footer.jsx | 20 +- components/Card/sub-components/Header.jsx | 36 +++- components/Card/sub-components/Media.jsx | 29 ++- components/Card/sub-components/Thumbnail.jsx | 22 +- components/Card/sub-components/Title.jsx | 11 +- .../__snapshots__/Modal.unit.test.jsx.snap | 190 +++++++++++++++--- stories/Card/examples/AdvancedCard.jsx | 10 +- stories/Card/examples/JobAdCard.jsx | 8 +- 12 files changed, 361 insertions(+), 74 deletions(-) diff --git a/components/Card/Card.jsx b/components/Card/Card.jsx index a3ea14fe4..72639171c 100644 --- a/components/Card/Card.jsx +++ b/components/Card/Card.jsx @@ -1,6 +1,10 @@ import React from 'react'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; -import Colors from '../Colors'; + +import { shadow } from '../shared'; +import { colors } from '../shared/theme'; + import { Header, HeaderText, @@ -13,12 +17,22 @@ import { } from './sub-components'; const CardWrapper = styled.article` - background-color: ${Colors.WHITE}; border-radius: 8px; - box-shadow: 0 2px 6px 0 ${Colors.SHADOW[50]}; display: flex; flex-direction: column; position: relative; + + ${shadow()} + + ${({ + theme: { + colors: { + neutral: { 100: neutral100 }, + }, + }, + }) => ` + background-color: ${neutral100}; + `} `; class Card extends React.Component { @@ -41,4 +55,16 @@ class Card extends React.Component { render = () => ; } +Card.propTypes = { + theme: PropTypes.shape({ + colors: PropTypes.object, + }), +}; + +Card.defaultProps = { + theme: { + colors, + }, +}; + export default Card; diff --git a/components/Card/__snapshots__/Card.unit.test.jsx.snap b/components/Card/__snapshots__/Card.unit.test.jsx.snap index 98c557cf3..58171c013 100644 --- a/components/Card/__snapshots__/Card.unit.test.jsx.snap +++ b/components/Card/__snapshots__/Card.unit.test.jsx.snap @@ -6,11 +6,11 @@ exports[` Snapshots Should match the snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - padding: 20px 20px 0; + padding: 16px 16px 0; } .c1 > * { - margin-right: 18px; + margin-right: 16px; } .c1 > *:last-child { @@ -36,27 +36,26 @@ exports[` Snapshots Should match the snapshot 1`] = ` } .c5 { - background-color: #cccccc; border-radius: 4px; display: inline-block; height: 72px; width: 72px; + background-color: #cccccc; + border-radius: 4px; } .c6 { - padding: 12px 20px; - font-size: 14px; margin: 0; + padding: 12px 16px; + font-size: 14px; } .c7 { - padding: 0 20px 20px; + padding: 0 16px 16px; } .c0 { - background-color: #FFFFFF; border-radius: 8px; - box-shadow: 0 2px 6px 0 rgba(128,128,128,0.5); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -65,6 +64,8 @@ exports[` Snapshots Should match the snapshot 1`] = ` -ms-flex-direction: column; flex-direction: column; position: relative; + box-shadow: 0px 0px 0px 0px rgba(76,76,76,0.2),0px 0px 0px 0px rgba(76,76,76,0.14),0px 0px 0px 0px rgba(76,76,76,0.12); + background-color: #f2f2f2; }
Snapshots Should match the snapshot 1`] = ` exports[` Snapshots should match snapshot with rounded Thumbnail 1`] = ` .c0 { - background-color: #cccccc; border-radius: 50%; display: inline-block; height: 72px; width: 72px; + background-color: #cccccc; + border-radius: 50%; } ` + padding: ${small}px ${medium}px; + font-size: ${baseFontSize * 0.875}px; + `} `; +Content.propTypes = { + theme: PropTypes.shape({ + baseFontSize: PropTypes.number, + spacing: PropTypes.object, + }), +}; + +Content.defaultProps = { + theme: { + spacing, + baseFontSize: defaultBaseFontSize, + }, +}; + Content.displayName = 'Card.Content'; export default Content; diff --git a/components/Card/sub-components/Description.jsx b/components/Card/sub-components/Description.jsx index 799a6232b..ba935eb25 100644 --- a/components/Card/sub-components/Description.jsx +++ b/components/Card/sub-components/Description.jsx @@ -2,9 +2,22 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; +import { + baseFontSize as defaultBaseFontSize, + spacing, +} from '../../shared/theme'; + const Content = styled.div` - font-size: ${props => (props.small ? '12px' : '14px')}; - margin: 8px 0 0 0; + ${({ + small, + theme: { + baseFontSize, + spacing: { xsmall }, + }, + }) => ` + font-size: ${small ? baseFontSize * 0.75 : baseFontSize * 0.875}px; + margin: ${xsmall}px 0 0 0; + `} `; const Description = ({ ...props }) => ; @@ -14,10 +27,18 @@ Description.displayName = 'Card.Description'; Description.propTypes = { /** default `font-size` is `14px`, with `small` prop defined the `font-size` is changed to `12px`. */ small: PropTypes.bool, + theme: PropTypes.shape({ + baseFontSize: PropTypes.number, + spacing: PropTypes.object, + }), }; Description.defaultProps = { small: false, + theme: { + baseFontSize: defaultBaseFontSize, + spacing, + }, }; export default Description; diff --git a/components/Card/sub-components/Footer.jsx b/components/Card/sub-components/Footer.jsx index 32f9c016f..c97ef344b 100644 --- a/components/Card/sub-components/Footer.jsx +++ b/components/Card/sub-components/Footer.jsx @@ -1,9 +1,27 @@ import styled from 'styled-components'; +import PropTypes from 'prop-types'; +import { spacing } from '../../shared/theme'; const Footer = styled.footer` - padding: 0 20px 20px; + padding: ${({ + theme: { + spacing: { medium }, + }, + }) => `0 ${medium}px ${medium}px`}; `; +Footer.propTypes = { + theme: PropTypes.shape({ + spacing: PropTypes.object, + }), +}; + +Footer.defaultProps = { + theme: { + spacing, + }, +}; + Footer.displayName = 'Card.Footer'; export default Footer; diff --git a/components/Card/sub-components/Header.jsx b/components/Card/sub-components/Header.jsx index 0c664b498..d0cc48df9 100644 --- a/components/Card/sub-components/Header.jsx +++ b/components/Card/sub-components/Header.jsx @@ -1,18 +1,40 @@ import styled from 'styled-components'; +import PropTypes from 'prop-types'; + +import { spacing } from '../../shared/theme'; const Header = styled.header` display: flex; - padding: 20px 20px 0; - > * { - margin-right: 18px; - } + ${({ + theme: { + spacing: { medium }, + }, + }) => ` + padding: ${medium}px ${medium}px 0; + + > * { + margin-right: ${medium}px; + } - > *:last-child { - margin-right: 0; - } + > *:last-child { + margin-right: 0; + } + `} `; +Header.propTypes = { + theme: PropTypes.shape({ + spacing: PropTypes.object, + }), +}; + +Header.defaultProps = { + theme: { + spacing, + }, +}; + Header.displayName = 'Card.Header'; export default Header; diff --git a/components/Card/sub-components/Media.jsx b/components/Card/sub-components/Media.jsx index b50fac0fc..40a8e2ad5 100644 --- a/components/Card/sub-components/Media.jsx +++ b/components/Card/sub-components/Media.jsx @@ -1,14 +1,25 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import Colors from '../../Colors'; + +import { spacing, colors } from '../../shared/theme'; const Wrapper = styled.div` - background-color: ${Colors.BLACK['200']}; - margin-top: 12px; padding-bottom: 56.25%; position: relative; overflow: hidden; + + ${({ + theme: { + colors: { + neutral: { 300: neutral300 }, + }, + spacing: { small }, + }, + }) => ` + margin-top: ${small}px; + background-color: ${neutral300}; + `} `; const Image = styled.img` @@ -18,8 +29,8 @@ const Image = styled.img` width: 100%; `; -const Media = ({ className, style, ...props }) => ( - +const Media = ({ className, style, theme, ...props }) => ( + ); @@ -29,11 +40,19 @@ Media.displayName = 'Card.Media'; Media.propTypes = { className: PropTypes.string, style: PropTypes.objectOf(PropTypes.string), + theme: PropTypes.shape({ + colors: PropTypes.object, + spacing: PropTypes.object, + }), }; Media.defaultProps = { className: undefined, style: undefined, + theme: { + colors, + spacing, + }, }; export default Media; diff --git a/components/Card/sub-components/Thumbnail.jsx b/components/Card/sub-components/Thumbnail.jsx index 77c12abdf..7a9b36778 100644 --- a/components/Card/sub-components/Thumbnail.jsx +++ b/components/Card/sub-components/Thumbnail.jsx @@ -1,14 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import Colors from '../../Colors'; + +import { colors } from '../../shared/theme'; const Image = styled.img` - background-color: ${Colors.BLACK['200']}; border-radius: ${({ rounded }) => (rounded ? '50%' : '4px')}; display: inline-block; height: 72px; width: 72px; + + ${({ + rounded, + theme: { + colors: { + neutral: { 300: neutral300 }, + }, + }, + }) => ` + background-color: ${neutral300}; + border-radius: ${rounded ? '50%' : '4px'}; + `} `; const Thumbnail = ({ ...props }) => ; @@ -20,10 +32,16 @@ Thumbnail.propTypes = { alt: PropTypes.string.isRequired, /** Display a rounded Thumbnail. */ rounded: PropTypes.bool, + theme: PropTypes.shape({ + colors: PropTypes.object, + }), }; Thumbnail.defaultProps = { rounded: false, + theme: { + colors, + }, }; export default Thumbnail; diff --git a/components/Card/sub-components/Title.jsx b/components/Card/sub-components/Title.jsx index 76cbe5c91..7bdd44601 100644 --- a/components/Card/sub-components/Title.jsx +++ b/components/Card/sub-components/Title.jsx @@ -2,8 +2,11 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; +import { baseFontSize as defaultBaseFontSize } from '../../shared/theme'; + const Heading = styled.h2` - font-size: ${props => (props.small ? '20px' : '24px')}; + font-size: ${({ small, theme: { baseFontSize } }) => + `${small ? baseFontSize * 1.25 : baseFontSize * 1.5}`}px; font-weight: 600; margin: 0; `; @@ -15,10 +18,16 @@ Title.displayName = 'Card.Title'; Title.propTypes = { /** default `font-size` is `24px`, with `small` prop defined the `font-size` is changed to `20px`. */ small: PropTypes.bool, + theme: PropTypes.shape({ + baseFontSize: PropTypes.number, + }), }; Title.defaultProps = { small: false, + theme: { + baseFontSize: defaultBaseFontSize, + }, }; export default Title; diff --git a/components/Modal/__snapshots__/Modal.unit.test.jsx.snap b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap index d2788bc35..8c0ff1282 100644 --- a/components/Modal/__snapshots__/Modal.unit.test.jsx.snap +++ b/components/Modal/__snapshots__/Modal.unit.test.jsx.snap @@ -15,13 +15,11 @@ exports[` Snapshots should match the snapshot 1`] = ` } .c9 { - padding: 0 20px 20px; + padding: 0 16px 16px; } .c2 { - background-color: #FFFFFF; border-radius: 8px; - box-shadow: 0 2px 6px 0 rgba(128,128,128,0.5); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -30,6 +28,8 @@ exports[` Snapshots should match the snapshot 1`] = ` -ms-flex-direction: column; flex-direction: column; position: relative; + box-shadow: 0px 0px 0px 0px rgba(76,76,76,0.2),0px 0px 0px 0px rgba(76,76,76,0.14),0px 0px 0px 0px rgba(76,76,76,0.12); + background-color: #f2f2f2; } .c13 { @@ -99,9 +99,9 @@ exports[` Snapshots should match the snapshot 1`] = ` } .c8 { - padding: 12px 20px; - font-size: 14px; margin: 0; + padding: 12px 16px; + font-size: NaNpx; font-size: 16px; max-height: 70vh; overflow-y: auto; @@ -113,12 +113,12 @@ exports[` Snapshots should match the snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - padding: 20px 20px 0; + padding: 16px 16px 0; padding: 24px 24px 0; } .c4 > * { - margin-right: 18px; + margin-right: 16px; } .c4 > *:last-child { @@ -304,13 +304,11 @@ exports[` Snapshots should match the snapshot 1`] = ` } .c9 { - padding: 0 20px 20px; + padding: 0 16px 16px; } .c2 { - background-color: #FFFFFF; border-radius: 8px; - box-shadow: 0 2px 6px 0 rgba(128,128,128,0.5); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -319,6 +317,8 @@ exports[` Snapshots should match the snapshot 1`] = ` -ms-flex-direction: column; flex-direction: column; position: relative; + box-shadow: 0px 0px 0px 0px rgba(76,76,76,0.2),0px 0px 0px 0px rgba(76,76,76,0.14),0px 0px 0px 0px rgba(76,76,76,0.12); + background-color: #f2f2f2; } .c13 { @@ -388,9 +388,9 @@ exports[` Snapshots should match the snapshot 1`] = ` } .c8 { - padding: 12px 20px; - font-size: 14px; margin: 0; + padding: 12px 16px; + font-size: NaNpx; font-size: 16px; max-height: 70vh; overflow-y: auto; @@ -402,12 +402,12 @@ exports[` Snapshots should match the snapshot 1`] = ` display: -webkit-flex; display: -ms-flexbox; display: flex; - padding: 20px 20px 0; + padding: 16px 16px 0; padding: 24px 24px 0; } .c4 > * { - margin-right: 18px; + margin-right: 16px; } .c4 > *:last-child { @@ -877,13 +877,33 @@ exports[` Snapshots should match the snapshot 1`] = ` "attrs": Array [], "componentStyle": ComponentStyle { "componentId": "Content-sc-6vzg5x-0", - "isStatic": true, + "isStatic": false, "rules": Array [ - "padding:12px 20px;font-size:14px;margin:0;", + "margin:0;", + [Function], ], }, + "defaultProps": Object { + "theme": Object { + "baseFontSize": 16, + "spacing": Object { + "large": 24, + "medium": 16, + "small": 12, + "xlarge": 32, + "xsmall": 8, + "xxlarge": 40, + "xxsmall": 4, + "xxxlarge": 48, + "xxxsmall": 2, + }, + }, + }, "displayName": "Card.Content", "foldedComponentIds": Array [], + "propTypes": Object { + "theme": [Function], + }, "render": [Function], "styledComponentId": "Content-sc-6vzg5x-0", "target": "div", @@ -897,14 +917,34 @@ exports[` Snapshots should match the snapshot 1`] = ` "attrs": Array [], "componentStyle": ComponentStyle { "componentId": "Footer-pp401c-0", - "isStatic": true, + "isStatic": false, "lastClassName": "c9", "rules": Array [ - "padding:0 20px 20px;", + "padding:", + [Function], + ";", ], }, + "defaultProps": Object { + "theme": Object { + "spacing": Object { + "large": 24, + "medium": 16, + "small": 12, + "xlarge": 32, + "xsmall": 8, + "xxlarge": 40, + "xxsmall": 4, + "xxxlarge": 48, + "xxxsmall": 2, + }, + }, + }, "displayName": "Card.Footer", "foldedComponentIds": Array [], + "propTypes": Object { + "theme": [Function], + }, "render": [Function], "styledComponentId": "Footer-pp401c-0", "target": "footer", @@ -917,13 +957,32 @@ exports[` Snapshots should match the snapshot 1`] = ` "attrs": Array [], "componentStyle": ComponentStyle { "componentId": "c3", - "isStatic": true, + "isStatic": false, "rules": Array [ - "display:flex;padding:20px 20px 0;> *{margin-right:18px;}> *:last-child{margin-right:0;}", + "display:flex;", + [Function], ], }, + "defaultProps": Object { + "theme": Object { + "spacing": Object { + "large": 24, + "medium": 16, + "small": 12, + "xlarge": 32, + "xsmall": 8, + "xxlarge": 40, + "xxsmall": 4, + "xxxlarge": 48, + "xxxsmall": 2, + }, + }, + }, "displayName": "Card.Header", "foldedComponentIds": Array [], + "propTypes": Object { + "theme": [Function], + }, "render": [Function], "styledComponentId": "c3", "target": "header", @@ -1234,14 +1293,13 @@ exports[` Snapshots should match the snapshot 1`] = ` "attrs": Array [], "componentStyle": ComponentStyle { "componentId": "Card__CardWrapper-om5cci-0", - "isStatic": true, + "isStatic": false, "lastClassName": "c2", "rules": Array [ - "background-color:", - "#FFFFFF", - ";border-radius:8px;box-shadow:0 2px 6px 0 ", - "rgba(128, 128, 128, 0.5)", - ";display:flex;flex-direction:column;position:relative;", + "border-radius:8px;display:flex;flex-direction:column;position:relative;", + [Function], + " ", + [Function], ], }, "displayName": "Card__CardWrapper", @@ -1366,7 +1424,8 @@ exports[` Snapshots should match the snapshot 1`] = ` "isStatic": false, "lastClassName": "c4", "rules": Array [ - "display:flex;padding:20px 20px 0;> *{margin-right:18px;}> *:last-child{margin-right:0;}", + "display:flex;", + [Function], "padding:", [Function], ";", @@ -1481,10 +1540,20 @@ exports[` Snapshots should match the snapshot 1`] = ` Snapshots should match the snapshot 1`] = ` "rules": Array [ "font-size:", [Function], - ";font-weight:600;margin:0;", + "px;font-weight:600;margin:0;", ], }, "displayName": "Title__Heading", @@ -1514,6 +1583,11 @@ exports[` Snapshots should match the snapshot 1`] = ` } forwardedRef={null} small={false} + theme={ + Object { + "baseFontSize": 16, + } + } >

Snapshots should match the snapshot 1`] = ` "isStatic": false, "lastClassName": "c8", "rules": Array [ - "padding:12px 20px;font-size:14px;margin:0;", + "margin:0;", + [Function], "font-size:16px;max-height:70vh;overflow-y:auto;padding:", [Function], ";", @@ -1618,7 +1693,23 @@ exports[` Snapshots should match the snapshot 1`] = ` - + Snapshots should match the snapshot 1`] = ` "attrs": Array [], "componentStyle": ComponentStyle { "componentId": "Footer-pp401c-0", - "isStatic": true, + "isStatic": false, "lastClassName": "c9", "rules": Array [ - "padding:0 20px 20px;", + "padding:", + [Function], + ";", ], }, + "defaultProps": Object { + "theme": Object { + "spacing": Object { + "large": 24, + "medium": 16, + "small": 12, + "xlarge": 32, + "xsmall": 8, + "xxlarge": 40, + "xxsmall": 4, + "xxxlarge": 48, + "xxxsmall": 2, + }, + }, + }, "displayName": "Card.Footer", "foldedComponentIds": Array [], + "propTypes": Object { + "theme": [Function], + }, "render": [Function], "styledComponentId": "Footer-pp401c-0", "target": "footer", @@ -1643,6 +1754,21 @@ exports[` Snapshots should match the snapshot 1`] = ` } } forwardedRef={null} + theme={ + Object { + "spacing": Object { + "large": 24, + "medium": 16, + "small": 12, + "xlarge": 32, + "xsmall": 8, + "xxlarge": 40, + "xxsmall": 4, + "xxxlarge": 48, + "xxxsmall": 2, + }, + } + } >