From 69ece75ce81b2d61873f7ee8734e1463748955f8 Mon Sep 17 00:00:00 2001
From: Greg Venech <greg@qintel.com>
Date: Wed, 26 Apr 2017 17:00:51 -0400
Subject: [PATCH] feat: expose `icons` prop for icon modification

Allow default icons to be overwritten, also extracts all svg content
to remove noise from the components. The icons are now mini-
stateless components that are `import`ed.
---
 src/banner/banner-search.jsx | 21 ++++++---------------
 src/banner/banner.jsx        | 27 ++++++++++++++++-----------
 src/icons/cross-icon.jsx     | 11 +++++++++++
 src/icons/cross.svg          | 12 ------------
 src/icons/hamburger-icon.jsx | 16 ++++++++++++++++
 src/icons/hamburger.svg      | 17 -----------------
 src/icons/search-icon.jsx    | 12 ++++++++++++
 src/icons/search.svg         | 13 -------------
 8 files changed, 61 insertions(+), 68 deletions(-)
 create mode 100644 src/icons/cross-icon.jsx
 delete mode 100644 src/icons/cross.svg
 create mode 100644 src/icons/hamburger-icon.jsx
 delete mode 100644 src/icons/hamburger.svg
 create mode 100644 src/icons/search-icon.jsx
 delete mode 100644 src/icons/search.svg

diff --git a/src/banner/banner-search.jsx b/src/banner/banner-search.jsx
index 98705d8..d2b21a6 100644
--- a/src/banner/banner-search.jsx
+++ b/src/banner/banner-search.jsx
@@ -7,6 +7,10 @@ export default class BannerSearch extends React.Component {
         blockName: PropTypes.string.isRequired,
         active: PropTypes.bool.isRequired,
         placeholder: PropTypes.string,
+        icons: PropTypes.shape({
+            clear: PropTypes.node.isRequired,
+            search: PropTypes.node.isRequired
+        }),
         onToggle: PropTypes.func.isRequired
     }
 
@@ -29,26 +33,13 @@ export default class BannerSearch extends React.Component {
                 <button
                     className={ `${blockName}__icon ${blockName}__clear` }
                     onClick={ this.props.onToggle }>
-                    <svg viewBox="-137 138 25 25">
-                        <g transform="translate(0,-952.36218)">
-                            <path d="M-131.3,1094.4c-0.4,0-0.9,0.1-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l5.6,5.6l-5.6,5.6c-0.7,0.7-0.7,1.7,0,2.4
-                                c0.7,0.7,1.7,0.7,2.4,0l5.6-5.6l5.6,5.6c0.7,0.7,1.7,0.7,2.4,0c0.7-0.7,0.7-1.7,0-2.4l-5.6-5.6l5.6-5.6c0.7-0.7,0.7-1.7,0-2.4
-                                c-0.7-0.7-1.7-0.7-2.4,0l-5.6,5.6l-5.6-5.6C-130.5,1094.5-130.9,1094.4-131.3,1094.4L-131.3,1094.4z"/>
-                        </g>
-                    </svg>
+                    { this.props.icons.clear }
                 </button>
 
                 <button
                     className={ `${blockName}__icon ${blockName}__search` }
                     onClick={ this.props.onToggle }>
-                    <svg viewBox="-137 138 25 25">
-                        <g>
-                            <path d="M-114.6,162.6l-7.5-7.5c-0.6-0.6-0.6-1.6,0-2.1l0,0c0.6-0.6,1.6-0.6,2.1,0l7.5,7.5c0.6,0.6,0.6,1.6,0,2.1l0,0
-                                C-113,163.1-114,163.1-114.6,162.6z"/>
-                            <path d="M-134.1,140.9c-3.9,3.9-3.9,10.2,0,14.1s10.2,3.9,14.1,0s3.9-10.2,0-14.1S-130.2,137-134.1,140.9z M-122.1,153
-                                c-2.7,2.7-7.1,2.7-9.8,0s-2.7-7.1,0-9.8s7.1-2.7,9.8,0C-119.4,145.9-119.4,150.2-122.1,153z"/>
-                        </g>
-                    </svg>
+                    { this.props.icons.search }
                 </button>
             </div>
         )
