Styles for letter index

package.json

@@ -32,6 +32,7 @@
     "postcss-easy-import": "2.0.0",
     "postcss-nested": "1.0.0",
     "pug": "2.0.0-beta9",
+    "vue": "2.1.10",
     "walk": "2.3.9",
     "webpack": "2.2.0"
   }

static-pages/overview.pug

@@ -1,12 +1,43 @@
 extends ../templates/default-page.pug
 
 block vars
+  - var noLogo=true
   - var title='Technologies Overview'
 
 block content
   .headline-group
     .hero-headline
       | Technologies Overview
-  div.item-index
+  .filter
-    each items, letter  in groupByFirstLetter(radar)
+    .nav
-      .item-index__letter= letter
+      .nav__item
+        a.badge.badge--big.badge--neutral(href='#') all
+      each items, ringName in groupByRing(radar)
+        .nav__item
+          a.badge.badge--big.badge--empty(href='#')= ringName
+
+  div.letter-index
+    each items, letter in groupByFirstLetter(radar)
+      .letter-index__group
+        .letter-index__letter= letter
+        .letter-index__items
+          .item-list
+            .item-list__list
+              each item in items
+                a.item.item--no-leading-border.item--no-trailing-border(href=`/${item.quadrant}/${item.name}.html`)
+                  .split.split--align-top
+                    .split__left
+                      .item__title
+                        = item.attributes.title
+                        if item.isNew
+                          = ' '
+                          span.is-new new
+                      if item.attributes.info
+                        .item__info= item.attributes.info
+                    .split__right
+                      .nav
+                        .nav__item
+                          = translate(item.quadrant)
+                        .nav__item
+                          span(class=`badge badge--${item.attributes.ring}`)
+                            = item.attributes.ring

styles/base.css

@@ -10,6 +10,7 @@
   --color-orange: #FAA03D;
   --color-blue: #40A7D1;
   --color-marine: #688190;
+  --color-red: #F1235A;
   --color-brand: #F59134;
 }
 

styles/components/badge.css

@@ -1,6 +1,7 @@
 .badge {
   color: var(--color-white);
   display: inline-block;
+  box-sizing: border-box;
   padding: 0 15px;
   text-transform: uppercase;
   border-radius: 13px;
@@ -8,6 +9,8 @@
   line-height: 25px;
   height: 25px;
   overflow: hidden;
+  text-decoration: none;
+  border: 1px solid var(--color-gray-normal);
 
   &--big {
     border-radius: 15px;
@@ -17,17 +20,25 @@
     padding: 0 20px;
   }
 
+  &--neutral {
+    background: var(--color-gray-normal);
+    border-color: var(--color-gray-normal);
+  }
   &--adopt {
     background: var(--color-green);
+    border-color: var(--color-green);
   }
   &--trial {
     background: var(--color-orange);
+    border-color: var(--color-orange);
   }
   &--assess {
     background: var(--color-blue);
+    border-color: var(--color-blue);
   }
   &--hold {
     background: var(--color-marine);
+    border-color: var(--color-marine);
   }
 
 }

styles/components/filter.css

@@ -0,0 +1,3 @@
+.filter {
+  margin-bottom: 40px;
+}

styles/components/is-new.css

@@ -0,0 +1,10 @@
+.is-new {
+  font-size: 9px;
+  background: var(--color-red);
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 10px;
+  position: relative;
+  vertical-align: top;
+  margin-top: -2px;
+}

styles/components/item.css

@@ -4,6 +4,7 @@
   display: block;
   text-decoration: none;
   transition: background 200ms ease-out;
+  color: var(--color-gray-normal);
 
   &.is-active {
     background: var(--color-gray-dark-alt);
@@ -23,6 +24,12 @@
     }
   }
 
+  &--no-trailing-border {
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
   &__title {
     font-size: 16px;
     color: var(--color-white);

styles/components/letter-index.css

@@ -0,0 +1,16 @@
+.letter-index {
+  margin-bottom: 60px;
+  &__group {
+    border-top: 1px solid var(--color-gray-normal);
+    position: relative;
+    padding: 0 0 0 200px;
+    min-height: 100px;
+  }
+  &__letter {
+    font-size: 50px;
+    color: var(--color-gray-normal);
+    position: absolute;
+    left: 50px;
+    top: 10px;
+  }
+}

styles/components/nav.css

@@ -1,6 +1,7 @@
 .nav {
+  white-space: nowrap;
   &__item {
-    display: inline-block;
+    display: inline-flex;
     & + .nav__item {
       margin-left: 20px;
     }

styles/components/split.css

@@ -2,7 +2,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  
+
+  &--align-top {
+    align-items: flex-start;
+  }
+
   &__left {
     flex: 0 1 auto;
   }

tasks/radar.js

@@ -36,14 +36,21 @@ const addItemToQuadrant = (quadrant = {}, item) => ({
 });
 
 export const groupByFirstLetter = (items) => (
-  items.reduce((letterIned, item) => ({
+  items.reduce((letterIndex, item) => ({
-    ...letterIned,
+    ...letterIndex,
-    [getFirstLetter(item)]: addItemToFirstLetterIndex(letterIned[getFirstLetter(item)], item),
+    [getFirstLetter(item)]: addItemToList(letterIndex[getFirstLetter(item)], item),
   }), {})
 );
 
-const addItemToFirstLetterIndex = (letterIned = [], item) => ([
+export const groupByRing = (items) => (
-  ...letterIned,
+  items.reduce((rings, item) => ({
+    ...rings,
+    [item.attributes.ring]: addItemToList(rings[item.attributes.ring], item),
+  }), {})
+);
+
+const addItemToList = (list = [], item) => ([
+  ...list,
   item,
 ]);
 

tasks/template.js

@@ -1,6 +1,10 @@
 import pug from 'pug';
 import { relativePath } from './file';
-import { groupByQuadrants, groupByFirstLetter } from './radar';
+import {
+  groupByQuadrants,
+  groupByFirstLetter,
+  groupByRing,
+} from './radar';
 
 const templateFolder = 'templates';
 
@@ -17,6 +21,7 @@ export const vars = (vars) => ({
   },
   groupByQuadrants,
   groupByFirstLetter,
+  groupByRing,
   ...vars,
 })
 

templates/default-page.pug

@@ -6,7 +6,7 @@ block body
       .branding
         if noLogo
           .branding__backlink
-            a.icon-link(href='/') AOE Technology Radar
+            a.icon-link.icon-link--primary(href='/') AOE Technology Radar
         if !noLogo
           a.branding__logo(href='/')
             img(src='/assets/logo.svg')