updating earth.gov home page and SLR theme carousels

overrides/common/story-data.ts

@@ -5,7 +5,7 @@ export const themeLandingPageIds = [
   "disasters",
   "energy",
   "greenhouse_gases",
-  "sea-level-rise",
+  "sea-level-change",
   "wildfires",
   "water-resources",
 ];
@@ -65,8 +65,8 @@ export const greenhouseGasesStoryIds = [
   "introduction_greenhouse_gases"
 ];
 
-export const seaLevelRiseStoryIds = [
-  "introduction_sea_level_rise"
+export const seaLevelChangeStoryIds = [
+  "introduction_sea_level_change"
 ];
 
 export const wildfiresStoryIds = [

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

overrides/components/visit-ghg.tsx

@@ -64,12 +64,8 @@ export default function VisitGHG({
           <InfoImageContent>
             <div>
               <StyledVarHeading size="small" as="h2">
-                U.S. Greenhouse Gas Center
+                The U.S. Greenhouse Gas Center
               </StyledVarHeading>
-              <span>
-                Uniting Data and Technology to Empower Tomorrow's Climate
-                Solutions
-              </span>
               <Button
                 forwardedAs="a"
                 href="https://earth.gov/ghgcenter"

overrides/home/carousel/items.js

@@ -1,22 +1,22 @@
 export default [
     {
-      link: 'https://eyes.nasa.gov/apps/earth/#/',
-      title: 'Eyes on Earth',
-      description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae lorem et neque egestas mollis. Praesent ut porttitor mauris, a sagittis erat",
-      image: new URL('../media/seaside-background.jpg', import.meta.url).href,
-      imageAlt: 'Example image alt EIC 2024'
+      link: 'https://earth.gov/ghgcenter',
+      title: 'U.S. Greenhouse Gas Center',
+      description: "The U.S. Greenhouse Gas Center (US GHG Center) is a multi-agency effort consolidating greenhouse gas information from observations and models.",
+      image: new URL('../media/ghgc-v2.jpg', import.meta.url).href,
+      imageAlt: 'Earth with Greenhouse Gas Emissions shaded in red'
     },
     {
-      link: 'https://earth.gov/mobile-climate-mapper/',
-      title: 'Card Title 2',
-      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae lorem et neque egestas mollis. Praesent ut porttitor mauris, a sagittis erat',
-      image: new URL('../media/swamp.png', import.meta.url).href,
-      imageAlt: 'Example image alt EIC 2024'
+      link: 'https://earth.gov/sealevel',
+      title: 'Global Sea Level Change Portal',
+      description: 'The Global Sea Level Change Portal is an international collaboration that offers essential information on current and projected sea level change to inform coastal communities across the globe.',
+      image: new URL('../media/global_slr_v2.jpg', import.meta.url).href,
+      imageAlt: 'Satellite image of coastline'
     },
     {
-    link: '/stories/agriculture',
-    title: 'Internal link to the Agriculture story',
-    description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae lorem et neque egestas mollis. Praesent ut porttitor mauris, a sagittis erat',
-    image: new URL('../media/hyperwall-image1.png', import.meta.url).href,
-    imageAlt: 'Example image alt EIC 2024'
-  }]
+    link: 'https://earth.gov/sealevel/us/',
+    title: 'U.S. Sea Level Change Portal',
+    description: 'The U.S. Sea Level Change Portal is a multi-agency effort pairing data visualizations with accessible explanations and science eduction to help communities prepare for challenges that are impacting communities across the coastlines of the United States.',
+    image: new URL('../media/us_slr_v2.jpg', import.meta.url).href,
+    imageAlt: 'Coastline with crashing waves'
+  }]

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,16 +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";
-const IntroHeadline = styled(Hug)`
+import Carousel from './carousel/';
+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`
@@ -38,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;
@@ -83,35 +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>
-        <HomeDescription style={{paddingTop:'2rem',paddingBottom:'2rem'}}>
-          <IntroHeadline >
-            <IntroDesc>
-               <StyledVarHeading as="h2" size="large">
-                   Featured interagency collaborations for our planet
-               </StyledVarHeading>
-            </IntroDesc>
-          </IntroHeadline>
-        </HomeDescription>
-        <VisitSLR />
-        <SpacerDiv/>
-        <VisitGHG />
-        <SpacerDiv/>
-        <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">

stories/components/slr_carousel/carousel-item.tsx

@@ -0,0 +1,75 @@
+import React from '$veda-ui/react';
+import styled from '$veda-ui/styled-components';
+import { Button, Icon } from '$veda-ui/@trussworks/react-uswds';
+
+import {
+    Card,
+    CardBody,
+    CardFooter,
+} from '$veda-ui/@trussworks/react-uswds';
+
+
+const progressColor = '#1565EF';
+
+const ProgressIndicator = styled.div`
+  background-color: ${progressColor};
+  width: ${props => props.progressWidth}%;
+  transition: ${props => props.noTransition? null: 'width 200ms ease-out'};
+`;
+
+function ProgressBar({ selected, shouldProgress, progressDone, progressPercentage }) {
+  // If progress is done, 100% - false if something is manually selected
+  // If it is in progress, progress Percentage - false if something is manually selected
+  // If it is manually selected, 100%
+  const progressWidth = progressDone? 100: shouldProgress? progressPercentage: selected? 100: 0;
+  const noTransition = (!shouldProgress && !progressDone && progressPercentage === 0)? true : false;
+
+  return <>
+    <div className="height-05 bg-base-lighter">
+      <ProgressIndicator className="height-full" progressWidth={progressWidth} noTransition={noTransition} />
+    </div>
+  </>
+}
+
+export function ItemPanel({ item, linkComponent: LinkComponent }) {
+  return (<>
+
+  <div className="tablet:margin-top-0 margin-top-2 flex-align-self-stretch">
+    <p className="margin-top-2 margin-bottom-2 flex-align-self-stretch">{item.description}</p>
+    <LinkComponent className="display-flex flex-align-center veda-color--link" to={item.link}>
+      <Icon.ArrowForward stroke={progressColor} fill={progressColor} />
+    <span className="padding-left-1">Read more</span>
+    </LinkComponent>
+  </div>
+  </>)
+}
+
+export default function CarouselItem({ item, itemIdx, onTitleClick, shouldProgress, progressDone, progressPercentage, selected, linkComponent: LinkComponent }) {
+  return <Card
+    gridLayout={{ tablet: { col: 6 } }}
+    containerProps={{className:`hover:bg-base-lightest padding-x-1 radius-0 border-0 animation--transition ${(selected || shouldProgress)? 'opacity-100':'opacity-50'}`}}>
+    <ProgressBar shouldProgress={shouldProgress} progressDone={progressDone} progressPercentage={progressPercentage}selected={selected} />
+    <CardBody className="padding-left-0 position-relative">
+      <h3 className="tablet:margin-top-1 carousel--title text-bold veda-color--base">
+        {item.title}
+      </h3>
+      <p className="margin-top-2 flex-align-self-stretch">{item.description}</p>
+      <Button
+        unstyled={true}
+        className="position-absolute top-0 left-0 width-full height-full blocklink"
+        onClick={() => { onTitleClick(item); } }
+        type="button"
+        role="tab"
+        aria-label={`Slide ${itemIdx+1}`}
+        aria-selected={selected.toString()}
+        aria-controls={`carousel-item-${itemIdx+1}`}
+        children={undefined} />
+    </CardBody>
+    <CardFooter className="padding-left-0 padding-top-1">
+        <LinkComponent className="display-flex flex-align-center veda-color--link" to={item.link}>
+          <Icon.ArrowForward stroke={progressColor} fill={progressColor} />
+        <span className="padding-left-1">Read more</span>
+        </LinkComponent>
+      </CardFooter>
+  </Card>
+}

stories/components/slr_carousel/index.scss

@@ -0,0 +1,44 @@
+/* The classes for css transition group */
+.imagetransition {
+    &-enter {
+      opacity: 0.5;
+    }
+    &-enter-active {
+      opacity: 1;
+      transition: opacity 400ms ease-in;
+    }
+    &-exit {
+      opacity: 1;
+    }
+    /* ending EXIT animation */
+    &-exit-active {
+      opacity: 0;
+      transition: opacity 400ms ease-out;
+    }
+  }
+
+  .veda-color--link {
+    color: var(--veda-color-link);
+  }
+  .veda-color--base {
+    color: var(--veda-color-base);
+  }
+
+  .animation--transition {
+    transition: opacity 200ms ease-out;
+  }
+
+  .carousel {
+    &--height {
+      height: 500px;
+    }
+
+    &--content-image {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+    &--title {
+      font-size: 1.25rem;
+    }
+  }