Add editContent prop to Review, update tests and example (#279)

CMSgov · Sep 25, 2018 · b054480 · b054480
1 parent be561cc
commit b054480
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 17 deletions.
diff --git a/packages/core/src/components/Review/Review.example.jsx b/packages/core/src/components/Review/Review.example.jsx
@@ -2,33 +2,46 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import Review from './Review';
 
+const editButtonHref = 'javascript:void(0);';
 ReactDOM.render(
   <div>
-    <Review heading="A single Review component" editHref="javascript:void(0);">
+    <Review heading="A single Review component" editHref={editButtonHref}>
       This is an example of a single React Review component.
     </Review>
     <Review
       className="ds-u-padding-top--6"
       heading="Multiple Review components"
-      editHref="javascript:void(0);"
+      editHref={editButtonHref}
     >
       Multiple Review components can be combined together one after another.
     </Review>
-    <Review heading="Full Name" editHref="javascript:void(0);">
+    <Review
+      heading="A Review component with edit content"
+      editContent={
+        <div>
+          <a href={editButtonHref}>Edit</a>
+          <span>|</span>
+          <a href={editButtonHref}>Remove</a>
+        </div>
+      }
+    >
+      The edit link can be replaced to customize the component.
+    </Review>
+    <Review heading="Full Name" editHref={editButtonHref}>
       John Doe
     </Review>
-    <Review heading="Date of Birth" editHref="javascript:void(0);">
+    <Review heading="Date of Birth" editHref={editButtonHref}>
       October 11, 1980
     </Review>
-    <Review heading="Shopping List" editHref="javascript:void(0);">
+    <Review heading="Shopping List" editHref={editButtonHref}>
       <ul>
         <li>Milk</li>
         <li>Eggs</li>
         <li>Flour</li>
         <li>Sugar</li>
       </ul>
     </Review>
-    <Review editHref="javascript:void(0);">The heading is not required.</Review>
+    <Review editHref={editButtonHref}>The heading is not required.</Review>
   </div>,
   document.getElementById('js-example')
 );
diff --git a/packages/core/src/components/Review/Review.jsx b/packages/core/src/components/Review/Review.jsx
@@ -24,7 +24,14 @@ export class Review extends React.PureComponent {
   }
 
   render() {
-    const { children, className, editHref, editText, onEditClick } = this.props;
+    const {
+      children,
+      className,
+      editHref,
+      editText,
+      onEditClick,
+      editContent
+    } = this.props;
     const classes = classNames(
       'ds-c-review ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex',
       className && className
@@ -35,11 +42,13 @@ export class Review extends React.PureComponent {
           {this.heading()}
           <div className="ds-c-review__body">{children}</div>
         </div>
-        {editHref && (
-          <ReviewLink onClick={onEditClick} href={editHref}>
-            {editText}
-          </ReviewLink>
-        )}
+        {editContent}
+        {!editContent &&
+          editHref && (
+            <ReviewLink onClick={onEditClick} href={editHref}>
+              {editText}
+            </ReviewLink>
+          )}
       </div>
     );
   }
@@ -66,7 +75,11 @@ Review.propTypes = {
    * An optional function that is executed on edit link click. The event and
    * props.editHref value are passed to this function.
    */
-  onEditClick: PropTypes.func
+  onEditClick: PropTypes.func,
+  /**
+   * An optional node in place of the edit link. If this defined, no edit link will be shown.
+   */
+  editContent: PropTypes.node
 };
 
 export default Review;
diff --git a/packages/core/src/components/Review/Review.test.jsx b/packages/core/src/components/Review/Review.test.jsx
@@ -53,6 +53,15 @@ describe('Review', function() {
     expect(reviewLink.length).toBe(0);
   });
 
+  it('it renders the edit content', () => {
+    const content = <div id="editContent" />;
+    const { wrapper } = render({ editContent: content });
+    const editContent = wrapper.find('#editContent');
+    const reviewLink = wrapper.find(ReviewLink);
+    expect(editContent.length).toBe(1);
+    expect(reviewLink.length).toBe(0);
+  });
+
   it('renders HTML children', () => {
     const { wrapper } = render({}, <p className="my-p">{text}</p>);
     const p = wrapper.find('.my-p');

diff --git a/packages/core/yarn.lock b/packages/core/yarn.lock
@@ -30,10 +30,6 @@ focus-trap@^2.0.1:
   dependencies:
     tabbable "^1.0.3"
 
-lodash.chunk@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.chunk/-/lodash.chunk-4.2.0.tgz#66e5ce1f76ed27b4303d8c6512e8d1216e8106bc"
-
 lodash.uniqueid@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.uniqueid/-/lodash.uniqueid-4.0.1.tgz#3268f26a7c88e4f4b1758d679271814e31fa5b26"