Cleanup and file reorganization

js/components/PageOverview.js

@@ -0,0 +1,86 @@
+import React from 'react';
+import classNames from 'classnames';
+import HeadlineGroup from './HeadlineGroup';
+import HeroHeadline from './HeroHeadline';
+
+const rings = ['all', 'assess', 'trial', 'hold', 'adopt'];
+
+class PageOverview extends React.Component {
+
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      ring: rings[0],
+    };
+  }
+
+  handleRingClick = (ring) => (e) => {
+    e.preventDefault();
+
+    this.setState({
+      ...this.state,
+      ring,
+    });
+  }
+
+  isRingActive(ringName) {
+    return this.state.ring === ringName;
+  }
+
+  render() {
+    return (
+      <div>
+        <HeadlineGroup>
+          <HeroHeadline>Technologies Overview</HeroHeadline>
+        </HeadlineGroup>
+        <div className="filter">
+          <div className="nav">
+            {
+              rings.map(ringName => (
+                <div className="nav__item" key={ringName}>
+                  <a
+                    className={classNames('badge badge--big', {
+                      'badge--empty': !this.isRingActive(ringName),
+                      [`badge--${ringName}`]: this.isRingActive(ringName),
+                    })}
+                    onClick={this.handleRingClick(ringName)}
+                    href="#"
+                  >
+                    {ringName}
+                  </a>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+
+        <div className="letter-index">
+          <div className="letter-index__group">
+            <div className="letter-index__letter">B</div>
+            <div className="letter-index__items">
+              <div className="item-list">
+                <div className="item-list__list">
+                  <a className="item item--big item--no-leading-border item--no-trailing-border" href="/platforms-and-aoe-services/bar.html">
+                    <div className="split split--overview">
+                      <div className="split__left">
+                        <div className="item__title">Bar</div>
+                      </div>
+                      <div className="split__right">
+                        <div className="nav">
+                          <div className="nav__item">Platforms and AOE Services</div>
+                          <div className="nav__item"><span className="badge badge--assess">assess</span></div>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default PageOverview;