diff --git a/playwright/e2e/header.spec.ts b/playwright/e2e/header.spec.ts index 5f398e78..4b4c666c 100644 --- a/playwright/e2e/header.spec.ts +++ b/playwright/e2e/header.spec.ts @@ -1,30 +1,34 @@ -const { test, expect } = require('@playwright/test'); -import config from "../playwright.config"; -import { site } from "../../test/__fixtures__"; +const { test, expect } = require("@playwright/test") +import config from "../playwright.config" +import { site } from "../../test/__fixtures__" -const baseUrl = config.use?.baseURL; +const baseUrl = config.use?.baseURL -test.describe('Header', () => { - let page; +test.describe("Header", () => { + let page - test.beforeAll(async ({ browser }) => { - page = await browser.newPage(); - await page.goto(baseUrl); - }); + test.beforeAll(async ({ browser }) => { + page = await browser.newPage() + await page.goto(baseUrl) + }) - test('renders correctly', async () => { - await expect(page.locator('header')).toHaveText(site.siteMetadata.headerType); + test("renders correctly", async () => { + // TODO re-enable this header test once temporary release banner is removed + // await expect(page.locator('header')).toHaveText(site.siteMetadata.headerType); - const nasaLogo = page.locator('[data-cy=nasa-logo]'); - await expect(nasaLogo).toHaveAttribute('alt', "NASA's red, white and blue insignia, nicknamed the 'meatball'"); + const nasaLogo = page.locator("[data-cy=nasa-logo]") + await expect(nasaLogo).toHaveAttribute( + "alt", + "NASA's red, white and blue insignia, nicknamed the 'meatball'" + ) - const navItems = await page.locator('nav').locator('li'); - await expect(navItems).toHaveCount(5); + const navItems = await page.locator("nav").locator("li") + await expect(navItems).toHaveCount(5) - await expect(navItems.nth(0)).toHaveText('Explore'); - await expect(navItems.nth(1)).toHaveText('Glossary'); - await expect(navItems.nth(2)).toHaveText('About'); - await expect(navItems.nth(3)).toHaveText('FAQS'); - await expect(navItems.nth(4)).toHaveText('Contact'); - }); -}); + await expect(navItems.nth(0)).toHaveText("Explore") + await expect(navItems.nth(1)).toHaveText("Glossary") + await expect(navItems.nth(2)).toHaveText("About") + await expect(navItems.nth(3)).toHaveText("FAQS") + await expect(navItems.nth(4)).toHaveText("Contact") + }) +}) diff --git a/src/components/__tests__/__snapshots__/header.test.js.snap b/src/components/__tests__/__snapshots__/header.test.js.snap index a979c353..38deafb2 100644 --- a/src/components/__tests__/__snapshots__/header.test.js.snap +++ b/src/components/__tests__/__snapshots__/header.test.js.snap @@ -8,6 +8,72 @@ exports[`Header renders correctly 1`] = ` className="header___StyledHeader-sc-4sefiz-0 eymLSC" id="main-header" > +
+ July 2023 Update! While CASEI has been publicly available in beta mode + since 2021, we are launching our + + +
+
+
+

+ July 2023 Update! While CASEI has been publicly available in beta mode since 2021, there is now a majority (65%) of known NASA airborne and field campaigns represented across the database and a unique range of search/browse functionality built into CASEI and its API. +

+
+

+ As you explore CASEI in this full-release version, keep in mind that additional campaigns, platforms, instruments, and data products are still being curated. We welcome + + ! +

+
+ +
+
diff --git a/src/components/header.js b/src/components/header.js index e1ea8f91..881e8dbd 100644 --- a/src/components/header.js +++ b/src/components/header.js @@ -6,8 +6,8 @@ import { StaticImage } from "gatsby-plugin-image" import { colors, layout, breakpoints } from "../theme" import { CaseiLogoIcon } from "../icons" import { NEGATIVE } from "../utils/constants" - import StickyBanner from "./sticky-banner" +import ReleaseBanner from "./release-banner" const Header = ({ shortname, children, mode }) => { const offsetCalculator = (scrollDirection, _, currentScroll) => { @@ -29,6 +29,7 @@ const Header = ({ shortname, children, mode }) => { rgba(68, 63, 63, 0.08) 0px 2px 6px 0px; `} > +
{ +export const Modal = ({ handleClose, isOpen, children, Custom }) => { return ( (e.target === e.currentTarget ? handleClose() : null)} > - {children} + {Custom ? : {children}} ) } @@ -43,4 +43,5 @@ Modal.propTypes = { handleClose: PropTypes.func.isRequired, isOpen: PropTypes.bool.isRequired, children: PropTypes.element, + Custom: PropTypes.element, } diff --git a/src/components/release-banner.js b/src/components/release-banner.js new file mode 100644 index 00000000..5b5f7ae9 --- /dev/null +++ b/src/components/release-banner.js @@ -0,0 +1,148 @@ +import React, { useEffect, useState } from "react" +import PropTypes from "prop-types" +import styled from "styled-components" + +import { CloseIcon } from "../icons" +import Button, { IconButton } from "./button" +import { Modal } from "./modal" +import { FEEDBACK_FORM_URL, POSITIVE } from "../utils/constants" +import { colors } from "../theme" + +const Component = styled.div` + width: 25rem; + padding: 2rem; + position: relative; + overflow: hidden; + max-height: 720px; + border-radius: 3px; + background: #f2f7fb; + pointer-events: auto; + color: ${colors[POSITIVE].text}; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +` + +const ReleaseBanner = () => { + const [hasSeenNotice, setHasSeenNotice] = useState(false) + const [isModalOpen, setModal] = useState(false) + + // This runs when the page is loaded. + useEffect(() => { + if (localStorage.getItem("has_seen_notice")) { + setHasSeenNotice(true) + } + }, []) + + const markReleaseNoticeSeen = () => { + localStorage.setItem("has_seen_notice", "true") + setHasSeenNotice(true) + setModal(false) + } + + const ModalBody = () => ( + +

+ July 2023 Update! While CASEI has been publicly available in beta mode + since 2021, there is now a majority (65%) of known NASA airborne and + field campaigns represented across the database and a unique range of + search/browse functionality built into CASEI and its API. +

+
+

+ As you explore CASEI in this full-release version, keep in mind that + additional campaigns, platforms, instruments, and data products are + still being curated. We welcome + + ! +

+
+ +
+ ) + + return ( + <> +
+ {`July 2023 Update! While CASEI has been publicly available in beta mode + since 2021, we are launching our `} + + } + /> +
+ setModal(false)} + Custom={ModalBody} + > + + ) +} + +ReleaseBanner.propTypes = { + shortname: PropTypes.string.isRequired, + children: PropTypes.element, + mode: PropTypes.string.isRequired, +} + +export default ReleaseBanner