From c7db98a66835a1ecee1cc52c9716221c75c0ba91 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Mon, 11 Sep 2017 11:21:41 +0300
Subject: [PATCH] Add keys icon components

---
 src/components/KeysIcon/KeysIcon.js           | 57 +++++++++++++++++++
 .../KeysIconSuccess/KeysIconSuccess.js        | 57 +++++++++++++++++++
 src/components/index.js                       |  4 ++
 3 files changed, 118 insertions(+)
 create mode 100644 src/components/KeysIcon/KeysIcon.js
 create mode 100644 src/components/KeysIconSuccess/KeysIconSuccess.js

diff --git a/src/components/KeysIcon/KeysIcon.js b/src/components/KeysIcon/KeysIcon.js
new file mode 100644
index 00000000..559d2fbd
--- /dev/null
+++ b/src/components/KeysIcon/KeysIcon.js
@@ -0,0 +1,57 @@
+import React, { PropTypes } from 'react';
+
+const KeysIcon = props => {
+  const { className } = props;
+  return (
+    <svg
+      className={className}
+      width="50px"
+      height="57px"
+      viewBox="0 0 50 57"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        stroke="none"
+        strokeWidth="1"
+        fill="none"
+        fillRule="evenodd"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <g transform="translate(-538.000000, -240.000000)" stroke="#C0392B">
+          <g transform="translate(540.000000, 242.000000)">
+            <g>
+              <path
+                d="M25,19.65 C25,12.6626 19.4022727,7 12.5,7 C5.59772727,7 0,12.6626 0,19.65 C0,25.4391 3.84772727,30.3082 9.09090909,31.8101 L9.09090909,34.6 L6.81818182,36.8977 L9.09090909,39.2 L9.09090909,41.5 L6.81818182,43.8 L9.09090909,46.1 L9.09090909,49.55 L12.5,53 L15.9090909,49.55 L15.9090909,31.8101 C21.1522727,30.3082 25,25.4391 25,19.65 L25,19.65 Z"
+                strokeWidth="2.5"
+              />
+              <path
+                d="M16,15.5 C16,17.432 14.432,19 12.5,19 C10.568,19 9,17.432 9,15.5 C9,13.568 10.568,12 12.5,12 C14.432,12 16,13.568 16,15.5 L16,15.5 Z"
+                strokeWidth="2"
+              />
+              <path
+                d="M16,33.460821 C19.8584615,35.6660894 24.6353846,35.6843714 28.5192308,33.5362343 L31,35.7163649 L31,39.1442433 L34.4615385,39.1442433 L35.6153846,40.3440007 L35.6153846,43.7147478 L38.6546154,43.7147478 L41.1053846,46 L46,46 L46,41.15298 L33.4138462,28.6892143 C36.1138462,23.9061813 35.4192308,17.7474266 31.3138462,13.6819628 C28.42,10.8162565 24.4784615,9.62335484 20.71,10.1032578"
+                strokeWidth="2.5"
+              />
+              <path
+                d="M13,15 L13,4.61538462 C13,2.06769231 15.016,0 17.5,0 C19.984,0 22,2.06769231 22,4.61538462 L22,9.81230769"
+                strokeWidth="2.5"
+              />
+            </g>
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
+
+KeysIcon.defaultProps = { className: null };
+
+const { string } = PropTypes;
+
+KeysIcon.propTypes = {
+  className: string,
+};
+
+export default KeysIcon;
diff --git a/src/components/KeysIconSuccess/KeysIconSuccess.js b/src/components/KeysIconSuccess/KeysIconSuccess.js
new file mode 100644
index 00000000..d4d450ec
--- /dev/null
+++ b/src/components/KeysIconSuccess/KeysIconSuccess.js
@@ -0,0 +1,57 @@
+import React, { PropTypes } from 'react';
+
+const KeysIconSuccess = props => {
+  const { className } = props;
+  return (
+    <svg className={className} width="52" height="60" xmlns="http://www.w3.org/2000/svg">
+      <g transform="translate(2 2)" fill="none" fillRule="evenodd">
+        <path
+          d="M25 19.6C25 12.6 19.4 7 12.5 7 5.5 7 0 12.7 0 19.6c0 5.8 3.8 10.7 9 12.2v2.8L7 37 9 39v2.3L7 43.8 9 46v3.5l3.5 3.5 3.4-3.5V31.8c5.2-1.5 9-6.4 9-12.2z"
+          stroke="#C0392B"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M16 15.5c0 2-1.6 3.5-3.5 3.5-2 0-3.5-1.6-3.5-3.5 0-2 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5z"
+          stroke="#C0392B"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M16 33.5c4 2.2 8.6 2.2 12.5 0l2.5 2.2V39h3.5l1 1.3v3.4h3.2L41 46h5v-4.8L33.4 28.7c2.7-4.8 2-11-2-15-3-3-7-4-10.7-3.6"
+          stroke="#C0392B"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13 15V4.6C13 2 15 0 17.5 0S22 2 22 4.6v5.2"
+          stroke="#C0392B"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <circle stroke="#FFF" strokeWidth="2" fill="#2ECC71" cx="35.5" cy="43.5" r="13.5" />
+        <path
+          stroke="#FFF"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M42 41l-8 8-4-4"
+        />
+      </g>
+    </svg>
+  );
+};
+
+KeysIconSuccess.defaultProps = { className: null };
+
+const { string } = PropTypes;
+
+KeysIconSuccess.propTypes = {
+  className: string,
+};
+
+export default KeysIconSuccess;
diff --git a/src/components/index.js b/src/components/index.js
index 7c381a91..1307d98a 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -19,6 +19,8 @@ import FilterPanel from './FilterPanel/FilterPanel';
 import HeroSection from './HeroSection/HeroSection';
 import ImageCarousel from './ImageCarousel/ImageCarousel';
 import ImageFromFile from './ImageFromFile/ImageFromFile';
+import KeysIcon from './KeysIcon/KeysIcon';
+import KeysIconSuccess from './KeysIconSuccess/KeysIconSuccess';
 import ListingCard from './ListingCard/ListingCard';
 import LocationAutocompleteInput, {
   LocationAutocompleteInputField,
@@ -88,6 +90,8 @@ export {
   ImageCarousel,
   ImageFromFile,
   InlineTextButton,
+  KeysIcon,
+  KeysIconSuccess,
   ListingCard,
   LocationAutocompleteInput,
   LocationAutocompleteInputField,