Add search component to overview

js/components/PageOverview.js

@@ -4,18 +4,25 @@ import HeadlineGroup from './HeadlineGroup';
 import HeroHeadline from './HeroHeadline';
 import Badge from './Badge';
 import Link from './Link';
+import Search from './Search';
 import Fadeable from './Fadeable';
 import { groupByFirstLetter } from '../../common/model';
 import { translate } from '../../common/config';
 
 const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
 
+const containsSearchTerm = (text = '', term = '') => {
+  // TODO search refinement
+  return text.trim().toLocaleLowerCase().indexOf(term.trim().toLocaleLowerCase()) !== -1;
+}
+
 class PageOverview extends React.Component {
 
   constructor(...args) {
     super(...args);
     this.state = {
       ring: rings[0],
+      search: '',
     };
   }
 
@@ -32,16 +39,38 @@ class PageOverview extends React.Component {
     return this.state.ring === ringName;
   }
 
+  itemMatchesRing = (item) => {
+    return this.state.ring === 'all' || item.ring === this.state.ring;
+  };
+
+  itemMatchesSearch = (item) => {
+    return this.state.search.trim() === '' ||
+      containsSearchTerm(item.title, this.state.search) ||
+      containsSearchTerm(item.body, this.state.search) ||
+      containsSearchTerm(item.info, this.state.search);
+  };
+
+  isItemVisible = (item) => {
+    return this.itemMatchesRing(item) && this.itemMatchesSearch(item);
+  };
+
   getFilteredAndGroupedItems() {
     const groups = groupByFirstLetter(this.props.items);
     const groupsFiltered = groups.map(group => ({
       ...group,
-      items: group.items.filter(item => this.state.ring === 'all' || item.ring === this.state.ring),
+      items: group.items.filter(this.isItemVisible),
     }));
     const nonEmptyGroups = groupsFiltered.filter(group => group.items.length > 0);
     return nonEmptyGroups;
   }
 
+  handleSearchTermChange = (value) => {
+    this.setState({
+      ...this.state,
+      search: value,
+    });
+  };
+
   render() {
     const groups = this.getFilteredAndGroupedItems();
 
@@ -51,20 +80,27 @@ class PageOverview extends React.Component {
           <HeroHeadline>Technologies Overview</HeroHeadline>
         </HeadlineGroup>
         <div className="filter">
-          <div className="nav">
+          <div className="split">
-            {
+            <div className="split__left">
-              rings.map(ringName => (
+              <Search onChange={this.handleSearchTermChange} value={this.state.search} />
-                <div className="nav__item" key={ringName}>
+            </div>
-                  <Badge
+            <div className="split__right">
-                    big
+              <div className="nav">
-                    onClick={this.handleRingClick(ringName)}
+                {
-                    type={this.isRingActive(ringName) ? ringName : 'empty' }
+                  rings.map(ringName => (
-                  >
+                    <div className="nav__item" key={ringName}>
-                    {ringName}
+                      <Badge
-                  </Badge>
+                        big
-                </div>
+                        onClick={this.handleRingClick(ringName)}
-              ))
+                        type={this.isRingActive(ringName) ? ringName : 'empty' }
-            }
+                      >
+                        {ringName}
+                      </Badge>
+                    </div>
+                  ))
+                }
+              </div>
+            </div>
           </div>
         </div>
 

js/components/Search.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export default function Search({ value, onChange }) {
+  return (
+    <div className="search">
+      <input value={value} type="text" onChange={(e) => { onChange(e.target.value); }} className="search__field" placeholder="Search" />
+      <span className="icon icon--search search__icon" />
+    </div>
+  );
+}

styles/components/search.css

@@ -0,0 +1,35 @@
+.search {
+  box-sizing: border-box;
+  width: 600px;
+  height: 50px;
+  position: relative;
+
+  &__field {
+    height: 100%;
+    width: 100%;
+    padding: 10px 20px 10px 50px;
+    background: #3A444A;
+    display: block;
+    border: none;
+    color: var(--color-white);
+    font-size: 16px;
+    line-height: 1;
+    font-family: 'DIN';
+    font-weight: normal;
+
+    &::placeholder {
+      color: var(--color-gray-normal);
+    }
+
+    &:focus {
+      outline: none;
+      background: #2F393F;
+    }
+  }
+
+  &__icon {
+    position: absolute;
+    top: 14px;
+    left: 14px;
+  }
+}