MMT-3490: Adding homepage (#1117)

* MMT-3490: Adding homepage and tweaking header * MMT-3490: Cleanup * MMT-3490: PR feedback * MMT-3490: Linter cleanup * MMT-3490: Linter cleanup * MMT-3490: Moving Panel to new component
nasa · Feb 13, 2024 · 3efdc81 · 3efdc81
1 parent 2333f5a
commit 3efdc81
Show file tree

Hide file tree

Showing 21 changed files with 712 additions and 162 deletions.
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en" class="h-100">
+<html lang="en" class="w-100 h-100">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/static/src/assets/images/logos/nasa-meatball-new.svg" />
@@ -9,7 +9,7 @@
   </head>
   <body class="h-100 d-flex flex-column is-loading">
     <div id="earthdata-tophat2" class="th-wrapper" style="height: 34px; background: #000;"></div>
-    <div id="root" class="d-flex flex-grow-1 align-items-stretch w-100"></div>
+    <div id="root" class="d-flex flex-grow-1 align-items-stretch w-100 h-100"></div>
     <div class="app-loading-screen">
       <div class="app-loading-screen__content">
         <div class="spinner-border text-primary" role="status">

diff --git a/static/src/css/initial/index.scss b/static/src/css/initial/index.scss
@@ -37,7 +37,9 @@ body {
   position: absolute;
   z-index: 9999;
   display: flex;
+  overflow: hidden;
   width: 100vw;
+  max-width: 100vw;
   height: 100vh;
   align-items: center;
   justify-content: center;

diff --git a/static/src/css/vendor/bootstrap/_variables.scss b/static/src/css/vendor/bootstrap/_variables.scss
@@ -22,6 +22,8 @@
  * Included after `variables` and before `maps` as noted in the Bootstrap documentation
 */
 
+$grid-gutter-width: 2rem;
+
 /*
  * Color
 */
@@ -79,15 +81,18 @@ $link-hover-color: map.get($theme-colors, "blue");
  * Badge
 */
 
-$btn-padding-y: 0.5rem;
-$btn-padding-x: 1rem;
-$btn-border-radius: 0.125rem;
+$badge-border-radius: 0.25rem;
 
 /*
  * Button
 */
 
-$badge-border-radius: 0.25rem;
+$btn-padding-y: 0.5rem;
+$btn-padding-x: 1rem;
+$btn-border-radius: 0.125rem;
+$btn-border-radius-lg: 0.2rem;
+$btn-padding-y-lg: 0.625rem;
+$btn-padding-x-lg: 1.25rem;
 
 /*
  * Accordion
@@ -112,6 +117,14 @@ $nav-link-hover-color: map.get($theme-colors, "blue");
 $nav-pills-link-active-bg: map.get($theme-colors, "blue");
 $nav-pills-border-radius: 0;
 
+/*
+ * Border Radius
+*/
+
+$border-radius: .25rem;
+$border-radius-sm: 0.125rem;
+$border-radius-lg: 0.2rem;
+
 /*
  * Bootstrap utilities
 */

diff --git a/static/src/css/vendor/bootstrap/overrides/_navbar.scss b/static/src/css/vendor/bootstrap/overrides/_navbar.scss
@@ -3,20 +3,27 @@
 }
 
 .navbar-brand {
+  font-size: 1rem;
   font-weight: 100;
 
   &.nasa {
-    padding-left: 4.375rem;
+    padding-left: 2.5rem;
     background: url("@/assets/images/logos/nasa-outline-new.svg") no-repeat;
     background-position: left center;
-    background-size: 3.75rem 3.75rem;
+    background-size: 2rem 2rem;
 
     &:hover {
       background: url("@/assets/images/logos/nasa-meatball-new.svg") no-repeat;
       background-position: left center;
-      background-size: 3.75rem 3.75rem;
+      background-size: 2rem 2rem;
       cursor: pointer;
     }
+
+    @include media-breakpoint-up(md) {
+      padding-left: 4.375rem;
+      background-size: 3.75rem 3.75rem;
+      font-size: var(--bs-navbar-brand-font-size);
+    }
   }
 }
 

diff --git a/static/src/js/App.jsx b/static/src/js/App.jsx
@@ -23,6 +23,7 @@ import REDIRECTS from './constants/redirectsMap/redirectsMap'
 import { getApplicationConfig } from './utils/getConfig'
 
 import '../css/index.scss'
+import HomePage from './pages/HomePage/HomePage'
 
 const redirectKeys = Object.keys(REDIRECTS)
 
@@ -97,6 +98,7 @@ const App = () => {
           <Routes>
             <Route path="/" element={<Layout />}>
               {Redirects}
+              <Route path="/" index element={<HomePage />} />
               <Route path="manage/:type/*" element={<ManagePage />} />
               <Route path="manage/cmr" element={<ManageCmrPage />} />
               <Route path="drafts/:draftType/*" element={<DraftsPage />} />

diff --git a/static/src/js/components/Button/Button.jsx b/static/src/js/components/Button/Button.jsx
@@ -4,11 +4,14 @@ import BootstrapButton from 'react-bootstrap/Button'
 import classNames from 'classnames'
 
 import './Button.scss'
+import { FaExternalLinkAlt } from 'react-icons/fa'
 
 /**
  * @typedef {Object} ButtonProps
  * @property {String} className Class name to apply to the button
  * @property {ReactNode} children The children of the button
+ * @property {Boolean} external An optional boolean which sets `target="_blank"` and an external link icon
+ * @property {String} href An optional string which triggers the use of an `<a>` tag with the designated href
  * @property {Function} [Icon] An optional icon `react-icons` icon
  * @property {Boolean} [naked] An optional boolean passed to render a button with no background or border
  * @property {Function} onClick A callback function to be called when the button is clicked
@@ -38,50 +41,85 @@ import './Button.scss'
 const Button = ({
   className,
   children,
+  external,
+  href,
   Icon,
   naked,
   onClick,
   size,
   variant
-}) => (
-  <BootstrapButton
-    className={
-      classNames([
-        'd-flex align-items-center',
-        {
-          'button--naked': naked,
-          [className]: className
-        }
-      ])
-    }
-    onClick={onClick}
-    size={size}
-    variant={variant}
-  >
-    {
-      Icon && (
-        <Icon className="me-1" />
-      )
-    }
+}) => {
+  // Create an object to pass any conditional properties. These are ultimately spread on the component.
+  const conditionalProps = {}
 
-    {children}
-  </BootstrapButton>
-)
+  if (onClick) {
+    conditionalProps.onClick = onClick
+  }
+
+  if (href) {
+    conditionalProps.href = href
+
+    if (external) conditionalProps.target = '_blank'
+  }
+
+  return (
+    <BootstrapButton
+      className={
+        classNames([
+          'd-flex align-items-center text-nowrap',
+          {
+            'button--naked': naked,
+            [className]: className
+          }
+        ])
+      }
+      size={size}
+      variant={variant}
+      {...conditionalProps}
+    >
+      {
+        Icon && (
+          <Icon
+            className={
+              classNames([
+                {
+                  'me-1': size !== 'lg',
+                  'me-2': size === 'lg'
+                }
+              ])
+            }
+          />
+        )
+      }
+      {children}
+      {
+        external && (
+          <FaExternalLinkAlt className="ms-1 small" style={{ opacity: 0.625 }} />
+        )
+      }
+    </BootstrapButton>
+  )
+}
 
 Button.defaultProps = {
   className: '',
   Icon: null,
+  external: false,
+  href: null,
   naked: false,
+  onClick: null,
   size: '',
   variant: ''
 }
 
 Button.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
+  external: PropTypes.bool,
+  href: PropTypes.string,
   Icon: PropTypes.func,
   naked: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
+  onClick: PropTypes.func,
   size: PropTypes.string,
   variant: PropTypes.string
 }