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.
skipjack · Apr 26, 2017 · 69ece75 · 69ece75
1 parent 364b3e9
commit 69ece75
Show file tree

Hide file tree

Showing 8 changed files with 61 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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
diff --git a/src/icons/hamburger-icon.jsx 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
diff --git a/src/icons/search-icon.jsx 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