feat(Card): Add theme props in Card component

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 = () => <CardWrapper {...this.props} />;
 }
 
+Card.propTypes = {
+  theme: PropTypes.shape({
+    colors: PropTypes.object,
+  }),
+};
+
+Card.defaultProps = {
+  theme: {
+    colors,
+  },
+};
+
 export default Card;

components/Card/__snapshots__/Card.unit.test.jsx.snap

@@ -6,11 +6,11 @@ exports[`<Card /> 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[`<Card /> 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[`<Card /> 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;
 }
 
 <article
@@ -108,11 +109,12 @@ exports[`<Card /> Snapshots Should match the snapshot 1`] = `
 
 exports[`<Card /> 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%;
 }
 
 <img

components/Card/sub-components/Content.jsx

@@ -1,11 +1,39 @@
 import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import {
+  spacing,
+  baseFontSize as defaultBaseFontSize,
+} from '../../shared/theme';
 
 const Content = styled.div`
-  padding: 12px 20px;
-  font-size: 14px;
   margin: 0;
+
+  ${({
+    theme: {
+      baseFontSize,
+      spacing: { small, medium },
+    },
+  }) => `
+    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;

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 }) => <Content {...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;

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;

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;

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 }) => (
-  <Wrapper className={className} style={style}>
+const Media = ({ className, style, theme, ...props }) => (
+  <Wrapper className={className} style={style} theme={theme}>
     <Image {...props} />
   </Wrapper>
 );
@@ -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;

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 }) => <Image {...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;