Add badges on roadmaps

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 }>