Add ReviewRating component

src/components/ReviewRating/ReviewRating.example.js

@@ -0,0 +1,19 @@
+import ReviewRating from './ReviewRating';
+
+export const ReviewRatingZero = {
+  component: ReviewRating,
+  props: { rating: 0 },
+  group: 'misc',
+};
+
+export const ReviewRatingThree = {
+  component: ReviewRating,
+  props: { rating: 3 },
+  group: 'misc',
+};
+
+export const ReviewRatingFive = {
+  component: ReviewRating,
+  props: { rating: 5 },
+  group: 'misc',
+};

src/components/ReviewRating/ReviewRating.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { range } from 'lodash';
+import { IconReviewStar } from '../../components';
+
+const MAX_RATING = 5;
+
+const ReviewRating = props => {
+  const { className, rootClassName, reviewStarClassName, rating } = props;
+  const classes = rootClassName || className;
+
+  const stars = range(MAX_RATING);
+  return (
+    <div className={classes}>
+      {stars.map(star => (
+        <IconReviewStar
+          key={`star-${star}`}
+          className={reviewStarClassName}
+          isFilled={star < rating}
+        />
+      ))}
+    </div>
+  );
+};
+
+ReviewRating.defaultProps = {
+  className: null,
+  reviewStarClassName: null,
+};
+
+const { number, string } = PropTypes;
+
+ReviewRating.propTypes = {
+  rating: number.isRequired,
+  reviewStartClassName: string,
+  rootClassName: string,
+  className: string,
+};
+
+export default ReviewRating;

src/components/index.js

@@ -80,6 +80,7 @@ export { default as PaginationLinks } from './PaginationLinks/PaginationLinks';
 export { default as PrivacyPolicy } from './PrivacyPolicy/PrivacyPolicy';
 export { default as Promised } from './Promised/Promised';
 export { default as ResponsiveImage } from './ResponsiveImage/ResponsiveImage';
+export { default as ReviewRating } from './ReviewRating/ReviewRating';
 export { default as SaleDetailsPanel } from './SaleDetailsPanel/SaleDetailsPanel';
 export { default as SearchMap } from './SearchMap/SearchMap';
 export { default as SearchMapGroupLabel } from './SearchMapGroupLabel/SearchMapGroupLabel';

src/examples.js

@@ -36,6 +36,7 @@ import * as ModalInMobile from './components/ModalInMobile/ModalInMobile.example
 import * as NamedLink from './components/NamedLink/NamedLink.example';
 import * as PaginationLinks from './components/PaginationLinks/PaginationLinks.example';
 import * as ResponsiveImage from './components/ResponsiveImage/ResponsiveImage.example';
+import * as ReviewRating from './components/ReviewRating/ReviewRating.example';
 import * as SelectField from './components/SelectField/SelectField.example';
 import * as StripeBankAccountTokenInputField from './components/StripeBankAccountTokenInputField/StripeBankAccountTokenInputField.example';
 import * as TabNav from './components/TabNav/TabNav.example';
@@ -110,6 +111,7 @@ export {
   PasswordResetForm,
   PayoutDetailsForm,
   ResponsiveImage,
+  ReviewRating,
   SelectField,
   SendMessageForm,
   SignupForm,