[CORE-184] Add Public Roadmap Banner to Home Page (#5178)

Author: kevinmarete

src/components/TopBar.tsx

@@ -274,6 +274,13 @@ export const TopBar = (props: TopBarProps): ReactNode => {
               onClick={() => setOpenPlatformNewsMenu(!openPlatformNewsMenu)}
               isOpened={openPlatformNewsMenu}
             >
+              <DropDownSubItem
+                href='https://support.terra.bio/hc/en-us/sections/30968105851931-Terra-Roadmap'
+                onClick={hideNav}
+                {...Utils.newTabLinkProps}
+              >
+                Terra Roadmap
+              </DropDownSubItem>
               <DropDownSubItem href='#feature-preview' onClick={hideNav}>
                 Feature Preview
               </DropDownSubItem>

src/images/roadmap-bg-banner.png

@@ -87,6 +87,21 @@ export interface BrandConfiguration {
 
   /** Theme for components */
   theme: Theme;
+
+  /** Optional flag to show the roadmap link */
+  showRoadmap?: boolean;
+
+  /** Optional card for the roadmap */
+  roadMapCard?: {
+    /** Card link */
+    link: string;
+
+    /** Card title */
+    title: string;
+
+    /** Card body */
+    body: string;
+  };
 }
 
 export const landingPageCardsDefault = [
@@ -107,6 +122,12 @@ export const landingPageCardsDefault = [
   },
 ];
 
+export const roadMapCardDefault = {
+  link: 'https://support.terra.bio/hc/en-us/sections/30968105851931-Terra-Roadmap',
+  title: 'Terra Roadmap',
+  body: "Stay connected: see what's new, what's next, and try out the latest features on Terra.",
+};
+
 const baseColors: Theme['colorPalette'] = {
   primary: '#74ae43',
   secondary: '#6d6e70',
@@ -145,6 +166,7 @@ export const brands: Record<string, BrandConfiguration> = {
     theme: {
       colorPalette: { ...baseColors, primary: '#e0dd10', accent: '#035c94', light: '#f6f7f4', dark: '#012840' },
     },
+    showRoadmap: true,
   },
   baseline: {
     name: 'Project Baseline',
@@ -359,6 +381,7 @@ export const brands: Record<string, BrandConfiguration> = {
         dark: '#333F52',
       },
     },
+    showRoadmap: true,
   },
   rareX: {
     name: `The RARE${nonBreakingHyphen}X Data Analysis Platform`,
@@ -420,6 +443,7 @@ export const brands: Record<string, BrandConfiguration> = {
     theme: {
       colorPalette: { ...baseColors },
     },
+    showRoadmap: true,
   },
 };
 

src/libs/brands.ts

@@ -5,9 +5,10 @@ import { ButtonPrimary, Clickable, Link } from 'src/components/common';
 import { HeroWrapper } from 'src/components/HeroWrapper';
 import { icon } from 'src/components/icons';
 import hexButton from 'src/images/hex-button.svg';
+import roadmapBgBanner from 'src/images/roadmap-bg-banner.png';
 import { Ajax } from 'src/libs/ajax';
 import { getEnabledBrand, isFirecloud, isTerra } from 'src/libs/brand-utils';
-import { landingPageCardsDefault } from 'src/libs/brands';
+import { landingPageCardsDefault, roadMapCardDefault } from 'src/libs/brands';
 import colors from 'src/libs/colors';
 import { withErrorHandling } from 'src/libs/error';
 import * as Nav from 'src/libs/nav';
@@ -30,6 +31,13 @@ const styles = {
     color: 'white',
     padding: '2rem 1rem',
   },
+  roadmapBanner: {
+    width: 710,
+    backgroundImage: `url(${roadmapBgBanner})`,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+  },
 };
 
 const makeRightArrowWithBackgroundIcon = () =>
@@ -49,22 +57,24 @@ const makeRightArrowWithBackgroundIcon = () =>
     [icon('arrowRight', { color: 'white' })]
   );
 
-const makeCard = _.map(({ link, title, body, linkPathParams, linkQueryParams }) =>
-  h(
-    Clickable,
-    {
-      href: Nav.getLink(link, linkPathParams, linkQueryParams),
-      style: { ...Style.elements.card.container, ...styles.card },
-      hover: { boxShadow: '0 3px 7px 0 rgba(0,0,0,0.5), 0 5px 3px 0 rgba(0,0,0,0.2)' },
-    },
-    [
-      h2({ style: { color: colors.accent(), fontSize: 18, fontWeight: 500, lineHeight: '22px', marginBottom: '0.5rem' } }, title),
-      div({ style: { lineHeight: '22px' } }, body),
-      div({ style: { flexGrow: 1 } }),
-      makeRightArrowWithBackgroundIcon(),
-    ]
-  )
-);
+const makeCard = (customStyles = {}, cardConfigs = [], isExternalLink = false) =>
+  _.map(({ link, title, body, linkPathParams, linkQueryParams }) =>
+    h(
+      Clickable,
+      {
+        href: isExternalLink ? link : Nav.getLink(link, linkPathParams, linkQueryParams),
+        style: { ...Style.elements.card.container, ...customStyles },
+        hover: { boxShadow: '0 3px 7px 0 rgba(0,0,0,0.5), 0 5px 3px 0 rgba(0,0,0,0.2)' },
+        target: isExternalLink ? '_blank' : '',
+      },
+      [
+        h2({ style: { color: colors.accent(), fontSize: 18, fontWeight: 500, lineHeight: '22px', marginBottom: '0.5rem' } }, title),
+        div({ style: { lineHeight: '22px' } }, body),
+        div({ style: { flexGrow: 1 } }),
+        makeRightArrowWithBackgroundIcon(),
+      ]
+    )
+  )(cardConfigs);
 
 const makeDocLinks = _.map(({ link, text }) =>
   div({ style: { marginBottom: '1rem', fontSize: 18 } }, [
@@ -132,7 +142,15 @@ export const LandingPage = () => {
       ),
     // width is set to prevent text from overlapping the background image and decreasing legibility
     div({ style: { maxWidth: 'calc(100% - 460px)' } }, makeDocLinks(getEnabledBrand().docLinks)),
-    div({ style: { display: 'flex', margin: '2rem 0 1rem 0' } }, makeCard(getEnabledBrand().landingPageCards || landingPageCardsDefault)),
+    div(
+      { style: { display: 'flex', margin: '2rem 0 1rem 0' } },
+      makeCard({ ...styles.card }, getEnabledBrand().landingPageCards || landingPageCardsDefault)
+    ),
+    getEnabledBrand().showRoadmap &&
+      div(
+        { style: { display: 'flex', marginTop: '2rem' } },
+        makeCard({ ...styles.roadmapBanner }, [getEnabledBrand().roadMapCard || roadMapCardDefault], true)
+      ),
     (isTerra() || isFirecloud()) &&
       div({ style: { width: 700, marginTop: '4rem' } }, [
         'This project has been funded in whole or in part with Federal funds from the National Cancer Institute, National Institutes of Health, ',