fix(card): add missing hasRipple (material-components#248)

bmihelac · Sep 18, 2018 · 9f8c79f · 9f8c79f
1 parent 3eb8a4b
commit 9f8c79f
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 18 deletions.
diff --git a/packages/card/PrimaryContent.js b/packages/card/PrimaryContent.js
@@ -24,33 +24,67 @@ import React from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
+import withRipple from '@material/react-ripple';
+
 export default class PrimaryContent extends React.Component {
 
   render() {
     const {
-      className,
-      children,
+      hasRipple,
       ...otherProps
     } = this.props;
-    const classes = classnames('mdc-card__primary-action', className);
-
+    if (hasRipple) {
+      return (<RipplePrimaryContent {...otherProps} />);
+    }
     return (
-      <div
-        className={classes}
-        {...otherProps}
-      >
-        {children}
-      </div>
+      <PrimaryContentDefault {...otherProps} />
     );
   }
 }
 
+
+const PrimaryContentDefault = (props) => {
+  const {
+    className,
+    initRipple,
+    children,
+    ...otherProps
+  } = props;
+
+  const classes = classnames('mdc-card__primary-action', className);
+  return (
+    <div
+      className={classes}
+      ref={initRipple}
+      {...otherProps}
+    >
+      {children}
+    </div>
+  );
+};
+
+export const RipplePrimaryContent = withRipple(PrimaryContentDefault);
+
 PrimaryContent.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node,
+  hasRipple: PropTypes.bool,
 };
 
 PrimaryContent.defaultProps = {
   className: '',
   children: null,
+  hasRipple: false,
+};
+
+PrimaryContentDefault.propTypes = {
+  className: PropTypes.string,
+  children: PropTypes.node,
+  initRipple: PropTypes.func,
+};
+
+PrimaryContentDefault.defaultProps = {
+  className: '',
+  initRipple: () => {},
+  children: null,
 };
diff --git a/packages/card/README.md b/packages/card/README.md
@@ -87,12 +87,18 @@ This component is used as the container for primary tappable content.
 import Card, {CardPrimaryContent} from '@material/react-card';
 
 <Card>
-  <CardPrimaryContent>
+  <CardPrimaryContent hasRipple>
     <p>Content</p>
   </CardPrimaryContent>
 </Card>
 ```
 
+#### Props
+Prop Name | Type | Description
+--- | --- | ---
+hasRipple | n/a | If present on element, it will enable the ripple on the primary content.
+
+
 ### CardMedia
 
 This component is a container for an image on the card. Optionally, any children of the `<CardMedia>` component is wrapped with an element with the className `.mdc-card__media-content`.

diff --git a/packages/card/package.json b/packages/card/package.json
@@ -16,6 +16,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
+    "@material/react-ripple": "^0.4.2",
     "@material/card": "^0.39.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",

diff --git a/test/screenshot/card/index.js b/test/screenshot/card/index.js
@@ -18,7 +18,7 @@ const imageUrl = './../images/1-1.jpg';
 const BasicCard = () => {
   return (
     <Card className='basic-card'>
-      <CardPrimaryContent>
+      <CardPrimaryContent hasRipple>
         <CardMedia className='basic-card-image' imageUrl={imageUrl} />
       </CardPrimaryContent>
       <CardActions>
@@ -37,7 +37,7 @@ const BasicCard = () => {
 const HorizontalCard = () => {
   return (
     <Card className='horizontal-card'>
-      <CardPrimaryContent>
+      <CardPrimaryContent hasRipple>
         <div className='horizontal-card-content'>
           <CardMedia square className='horizontal-card-image' imageUrl={imageUrl} />
           <div className='horizontal-card-header'>
@@ -106,7 +106,7 @@ const NewsRow = ({title, snippet, index}) => {
 const ContentOnMediaCard = () => {
   return (
     <Card className='content-on-media-card'>
-      <CardPrimaryContent>
+      <CardPrimaryContent hasRipple>
         <CardMedia
           square
           contentClassName='content-on-media-content'

diff --git a/test/unit/card/Content.test.js b/test/unit/card/Content.test.js
@@ -1,12 +1,30 @@
 import React from 'react';
 import {assert} from 'chai';
-import {shallow} from 'enzyme';
+import {mount} from 'enzyme';
 import {CardPrimaryContent} from '../../../packages/card/index';
+import {RipplePrimaryContent} from '../../../packages/card/PrimaryContent.js';
 
 suite('CardPrimaryContent');
 
 test('classNames adds classes', () => {
-  const wrapper = shallow(<CardPrimaryContent className='test-class-name'/>);
-  assert.isTrue(wrapper.hasClass('test-class-name'));
-  assert.isTrue(wrapper.hasClass('mdc-card__primary-action'));
+  const wrapper = mount(<CardPrimaryContent className='test-class-name'/>);
+  const primaryContentDiv = wrapper.find('.mdc-card__primary-action');
+  assert.isTrue(primaryContentDiv.hasClass('test-class-name'));
+  assert.equal(primaryContentDiv.length, 1);
+});
+
+const rippledPrimaryContent = <RipplePrimaryContent />;
+
+test('if hasRipple true, then it should contain RipplePrimaryContent', () => {
+  const wrapper = mount(
+    <CardPrimaryContent hasRipple />
+  );
+  assert.isTrue(wrapper.contains(rippledPrimaryContent));
+});
+
+test('if hasRipple false, then it should not contain RipplePrimaryContent', () => {
+  const wrapper = mount(
+    <CardPrimaryContent />
+  );
+  assert.isFalse(wrapper.contains(rippledPrimaryContent));
 });