-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add modal and banner to header (#560)
* Add modal and banner to header * Update header snapshot * Make release banner pos relative * Refactor release banner to own component * Update header snapshot * Temporarily disable header text check
- Loading branch information
1 parent
f143b20
commit 504947e
Showing
5 changed files
with
246 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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") | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 = () => ( | ||
| <Component> | ||
| <p> | ||
| 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. | ||
| </p> | ||
| <br /> | ||
| <p> | ||
| 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 | ||
| <button | ||
| css={` | ||
| background: none; | ||
| color: inherit; | ||
| border: none; | ||
| padding: 0 0 0 4px; | ||
| font: inherit; | ||
| cursor: pointer; | ||
| outline: inherit; | ||
| text-transform: lowercase; | ||
| text-decoration: underline; | ||
| &:hover { | ||
| opacity: 0.8; | ||
| } | ||
| `} | ||
| onClick={() => { | ||
| markReleaseNoticeSeen() | ||
| window.open(FEEDBACK_FORM_URL, "_blank") | ||
| }} | ||
| > | ||
| your feedback | ||
| </button> | ||
| ! | ||
| </p> | ||
| <br /> | ||
| <Button action={markReleaseNoticeSeen}>okay</Button> | ||
| </Component> | ||
| ) | ||
|
|
||
| return ( | ||
| <> | ||
| <div | ||
| css={` | ||
| position: relative; | ||
| background: #ebba33; | ||
| color: ${colors[POSITIVE].text}; | ||
| opacity: 0.95; | ||
| width: 100%; | ||
| justify-content: center; | ||
| align-items: center; | ||
| padding: 1rem; | ||
| z-index: 400; | ||
| display: ${hasSeenNotice ? "none" : "flex"}; | ||
| `} | ||
| > | ||
| {`July 2023 Update! While CASEI has been publicly available in beta mode | ||
| since 2021, we are launching our `} | ||
| <button | ||
| css={` | ||
| background: none; | ||
| color: inherit; | ||
| border: none; | ||
| padding: 0 0 0 4px; | ||
| font: inherit; | ||
| cursor: pointer; | ||
| outline: inherit; | ||
| text-transform: lowercase; | ||
| text-decoration: underline; | ||
| &:hover { | ||
| opacity: 0.8; | ||
| } | ||
| `} | ||
| onClick={() => { | ||
| setModal(true) | ||
| }} | ||
| > | ||
| {" "} | ||
| full-release version | ||
| </button> | ||
| <IconButton | ||
| id="remove-filter" | ||
| action={markReleaseNoticeSeen} | ||
| icon={<CloseIcon color={colors[POSITIVE].text} />} | ||
| /> | ||
| </div> | ||
| <Modal | ||
| id="modal" | ||
| isOpen={isModalOpen} | ||
| handleClose={() => setModal(false)} | ||
| Custom={ModalBody} | ||
| ></Modal> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| ReleaseBanner.propTypes = { | ||
| shortname: PropTypes.string.isRequired, | ||
| children: PropTypes.element, | ||
| mode: PropTypes.string.isRequired, | ||
| } | ||
|
|
||
| export default ReleaseBanner |