HDSG-206: Allow for Review components without an edit link (#270)

* Don't render the ReviewLink if a Review component's editHref prop is not provided.

* Added documentation on the editHref prop

* Take out the cheerio rendering in this last Review test

packages/core/src/components/Review/Review.jsx

@@ -24,19 +24,22 @@ export class Review extends React.PureComponent {
   }
 
   render() {
+    const { children, className, editHref, editText, onEditClick } = 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',
-      this.props.className && this.props.className
+      className && className
     );
     return (
       <div className={classes}>
         <div className="ds-u-margin-right--2">
           {this.heading()}
-          <div className="ds-c-review__body">{this.props.children}</div>
+          <div className="ds-c-review__body">{children}</div>
         </div>
-        <ReviewLink onClick={this.props.onEditClick} href={this.props.editHref}>
-          {this.props.editText}
-        </ReviewLink>
+        {editHref && (
+          <ReviewLink onClick={onEditClick} href={editHref}>
+            {editText}
+          </ReviewLink>
+        )}
       </div>
     );
   }
@@ -54,8 +57,11 @@ Review.propTypes = {
    * Heading type to override default `<h3>`.
    */
   headingLevel: PropTypes.number,
-  editHref: PropTypes.string.isRequired,
-  editText: PropTypes.node.isRequired,
+  /**
+   * Href for the edit link. If this is undefined, no edit link will be shown.
+   */
+  editHref: PropTypes.string,
+  editText: PropTypes.node,
   /**
    * An optional function that is executed on edit link click. The event and
    * props.editHref value are passed to this function.

packages/core/src/components/Review/Review.test.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Review from './Review';
+import ReviewLink from './ReviewLink';
 import { shallow } from 'enzyme';
 
 const noop = () => {};
@@ -22,35 +23,46 @@ function render(props, children = text) {
 describe('Review', function() {
   it('renders review', () => {
     const { wrapper } = render();
-    const $body = wrapper.render().find('.ds-c-review__body');
+    const body = wrapper.find('.ds-c-review__body');
 
     expect(wrapper.hasClass('ds-c-review')).toBe(true);
-    expect($body.length).toBe(1);
-    expect($body.text()).toBe(text);
+    expect(body.length).toBe(1);
+    expect(body.text()).toBe(text);
     expect(wrapper).toMatchSnapshot();
   });
 
   it('renders a heading', () => {
     const { props, wrapper } = render();
-    const $heading = wrapper.render().find('.ds-c-review__heading');
+    const heading = wrapper.find('.ds-c-review__heading');
 
-    expect($heading.length).toBe(1);
-    expect($heading.text()).toBe(props.heading);
-    expect(wrapper).toMatchSnapshot();
+    expect(heading.length).toBe(1);
+    expect(heading.text()).toBe(props.heading);
+  });
+
+  it('renders the edit link', () => {
+    const { props, wrapper } = render();
+    const reviewLink = wrapper.find(ReviewLink);
+
+    expect(reviewLink.length).toBe(1);
+    expect(reviewLink.props().children).toBe(props.editText);
+  });
+
+  it('does not render the edit link if editHref is undefined', () => {
+    const { wrapper } = render({ editHref: undefined });
+    const reviewLink = wrapper.find(ReviewLink);
+    expect(reviewLink.length).toBe(0);
   });
 
   it('renders HTML children', () => {
     const { wrapper } = render({}, <p className="my-p">{text}</p>);
-    const $p = wrapper.render().find('.my-p');
+    const p = wrapper.find('.my-p');
 
-    expect($p.length).toBe(1);
-    expect($p.text()).toBe(text);
-    expect(wrapper).toMatchSnapshot();
+    expect(p.length).toBe(1);
+    expect(p.text()).toBe(text);
   });
 
   it('adds a class from props', () => {
     const { wrapper } = render({ className: 'my-class' });
     expect(wrapper.hasClass('my-class')).toBe(true);
-    expect(wrapper).toMatchSnapshot();
   });
 });

packages/core/src/components/Review/__snapshots__/Review.test.jsx.snap

@@ -1,90 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Review adds a class from props 1`] = `
-<div
-  className="ds-c-review ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex my-class"
->
-  <div
-    className="ds-u-margin-right--2"
-  >
-    <h3
-      className="ds-c-review__heading ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block"
-    >
-      review heading
-    </h3>
-    <div
-      className="ds-c-review__body"
-    >
-      review text
-    </div>
-  </div>
-  <ReviewLink
-    href="edit-href"
-    onClick={[Function]}
-  >
-    edit
-  </ReviewLink>
-</div>
-`;
-
-exports[`Review renders HTML children 1`] = `
-<div
-  className="ds-c-review ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex"
->
-  <div
-    className="ds-u-margin-right--2"
-  >
-    <h3
-      className="ds-c-review__heading ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block"
-    >
-      review heading
-    </h3>
-    <div
-      className="ds-c-review__body"
-    >
-      <p
-        className="my-p"
-      >
-        review text
-      </p>
-    </div>
-  </div>
-  <ReviewLink
-    href="edit-href"
-    onClick={[Function]}
-  >
-    edit
-  </ReviewLink>
-</div>
-`;
-
-exports[`Review renders a heading 1`] = `
-<div
-  className="ds-c-review ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex"
->
-  <div
-    className="ds-u-margin-right--2"
-  >
-    <h3
-      className="ds-c-review__heading ds-text ds-u-margin-bottom--0 ds-u-font-weight--bold ds-u-display--inline-block"
-    >
-      review heading
-    </h3>
-    <div
-      className="ds-c-review__body"
-    >
-      review text
-    </div>
-  </div>
-  <ReviewLink
-    href="edit-href"
-    onClick={[Function]}
-  >
-    edit
-  </ReviewLink>
-</div>
-`;
-
 exports[`Review renders review 1`] = `
 <div
   className="ds-c-review ds-u-border-bottom--2 ds-u-padding-y--2 ds-u-justify-content--between ds-u-display--flex"