[FE-136] Terra UI branding - Public Health Genomics (#4589)

Co-authored-by: Katrina P <68349264+kpierre13@users.noreply.github.com>

src/libs/brands.ts

@@ -15,6 +15,9 @@ import fcLogo from 'src/images/brands/firecloud/FireCloud-Logo.svg';
 import fcLogoWhite from 'src/images/brands/firecloud/FireCloud-Logo-White.svg';
 import projectSingularLogo from 'src/images/brands/projectSingular/project-singular-logo-black.svg';
 import projectSingularLogoWhite from 'src/images/brands/projectSingular/project-singular-logo-white.svg';
+import publicHealthBackground from 'src/images/brands/publicHealth/Terra-PHG-background.png';
+import publicHealthLogo from 'src/images/brands/publicHealth/Terra-PHG-Color.svg';
+import publicHealthLogoWhite from 'src/images/brands/publicHealth/Terra-PHG-White.svg';
 import rareXLogo from 'src/images/brands/rareX/rarex-logo-color.svg';
 import rareXLogoWhite from 'src/images/brands/rareX/rarex-logo-white.svg';
 import terraLogo from 'src/images/brands/terra/logo.svg';
@@ -61,13 +64,48 @@ export interface BrandConfiguration {
   /** Optional URL for landing page background image */
   landingPageBackground?: string;
 
+  landingPageCards?: {
+    /** Card link */
+    link: string;
+
+    /** Card title */
+    title: string;
+
+    /** Card body */
+    body: string;
+
+    /** Card link pathParams */
+    linkPathParams?: object;
+
+    /** Card link queryParams */
+    linkQueryParams?: object;
+  }[];
+
   /** Optionally filter which datasets show up in the Data Catalog */
   catalogDataCollectionsToInclude?: string[];
 
   /** Theme for components */
   theme: Theme;
 }
 
+export const landingPageCardsDefault = [
+  {
+    link: 'workspaces',
+    title: 'View Workspaces',
+    body: 'Workspaces connect your data to popular analysis tools powered by the cloud. Use Workspaces to share data, code, and results easily and securely.',
+  },
+  {
+    link: 'library-showcase',
+    title: 'View Examples',
+    body: 'Browse our gallery of showcase Workspaces to see how science gets done.',
+  },
+  {
+    link: 'library-datasets',
+    title: 'Browse Data',
+    body: 'Access data from a rich ecosystem of data portals.',
+  },
+];
+
 const baseColors: Theme['colorPalette'] = {
   primary: '#74ae43',
   secondary: '#6d6e70',
@@ -290,6 +328,61 @@ export const brands: Record<string, BrandConfiguration> = {
       colorPalette: { ...baseColors, primary: '#521b93', secondary: '#011c48', accent: '#521b93' },
     },
   },
+  publicHealth: {
+    name: 'Terra for Public Health Genomics',
+    queryName: 'publicHealth',
+    welcomeHeader: 'Terra for Public Health Genomics',
+    description:
+      'Terra is a secure cloud-based data platform enabling pathogen genomic data analysis in public health, clinical, and academic settings.',
+    hostName: 'publichealth.terra.bio',
+    docLinks: [
+      {
+        link: 'https://dockstore.org/organizations/Theiagen',
+        text: 'Theiagen Workflow Repository',
+      },
+      {
+        link: 'https://docs.google.com/document/d/e/2PACX-1vTPQC-bYMRxXQ4Gz9ESH_Eo-E6UXD2qOL7_3iMxJaQF3pOyW3tUyu7G9Nvk-JTf8xDkOyhftvd9L-sa/pub',
+        text: 'Terra Cloud Costs FAQs',
+      },
+      {
+        link: 'mailto:publichealthgenomics@broadinstitute.org',
+        text: 'Contact us',
+      },
+      {
+        link: 'https://support.terra.bio/hc/en-us',
+        text: 'Terra Support',
+      },
+    ],
+    logos: {
+      color: publicHealthLogo,
+      white: publicHealthLogoWhite,
+    },
+    landingPageBackground: publicHealthBackground,
+    landingPageCards: [
+      {
+        link: 'workspaces',
+        title: 'My Workspaces',
+        body: 'Workspaces connect your data to popular analysis tools powered by the cloud. Use Workspaces to share data, code, and results easily and securely.',
+      },
+      {
+        link: 'workspaces',
+        title: 'Examples',
+        body: 'Browse example pathogen genomic data and analysis tools together.',
+        linkPathParams: {},
+        linkQueryParams: { tab: 'public', 'tagsFilter[]': 'pathogen genomics' },
+      },
+    ],
+    theme: {
+      colorPalette: {
+        ...baseColors,
+        primary: '#006DB6',
+        secondary: '#004D81',
+        accent: '#4D72AA',
+        light: '#E6F1F8',
+        dark: '#333F52',
+      },
+    },
+  },
   rareX: {
     name: `The RARE${nonBreakingHyphen}X Data Analysis Platform`,
     queryName: `the rare${nonBreakingHyphen}x data analysis platform`,

src/pages/LandingPage.js

@@ -8,6 +8,7 @@ import hexButton from 'src/images/hex-button.svg';
 import terraHero from 'src/images/terra-hero.png';
 import { Ajax } from 'src/libs/ajax';
 import { getEnabledBrand, isFirecloud, isTerra } from 'src/libs/brand-utils';
+import { landingPageCardsDefault } from 'src/libs/brands';
 import colors from 'src/libs/colors';
 import { withErrorHandling } from 'src/libs/error';
 import Events from 'src/libs/events';
@@ -51,11 +52,11 @@ const makeRightArrowWithBackgroundIcon = () =>
     [icon('arrowRight', { color: 'white' })]
   );
 
-const makeCard = (link, title, body) =>
+const makeCard = _.map(({ link, title, body, linkPathParams, linkQueryParams }) =>
   h(
     Clickable,
     {
-      href: Nav.getLink(link),
+      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)' },
     },
@@ -65,7 +66,8 @@ const makeCard = (link, title, body) =>
       div({ style: { flexGrow: 1 } }),
       makeRightArrowWithBackgroundIcon(),
     ]
-  );
+  )
+);
 
 const makeDocLinks = _.map(({ link, text }) =>
   div({ style: { marginBottom: '1rem', fontSize: 18 } }, [
@@ -133,13 +135,7 @@ 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('workspaces', 'View Workspaces', [
-        'Workspaces connect your data to popular analysis tools powered by the cloud. Use Workspaces to share data, code, and results easily and securely.',
-      ]),
-      makeCard('library-showcase', 'View Examples', 'Browse our gallery of showcase Workspaces to see how science gets done.'),
-      makeCard('library-datasets', 'Browse Data', 'Access data from a rich ecosystem of data portals.'),
-    ]),
+    div({ style: { display: 'flex', margin: '2rem 0 1rem 0' } }, makeCard(getEnabledBrand().landingPageCards || landingPageCardsDefault)),
     isTerra() &&
       div(
         {