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 (
+
+ {stars.map(star => (
+
+ ))}
+
+ );
+};
+
+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,