From efc861646604ffbc770cbcba8372f45e0bf60502 Mon Sep 17 00:00:00 2001
From: Hannu Lyytikainen <hannu@sharetribe.com>
Date: Tue, 28 Nov 2017 11:10:14 +0200
Subject: [PATCH] Add ReviewRating component

---
 .../ReviewRating/ReviewRating.example.js      | 19 +++++++++
 src/components/ReviewRating/ReviewRating.js   | 40 +++++++++++++++++++
 src/components/index.js                       |  1 +
 src/examples.js                               |  2 +
 4 files changed, 62 insertions(+)
 create mode 100644 src/components/ReviewRating/ReviewRating.example.js
 create mode 100644 src/components/ReviewRating/ReviewRating.js

diff --git a/src/components/ReviewRating/ReviewRating.example.js b/src/components/ReviewRating/ReviewRating.example.js
new file mode 100644
index 00000000..8302d1b7
--- /dev/null
+++ b/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',
+};
diff --git a/src/components/ReviewRating/ReviewRating.js b/src/components/ReviewRating/ReviewRating.js
new file mode 100644
index 00000000..f08665e2
--- /dev/null
+++ b/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;
diff --git a/src/components/index.js b/src/components/index.js
index 54535659..22c61959 100644
--- a/src/components/index.js
+++ b/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';
diff --git a/src/examples.js b/src/examples.js
index 34c359da..3e5a37d3 100644
--- a/src/examples.js
+++ b/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,