Replace legacy Fold grid with USWDS grid system

NASA-IMPACT · Nov 15, 2024 · ae38dee · ae38dee
1 parent d9c3d33
commit ae38dee
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 75 deletions.
diff --git a/overrides/components/hyperwall-cta.tsx b/overrides/components/hyperwall-cta.tsx
@@ -1,12 +1,7 @@
 import React from "$veda-ui/react";
-import {
-  Fold,
-  FoldBody,
-} from "$veda-ui-scripts/components/common/fold";
 import styled from "$veda-ui/styled-components";
 import Hug from "$veda-ui-scripts/styles/hug";
 import { glsp, media } from "$veda-ui/@devseed-ui/theme-provider";
-import { ExpandLink } from "./expand-link";
 import { StyledVarHeading } from "../common/style";
 import { Button } from "$veda-ui/@devseed-ui/button";
 import HyperwallImg from "../home/media/hyperwall-image1.png";
@@ -90,30 +85,26 @@ export default function HyperwallCTA({
     width?: string
   }) {
   return (
-    <Fold>
-      <FoldBody>
-        <BottomContent width={width}>
-          <InfoImageContent>
-            <div>
-              <StyledVarHeading size="small" as="h2">
-                Live Earth Dashboard
-              </StyledVarHeading>
-              <GutterText>
-                An interactive way to explore what's happening on Earth right now
-              </GutterText>
-              <Button
-                forwardedAs="a"
-                href="/stories/hyperwall"
-                size="medium"
-                radius="square"
-                variation="primary-fill"
-              >
-                Visit the Live Earth Dashboard
-              </Button>
-            </div>
-          </InfoImageContent>
-        </BottomContent>
-      </FoldBody>
-    </Fold>
+    <BottomContent width={width}>
+      <InfoImageContent>
+        <div>
+          <StyledVarHeading size="small" as="h2">
+            Live Earth Dashboard
+          </StyledVarHeading>
+          <GutterText>
+            An interactive way to explore what's happening on Earth right now
+          </GutterText>
+          <Button
+            forwardedAs="a"
+            href="/stories/hyperwall"
+            size="medium"
+            radius="square"
+            variation="primary-fill"
+          >
+            Visit the Live Earth Dashboard
+          </Button>
+        </div>
+      </InfoImageContent>
+    </BottomContent>
   )
 };
diff --git a/overrides/home/carousel/index.scss b/overrides/home/carousel/index.scss
@@ -41,12 +41,4 @@
     &--title {
       font-size: 1.25rem;
     }
-  }
-
-  .carousel-grid-container {
-    // Overriding the default max-width of the USWDS grid container 1440px.
-    // However, this needs to be configured on a per instance basis as a part of
-    // the USWDS settings configuration file. As a workaround, we're setting this here.
-    // Docs: https://designsystem.digital.gov/documentation/settings/#configuring-custom-uswds-settings
-    max-width: 1440px;
   }
diff --git a/overrides/home/carousel/index.tsx b/overrides/home/carousel/index.tsx
@@ -51,7 +51,7 @@ export function DesktopCarousel () {
 
 
   return (
-    <GridContainer className="carousel-grid-container" aria-roledescription="carousel" aria-label="Highlighted VEDA Dashboard projects">
+    <GridContainer aria-roledescription="carousel" aria-label="Highlighted VEDA Dashboard projects">
       <Grid row className="position-relative carousel--height" aria-live="off">
       <TransitionGroup>
           <CSSTransition

diff --git a/overrides/home/component.tsx b/overrides/home/component.tsx
@@ -3,7 +3,6 @@ import { Link } from "$veda-ui/react-router-dom";
 import styled from "$veda-ui/styled-components";
 import { glsp, themeVal, media } from "$veda-ui/@devseed-ui/theme-provider";
 import { Button } from "$veda-ui/@devseed-ui/button";
-import Hug from "$veda-ui-scripts/styles/hug";
 import {
   Fold,
   FoldHeader, FoldBody,
@@ -14,18 +13,18 @@ import { StyledVarHeading } from "../common/style";
 import { variableGlsp } from "$veda-ui-scripts/styles/variable-utils";
 import ThemeCards from "../components/theme-cards";
 import { themeLandingPageIds } from "../common/story-data";
-import VisitGHG from "../components/visit-ghg";
-import VisitSLR from "../components/visit-slr";
 import HyperwallCTA from "../components/hyperwall-cta";
 import Partners from "./partners";
 import Carousel from './carousel/';
-const IntroHeadline = styled(Hug)`
+import { GridContainer, Grid } from '$veda-ui/@trussworks/react-uswds';
 
+const IntroHeadline = styled.div`
   display: flex;
   gap: ${glsp(2)};
-  grid-column: content-start / content-end;
+  width: 100%;
+  height: 100%;
+
   ${media.largeUp`
-    grid-column: content-2 / content-12;
     flex-flow: row;
   `}
   ${media.mediumDown`
@@ -40,13 +39,12 @@ const IntroHeadline = styled(Hug)`
     color: ${themeVal("color.primary")};
   }
 `;
-const HomeDescription = styled(Hug)`
+
+const HomeDescription = styled.div`
   padding: ${variableGlsp(2.5, 0)};
-  grid-row-gap: ${variableGlsp(2)};
-  ${media.mediumUp`
-    grid-row-gap: ${variableGlsp(3)};
-  `}
+  width: 100%;
 `;
+
 const IntroDesc = styled.div`
   ${media.largeUp`
     grid-column: -1/1;
@@ -85,32 +83,41 @@ export default function HomeComponent() {
   return (
     <>
       <GradientWrapper>
-        <HomeDescription>
-          <IntroHeadline>
-            <IntroDesc>
-              <StyledVarHeading size="xlarge" as="h1">
-                One government
-                <br />
-                working for <span>one planet.</span>
-              </StyledVarHeading>
-              <p>{description}</p>
-            </IntroDesc>
-            <Partners size="small" top={4} />
-          </IntroHeadline>
-        </HomeDescription>
-        <HyperwallCTA width="82%"/>
+        <GridContainer>
+          <Grid row>
+            <Grid col>
+              <HomeDescription>
+                <IntroHeadline>
+                  <IntroDesc>
+                    <StyledVarHeading size="xlarge" as="h1">
+                      One government
+                      <br />
+                      working for <span>one planet.</span>
+                    </StyledVarHeading>
+                    <p>{description}</p>
+                  </IntroDesc>
+                  <Partners size="small" top={4} />
+                </IntroHeadline>
+              </HomeDescription>
+              <HyperwallCTA />
+            </Grid>
+          </Grid>
+        </GridContainer>
       </GradientWrapper>
-        <Fold style={{paddingTop:'2rem',paddingBottom:'2rem'}}>
-          <FoldHeader>
-            <FoldHeadline>
-               <StyledVarHeading as="h2" size="large">
-                   Featured interagency collaborations for our planet
-               </StyledVarHeading>
-            </FoldHeadline>
-          </FoldHeader>
-        </Fold>
-        <Carousel />
-        <Fold>
+      {/* Had to add a div wrapper so that the GridContainer styles are correct applied */}
+      <div className="padding-top-10 padding-bottom-4">
+        <GridContainer>
+          <Grid row>
+            <Grid col>
+              <StyledVarHeading as="h2" size="large">
+                Featured interagency collaborations for our planet
+              </StyledVarHeading>
+            </Grid>
+          </Grid>
+        </GridContainer>
+      </div>
+      <Carousel />
+      <Fold>
           <FoldHeader>
             <FoldHeadline>
               <StyledVarHeading as="h2" size="large">