diff --git a/src/banner/banner.jsx b/src/banner/banner.jsx
index bb1b027..375367a 100644
--- a/src/banner/banner.jsx
+++ b/src/banner/banner.jsx
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types'
 import BannerSearch from './banner-search'
 import BannerSub from './banner-sub'
 import StandardLink from '../links/standard-link'
+import HamburgerIcon from '../icons/hamburger-icon'
+import CrossIcon from '../icons/cross-icon'
+import SearchIcon from '../icons/search-icon'
 import './banner-style'
 
 export default class Banner extends React.Component {
@@ -11,6 +14,11 @@ export default class Banner extends React.Component {
         className: PropTypes.string,
         logo: PropTypes.node,
         url: PropTypes.string.isRequired,
+        icons: PropTypes.shape({
+            menu: PropTypes.node.isRequired,
+            clear: PropTypes.node.isRequired,
+            search: PropTypes.node.isRequired
+        }),
         link: PropTypes.oneOfType([ 
             PropTypes.func, 
             PropTypes.instanceOf(React.Component) 
@@ -29,7 +37,12 @@ export default class Banner extends React.Component {
         className: '',
         link: StandardLink,
         search: true,
-        links: []
+        links: [],
+        icons: {
+            menu: <HamburgerIcon />,
+            clear: <CrossIcon />,
+            search: <SearchIcon />
+        }
     }
 
     state = {
@@ -50,16 +63,7 @@ export default class Banner extends React.Component {
                     <button 
                         className={ `${blockName}__mobile` } 
                         onClick={ this.props.onMenuClick }>
-                        <svg viewBox="-62 138 25 25">
-                            <g>
-                                <path d="M-60.2,140.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
-                                    C-62,141-61.2,140.2-60.2,140.2z"/>
-                                <path d="M-60.2,148.7h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
-                                    C-62,149.5-61.2,148.7-60.2,148.7z"/>
-                                <path d="M-60.2,157.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
-                                    C-62,158-61.2,157.2-60.2,157.2z"/>
-                            </g>
-                        </svg>
+                        { this.props.icons.menu }
                     </button>
 
                     <Link className={ `${blockName}__logo` } url="/">
@@ -72,6 +76,7 @@ export default class Banner extends React.Component {
 
                     { this.props.search ? (
                         <BannerSearch
+                            icons={ this.props.icons }
                             blockName={ `${blockName}-search` }
                             active={ this.state.searching }
                             onToggle={ this._toggleSearch } />
diff --git a/src/icons/cross-icon.jsx b/src/icons/cross-icon.jsx
new file mode 100644
index 0000000..b02e2a3
--- /dev/null
+++ b/src/icons/cross-icon.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default props => (
+    <svg viewBox="-137 138 25 25">
+        <g transform="translate(0,-952.36218)">
+            <path d="M-131.3,1094.4c-0.4,0-0.9,0.1-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l5.6,5.6l-5.6,5.6c-0.7,0.7-0.7,1.7,0,2.4
+                c0.7,0.7,1.7,0.7,2.4,0l5.6-5.6l5.6,5.6c0.7,0.7,1.7,0.7,2.4,0c0.7-0.7,0.7-1.7,0-2.4l-5.6-5.6l5.6-5.6c0.7-0.7,0.7-1.7,0-2.4
+                c-0.7-0.7-1.7-0.7-2.4,0l-5.6,5.6l-5.6-5.6C-130.5,1094.5-130.9,1094.4-131.3,1094.4L-131.3,1094.4z"/>
+        </g>
+    </svg>
+)
diff --git a/src/icons/cross.svg b/src/icons/cross.svg
deleted file mode 100644
index f4dff60..0000000
--- a/src/icons/cross.svg
+++ /dev/null
@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Layer_1" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-137 138 25 25"
-	 style="enable-background:new -137 138 25 25;" xml:space="preserve">
-<g transform="translate(0,-952.36218)">
-	<path d="M-131.3,1094.4c-0.4,0-0.9,0.1-1.2,0.5c-0.7,0.7-0.7,1.7,0,2.4l5.6,5.6l-5.6,5.6c-0.7,0.7-0.7,1.7,0,2.4
-		c0.7,0.7,1.7,0.7,2.4,0l5.6-5.6l5.6,5.6c0.7,0.7,1.7,0.7,2.4,0c0.7-0.7,0.7-1.7,0-2.4l-5.6-5.6l5.6-5.6c0.7-0.7,0.7-1.7,0-2.4
-		c-0.7-0.7-1.7-0.7-2.4,0l-5.6,5.6l-5.6-5.6C-130.5,1094.5-130.9,1094.4-131.3,1094.4L-131.3,1094.4z"/>
-</g>
-</svg>
diff --git a/src/icons/hamburger-icon.jsx b/src/icons/hamburger-icon.jsx
new file mode 100644
index 0000000..c422fba
--- /dev/null
+++ b/src/icons/hamburger-icon.jsx
@@ -0,0 +1,16 @@
+import React from 'react'
+
+export default props => (
+    <svg viewBox="-62 138 25 25">
+        <g>
+            <g>
+                <path d="M-60.2,140.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
+                    C-62,141-61.2,140.2-60.2,140.2z"/>
+                <path d="M-60.2,148.7h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
+                    C-62,149.5-61.2,148.7-60.2,148.7z"/>
+                <path d="M-60.2,157.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
+                    C-62,158-61.2,157.2-60.2,157.2z"/>
+            </g>
+        </g>
+    </svg>
+)
diff --git a/src/icons/hamburger.svg b/src/icons/hamburger.svg
deleted file mode 100644
index bfc0703..0000000
--- a/src/icons/hamburger.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="-62 138 25 25" style="enable-background:new -62 138 25 25;" xml:space="preserve">
-<title>Artboard Copy 3</title>
-<desc>Created with Sketch.</desc>
-<g>
-	<g>
-		<path d="M-60.2,140.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
-			C-62,141-61.2,140.2-60.2,140.2z"/>
-		<path d="M-60.2,148.7h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
-			C-62,149.5-61.2,148.7-60.2,148.7z"/>
-		<path d="M-60.2,157.2h20.9c1,0,1.8,0.8,1.8,1.8l0,0c0,1-0.8,1.8-1.8,1.8h-20.9c-1,0-1.8-0.8-1.8-1.8l0,0
-			C-62,158-61.2,157.2-60.2,157.2z"/>
-	</g>
-</g>
-</svg>
diff --git a/src/icons/search-icon.jsx b/src/icons/search-icon.jsx
new file mode 100644
index 0000000..1cbc839
--- /dev/null
+++ b/src/icons/search-icon.jsx
@@ -0,0 +1,12 @@
+import React from 'react'
+
+export default props => (
+    <svg viewBox="-137 138 25 25">
+        <g>
+            <path d="M-114.6,162.6l-7.5-7.5c-0.6-0.6-0.6-1.6,0-2.1l0,0c0.6-0.6,1.6-0.6,2.1,0l7.5,7.5c0.6,0.6,0.6,1.6,0,2.1l0,0
+                C-113,163.1-114,163.1-114.6,162.6z"/>
+            <path d="M-134.1,140.9c-3.9,3.9-3.9,10.2,0,14.1s10.2,3.9,14.1,0s3.9-10.2,0-14.1S-130.2,137-134.1,140.9z M-122.1,153
+                c-2.7,2.7-7.1,2.7-9.8,0s-2.7-7.1,0-9.8s7.1-2.7,9.8,0C-119.4,145.9-119.4,150.2-122.1,153z"/>
+        </g>
+    </svg>
+)
diff --git a/src/icons/search.svg b/src/icons/search.svg
deleted file mode 100644
index cc89443..0000000
--- a/src/icons/search.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1"
-	 id="Layer_1" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-137 138 25 25"
-	 style="enable-background:new -137 138 25 25;" xml:space="preserve">
-<g>
-	<path d="M-114.6,162.6l-7.5-7.5c-0.6-0.6-0.6-1.6,0-2.1l0,0c0.6-0.6,1.6-0.6,2.1,0l7.5,7.5c0.6,0.6,0.6,1.6,0,2.1l0,0
-		C-113,163.1-114,163.1-114.6,162.6z"/>
-	<path d="M-134.1,140.9c-3.9,3.9-3.9,10.2,0,14.1s10.2,3.9,14.1,0s3.9-10.2,0-14.1S-130.2,137-134.1,140.9z M-122.1,153
-		c-2.7,2.7-7.1,2.7-9.8,0s-2.7-7.1,0-9.8s7.1-2.7,9.8,0C-119.4,145.9-119.4,150.2-122.1,153z"/>
-</g>
-</svg>