Add badges on roadmaps

components/badges/index.js

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const BadgesList = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 0;
+`;
+
+export const PrimaryBadge = styled.span`
+  font-size: 11px;
+  font-weight: 600;
+  background: #2929ff;
+  color: white;
+  padding: 2px 8px;
+  border-radius: 4px;
+  text-transform: uppercase;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 10px;
+  
+  svg {
+    height: 11px;
+    width: 11px;
+    margin-right: 5px;
+  }
+`;
+
+export const SecondaryBadge = styled(PrimaryBadge)`
+  background: #696969;
+  color: white;
+`;

components/page-header/index.js

@@ -1,26 +1,14 @@
-import { HeaderWrap, HeaderButtons, HeaderButton, Subtitle, Title } from './style';
+import { HeaderWrap, Subtitle, Title } from './style';
 
 const PageHeader = ({
   title,
   subtitle,
   children,
-  primaryButtonText,
-  primaryButtonUrl,
-  secondaryButtonText,
-  secondaryButtonUrl,
 }) => (
   <HeaderWrap>
     <Title>{ title }</Title>
     <Subtitle dangerouslySetInnerHTML={{ __html: subtitle }} />
 
-    {
-      (primaryButtonText || secondaryButtonText) &&
-      <HeaderButtons>
-        { primaryButtonText && <HeaderButton primary href={primaryButtonUrl}>{ primaryButtonText }</HeaderButton> }
-        { secondaryButtonText && <HeaderButton href={secondaryButtonUrl}>{ secondaryButtonText }</HeaderButton> }
-      </HeaderButtons>
-    }
-
     { children }
   </HeaderWrap>
 );

components/page-header/style.js

@@ -20,19 +20,3 @@ export const Subtitle = styled.p`
     font-weight: 700;
   }
 `;
-
-export const HeaderButton = styled.a`
-  box-shadow: rgba(0, 0, 0, 0.12) 0 5px 10px 0;
-  padding: 9px 25px;
-  background: ${ props => props.primary ? '#101010' : '#ffffff' } !important;
-  color: ${ props => props.primary ? '#ffffff' : '#101010' } !important;
-  border-radius: 4px;
-  margin-left: ${ props => !props.primary ? '15px': 0 };
-  cursor: pointer;
-  font-size: 15px;
-  display: inline-block;
-`;
-
-export const HeaderButtons = styled.div`
-  margin: 30px 0 0;
-`;

components/roadmap-summary/index.js

@@ -12,6 +12,10 @@ import {
 } from './style';
 import SharePage from '../share-page';
 
+import { BadgesList, PrimaryBadge, SecondaryBadge } from 'components/badges';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+
 const isActiveRoadmap = (loadedVersion, roadmapVersion) => (
   (loadedVersion === roadmapVersion) ||
   (loadedVersion === 'latest' && parseInt(roadmapVersion, 10) === (new Date()).getFullYear())
@@ -22,6 +26,18 @@ const RoadmapSummary = ({ roadmap }) => (
     <Header>
       <Title>{ roadmap.title }</Title>
       <Description>{ roadmap.description }</Description>
+
+      <BadgesList className="mt-4">
+        { roadmap.upcoming && <SecondaryBadge>Upcoming Roadmap</SecondaryBadge> }
+        { roadmap.featured && <SecondaryBadge>Featured Roadmap</SecondaryBadge> }
+        <a href="/signup">
+          <PrimaryBadge>
+            <FontAwesomeIcon icon={faEnvelope}/>
+            Notify Me
+          </PrimaryBadge>
+        </a>
+      </BadgesList>
+
       <VersionList className="border-bottom">
         { (roadmap.versions || []).map(versionItem => (
           <Link href={ `${roadmap.url}/${versionItem}` } passHref key={ versionItem }>

pages/[roadmap]/index.js

@@ -9,12 +9,16 @@ import Helmet from 'components/helmet';
 import PageHeader from 'components/page-header';
 import GuideBody from 'components/guide-body';
 
+import { BadgesList, PrimaryBadge, SecondaryBadge } from 'components/badges';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
+
 const Roadmap = ({ roadmap }) => {
   if (!roadmap) {
     return <Error statusCode={ 404 } />
   }
 
-  if (roadmap.upcoming) {
+  if (false && roadmap.upcoming) {
     const GuideContent = require(`../../data/roadmaps/upcoming.md`).default;
 
     return (
@@ -23,8 +27,17 @@ const Roadmap = ({ roadmap }) => {
         <SiteNav />
           <PageHeader
             title={ roadmap.title}
-            subtitle={roadmap.description}
+            subtitle={roadmap.description}>
-          />
+            <BadgesList className="mt-4">
+              <SecondaryBadge>Upcoming Roadmap</SecondaryBadge>
+              <a href="/signup">
+                <PrimaryBadge>
+                  <FontAwesomeIcon icon={faEnvelope}/>
+                  Notify Me
+                </PrimaryBadge>
+              </a>
+            </BadgesList>
+          </PageHeader>
           <div className="border-top pt-5">
             <GuideBody >
               <GuideContent />

pages/roadmaps.js

@@ -23,6 +23,7 @@ const RoadmapsList = () => (
         <div className="row">
           { roadmaps.map(roadmap => (
             <RowBlock
+              key={ roadmap.url }
               title={ roadmap.title.replace(/roadmap|developer/i, '') }
               subtitle={ roadmap.featuredDescription || roadmap.description }
               url={ roadmap.url }