Add quadrant overview pages

common/config.js

@@ -1,18 +1,19 @@
+export const quadrants = [
+  'languages-and-frameworks',
+  'methods-and-patterns',
+  'platforms-and-aoe-services',
+  'tools',
+];
+
 export const getPageNames = (radar) => {
   return [
     'index',
     'overview',
     'help',
-    'foo/bar',
+    ...quadrants,
   ]
 }
 
-export const quadrants = [
-  'languages-and-frameworks',
-  'methods-and-patterns',
-  'platforms-and-aoe-services',
-  'tools',
-];
 
 export const rings = [
   'assess',

js/components/Badge.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import classNames from 'classnames';
+
+
+export default function Badge({ onClick, big, type, children }) {
+  const Comp = typeof onClick === 'function' ? 'a' : 'span';
+  return (
+    <Comp
+      className={classNames(
+        'badge',
+        `badge--${type}`,
+        {
+          'badge--big': big === true,
+        }
+      )}
+      onClick={onClick}
+      href={Comp === 'a' ? '#' : undefined}
+    >
+      {children}
+    </Comp>
+  );
+}

js/components/Item.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export default function Item({ item, noLeadingBorder = false}) {
+  return (
+    <a
+      className={classNames('item', {
+        'item--no-leading-border': noLeadingBorder,
+      })}
+      href={`/${item.quadrant}/${item.name}.html`}
+    >
+      <div className="item__title">{item.title}</div>
+      {
+        item.info && (
+          <div className="item__info">{item.info}</div>
+        )
+      }
+    </a>
+  );
+}

js/components/PageOverview.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import HeadlineGroup from './HeadlineGroup';
 import HeroHeadline from './HeroHeadline';
+import Badge from './Badge';
 import { groupByFirstLetter } from '../../common/model';
 import { translate } from '../../common/config';
 
@@ -52,16 +53,13 @@ class PageOverview extends React.Component {
             {
               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),
-                    })}
+                  <Badge
+                    big
                     onClick={this.handleRingClick(ringName)}
-                    href="#"
+                    type={this.isRingActive(ringName) ? ringName : 'empty' }
                   >
                     {ringName}
-                  </a>
+                  </Badge>
                 </div>
               ))
             }
