From 69c2d39aa9bc40cb116cb3d0966e2d5d099154ca Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Mon, 27 Nov 2017 15:21:11 +0200
Subject: [PATCH] Review (single) star icon

---
 .../IconReviewStar/IconReviewStar.css         |  9 +++++
 .../IconReviewStar/IconReviewStar.example.js  | 13 +++++++
 .../IconReviewStar/IconReviewStar.js          | 38 +++++++++++++++++++
 src/components/index.js                       |  1 +
 src/examples.js                               |  2 +
 5 files changed, 63 insertions(+)
 create mode 100644 src/components/IconReviewStar/IconReviewStar.css
 create mode 100644 src/components/IconReviewStar/IconReviewStar.example.js
 create mode 100644 src/components/IconReviewStar/IconReviewStar.js

diff --git a/src/components/IconReviewStar/IconReviewStar.css b/src/components/IconReviewStar/IconReviewStar.css
new file mode 100644
index 00000000..aa8db85c
--- /dev/null
+++ b/src/components/IconReviewStar/IconReviewStar.css
@@ -0,0 +1,9 @@
+@import '../../marketplace.css';
+
+.root {
+  fill: var(--matterColorNegative);
+}
+
+.filled {
+  fill: var(--marketplaceColor);
+}
diff --git a/src/components/IconReviewStar/IconReviewStar.example.js b/src/components/IconReviewStar/IconReviewStar.example.js
new file mode 100644
index 00000000..f09271f3
--- /dev/null
+++ b/src/components/IconReviewStar/IconReviewStar.example.js
@@ -0,0 +1,13 @@
+import IconReviewStar from './IconReviewStar';
+
+export const DefaultIcon = {
+  component: IconReviewStar,
+  props: {},
+  group: 'icons',
+};
+
+export const FilledIcon = {
+  component: IconReviewStar,
+  props: { isFilled: true },
+  group: 'icons',
+};
diff --git a/src/components/IconReviewStar/IconReviewStar.js b/src/components/IconReviewStar/IconReviewStar.js
new file mode 100644
index 00000000..950d1c6e
--- /dev/null
+++ b/src/components/IconReviewStar/IconReviewStar.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import css from './IconReviewStar.css';
+
+const IconReviewStar = props => {
+  const { className, rootClassName, isFilled } = props;
+  const filledOrDefault = isFilled ? css.filled : css.root;
+  const classes = classNames(rootClassName || filledOrDefault, className);
+
+  return (
+    <svg
+      className={classes}
+      width="23"
+      height="23"
+      viewBox="0 0 23 23"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M22.938 8.008c-.15-.412-.544-.69-.985-.69H14.38L12.507.758C12.377.31 11.967 0 11.5 0c-.467 0-.88.31-1.006.76L8.618 7.317H1.046c-.442 0-.833.278-.983.69-.15.414-.025.876.314 1.16l5.7 4.75L3.2 21.59c-.16.43-.02.916.346 1.196.362.28.87.29 1.242.02l6.71-4.79 6.713 4.79c.375.27.88.26 1.245-.02.366-.28.504-.765.343-1.196l-2.875-7.67 5.7-4.75c.34-.284.463-.746.315-1.16"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+IconReviewStar.defaultProps = { className: null, rootClassName: null, isFilled: false };
+
+const { bool, string } = PropTypes;
+
+IconReviewStar.propTypes = {
+  className: string,
+  rootClassName: string,
+  isFilled: bool,
+};
+
+export default IconReviewStar;
diff --git a/src/components/index.js b/src/components/index.js
index 1d5d09e9..54535659 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -37,6 +37,7 @@ export { default as IconEmailSent } from './IconEmailSent/IconEmailSent';
 export { default as IconEmailSuccess } from './IconEmailSuccess/IconEmailSuccess';
 export { default as IconKeys } from './IconKeys/IconKeys';
 export { default as IconKeysSuccess } from './IconKeysSuccess/IconKeysSuccess';
+export { default as IconReviewStar } from './IconReviewStar/IconReviewStar';
 export { default as IconSearch } from './IconSearch/IconSearch';
 export {
   default as IconSocialMediaFacebook,
diff --git a/src/examples.js b/src/examples.js
index f61e8499..34c359da 100644
--- a/src/examples.js
+++ b/src/examples.js
@@ -20,6 +20,7 @@ import * as IconEmailSuccess from './components/IconEmailSuccess/IconEmailSucces
 import * as IconKeys from './components/IconKeys/IconKeys.example';
 import * as IconKeysSuccess from './components/IconKeysSuccess/IconKeysSuccess.example';
 import * as IconSearch from './components/IconSearch/IconSearch.example';
+import * as IconReviewStar from './components/IconReviewStar/IconReviewStar.example';
 import * as IconSocialMediaFacebook from './components/IconSocialMediaFacebook/IconSocialMediaFacebook.example';
 import * as IconSocialMediaInstagram from './components/IconSocialMediaInstagram/IconSocialMediaInstagram.example';
 import * as IconSocialMediaTwitter from './components/IconSocialMediaTwitter/IconSocialMediaTwitter.example';
@@ -88,6 +89,7 @@ export {
   IconEmailSuccess,
   IconKeys,
   IconKeysSuccess,
+  IconReviewStar,
   IconSearch,
   IconSocialMediaFacebook,
   IconSocialMediaInstagram,