feat(card): use css modules and disallow custom classes

- move card to components dir

config/styleguide.config.js

@@ -146,7 +146,7 @@ module.exports = {
         {
           name: 'Content',
           components() {
-            return [path.resolve('src/old-components/Card/Card.jsx')]
+            return [path.resolve('src/components/Card/Card.jsx')]
           },
           sections: compact([
             {

src/old-components/Card/Card.jsx → src/components/Card/Card.jsx

@@ -1,26 +1,30 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import classNames from 'classnames'
-
 import { deprecate } from '../../utils/warn'
 
-import './Card.scss'
+import styles from './Card.modules.scss'
 
 /**
  * A container that serves as an entry point to more detailed information.
  */
 const Card = ({ className, children, ...rest }) => {
   if (className) {
-    deprecate('Card', 'Custom CSS classes are deprecated. This component does not support custom styling.')
+    deprecate(
+      'Card',
+      'Custom CSS classes are deprecated. This component does not support custom styling.'
+    )
   }
 
   if (rest.style) {
-    deprecate('Card', 'Inline styles are deprecated. This component does not support custom styling.')
+    deprecate(
+      'Card',
+      'Inline styles are deprecated. This component does not support custom styling.'
+    )
   }
 
   return (
-    <div {...rest} className={classNames('card', className)}>
+    <div {...rest} className={styles.card}>
       {children}
     </div>
   )
@@ -35,7 +39,7 @@ Card.propTypes = {
   /**
    * The Card's content. Can be text, any HTML element, or any component.
    */
-  children: PropTypes.node.isRequired
+  children: PropTypes.node.isRequired,
 }
 
 export default Card

src/old-components/Card/Card.scss → src/components/Card/Card.modules.scss

@@ -4,7 +4,7 @@
   border: 0;
   box-sizing: border-box;
   border-radius: 4px;
-  box-shadow: 0 0 16px 0 rgba(213, 213, 213, .5);
+  box-shadow: 0 0 16px 0 rgba(213, 213, 213, 0.5);
   background-color: $color-white;
   padding: 30px;
 }

src/old-components/Card/__tests__/Card.spec.jsx → src/components/Card/__tests__/Card.spec.jsx

@@ -26,13 +26,6 @@ describe('<Card />', () => {
     expect(card).toHaveProp('title', 'my title')
   })
 
-  it('accepts but deprecates custom classes', () => {
-    const card = shallow(<Card className="some-class">Some content</Card>)
-
-    expect(card).toHaveClassName('some-class')
-    expect(deprecate).toHaveBeenCalled()
-  })
-
   it('accepts but deprecates inline styles', () => {
     const styles = { color: 'blue' }
     const card = shallow(<Card style={styles}>Some content</Card>)

src/index.js

@@ -2,7 +2,7 @@ import './scss/global.scss'
 
 export { default as Button } from './components/Button/Button'
 export { default as ButtonLink } from './components/Link/ButtonLink/ButtonLink'
-export { default as Card } from './old-components/Card/Card'
+export { default as Card } from './components/Card/Card'
 export { default as ChevronLink } from './components/Link/ChevronLink/ChevronLink'
 export { default as DecorativeIcon } from './components/Icons/DecorativeIcon/DecorativeIcon'
 export { default as DimpleDivider } from './components/Dividers/DimpleDivider/DimpleDivider'