@@ -86,7 +84,9 @@ class PageOverview extends React.Component {
                               <div className="split__right">
                                 <div className="nav">
                                   <div className="nav__item">{translate(item.quadrant)}</div>
-                                  <div className="nav__item"><span className={`badge badge--${item.ring}`}>{item.ring}</span></div>
+                                  <div className="nav__item">
+                                    <Badge type={item.ring}>{item.ring}</Badge>
+                                  </div>
                                 </div>
                               </div>
                             </div>

js/components/PageQuadrant.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import HeroHeadline from './HeroHeadline';
+import HeadlineGroup from './HeadlineGroup';
+import QuadrantSection from './QuadrantSection';
+import { translate } from '../../common/config';
+import { groupByQuadrants } from '../../common/model';
+
+export default function PageQuadrant({ pageName, items }) {
+  const groups = groupByQuadrants(items);
+  return (
+    <div>
+      <HeadlineGroup>
+        <HeroHeadline>{translate(pageName)}</HeroHeadline>
+      </HeadlineGroup>
+      <QuadrantSection groups={groups} quadrantName={pageName} big />
+    </div>
+  );
+}

js/components/QuadrantGrid.js

@@ -1,52 +1,12 @@
 import React from 'react';
 import { groupByQuadrants } from '../../common/model';
-import { translate, quadrants, rings } from '../../common/config';
-
-const renderRing = (ringName, quadrantName, groups) => {
-  if (!groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
-    return null;
-  }
-  return (
-    <div key={ringName} className="quadrant-section__ring">
-      <div className="ring-list">
-        <div className="ring-list__header"><span className={`badge badge--${ringName}`}>{ringName}</span></div>
-        {
-          (groups[quadrantName][ringName]).map(item => (
-            <span
-              key={item.name}
-              className="ring-list__item"
-            >
-              <a className="link" href={`/${item.quadrant}/${item.name}.html`}>{item.title}</a>
-            </span>
-          ))
-        }
-      </div>
-    </div>
-  );
-}
+import { quadrants } from '../../common/config';
+import QuadrantSection from './QuadrantSection';
 
 const renderQuadrant = (quadrantName, groups) => {
   return (
     <div key={quadrantName} className="quadrant-grid__quadrant">
-      <div className="quadrant-section">
-        <div className="quadrant-section__header">
-          <div className="split">
-            <div className="split__left">
-              <h4 className="headline">{translate(quadrantName)}</h4>
-            </div>
-            <div className="split__right">
-              <a className="icon-link" href={`/${quadrantName}.html`}>
-                <span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
-              </a>
-            </div>
-          </div>
-        </div>
-        <div className="quadrant-section__rings">
-          {
-            rings.map((ringName) => renderRing(ringName, quadrantName, groups))
-          }
-        </div>
-      </div>
+      <QuadrantSection quadrantName={quadrantName} groups={groups} />
     </div>
   );
 }

js/components/QuadrantSection.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { translate, rings } from '../../common/config';
+import Badge from './Badge';
+import Item from './Item';
+
+const renderList = (ringName, quadrantName, groups, big) => {
+  const itemsInRing = groups[quadrantName][ringName];
+
+  if (big === true) {
+    return (
+      <div className="item-list">
+        <div className="item-list__header">
+          <Badge type={ringName} big={big}>{ringName}</Badge>
+        </div>
+        <div className="item-list__list">
+          {
+            itemsInRing.map(item => (
+              <Item key={item.name} item={item} noLeadingBorder />
+            ))
+          }
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="ring-list">
+      <div className="ring-list__header">
+        <Badge type={ringName}>{ringName}</Badge>
+      </div>
+      {
+        itemsInRing.map(item => (
+          <span
+            key={item.name}
+            className="ring-list__item"
+          >
+            <a className="link" href={`/${item.quadrant}/${item.name}.html`}>{item.title}</a>
+          </span>
+        ))
+      }
+    </div>
+  );
+}
+
+
+const renderRing = (ringName, quadrantName, groups, big) => {
+  if (!groups[quadrantName][ringName] || groups[quadrantName][ringName].length === 0) {
+    return null;
+  }
+  return (
+    <div key={ringName} className="quadrant-section__ring">
+      {renderList(ringName, quadrantName, groups, big)}
+    </div>
+  );
+}
+
+export default function QuadrantSection({ quadrantName, groups, big = false }) {
+  return (
+    <div className="quadrant-section">
+      <div className="quadrant-section__header">
+        <div className="split">
+          <div className="split__left">
+            <h4 className="headline">{translate(quadrantName)}</h4>
+          </div>
+          {
+            !big && (
+              <div className="split__right">
+                <a className="icon-link" href={`/${quadrantName}.html`}>
+                  <span className="icon icon--pie icon-link__icon"></span>Quadrant Overview
+                </a>
+              </div>
+            )
+          }
+        </div>
+      </div>
+      <div className="quadrant-section__rings">
+        {
+          rings.map((ringName) => renderRing(ringName, quadrantName, groups, big))
+        }
+      </div>
+    </div>
+  );
+}

js/components/Router.js

@@ -2,23 +2,28 @@ import React from 'react';
 import PageIndex from './PageIndex';
 import PageOverview from './PageOverview';
 import PageHelp from './PageHelp';
+import PageQuadrant from './PageQuadrant';
+import { quadrants } from '../../common/config';
 
-export default function Router({ pageName, ...props}) {
-  let Comp;
-  switch (pageName) {
-    case 'index':
-      Comp = PageIndex;
-      break;
-    case 'overview':
-      Comp = PageOverview;
-      break;
-    case 'help':
-      Comp = PageHelp;
-      break;
-    default:
-      Comp = 'div';
-      break;
+
+const getPageByName = (pageName) => {
+  if (pageName === 'index') {
+    return PageIndex;
+  }
+  if (pageName === 'overview') {
+    return PageOverview;
+  }
+  if (pageName === 'help') {
+    return PageHelp;
   }
+  if (quadrants.includes(pageName)) {
+    return PageQuadrant;
+  }
+
+  return 'div';
+}
 
-  return <Comp {...props} />;
+export default function Router({ pageName, ...props}) {
+  const Comp = getPageByName(pageName);
+  return <Comp {...props} pageName={pageName} />;
 }