From 077d9145b9f78bf00093dc587ef422110b617389 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Wed, 6 Nov 2024 11:06:25 -0500 Subject: [PATCH 01/87] Adding initial header draft --- app/scripts/components/common/nav-wrapper.js | 1 + .../common/page-header/index-old.tsx | 340 ++++++++++++++++ .../components/common/page-header/index.tsx | 372 +++--------------- .../common/uswds/header/extended-nav.tsx | 6 + .../components/common/uswds/header/index.tsx | 10 + .../components/common/uswds/header/menu.tsx | 6 + .../uswds/header/nav-drop-down-button.tsx | 6 + .../common/uswds/header/nav-menu-button.tsx | 6 + app/scripts/index.ts | 2 +- 9 files changed, 421 insertions(+), 328 deletions(-) create mode 100644 app/scripts/components/common/page-header/index-old.tsx create mode 100644 app/scripts/components/common/uswds/header/extended-nav.tsx create mode 100644 app/scripts/components/common/uswds/header/index.tsx create mode 100644 app/scripts/components/common/uswds/header/menu.tsx create mode 100644 app/scripts/components/common/uswds/header/nav-drop-down-button.tsx create mode 100644 app/scripts/components/common/uswds/header/nav-menu-button.tsx diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 9bb162c0f..99e3afd41 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -2,6 +2,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { themeVal } from '@devseed-ui/theme-provider'; import { NavLink } from 'react-router-dom'; +// import PageHeader from './page-header/index-old'; import PageHeader from './page-header'; import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps'; diff --git a/app/scripts/components/common/page-header/index-old.tsx b/app/scripts/components/common/page-header/index-old.tsx new file mode 100644 index 000000000..83cf15661 --- /dev/null +++ b/app/scripts/components/common/page-header/index-old.tsx @@ -0,0 +1,340 @@ +import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react'; +import styled, { css } from 'styled-components'; +import { + glsp, + listReset, + media, + themeVal, + visuallyHidden +} from '@devseed-ui/theme-provider'; +import { reveal } from '@devseed-ui/animation'; +import { Heading, Overline } from '@devseed-ui/typography'; +import { Button } from '@devseed-ui/button'; +import { + CollecticonHamburgerMenu +} from '@devseed-ui/collecticons'; + +import UnscrollableBody from '../unscrollable-body'; +import { LinkProperties } from '../card'; +import NavMenuItem from './nav-menu-item'; +import { NavItem } from './types'; + +import { variableGlsp } from '$styles/variable-utils'; +import { PAGE_BODY_ID } from '$components/common/layout-root'; +import { useMediaQuery } from '$utils/use-media-query'; +import { HEADER_ID } from '$utils/use-sliding-sticky-header'; + + +const PageHeaderSelf = styled.header` + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + gap: ${variableGlsp()}; + padding: ${variableGlsp(0.75, 1)}; + background: ${themeVal('color.primary')}; + animation: ${reveal} 0.32s ease 0s 1; + + &, + &:visited { + color: ${themeVal('color.surface')}; + } +`; + + +const GlobalNav = styled.nav<{ revealed: boolean }>` + position: fixed; + inset: 0 0 0 auto; + z-index: 900; + display: flex; + flex-flow: column nowrap; + width: 20rem; + margin-right: -20rem; + transition: margin 0.24s ease 0s; + + ${({ revealed }) => + revealed && + css` + & { + margin-right: 0; + } + `} + + ${media.largeUp` + position: static; + flex: 1; + margin: 0; + } + + &:before { + content: ''; + } + `} + + /* Show page nav backdrop on small screens */ + + &::after { + content: ''; + position: absolute; + inset: 0 0 0 auto; + z-index: -1; + background: transparent; + width: 0; + transition: background 0.64s ease 0s; + + ${({ revealed }) => + revealed && + css` + ${media.mediumDown` + background: ${themeVal('color.base-400a')}; + width: 200vw; + `} + `} + } +`; + +const GlobalNavInner = styled.div` + display: flex; + flex-direction: column; + flex: 1; + background-color: ${themeVal('color.primary')}; + + ${media.mediumDown` + box-shadow: ${themeVal('boxShadow.elevationD')}; + `} +`; + +const GlobalNavHeader = styled.div` + padding: ${variableGlsp(1)}; + box-shadow: inset 0 -1px 0 0 ${themeVal('color.surface-200a')}; + ${media.largeUp` + display: none; + `} +`; + +const GlobalNavTitle = styled(Heading).attrs({ + as: 'span', + size: 'small' +})` + /* styled-component */ +`; + +export const GlobalNavActions = styled.div` + align-self: start; + ${media.largeUp` + display: none; + `} +`; + +export const GlobalNavToggle = styled(Button)` + z-index: 2000; +`; + +const GlobalNavBody = styled.div` + display: flex; + flex: 1; + + .shadow-top { + background: linear-gradient( + to top, + ${themeVal('color.primary-600')}00 0%, + ${themeVal('color.primary-600')} 100% + ); + } + + .shadow-bottom { + background: linear-gradient( + to bottom, + ${themeVal('color.primary-600')}00 0%, + ${themeVal('color.primary-600')} 100% + ); + } +`; + +const GlobalNavBodyInner = styled.div` + display: flex; + flex-direction: column; + flex: 1; + gap: ${variableGlsp()}; + padding: ${variableGlsp(1, 0)}; + + ${media.largeUp` + flex-direction: row; + justify-content: space-between; + padding: 0; + `} +`; + +const NavBlock = styled.div` + display: flex; + flex-flow: column nowrap; + gap: ${glsp(0.25)}; + + ${media.largeUp` + flex-direction: row; + align-items: center; + gap: ${glsp(1.5)}; + `} +`; + +const SROnly = styled.a` + height: 1px; + left: -10000px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; + color: ${themeVal('color.link')}; + &:focus { + top: 0; + left: 0; + background-color: ${themeVal('color.surface')}; + padding: ${glsp(0.25)}; + height: auto; + width: auto; + } +`; + +const SectionsNavBlock = styled(NavBlock)` + /* styled-component */ +`; + +const GlobalNavBlockTitle = styled(Overline).attrs({ + as: 'span' +})` + ${visuallyHidden} + display: block; + padding: ${variableGlsp(1, 1, 0.25, 1)}; + color: currentColor; + opacity: 0.64; + + ${media.largeUp` + padding: 0; + `} +`; + +const GlobalMenu = styled.ul` + ${listReset()} + display: flex; + flex-flow: column nowrap; + gap: ${glsp(0.5)}; + + ${media.largeUp` + flex-direction: row; + justify-content: flex-start; + align-items: center; + gap: ${glsp(1.5)}; + `} +`; + +interface PageHeaderProps { + mainNavItems: NavItem[]; + subNavItems: NavItem[]; + logo: ReactElement; + linkProperties: LinkProperties; +} + +function PageHeader(props: PageHeaderProps) { + const { mainNavItems, subNavItems, logo, linkProperties } = props; + const { isMediumDown } = useMediaQuery(); + const [globalNavRevealed, setGlobalNavRevealed] = useState(false); + + const globalNavBodyRef = useRef(null); + // Click listener for the whole global nav body so we can close it when clicking + // the overlay on medium down media query. + const onGlobalNavClick = useCallback((e) => { + if (!globalNavBodyRef.current?.contains(e.target)) { + setGlobalNavRevealed(false); + } + }, []); + + useEffect(() => { + // Close global nav when media query changes. + // NOTE: isMediumDown is returning document.body's width, not the whole window width + // which conflicts with how mediaquery decides the width. + // JSX element susing isMediumDown is also protected with css logic because of this. + // ex. Look at GlobalNavActions + if (!isMediumDown) setGlobalNavRevealed(false); + }, [isMediumDown]); + + const closeNavOnClick = useCallback(() => { + setGlobalNavRevealed(false); + }, []); + + function skipNav(e) { + // a tag won't appear for keyboard focus without href + // so we are preventing the default behaviour of a link here + e.preventDefault(); + // Then find a next focusable element in pagebody,focus it. + const pageBody = document.getElementById(PAGE_BODY_ID); + if (pageBody) { + pageBody.focus(); + } + } + + return ( + <> + Skip to main content + + {globalNavRevealed && isMediumDown && } + {logo} + {isMediumDown && ( + + setGlobalNavRevealed((v) => !v)} + active={globalNavRevealed} + > + + + + )} + + + {isMediumDown && ( + <> + + + + + )} + + + + Global + + {mainNavItems.map((item) => { + return ; + })} + + + + Meta + + {subNavItems.map((item) => { + return ; + })} + + + + + + + + + ); +} + +export default PageHeader; diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 1b603f88a..9933c9b3b 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,231 +1,14 @@ -import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react'; -import styled, { css } from 'styled-components'; -import { - glsp, - listReset, - media, - themeVal, - visuallyHidden -} from '@devseed-ui/theme-provider'; -import { reveal } from '@devseed-ui/animation'; -import { Heading, Overline } from '@devseed-ui/typography'; -import { Button } from '@devseed-ui/button'; -import { - CollecticonHamburgerMenu -} from '@devseed-ui/collecticons'; - -import UnscrollableBody from '../unscrollable-body'; -import NavMenuItem from './nav-menu-item'; +import React, { ReactElement, useState } from 'react'; import { NavItem } from './types'; - -import { variableGlsp } from '$styles/variable-utils'; -import { PAGE_BODY_ID } from '$components/common/layout-root'; -import { useMediaQuery } from '$utils/use-media-query'; -import { HEADER_ID } from '$utils/use-sliding-sticky-header'; import { LinkProperties } from '$types/veda'; - - -const PageHeaderSelf = styled.header` - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: space-between; - gap: ${variableGlsp()}; - padding: ${variableGlsp(0.75, 1)}; - background: ${themeVal('color.primary')}; - animation: ${reveal} 0.32s ease 0s 1; - - &, - &:visited { - color: ${themeVal('color.surface')}; - } -`; - - -const GlobalNav = styled.nav<{ revealed: boolean }>` - position: fixed; - inset: 0 0 0 auto; - z-index: 900; - display: flex; - flex-flow: column nowrap; - width: 20rem; - margin-right: -20rem; - transition: margin 0.24s ease 0s; - - ${({ revealed }) => - revealed && - css` - & { - margin-right: 0; - } - `} - - ${media.largeUp` - position: static; - flex: 1; - margin: 0; - } - - &:before { - content: ''; - } - `} - - /* Show page nav backdrop on small screens */ - - &::after { - content: ''; - position: absolute; - inset: 0 0 0 auto; - z-index: -1; - background: transparent; - width: 0; - transition: background 0.64s ease 0s; - - ${({ revealed }) => - revealed && - css` - ${media.mediumDown` - background: ${themeVal('color.base-400a')}; - width: 200vw; - `} - `} - } -`; - -const GlobalNavInner = styled.div` - display: flex; - flex-direction: column; - flex: 1; - background-color: ${themeVal('color.primary')}; - - ${media.mediumDown` - box-shadow: ${themeVal('boxShadow.elevationD')}; - `} -`; - -const GlobalNavHeader = styled.div` - padding: ${variableGlsp(1)}; - box-shadow: inset 0 -1px 0 0 ${themeVal('color.surface-200a')}; - ${media.largeUp` - display: none; - `} -`; - -const GlobalNavTitle = styled(Heading).attrs({ - as: 'span', - size: 'small' -})` - /* styled-component */ -`; - -export const GlobalNavActions = styled.div` - align-self: start; - ${media.largeUp` - display: none; - `} -`; - -export const GlobalNavToggle = styled(Button)` - z-index: 2000; -`; - -const GlobalNavBody = styled.div` - display: flex; - flex: 1; - - .shadow-top { - background: linear-gradient( - to top, - ${themeVal('color.primary-600')}00 0%, - ${themeVal('color.primary-600')} 100% - ); - } - - .shadow-bottom { - background: linear-gradient( - to bottom, - ${themeVal('color.primary-600')}00 0%, - ${themeVal('color.primary-600')} 100% - ); - } -`; - -const GlobalNavBodyInner = styled.div` - display: flex; - flex-direction: column; - flex: 1; - gap: ${variableGlsp()}; - padding: ${variableGlsp(1, 0)}; - - ${media.largeUp` - flex-direction: row; - justify-content: space-between; - padding: 0; - `} -`; - -const NavBlock = styled.div` - display: flex; - flex-flow: column nowrap; - gap: ${glsp(0.25)}; - - ${media.largeUp` - flex-direction: row; - align-items: center; - gap: ${glsp(1.5)}; - `} -`; - -const SROnly = styled.a` - height: 1px; - left: -10000px; - overflow: hidden; - position: absolute; - top: auto; - width: 1px; - color: ${themeVal('color.link')}; - &:focus { - top: 0; - left: 0; - background-color: ${themeVal('color.surface')}; - padding: ${glsp(0.25)}; - height: auto; - width: auto; - } -`; - -const SectionsNavBlock = styled(NavBlock)` - /* styled-component */ -`; - -const GlobalNavBlockTitle = styled(Overline).attrs({ - as: 'span' -})` - ${visuallyHidden} - display: block; - padding: ${variableGlsp(1, 1, 0.25, 1)}; - color: currentColor; - opacity: 0.64; - - ${media.largeUp` - padding: 0; - `} -`; - -const GlobalMenu = styled.ul` - ${listReset()} - display: flex; - flex-flow: column nowrap; - gap: ${glsp(0.5)}; - - ${media.largeUp` - flex-direction: row; - justify-content: flex-start; - align-items: center; - gap: ${glsp(1.5)}; - `} -`; +import { + USWDSHeader, + USWDSHeaderTitle +} from '$components/common/uswds/header'; +import { USWDSMenu } from '../uswds/header/menu'; +import { USWDSNavDropDownButton } from '$components/common/uswds/header/nav-drop-down-button'; +import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; +import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; interface PageHeaderProps { mainNavItems: NavItem[]; @@ -234,107 +17,42 @@ interface PageHeaderProps { linkProperties: LinkProperties; } -function PageHeader(props: PageHeaderProps) { - const { mainNavItems, subNavItems, logo, linkProperties } = props; - const { isMediumDown } = useMediaQuery(); - const [globalNavRevealed, setGlobalNavRevealed] = useState(false); - - const globalNavBodyRef = useRef(null); - // Click listener for the whole global nav body so we can close it when clicking - // the overlay on medium down media query. - const onGlobalNavClick = useCallback((e) => { - if (!globalNavBodyRef.current?.contains(e.target)) { - setGlobalNavRevealed(false); - } - }, []); - - useEffect(() => { - // Close global nav when media query changes. - // NOTE: isMediumDown is returning document.body's width, not the whole window width - // which conflicts with how mediaquery decides the width. - // JSX element susing isMediumDown is also protected with css logic because of this. - // ex. Look at GlobalNavActions - if (!isMediumDown) setGlobalNavRevealed(false); - }, [isMediumDown]); - - const closeNavOnClick = useCallback(() => { - setGlobalNavRevealed(false); - }, []); +export default function PageHeader(props: PageHeaderProps) { + + const [expanded, setExpanded] = useState(false); + const onClick = (): void => setExpanded(prvExpanded => !prvExpanded); + const [isOpen, setIsOpen] = useState(false); + + const testMenuItems = [ + Simple link one + , + Simple link two + ]; + + const onToggle = () => setIsOpen(!isOpen); + + const testItemsMenu = [<> + { + onToggle(); + }} menuId="testDropDownOne" isOpen={isOpen[0]} label="Nav Label" isCurrent={true} /> + + , + Parent link + , + Parent link + ]; + + return <> + +
+ Project Title + +
+ + + + ; +} - function skipNav(e) { - // a tag won't appear for keyboard focus without href - // so we are preventing the default behaviour of a link here - e.preventDefault(); - // Then find a next focusable element in pagebody,focus it. - const pageBody = document.getElementById(PAGE_BODY_ID); - if (pageBody) { - pageBody.focus(); - } - } - return ( - <> - Skip to main content - - {globalNavRevealed && isMediumDown && } - {logo} - {isMediumDown && ( - - setGlobalNavRevealed((v) => !v)} - active={globalNavRevealed} - > - - - - )} - - - {isMediumDown && ( - <> - - - - - )} - - - - Global - - {mainNavItems.map((item) => { - return ; - })} - - - - Meta - - {subNavItems.map((item) => { - return ; - })} - - - - - - - - - ); -} -export default PageHeader; diff --git a/app/scripts/components/common/uswds/header/extended-nav.tsx b/app/scripts/components/common/uswds/header/extended-nav.tsx new file mode 100644 index 000000000..dfd9f4efa --- /dev/null +++ b/app/scripts/components/common/uswds/header/extended-nav.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { ExtendedNav } from "@trussworks/react-uswds"; + +export function USWDSExtendedNav (props) { + return ; +} \ No newline at end of file diff --git a/app/scripts/components/common/uswds/header/index.tsx b/app/scripts/components/common/uswds/header/index.tsx new file mode 100644 index 000000000..f2e46199e --- /dev/null +++ b/app/scripts/components/common/uswds/header/index.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import { Header, Title } from "@trussworks/react-uswds"; + +export function USWDSHeader (props) { + return
; +} + +export function USWDSHeaderTitle (props) { + return ; +} \ No newline at end of file diff --git a/app/scripts/components/common/uswds/header/menu.tsx b/app/scripts/components/common/uswds/header/menu.tsx new file mode 100644 index 000000000..3b1e93f20 --- /dev/null +++ b/app/scripts/components/common/uswds/header/menu.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { Menu} from "@trussworks/react-uswds"; + +export function USWDSMenu (props) { + return <Menu {...props} />; +} \ No newline at end of file diff --git a/app/scripts/components/common/uswds/header/nav-drop-down-button.tsx b/app/scripts/components/common/uswds/header/nav-drop-down-button.tsx new file mode 100644 index 000000000..cdf6e1e64 --- /dev/null +++ b/app/scripts/components/common/uswds/header/nav-drop-down-button.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { NavDropDownButton} from "@trussworks/react-uswds"; + +export function USWDSNavDropDownButton (props) { + return <NavDropDownButton {...props} />; +} \ No newline at end of file diff --git a/app/scripts/components/common/uswds/header/nav-menu-button.tsx b/app/scripts/components/common/uswds/header/nav-menu-button.tsx new file mode 100644 index 000000000..87bdbf56e --- /dev/null +++ b/app/scripts/components/common/uswds/header/nav-menu-button.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { NavMenuButton} from "@trussworks/react-uswds"; + +export function USWDSNavMenuButton (props) { + return <NavMenuButton {...props} />; +} \ No newline at end of file diff --git a/app/scripts/index.ts b/app/scripts/index.ts index dab90628d..7a5e9c3b1 100644 --- a/app/scripts/index.ts +++ b/app/scripts/index.ts @@ -16,7 +16,7 @@ import { PageMainContent } from '$styles/page'; import PageHero from '$components/common/page-hero'; import StoriesHubContent from '$components/stories/hub/hub-content'; import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-filters-with-query'; -import PageHeader from '$components/common/page-header'; +import PageHeader from '$components/common/page-header/index-old'; import LogoContainer from '$components/common/page-header/logo-container'; import type { NavItem, From d0173fc70e1d1c091c5cb42c4b508f82127b59d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= <alice@developmentseed.org> Date: Thu, 7 Nov 2024 10:27:17 +0100 Subject: [PATCH 02/87] Import styles for the uswds header component @use is for importing and using styles within the current file, while @forward is for re-exporting styles to make them available to other files that import the current file. I am still not sure, how to decide when to use @use and when to use @forward in this project. The design system documentation only mentions @forward, so I am going with this. --- app/scripts/styles/styles.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index 16c5d7607..5eaf2ddb3 100644 --- a/app/scripts/styles/styles.scss +++ b/app/scripts/styles/styles.scss @@ -1,4 +1,5 @@ @forward 'uswds-theme'; +@forward "usa-header"; @use "uswds-utilities"; @use "usa-layout-grid"; From 2c04768a24b6e6b769942f3b15272c900c8da51c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= <alice@developmentseed.org> Date: Thu, 7 Nov 2024 10:32:05 +0100 Subject: [PATCH 03/87] Format header file with prettier --- .../components/common/page-header/index.tsx | 68 ++++++++++++------- 1 file changed, 44 insertions(+), 24 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 9933c9b3b..aae36cf33 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -18,41 +18,61 @@ interface PageHeaderProps { } export default function PageHeader(props: PageHeaderProps) { - const [expanded, setExpanded] = useState(false); - const onClick = (): void => setExpanded(prvExpanded => !prvExpanded); + const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); const [isOpen, setIsOpen] = useState<boolean>(false); - - const testMenuItems = [<a href="#linkOne" key="one"> + + const testMenuItems = [ + <a href='#linkOne' key='one'> Simple link one - </a>, <a href="#linkTwo" key="two"> + </a>, + <a href='#linkTwo' key='two'> Simple link two - </a>]; + </a> + ]; - const onToggle = () => setIsOpen(!isOpen); + const onToggle = () => setIsOpen(!isOpen); - const testItemsMenu = [<> - <USWDSNavDropDownButton onToggle={(): void => { - onToggle(); - }} menuId="testDropDownOne" isOpen={isOpen[0]} label="Nav Label" isCurrent={true} /> - <USWDSMenu key="one" items={testMenuItems} isOpen={isOpen[0]} id="testDropDownOne" /> - </>, <a href="#two" key="two" className="usa-nav__link"> + const testItemsMenu = [ + <> + <USWDSNavDropDownButton + onToggle={(): void => { + onToggle(); + }} + menuId='testDropDownOne' + isOpen={isOpen[0]} + label='Nav Label' + isCurrent={true} + /> + <USWDSMenu + key='one' + items={testMenuItems} + isOpen={isOpen[0]} + id='testDropDownOne' + /> + </>, + <a href='#two' key='two' className='usa-nav__link'> <span>Parent link</span> - </a>, <a href="#three" key="three" className="usa-nav__link"> + </a>, + <a href='#three' key='three' className='usa-nav__link'> <span>Parent link</span> - </a>]; + </a> + ]; - return <> + return ( + <> <USWDSHeader extended={true} showMobileOverlay={expanded}> - <div className="usa-navbar"> + <div className='usa-navbar'> <USWDSHeaderTitle>Project Title</USWDSHeaderTitle> - <USWDSNavMenuButton onClick={onClick} label="Menu" /> + <USWDSNavMenuButton onClick={onClick} label='Menu' /> </div> - <USWDSExtendedNav primaryItems={testItemsMenu} secondaryItems={testMenuItems} mobileExpanded={expanded} onToggleMobileNav={onClick}> - </USWDSExtendedNav> + <USWDSExtendedNav + primaryItems={testItemsMenu} + secondaryItems={testMenuItems} + mobileExpanded={expanded} + onToggleMobileNav={onClick} + /> </USWDSHeader> - </>; + </> + ); } - - - From d01a8d479a2898e2ef2ddeaeba664ccd642476b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= <alice@developmentseed.org> Date: Thu, 7 Nov 2024 10:48:14 +0100 Subject: [PATCH 04/87] Use stylelint and prettier to format scss I was not able to set up the formatting to be run via the eslint extension, so I use the prettier extension for scss files - see settings.json.sample for a suggestion on how to configure the vscode workspace --- .stylelintrc.json | 3 +- .vscode/settings.json.sample | 5 +- app/scripts/styles/styles.scss | 22 +- package.json | 4 +- yarn.lock | 731 ++++++++++++++------------------- 5 files changed, 320 insertions(+), 445 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 4397871d1..9add5794f 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -4,7 +4,8 @@ ], "extends": [ "stylelint-config-recommended", - "stylelint-config-styled-components" + "stylelint-config-styled-components", + "stylelint-config-prettier-scss" ], "rules": { "font-family-no-missing-generic-family-keyword": null, diff --git a/.vscode/settings.json.sample b/.vscode/settings.json.sample index 6d5720fa4..ffbfb4709 100644 --- a/.vscode/settings.json.sample +++ b/.vscode/settings.json.sample @@ -9,6 +9,9 @@ "javascriptreact", "typescript", "typescriptreact" - ] + ], + "[scss]": { + "editor.defaultFormatter": "esbenp.prettier-vscode" + } } \ No newline at end of file diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index 5eaf2ddb3..6415183d9 100644 --- a/app/scripts/styles/styles.scss +++ b/app/scripts/styles/styles.scss @@ -1,14 +1,12 @@ @forward 'uswds-theme'; -@forward "usa-header"; - -@use "uswds-utilities"; -@use "usa-layout-grid"; -@use "usa-banner"; -@use "usa-button"; -@use "usa-card"; -@use "usa-alert"; -@use "usa-button-group"; -@use "usa-icon"; -@use "usa-modal"; - +@forward 'usa-header'; +@use 'uswds-utilities'; +@use 'usa-layout-grid'; +@use 'usa-banner'; +@use 'usa-button'; +@use 'usa-card'; +@use 'usa-alert'; +@use 'usa-button-group'; +@use 'usa-icon'; +@use 'usa-modal'; diff --git a/package.json b/package.json index 887b37092..98aa6404d 100644 --- a/package.json +++ b/package.json @@ -103,8 +103,10 @@ "remark-gfm": "^3.0.1", "stream-browserify": "^3.0.0", "string_decoder": "^1.3.0", - "stylelint": "^13.12", + "stylelint": "^16.10.0", + "stylelint-config-prettier-scss": "^1.0.0", "stylelint-config-recommended": "^3.0.0", + "stylelint-config-standard-scss": "^13.1.0", "stylelint-config-styled-components": "^0.1.1", "stylelint-processor-styled-components": "^1.10.0", "ts-jest": "^28.0.7", diff --git a/yarn.lock b/yarn.lock index ae912cb93..659ec8722 100644 --- a/yarn.lock +++ b/yarn.lock @@ -65,7 +65,7 @@ json5 "^2.2.1" semver "^6.3.0" -"@babel/core@^7.12.3", "@babel/core@^7.16.0", "@babel/core@^7.17.9": +"@babel/core@^7.12.3", "@babel/core@^7.16.0": version "7.18.6" resolved "http://verdaccio.ds.io:4873/@babel%2fcore/-/core-7.18.6.tgz#54a107a3c298aee3fe5e1947a6464b9b6faca03d" integrity sha512-cQbWBpxcbbs/IUredIPkHiAGULLV8iwgNRMFzvbhEXISp4f3rUUXE5+TIw6KwUWUR3DwyI6gmBRnmAtYaWehwQ== @@ -1374,6 +1374,26 @@ style-mod "^4.0.0" w3c-keyname "^2.2.4" +"@csstools/css-parser-algorithms@^3.0.1": + version "3.0.4" + resolved "http://verdaccio.ds.io:4873/@csstools%2fcss-parser-algorithms/-/css-parser-algorithms-3.0.4.tgz#74426e93bd1c4dcab3e441f5cc7ba4fb35d94356" + integrity sha512-Up7rBoV77rv29d3uKHUIVubz1BTcgyUK72IvCQAbfbMv584xHcGKCKbWh7i8hPrRJ7qU4Y8IO3IY9m+iTB7P3A== + +"@csstools/css-tokenizer@^3.0.1": + version "3.0.3" + resolved "http://verdaccio.ds.io:4873/@csstools%2fcss-tokenizer/-/css-tokenizer-3.0.3.tgz#a5502c8539265fecbd873c1e395a890339f119c2" + integrity sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw== + +"@csstools/media-query-list-parser@^3.0.1": + version "3.0.1" + resolved "http://verdaccio.ds.io:4873/@csstools%2fmedia-query-list-parser/-/media-query-list-parser-3.0.1.tgz#9474e08e6d7767cf68c56bf1581b59d203360cb0" + integrity sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw== + +"@csstools/selector-specificity@^4.0.0": + version "4.0.0" + resolved "http://verdaccio.ds.io:4873/@csstools%2fselector-specificity/-/selector-specificity-4.0.0.tgz#7dfccb9df5499e627e7bfdbb4021a06813a45dba" + integrity sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ== + "@devseed-ui/accordion@4.1.0": version "4.1.0" resolved "http://verdaccio.ds.io:4873/@devseed-ui%2faccordion/-/accordion-4.1.0.tgz#622483e69e553a4f1e8d4a8c44f61ad4cfa1395b" @@ -1481,6 +1501,11 @@ dependencies: "@devseed-ui/theme-provider" "^4.1.0" +"@dual-bundle/import-meta-resolve@^4.1.0": + version "4.1.0" + resolved "http://verdaccio.ds.io:4873/@dual-bundle%2fimport-meta-resolve/-/import-meta-resolve-4.1.0.tgz#519c1549b0e147759e7825701ecffd25e5819f7b" + integrity sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg== + "@emotion/babel-plugin@^11.11.0": version "11.11.0" resolved "http://verdaccio.ds.io:4873/@emotion%2fbabel-plugin/-/babel-plugin-11.11.0.tgz#c2d872b6a7767a9d176d007f5b31f7d504bb5d6c" @@ -3664,21 +3689,6 @@ dependencies: "@sinonjs/commons" "^1.7.0" -"@stylelint/postcss-css-in-js@^0.37.2": - version "0.37.3" - resolved "http://verdaccio.ds.io:4873/@stylelint%2fpostcss-css-in-js/-/postcss-css-in-js-0.37.3.tgz#d149a385e07ae365b0107314c084cb6c11adbf49" - integrity sha512-scLk3cSH1H9KggSniseb2KNAU5D9FWc3H7BxCSAIdtU9OWIyw0zkEZ9qEKHryRM+SExYXRKNb7tOOVNAsQ3iwg== - dependencies: - "@babel/core" "^7.17.9" - -"@stylelint/postcss-markdown@^0.36.2": - version "0.36.2" - resolved "http://verdaccio.ds.io:4873/@stylelint%2fpostcss-markdown/-/postcss-markdown-0.36.2.tgz#0a540c4692f8dcdfc13c8e352c17e7bfee2bb391" - integrity sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ== - dependencies: - remark "^13.0.0" - unist-util-find-all-after "^3.0.2" - "@swc/core-darwin-arm64@1.6.6": version "1.6.6" resolved "http://verdaccio.ds.io:4873/@swc%2fcore-darwin-arm64/-/core-darwin-arm64-1.6.6.tgz#9488d50394cb08713c4321a940b48599c1c5e153" @@ -5128,19 +5138,6 @@ autoprefixer@^10.4.19: picocolors "^1.0.0" postcss-value-parser "^4.2.0" -autoprefixer@^9.8.6: - version "9.8.8" - resolved "http://verdaccio.ds.io:4873/autoprefixer/-/autoprefixer-9.8.8.tgz#fd4bd4595385fa6f06599de749a4d5f7a474957a" - integrity sha512-eM9d/swFopRt5gdJ7jrpCwgvEMIayITpojhkkSMRsFHYuH5bkSQ4p/9qTEHtmNudUZh22Tehu7I6CxAW0IXTKA== - dependencies: - browserslist "^4.12.0" - caniuse-lite "^1.0.30001109" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - picocolors "^0.2.1" - postcss "^7.0.32" - postcss-value-parser "^4.1.0" - axios@^0.25.0: version "0.25.0" resolved "http://verdaccio.ds.io:4873/axios/-/axios-0.25.0.tgz#349cfbb31331a9b4453190791760a8d35b093e0a" @@ -5429,7 +5426,7 @@ browser-process-hrtime@^1.0.0: resolved "http://verdaccio.ds.io:4873/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626" integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== -browserslist@^4.12.0, browserslist@^4.20.2, browserslist@^4.21.1, browserslist@^4.6.6: +browserslist@^4.20.2, browserslist@^4.21.1, browserslist@^4.6.6: version "4.21.2" resolved "http://verdaccio.ds.io:4873/browserslist/-/browserslist-4.21.2.tgz#59a400757465535954946a400b841ed37e2b4ecf" integrity sha512-MonuOgAtUB46uP5CezYbRaYKBNt2LxP0yX+Pmj4LkcDFGkn9Cbpi83d9sCjwQDErXsIJSzY5oKGDbgOlF/LPAA== @@ -5584,7 +5581,7 @@ camelize@^1.0.0: resolved "http://verdaccio.ds.io:4873/camelize/-/camelize-1.0.0.tgz#164a5483e630fa4321e5af07020e531831b2609b" integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs= -caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001366: +caniuse-lite@^1.0.30001366: version "1.0.30001441" resolved "http://verdaccio.ds.io:4873/caniuse-lite/-/caniuse-lite-1.0.30001441.tgz" integrity sha512-OyxRR4Vof59I3yGWXws6i908EtGbMzVUi3ganaZQHmydk1iwDhRnvaPG2WaR0KcqrDFKrxVZHULT396LEPhXfg== @@ -5639,7 +5636,7 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1: +chalk@^4.0.0, chalk@^4.1.0: version "4.1.2" resolved "http://verdaccio.ds.io:4873/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== @@ -5843,13 +5840,6 @@ clone-buffer@^1.0.0: resolved "http://verdaccio.ds.io:4873/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58" integrity sha1-4+JbIHrE5wGvch4staFnksrD3Fg= -clone-regexp@^2.1.0: - version "2.2.0" - resolved "http://verdaccio.ds.io:4873/clone-regexp/-/clone-regexp-2.2.0.tgz#7d65e00885cd8796405c35a737e7a86b7429e36f" - integrity sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q== - dependencies: - is-regexp "^2.0.0" - clone-response@^1.0.2: version "1.0.2" resolved "http://verdaccio.ds.io:4873/clone-response/-/clone-response-1.0.2.tgz#d1dc973920314df67fbeb94223b4ee350239e96b" @@ -5991,6 +5981,11 @@ color@^3.2.1: color-convert "^1.9.3" color-string "^1.6.0" +colord@^2.9.3: + version "2.9.3" + resolved "http://verdaccio.ds.io:4873/colord/-/colord-2.9.3.tgz#4f8ce919de456f1d5c1c368c307fe20f3e59fb43" + integrity sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw== + colorette@^2.0.20: version "2.0.20" resolved "http://verdaccio.ds.io:4873/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a" @@ -6110,6 +6105,16 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1: path-type "^4.0.0" yaml "^1.10.0" +cosmiconfig@^9.0.0: + version "9.0.0" + resolved "http://verdaccio.ds.io:4873/cosmiconfig/-/cosmiconfig-9.0.0.tgz#34c3fc58287b915f3ae905ab6dc3de258b55ad9d" + integrity sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg== + dependencies: + env-paths "^2.2.1" + import-fresh "^3.3.0" + js-yaml "^4.1.0" + parse-json "^5.2.0" + crc-32@~1.2.0, crc-32@~1.2.1: version "1.2.2" resolved "http://verdaccio.ds.io:4873/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff" @@ -6141,6 +6146,11 @@ css-color-keywords@^1.0.0: resolved "http://verdaccio.ds.io:4873/css-color-keywords/-/css-color-keywords-1.0.0.tgz#fea2616dc676b2962686b3af8dbdbe180b244e05" integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU= +css-functions-list@^3.2.3: + version "3.2.3" + resolved "http://verdaccio.ds.io:4873/css-functions-list/-/css-functions-list-3.2.3.tgz#95652b0c24f0f59b291a9fc386041a19d4f40dbe" + integrity sha512-IQOkD3hbR5KrN93MtcYuad6YPuTSUhntLHDuLEbFWE+ff2/XSZNdZG+LcbbIW5AXKg/WFIfYItIzVoHngHXZzA== + css-select@^4.1.3: version "4.3.0" resolved "http://verdaccio.ds.io:4873/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b" @@ -6180,6 +6190,14 @@ css-tree@^1.1.2, css-tree@^1.1.3: mdn-data "2.0.14" source-map "^0.6.1" +css-tree@^3.0.0: + version "3.0.1" + resolved "http://verdaccio.ds.io:4873/css-tree/-/css-tree-3.0.1.tgz#bea6deaea60bb5bcf416adfb1ecf607a8d9471f6" + integrity sha512-8Fxxv+tGhORlshCdCwnNJytvlvq46sOLSYEx2ZIGurahWvMucSRnyjPA3AmrMq4VPRYbHVpWj5VkiVasrM2H4Q== + dependencies: + mdn-data "2.12.1" + source-map-js "^1.0.1" + css-tree@~2.2.0: version "2.2.1" resolved "http://verdaccio.ds.io:4873/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032" @@ -6624,7 +6642,7 @@ debug@3.X, debug@^3.2.7: dependencies: ms "^2.1.1" -debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4: +debug@4, debug@4.3.4, debug@^4.0.0, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4: version "4.3.4" resolved "http://verdaccio.ds.io:4873/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865" integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ== @@ -6638,6 +6656,13 @@ debug@^2.2.0, debug@^2.3.3, debug@^2.6.9: dependencies: ms "2.0.0" +debug@^4.3.7: + version "4.3.7" + resolved "http://verdaccio.ds.io:4873/debug/-/debug-4.3.7.tgz#87945b4151a011d76d95a198d7111c865c360a52" + integrity sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ== + dependencies: + ms "^2.1.3" + decamelize-keys@^1.1.0: version "1.1.0" resolved "http://verdaccio.ds.io:4873/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9" @@ -6876,14 +6901,6 @@ dom-helpers@^5.0.1: "@babel/runtime" "^7.8.7" csstype "^3.0.2" -dom-serializer@0: - version "0.2.2" - resolved "http://verdaccio.ds.io:4873/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51" - integrity sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g== - dependencies: - domelementtype "^2.0.1" - entities "^2.0.0" - dom-serializer@^1.0.1: version "1.4.1" resolved "http://verdaccio.ds.io:4873/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30" @@ -6902,11 +6919,6 @@ dom-serializer@^2.0.0: domhandler "^5.0.2" entities "^4.2.0" -domelementtype@1, domelementtype@^1.3.1: - version "1.3.1" - resolved "http://verdaccio.ds.io:4873/domelementtype/-/domelementtype-1.3.1.tgz#d048c44b37b0d10a7f2a3d5fee3f4333d790481f" - integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w== - domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0: version "2.3.0" resolved "http://verdaccio.ds.io:4873/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d" @@ -6919,13 +6931,6 @@ domexception@^4.0.0: dependencies: webidl-conversions "^7.0.0" -domhandler@^2.3.0: - version "2.4.2" - resolved "http://verdaccio.ds.io:4873/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803" - integrity sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA== - dependencies: - domelementtype "1" - domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1: version "4.3.1" resolved "http://verdaccio.ds.io:4873/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c" @@ -6940,14 +6945,6 @@ domhandler@^5.0.2, domhandler@^5.0.3: dependencies: domelementtype "^2.3.0" -domutils@^1.5.1: - version "1.7.0" - resolved "http://verdaccio.ds.io:4873/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a" - integrity sha512-Lgd2XcJ/NjEw+7tFvfKxOzCYKZsdct5lczQ2ZaQY8Djz7pfAD3Gbp8ySJWtreII/vDlMVmxwa6pHmdxIYgttDg== - dependencies: - dom-serializer "0" - domelementtype "1" - domutils@^2.8.0: version "2.8.0" resolved "http://verdaccio.ds.io:4873/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" @@ -7056,11 +7053,6 @@ end-of-stream@^1.0.0, end-of-stream@^1.1.0: dependencies: once "^1.4.0" -entities@^1.1.1: - version "1.1.2" - resolved "http://verdaccio.ds.io:4873/entities/-/entities-1.1.2.tgz#bdfa735299664dfafd34529ed4f8522a275fea56" - integrity sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w== - entities@^2.0.0: version "2.2.0" resolved "http://verdaccio.ds.io:4873/entities/-/entities-2.2.0.tgz#098dc90ebb83d8dffa089d55256b351d34c4da55" @@ -7076,6 +7068,11 @@ entities@^4.2.0, entities@^4.4.0: resolved "http://verdaccio.ds.io:4873/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48" integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== +env-paths@^2.2.1: + version "2.2.1" + resolved "http://verdaccio.ds.io:4873/env-paths/-/env-paths-2.2.1.tgz#420399d416ce1fbe9bc0a07c62fa68d67fd0f8f2" + integrity sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A== + error-ex@^1.2.0, error-ex@^1.3.1: version "1.3.2" resolved "http://verdaccio.ds.io:4873/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf" @@ -7552,13 +7549,6 @@ execa@^5.0.0: signal-exit "^3.0.3" strip-final-newline "^2.0.0" -execall@^2.0.0: - version "2.0.0" - resolved "http://verdaccio.ds.io:4873/execall/-/execall-2.0.0.tgz#16a06b5fe5099df7d00be5d9c06eecded1663b45" - integrity sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow== - dependencies: - clone-regexp "^2.1.0" - exit@^0.1.2: version "0.1.2" resolved "http://verdaccio.ds.io:4873/exit/-/exit-0.1.2.tgz#0632638f8d877cc82107d30a0fff1a17cba1cd0c" @@ -7661,7 +7651,7 @@ fast-equals@^2.0.0: resolved "http://verdaccio.ds.io:4873/fast-equals/-/fast-equals-2.0.4.tgz#3add9410585e2d7364c2deeb6a707beadb24b927" integrity sha512-caj/ZmjHljPrZtbzJ3kfH5ia/k4mTJe/qSiXAGzxZWRZgsgDV0cvNaQULqUX8t0/JVlzzEdYOwCN5DmzTxoD4w== -fast-glob@^3.2.5, fast-glob@^3.2.9: +fast-glob@^3.2.9: version "3.2.11" resolved "http://verdaccio.ds.io:4873/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9" integrity sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew== @@ -7698,10 +7688,10 @@ fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.6: resolved "http://verdaccio.ds.io:4873/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917" integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc= -fastest-levenshtein@^1.0.12: - version "1.0.12" - resolved "http://verdaccio.ds.io:4873/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz#9990f7d3a88cc5a9ffd1f1745745251700d497e2" - integrity sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow== +fastest-levenshtein@^1.0.16: + version "1.0.16" + resolved "http://verdaccio.ds.io:4873/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5" + integrity sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg== fastq@^1.6.0: version "1.13.0" @@ -7729,6 +7719,13 @@ file-entry-cache@^6.0.1: dependencies: flat-cache "^3.0.4" +file-entry-cache@^9.1.0: + version "9.1.0" + resolved "http://verdaccio.ds.io:4873/file-entry-cache/-/file-entry-cache-9.1.0.tgz#2e66ad98ce93f49aed1b178c57b0b5741591e075" + integrity sha512-/pqPFG+FdxWQj+/WSuzXSDaNzxgTLr/OrR1QuqfEZzDakpdYE70PwUxL7BPUa8hpjbvY1+qvCl8k+8Tq34xJgg== + dependencies: + flat-cache "^5.0.0" + file-saver@^2.0.5: version "2.0.5" resolved "http://verdaccio.ds.io:4873/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38" @@ -7828,11 +7825,24 @@ flat-cache@^3.0.4: flatted "^3.1.0" rimraf "^3.0.2" +flat-cache@^5.0.0: + version "5.0.0" + resolved "http://verdaccio.ds.io:4873/flat-cache/-/flat-cache-5.0.0.tgz#26c4da7b0f288b408bb2b506b2cb66c240ddf062" + integrity sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ== + dependencies: + flatted "^3.3.1" + keyv "^4.5.4" + flatted@^3.1.0: version "3.2.6" resolved "http://verdaccio.ds.io:4873/flatted/-/flatted-3.2.6.tgz#022e9218c637f9f3fc9c35ab9c9193f05add60b2" integrity sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ== +flatted@^3.3.1: + version "3.3.1" + resolved "http://verdaccio.ds.io:4873/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a" + integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw== + flush-write-stream@^1.0.2: version "1.1.1" resolved "http://verdaccio.ds.io:4873/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -8057,11 +8067,6 @@ get-port@^4.2.0: resolved "http://verdaccio.ds.io:4873/get-port/-/get-port-4.2.0.tgz#e37368b1e863b7629c43c5a323625f95cf24b119" integrity sha512-/b3jarXkH8KJoOMQc3uVGHASwGLPq3gSFJ7tgJm2diza+bydJPTGOibin2steecKeOylE8oY2JERlVWkAJO6yw== -get-stdin@^8.0.0: - version "8.0.0" - resolved "http://verdaccio.ds.io:4873/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53" - integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg== - get-stream@^5.0.0, get-stream@^5.1.0: version "5.2.0" resolved "http://verdaccio.ds.io:4873/get-stream/-/get-stream-5.2.0.tgz#4966a1795ee5ace65e706c4b7beb71257d6e22d3" @@ -8224,7 +8229,7 @@ globals@^13.23.0: dependencies: type-fest "^0.20.2" -globby@^11.0.1, globby@^11.0.3, globby@^11.1.0: +globby@^11.0.1, globby@^11.1.0: version "11.1.0" resolved "http://verdaccio.ds.io:4873/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b" integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g== @@ -8248,13 +8253,6 @@ glogg@^1.0.0: dependencies: sparkles "^1.0.0" -gonzales-pe@^4.3.0: - version "4.3.0" - resolved "http://verdaccio.ds.io:4873/gonzales-pe/-/gonzales-pe-4.3.0.tgz#fe9dec5f3c557eead09ff868c65826be54d067b3" - integrity sha512-otgSPpUmdWJ43VXyiNgEYE4luzHCL2pz4wQ0OnDluC6Eg4Ko3Vexy/SrSynglw/eR+OhkzmqFCZa/OFa/RgAOQ== - dependencies: - minimist "^1.2.5" - good-listener@^1.2.2: version "1.2.2" resolved "http://verdaccio.ds.io:4873/good-listener/-/good-listener-1.2.2.tgz#d53b30cdf9313dffb7dc9a0d477096aa6d145c50" @@ -8622,13 +8620,6 @@ hosted-git-info@^2.1.4: resolved "http://verdaccio.ds.io:4873/hosted-git-info/-/hosted-git-info-2.8.9.tgz#dffc0bf9a21c02209090f2aa69429e1414daf3f9" integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw== -hosted-git-info@^4.0.1: - version "4.1.0" - resolved "http://verdaccio.ds.io:4873/hosted-git-info/-/hosted-git-info-4.1.0.tgz#827b82867e9ff1c8d0c4d9d53880397d2c86d224" - integrity sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA== - dependencies: - lru-cache "^6.0.0" - html-encoding-sniffer@^3.0.0: version "3.0.0" resolved "http://verdaccio.ds.io:4873/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz#2cb1a8cf0db52414776e5b2a7a04d5dd98158de9" @@ -8641,10 +8632,10 @@ html-escaper@^2.0.0: resolved "http://verdaccio.ds.io:4873/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== -html-tags@^3.1.0: - version "3.2.0" - resolved "http://verdaccio.ds.io:4873/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961" - integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg== +html-tags@^3.3.1: + version "3.3.1" + resolved "http://verdaccio.ds.io:4873/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce" + integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ== html-void-elements@^1.0.0: version "1.0.5" @@ -8660,18 +8651,6 @@ htmlnano@^2.0.0: posthtml "^0.16.5" timsort "^0.3.0" -htmlparser2@^3.10.0: - version "3.10.1" - resolved "http://verdaccio.ds.io:4873/htmlparser2/-/htmlparser2-3.10.1.tgz#bd679dc3f59897b6a34bb10749c855bb53a9392f" - integrity sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ== - dependencies: - domelementtype "^1.3.1" - domhandler "^2.3.0" - domutils "^1.5.1" - entities "^1.1.1" - inherits "^2.0.1" - readable-stream "^3.1.1" - htmlparser2@^7.1.1: version "7.2.0" resolved "http://verdaccio.ds.io:4873/htmlparser2/-/htmlparser2-7.2.0.tgz#8817cdea38bbc324392a90b1990908e81a65f5a5" @@ -8753,11 +8732,16 @@ ieee754@^1.1.12, ieee754@^1.2.1: resolved "http://verdaccio.ds.io:4873/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA== -ignore@^5.1.8, ignore@^5.2.0: +ignore@^5.2.0: version "5.2.0" resolved "http://verdaccio.ds.io:4873/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a" integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ== +ignore@^6.0.2: + version "6.0.2" + resolved "http://verdaccio.ds.io:4873/ignore/-/ignore-6.0.2.tgz#77cccb72a55796af1b6d2f9eb14fa326d24f4283" + integrity sha512-InwqeHHN2XpumIkMvpl/DCJVrAHgCsG5+cn1XlnLWGwtZBm8QJfSusItfrwx81CTp5agNZqpKU2J/ccC5nGT4A== + immediate@~3.0.5: version "3.0.6" resolved "http://verdaccio.ds.io:4873/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b" @@ -8773,7 +8757,7 @@ immutable@^4.3.4: resolved "http://verdaccio.ds.io:4873/immutable/-/immutable-4.3.4.tgz#2e07b33837b4bb7662f288c244d1ced1ef65a78f" integrity sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA== -import-fresh@^3.0.0, import-fresh@^3.2.1: +import-fresh@^3.0.0, import-fresh@^3.2.1, import-fresh@^3.3.0: version "3.3.0" resolved "http://verdaccio.ds.io:4873/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b" integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw== @@ -8781,11 +8765,6 @@ import-fresh@^3.0.0, import-fresh@^3.2.1: parent-module "^1.0.0" resolve-from "^4.0.0" -import-lazy@^4.0.0: - version "4.0.0" - resolved "http://verdaccio.ds.io:4873/import-lazy/-/import-lazy-4.0.0.tgz#e8eb627483a0a43da3c03f3e35548be5cb0cc153" - integrity sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw== - import-local@^3.0.2: version "3.1.0" resolved "http://verdaccio.ds.io:4873/import-local/-/import-local-3.1.0.tgz#b4479df8a5fd44f6cdce24070675676063c95cb4" @@ -8977,13 +8956,6 @@ is-core-module@^2.13.0: dependencies: hasown "^2.0.0" -is-core-module@^2.5.0, is-core-module@^2.9.0: - version "2.9.0" - resolved "http://verdaccio.ds.io:4873/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69" - integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A== - dependencies: - has "^1.0.3" - is-core-module@^2.8.1: version "2.11.0" resolved "http://verdaccio.ds.io:4873/is-core-module/-/is-core-module-2.11.0.tgz#ad4cb3e3863e814523c96f3f58d26cc570ff0144" @@ -8991,6 +8963,13 @@ is-core-module@^2.8.1: dependencies: has "^1.0.3" +is-core-module@^2.9.0: + version "2.9.0" + resolved "http://verdaccio.ds.io:4873/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69" + integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A== + dependencies: + has "^1.0.3" + is-data-descriptor@^0.1.4: version "0.1.4" resolved "http://verdaccio.ds.io:4873/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56" @@ -9211,11 +9190,6 @@ is-regex@^1.1.4: call-bind "^1.0.2" has-tostringtag "^1.0.0" -is-regexp@^2.0.0: - version "2.1.0" - resolved "http://verdaccio.ds.io:4873/is-regexp/-/is-regexp-2.1.0.tgz#cd734a56864e23b956bf4e7c66c396a4c0b22c2d" - integrity sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA== - is-relative@^1.0.0: version "1.0.0" resolved "http://verdaccio.ds.io:4873/is-relative/-/is-relative-1.0.0.tgz#a1bb6935ce8c5dba1e8b9754b9b2dcc020e2260d" @@ -9254,11 +9228,6 @@ is-symbol@^1.0.2, is-symbol@^1.0.3: dependencies: has-symbols "^1.0.2" -is-typedarray@^1.0.0: - version "1.0.0" - resolved "http://verdaccio.ds.io:4873/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" - integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo= - is-unc-path@^1.0.0: version "1.0.0" resolved "http://verdaccio.ds.io:4873/is-unc-path/-/is-unc-path-1.0.0.tgz#d731e8898ed090a12c352ad2eaed5095ad322c9d" @@ -9266,11 +9235,6 @@ is-unc-path@^1.0.0: dependencies: unc-path-regex "^0.1.2" -is-unicode-supported@^0.1.0: - version "0.1.0" - resolved "http://verdaccio.ds.io:4873/is-unicode-supported/-/is-unicode-supported-0.1.0.tgz#3f26c76a809593b52bfa2ecb5710ed2779b522a7" - integrity sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw== - is-utf8@^0.2.0, is-utf8@^0.2.1: version "0.2.1" resolved "http://verdaccio.ds.io:4873/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72" @@ -9954,6 +9918,13 @@ keyv@^4.0.0: compress-brotli "^1.3.8" json-buffer "3.0.1" +keyv@^4.5.4: + version "4.5.4" + resolved "http://verdaccio.ds.io:4873/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93" + integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw== + dependencies: + json-buffer "3.0.1" + kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0: version "3.2.2" resolved "http://verdaccio.ds.io:4873/kind-of/-/kind-of-3.2.2.tgz#31ea21a734bab9bbb0f32466d893aea51e4a3c64" @@ -9988,10 +9959,10 @@ kleur@^4.0.3: resolved "http://verdaccio.ds.io:4873/kleur/-/kleur-4.1.5.tgz#95106101795f7050c6c650f350c683febddb1780" integrity sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ== -known-css-properties@^0.21.0: - version "0.21.0" - resolved "http://verdaccio.ds.io:4873/known-css-properties/-/known-css-properties-0.21.0.tgz#15fbd0bbb83447f3ce09d8af247ed47c68ede80d" - integrity sha512-sZLUnTqimCkvkgRS+kbPlYW5o8q5w1cu+uIisKpEWkj31I8mx8kNG162DwRav8Zirkva6N5uoFsm9kzK4mUXjw== +known-css-properties@^0.34.0: + version "0.34.0" + resolved "http://verdaccio.ds.io:4873/known-css-properties/-/known-css-properties-0.34.0.tgz#ccd7e9f4388302231b3f174a8b1d5b1f7b576cea" + integrity sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ== last-run@^1.1.0: version "1.1.1" @@ -10290,14 +10261,6 @@ lodash@^4.13.1, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17. resolved "http://verdaccio.ds.io:4873/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c" integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg== -log-symbols@^4.1.0: - version "4.1.0" - resolved "http://verdaccio.ds.io:4873/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503" - integrity sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg== - dependencies: - chalk "^4.1.0" - is-unicode-supported "^0.1.0" - log-update@^5.0.1: version "5.0.1" resolved "http://verdaccio.ds.io:4873/log-update/-/log-update-5.0.1.tgz#9e928bf70cb183c1f0c9e91d9e6b7115d597ce09" @@ -10309,11 +10272,6 @@ log-update@^5.0.1: strip-ansi "^7.0.1" wrap-ansi "^8.0.1" -longest-streak@^2.0.0: - version "2.0.4" - resolved "http://verdaccio.ds.io:4873/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4" - integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg== - longest-streak@^3.0.0: version "3.0.1" resolved "http://verdaccio.ds.io:4873/longest-streak/-/longest-streak-3.0.1.tgz#c97315b7afa0e7d9525db9a5a2953651432bdc5d" @@ -10529,17 +10487,6 @@ mdast-util-find-and-replace@^2.0.0: unist-util-is "^5.0.0" unist-util-visit-parents "^5.0.0" -mdast-util-from-markdown@^0.8.0: - version "0.8.5" - resolved "http://verdaccio.ds.io:4873/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.5.tgz#d1ef2ca42bc377ecb0463a987910dae89bd9a28c" - integrity sha512-2hkTXtYYnr+NubD/g6KGBS/0mFmBcifAsI0yIWRiRo0PjVs6SSOSOdtzbp6kSGnShDN6G5aWZpKQ2lWRy27mWQ== - dependencies: - "@types/mdast" "^3.0.0" - mdast-util-to-string "^2.0.0" - micromark "~2.11.0" - parse-entities "^2.0.0" - unist-util-stringify-position "^2.0.0" - mdast-util-from-markdown@^1.0.0: version "1.2.0" resolved "http://verdaccio.ds.io:4873/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz#84df2924ccc6c995dec1e2368b2b208ad0a76268" @@ -10693,18 +10640,6 @@ mdast-util-to-hast@^12.1.0: unist-util-position "^4.0.0" unist-util-visit "^4.0.0" -mdast-util-to-markdown@^0.6.0: - version "0.6.5" - resolved "http://verdaccio.ds.io:4873/mdast-util-to-markdown/-/mdast-util-to-markdown-0.6.5.tgz#b33f67ca820d69e6cc527a93d4039249b504bebe" - integrity sha512-XeV9sDE7ZlOQvs45C9UKMtfTcctcaj/pGwH8YLbMHoMOXNNCn2LsqVQOqrF1+/NU8lKDAqozme9SCXWyo9oAcQ== - dependencies: - "@types/unist" "^2.0.0" - longest-streak "^2.0.0" - mdast-util-to-string "^2.0.0" - parse-entities "^2.0.0" - repeat-string "^1.0.0" - zwitch "^1.0.0" - mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0: version "1.3.0" resolved "http://verdaccio.ds.io:4873/mdast-util-to-markdown/-/mdast-util-to-markdown-1.3.0.tgz#38b6cdc8dc417de642a469c4fc2abdf8c931bd1e" @@ -10718,11 +10653,6 @@ mdast-util-to-markdown@^1.0.0, mdast-util-to-markdown@^1.3.0: unist-util-visit "^4.0.0" zwitch "^2.0.0" -mdast-util-to-string@^2.0.0: - version "2.0.0" - resolved "http://verdaccio.ds.io:4873/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz#b8cfe6a713e1091cb5b728fc48885a4767f8b97b" - integrity sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w== - mdast-util-to-string@^3.0.0, mdast-util-to-string@^3.1.0: version "3.1.0" resolved "http://verdaccio.ds.io:4873/mdast-util-to-string/-/mdast-util-to-string-3.1.0.tgz#56c506d065fbf769515235e577b5a261552d56e9" @@ -10738,6 +10668,16 @@ mdn-data@2.0.28: resolved "http://verdaccio.ds.io:4873/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba" integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g== +mdn-data@2.12.1: + version "2.12.1" + resolved "http://verdaccio.ds.io:4873/mdn-data/-/mdn-data-2.12.1.tgz#10cb462215c13d95c92ff60d0fb3becac1bbb924" + integrity sha512-rsfnCbOHjqrhWxwt5/wtSLzpoKTzW7OXdT5lLOIH1OTYhWu9rRJveGq0sKvDZODABH7RX+uoR+DYcpFnq4Tf6Q== + +mdn-data@^2.11.1: + version "2.12.2" + resolved "http://verdaccio.ds.io:4873/mdn-data/-/mdn-data-2.12.2.tgz#9ae6c41a9e65adf61318b32bff7b64fbfb13f8cf" + integrity sha512-IEn+pegP1aManZuckezWCO+XZQDplx1366JoVhTpMpBB1sPey/SbveZQUosKiKiGYjg1wH4pMlNgXbCiYgihQA== + mdurl@^1.0.0: version "1.0.1" resolved "http://verdaccio.ds.io:4873/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" @@ -10770,6 +10710,11 @@ memoizee@0.4.X: next-tick "^1.1.0" timers-ext "^0.1.7" +meow@^13.2.0: + version "13.2.0" + resolved "http://verdaccio.ds.io:4873/meow/-/meow-13.2.0.tgz#6b7d63f913f984063b3cc261b6e8800c4cd3474f" + integrity sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA== + meow@^6.1.1: version "6.1.1" resolved "http://verdaccio.ds.io:4873/meow/-/meow-6.1.1.tgz#1ad64c4b76b2a24dfb2f635fddcadf320d251467" @@ -10787,24 +10732,6 @@ meow@^6.1.1: type-fest "^0.13.1" yargs-parser "^18.1.3" -meow@^9.0.0: - version "9.0.0" - resolved "http://verdaccio.ds.io:4873/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364" - integrity sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ== - dependencies: - "@types/minimist" "^1.2.0" - camelcase-keys "^6.2.2" - decamelize "^1.2.0" - decamelize-keys "^1.1.0" - hard-rejection "^2.1.0" - minimist-options "4.1.0" - normalize-package-data "^3.0.0" - read-pkg-up "^7.0.1" - redent "^3.0.0" - trim-newlines "^3.0.0" - type-fest "^0.18.0" - yargs-parser "^20.2.3" - merge-class-names@^1.1.1: version "1.4.2" resolved "http://verdaccio.ds.io:4873/merge-class-names/-/merge-class-names-1.4.2.tgz#78d6d95ab259e7e647252a7988fd25a27d5a8835" @@ -11190,14 +11117,6 @@ micromark@^3.0.0: micromark-util-types "^1.0.1" uvu "^0.5.0" -micromark@~2.11.0: - version "2.11.4" - resolved "http://verdaccio.ds.io:4873/micromark/-/micromark-2.11.4.tgz#d13436138eea826383e822449c9a5c50ee44665a" - integrity sha512-+WoovN/ppKolQOFIAajxi7Lu9kInbPxFuTBVEavFcL8eAfVstoc5MocPmqBeAdBOJV00uaVjegzH4+MA0DN/uA== - dependencies: - debug "^4.0.0" - parse-entities "^2.0.0" - micromatch@4.0.5, micromatch@^4.0.2, micromatch@^4.0.4: version "4.0.5" resolved "http://verdaccio.ds.io:4873/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" @@ -11233,6 +11152,14 @@ micromatch@^4.0.5: braces "^3.0.3" picomatch "^2.3.1" +micromatch@^4.0.8: + version "4.0.8" + resolved "http://verdaccio.ds.io:4873/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202" + integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA== + dependencies: + braces "^3.0.3" + picomatch "^2.3.1" + mime-db@1.52.0: version "1.52.0" resolved "http://verdaccio.ds.io:4873/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" @@ -11282,7 +11209,7 @@ minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2: dependencies: brace-expansion "^1.1.7" -minimist-options@4.1.0, minimist-options@^4.0.2: +minimist-options@^4.0.2: version "4.1.0" resolved "http://verdaccio.ds.io:4873/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619" integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A== @@ -11296,7 +11223,7 @@ minimist@^1.2.0: resolved "http://verdaccio.ds.io:4873/minimist/-/minimist-1.2.7.tgz#daa1c4d91f507390437c6a8bc01078e7000c4d18" integrity sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g== -minimist@^1.2.5, minimist@^1.2.6: +minimist@^1.2.6: version "1.2.6" resolved "http://verdaccio.ds.io:4873/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44" integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q== @@ -11329,7 +11256,7 @@ ms@2.1.2: resolved "http://verdaccio.ds.io:4873/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009" integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w== -ms@^2.1.1: +ms@^2.1.1, ms@^2.1.3: version "2.1.3" resolved "http://verdaccio.ds.io:4873/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2" integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA== @@ -11502,16 +11429,6 @@ normalize-package-data@^2.3.2, normalize-package-data@^2.5.0: semver "2 || 3 || 4 || 5" validate-npm-package-license "^3.0.1" -normalize-package-data@^3.0.0: - version "3.0.3" - resolved "http://verdaccio.ds.io:4873/normalize-package-data/-/normalize-package-data-3.0.3.tgz#dbcc3e2da59509a0983422884cd172eefdfa525e" - integrity sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA== - dependencies: - hosted-git-info "^4.0.1" - is-core-module "^2.5.0" - semver "^7.3.4" - validate-npm-package-license "^3.0.1" - normalize-path@^2.0.1, normalize-path@^2.1.1: version "2.1.1" resolved "http://verdaccio.ds.io:4873/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9" @@ -11529,11 +11446,6 @@ normalize-range@^0.1.2: resolved "http://verdaccio.ds.io:4873/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942" integrity sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= -normalize-selector@^0.2.0: - version "0.2.0" - resolved "http://verdaccio.ds.io:4873/normalize-selector/-/normalize-selector-0.2.0.tgz#d0b145eb691189c63a78d201dc4fdb1293ef0c03" - integrity sha1-0LFF62kRicY6eNIB3E/bEpPvDAM= - normalize-url@^6.0.1: version "6.1.0" resolved "http://verdaccio.ds.io:4873/normalize-url/-/normalize-url-6.1.0.tgz#40d0885b535deffe3f3147bec877d05fe4c5668a" @@ -11572,11 +11484,6 @@ nullthrows@^1.1.1: resolved "http://verdaccio.ds.io:4873/nullthrows/-/nullthrows-1.1.1.tgz#7818258843856ae971eae4208ad7d7eb19a431b1" integrity sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw== -num2fraction@^1.2.2: - version "1.2.2" - resolved "http://verdaccio.ds.io:4873/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede" - integrity sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4= - number-is-nan@^1.0.0: version "1.0.1" resolved "http://verdaccio.ds.io:4873/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d" @@ -12079,6 +11986,11 @@ picocolors@^1.0.1: resolved "http://verdaccio.ds.io:4873/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1" integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew== +picocolors@^1.1.0: + version "1.1.1" + resolved "http://verdaccio.ds.io:4873/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" + integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== + picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1: version "2.3.1" resolved "http://verdaccio.ds.io:4873/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42" @@ -12183,13 +12095,6 @@ postcss-csso@6.0.1: dependencies: csso "^5.0.5" -postcss-html@^0.36.0: - version "0.36.0" - resolved "http://verdaccio.ds.io:4873/postcss-html/-/postcss-html-0.36.0.tgz#b40913f94eaacc2453fd30a1327ad6ee1f88b204" - integrity sha512-HeiOxGcuwID0AFsNAL0ox3mW6MHH5cstWN1Z3Y+n6H+g12ih7LHdYxWwEA/QmrebctLjo79xz9ouK3MroHwOJw== - dependencies: - htmlparser2 "^3.10.0" - postcss-import@^16.1.0: version "16.1.0" resolved "http://verdaccio.ds.io:4873/postcss-import/-/postcss-import-16.1.0.tgz#258732175518129667fe1e2e2a05b19b5654b96a" @@ -12199,13 +12104,6 @@ postcss-import@^16.1.0: read-cache "^1.0.0" resolve "^1.1.7" -postcss-less@^3.1.4: - version "3.1.4" - resolved "http://verdaccio.ds.io:4873/postcss-less/-/postcss-less-3.1.4.tgz#369f58642b5928ef898ffbc1a6e93c958304c5ad" - integrity sha512-7TvleQWNM2QLcHqvudt3VYjULVB49uiW6XzEUFmvwHzvsOEF5MwBrIXZDJQvJNFGjJQTzSzZnDoCJ8h/ljyGXA== - dependencies: - postcss "^7.0.14" - postcss-load-config@^3.0.0: version "3.1.4" resolved "http://verdaccio.ds.io:4873/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855" @@ -12226,44 +12124,27 @@ postcss-media-query-parser@^0.2.3: dependencies: postcss-selector-parser "^6.0.6" -postcss-resolve-nested-selector@^0.1.1: - version "0.1.1" - resolved "http://verdaccio.ds.io:4873/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz#29ccbc7c37dedfac304e9fff0bf1596b3f6a0e4e" - integrity sha1-Kcy8fDfe36wwTp//C/FZaz9qDk4= - -postcss-safe-parser@^4.0.2: - version "4.0.2" - resolved "http://verdaccio.ds.io:4873/postcss-safe-parser/-/postcss-safe-parser-4.0.2.tgz#a6d4e48f0f37d9f7c11b2a581bf00f8ba4870b96" - integrity sha512-Uw6ekxSWNLCPesSv/cmqf2bY/77z11O7jZGPax3ycZMFU/oi2DMH9i89AdHc1tRwFg/arFoEwX0IS3LCUxJh1g== - dependencies: - postcss "^7.0.26" +postcss-resolve-nested-selector@^0.1.6: + version "0.1.6" + resolved "http://verdaccio.ds.io:4873/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.6.tgz#3d84dec809f34de020372c41b039956966896686" + integrity sha512-0sglIs9Wmkzbr8lQwEyIzlDOOC9bGmfVKcJTaxv3vMmd3uo4o4DerC3En0bnmgceeql9BfC8hRkp7cg0fjdVqw== postcss-safe-parser@^7.0.0: version "7.0.0" resolved "http://verdaccio.ds.io:4873/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz#6273d4e5149e286db5a45bc6cf6eafcad464014a" integrity sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg== -postcss-sass@^0.4.4: - version "0.4.4" - resolved "http://verdaccio.ds.io:4873/postcss-sass/-/postcss-sass-0.4.4.tgz#91f0f3447b45ce373227a98b61f8d8f0785285a3" - integrity sha512-BYxnVYx4mQooOhr+zer0qWbSPYnarAy8ZT7hAQtbxtgVf8gy+LSLT/hHGe35h14/pZDTw1DsxdbrwxBN++H+fg== - dependencies: - gonzales-pe "^4.3.0" - postcss "^7.0.21" - -postcss-scss@^2.1.1: - version "2.1.1" - resolved "http://verdaccio.ds.io:4873/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383" - integrity sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA== - dependencies: - postcss "^7.0.6" +postcss-safe-parser@^7.0.1: + version "7.0.1" + resolved "http://verdaccio.ds.io:4873/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz#36e4f7e608111a0ca940fd9712ce034718c40ec0" + integrity sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A== postcss-scss@^4.0.9: version "4.0.9" resolved "http://verdaccio.ds.io:4873/postcss-scss/-/postcss-scss-4.0.9.tgz#a03c773cd4c9623cb04ce142a52afcec74806685" integrity sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A== -postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6: +postcss-selector-parser@^6.0.6: version "6.0.10" resolved "http://verdaccio.ds.io:4873/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz#79b61e2c0d1bfc2602d549e11d0876256f8df88d" integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w== @@ -12271,17 +12152,20 @@ postcss-selector-parser@^6.0.5, postcss-selector-parser@^6.0.6: cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-syntax@^0.36.2: - version "0.36.2" - resolved "http://verdaccio.ds.io:4873/postcss-syntax/-/postcss-syntax-0.36.2.tgz#f08578c7d95834574e5593a82dfbfa8afae3b51c" - integrity sha512-nBRg/i7E3SOHWxF3PpF5WnJM/jQ1YpY9000OaVXlAQj6Zp/kIqJxEDWIZ67tAd7NLuk7zqN4yqe9nc0oNAOs1w== +postcss-selector-parser@^6.1.2: + version "6.1.2" + resolved "http://verdaccio.ds.io:4873/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de" + integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" postcss-value-parser@^3.3.0: version "3.3.1" resolved "http://verdaccio.ds.io:4873/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== -postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0, postcss-value-parser@^4.2.0: +postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.2.0: version "4.2.0" resolved "http://verdaccio.ds.io:4873/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514" integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ== @@ -12295,7 +12179,7 @@ postcss@8.4.31: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.35, postcss@^7.0.6: +postcss@^7.0.16, postcss@^7.0.26: version "7.0.39" resolved "http://verdaccio.ds.io:4873/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== @@ -12321,6 +12205,15 @@ postcss@^8.4.39: picocolors "^1.0.1" source-map-js "^1.2.0" +postcss@^8.4.47: + version "8.4.47" + resolved "http://verdaccio.ds.io:4873/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365" + integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ== + dependencies: + nanoid "^3.3.7" + picocolors "^1.1.0" + source-map-js "^1.2.1" + posthtml-expressions@^1.9.0: version "1.9.0" resolved "http://verdaccio.ds.io:4873/posthtml-expressions/-/posthtml-expressions-1.9.0.tgz#0b00e0e557392f66eb6b88d89cd090789eadd78c" @@ -12906,7 +12799,7 @@ readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable string_decoder "~1.1.1" util-deprecate "~1.0.1" -readable-stream@^3.1.1, readable-stream@^3.5.0: +readable-stream@^3.5.0: version "3.6.0" resolved "http://verdaccio.ds.io:4873/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198" integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA== @@ -13131,13 +13024,6 @@ remark-parse@^10.0.0: mdast-util-from-markdown "^1.0.0" unified "^10.0.0" -remark-parse@^9.0.0: - version "9.0.0" - resolved "http://verdaccio.ds.io:4873/remark-parse/-/remark-parse-9.0.0.tgz#4d20a299665880e4f4af5d90b7c7b8a935853640" - integrity sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw== - dependencies: - mdast-util-from-markdown "^0.8.0" - remark-rehype@^10.0.0: version "10.1.0" resolved "http://verdaccio.ds.io:4873/remark-rehype/-/remark-rehype-10.1.0.tgz#32dc99d2034c27ecaf2e0150d22a6dcccd9a6279" @@ -13155,22 +13041,6 @@ remark-squeeze-paragraphs@4.0.0: dependencies: mdast-squeeze-paragraphs "^4.0.0" -remark-stringify@^9.0.0: - version "9.0.1" - resolved "http://verdaccio.ds.io:4873/remark-stringify/-/remark-stringify-9.0.1.tgz#576d06e910548b0a7191a71f27b33f1218862894" - integrity sha512-mWmNg3ZtESvZS8fv5PTvaPckdL4iNlCHTt8/e/8oN08nArHRHjNZMKzA/YW3+p7/lYqIw4nx1XsjCBo/AxNChg== - dependencies: - mdast-util-to-markdown "^0.6.0" - -remark@^13.0.0: - version "13.0.0" - resolved "http://verdaccio.ds.io:4873/remark/-/remark-13.0.0.tgz#d15d9bf71a402f40287ebe36067b66d54868e425" - integrity sha512-HDz1+IKGtOyWN+QgBiAT0kn+2s6ovOxHyPAFGKVE81VSzJ+mq7RwHFledEvB5F1p4iJvOah/LOKdFuzvRnNLCA== - dependencies: - remark-parse "^9.0.0" - remark-stringify "^9.0.0" - unified "^9.1.0" - remove-accents@0.4.2: version "0.4.2" resolved "http://verdaccio.ds.io:4873/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5" @@ -13203,7 +13073,7 @@ repeat-element@^1.1.2: resolved "http://verdaccio.ds.io:4873/repeat-element/-/repeat-element-1.1.4.tgz#be681520847ab58c7568ac75fbfad28ed42d39e9" integrity sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ== -repeat-string@^1.0.0, repeat-string@^1.5.4, repeat-string@^1.6.1: +repeat-string@^1.5.4, repeat-string@^1.6.1: version "1.6.1" resolved "http://verdaccio.ds.io:4873/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637" integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc= @@ -13561,7 +13431,7 @@ semver@7.0.0: resolved "http://verdaccio.ds.io:4873/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e" integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A== -semver@7.x, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7: +semver@7.x, semver@^7.3.5, semver@^7.3.7: version "7.3.7" resolved "http://verdaccio.ds.io:4873/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f" integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g== @@ -13640,6 +13510,11 @@ signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7: resolved "http://verdaccio.ds.io:4873/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9" integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ== +signal-exit@^4.0.1: + version "4.1.0" + resolved "http://verdaccio.ds.io:4873/signal-exit/-/signal-exit-4.1.0.tgz#952188c1cbd546070e2dd20d0f41c0ae0530cb04" + integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw== + simple-swizzle@^0.2.2: version "0.2.2" resolved "http://verdaccio.ds.io:4873/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" @@ -13736,6 +13611,11 @@ source-map-js@^1.0.2: resolved "http://verdaccio.ds.io:4873/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c" integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw== +source-map-js@^1.2.1: + version "1.2.1" + resolved "http://verdaccio.ds.io:4873/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46" + integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA== + source-map-resolve@^0.5.0: version "0.5.3" resolved "http://verdaccio.ds.io:4873/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" @@ -13819,11 +13699,6 @@ spdx-license-ids@^3.0.0: resolved "http://verdaccio.ds.io:4873/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz#50c0d8c40a14ec1bf449bae69a0ea4685a9d9f95" integrity sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g== -specificity@^0.4.1: - version "0.4.1" - resolved "http://verdaccio.ds.io:4873/specificity/-/specificity-0.4.1.tgz#aab5e645012db08ba182e151165738d00887b019" - integrity sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg== - splaytree@^3.1.0: version "3.1.1" resolved "http://verdaccio.ds.io:4873/splaytree/-/splaytree-3.1.1.tgz#e1bc8e68e64ef5a9d5f09d36e6d9f3621795a438" @@ -13923,7 +13798,7 @@ string-width@^1.0.1, string-width@^1.0.2: is-fullwidth-code-point "^1.0.0" strip-ansi "^3.0.0" -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3: +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "http://verdaccio.ds.io:4873/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -14065,11 +13940,6 @@ style-mod@^4.0.0: resolved "http://3.220.121.64:4873/style-mod/-/style-mod-4.0.3.tgz#136c4abc905f82a866a18b39df4dc08ec762b1ad" integrity sha512-78Jv8kYJdjbvRwwijtCevYADfsI0lGzYJe4mMFdceO8l75DFFDoqBhR1jVDicDRRaX4//g1u9wKeo+ztc2h1Rw== -style-search@^0.1.0: - version "0.1.0" - resolved "http://verdaccio.ds.io:4873/style-search/-/style-search-0.1.0.tgz#7958c793e47e32e07d2b5cafe5c0bf8e12e77902" - integrity sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI= - style-to-object@0.3.0, style-to-object@^0.3.0: version "0.3.0" resolved "http://verdaccio.ds.io:4873/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46" @@ -14093,11 +13963,45 @@ styled-components@^5.3.3: shallowequal "^1.1.0" supports-color "^5.5.0" +stylelint-config-prettier-scss@^1.0.0: + version "1.0.0" + resolved "http://verdaccio.ds.io:4873/stylelint-config-prettier-scss/-/stylelint-config-prettier-scss-1.0.0.tgz#4125152ce9ee39ec233ce14436fc0818fa866aee" + integrity sha512-Gr2qLiyvJGKeDk0E/+awNTrZB/UtNVPLqCDOr07na/sLekZwm26Br6yYIeBYz3ulsEcQgs5j+2IIMXCC+wsaQA== + +stylelint-config-recommended-scss@^14.0.0: + version "14.1.0" + resolved "http://verdaccio.ds.io:4873/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz#1a5855655cddcb5f77c10f38c76567adf2bb9aa3" + integrity sha512-bhaMhh1u5dQqSsf6ri2GVWWQW5iUjBYgcHkh7SgDDn92ijoItC/cfO/W+fpXshgTQWhwFkP1rVcewcv4jaftRg== + dependencies: + postcss-scss "^4.0.9" + stylelint-config-recommended "^14.0.1" + stylelint-scss "^6.4.0" + +stylelint-config-recommended@^14.0.1: + version "14.0.1" + resolved "http://verdaccio.ds.io:4873/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz#d25e86409aaf79ee6c6085c2c14b33c7e23c90c6" + integrity sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg== + stylelint-config-recommended@^3.0.0: version "3.0.0" resolved "http://verdaccio.ds.io:4873/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657" integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ== +stylelint-config-standard-scss@^13.1.0: + version "13.1.0" + resolved "http://verdaccio.ds.io:4873/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz#2be36ca13087325a42c1f26df8267808667cc886" + integrity sha512-Eo5w7/XvwGHWkeGLtdm2FZLOMYoZl1omP2/jgFCXyl2x5yNz7/8vv4Tj6slHvMSSUNTaGoam/GAZ0ZhukvalfA== + dependencies: + stylelint-config-recommended-scss "^14.0.0" + stylelint-config-standard "^36.0.0" + +stylelint-config-standard@^36.0.0: + version "36.0.1" + resolved "http://verdaccio.ds.io:4873/stylelint-config-standard/-/stylelint-config-standard-36.0.1.tgz#727cbb2a1ef3e210f5ce8329cde531129f156609" + integrity sha512-8aX8mTzJ6cuO8mmD5yon61CWuIM4UD8Q5aBcWKGSf6kg+EC3uhB+iOywpTK4ca6ZL7B49en8yanOFtUW0qNzyw== + dependencies: + stylelint-config-recommended "^14.0.1" + stylelint-config-styled-components@^0.1.1: version "0.1.1" resolved "http://verdaccio.ds.io:4873/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede" @@ -14113,59 +14017,63 @@ stylelint-processor-styled-components@^1.10.0: micromatch "^4.0.2" postcss "^7.0.26" -stylelint@^13.12: - version "13.13.1" - resolved "http://verdaccio.ds.io:4873/stylelint/-/stylelint-13.13.1.tgz#fca9c9f5de7990ab26a00f167b8978f083a18f3c" - integrity sha512-Mv+BQr5XTUrKqAXmpqm6Ddli6Ief+AiPZkRsIrAoUKFuq/ElkUh9ZMYxXD0iQNZ5ADghZKLOWz1h7hTClB7zgQ== +stylelint-scss@^6.4.0: + version "6.8.1" + resolved "http://verdaccio.ds.io:4873/stylelint-scss/-/stylelint-scss-6.8.1.tgz#b6554d93f2ea0bf37ffdcae571bbfaa35d79ba8a" + integrity sha512-al+5eRb72bKrFyVAY+CLWKUMX+k+wsDCgyooSfhISJA2exqnJq1PX1iIIpdrvhu3GtJgNJZl9/BIW6EVSMCxdg== + dependencies: + css-tree "^3.0.0" + is-plain-object "^5.0.0" + known-css-properties "^0.34.0" + mdn-data "^2.11.1" + postcss-media-query-parser "^0.2.3" + postcss-resolve-nested-selector "^0.1.6" + postcss-selector-parser "^6.1.2" + postcss-value-parser "^4.2.0" + +stylelint@^16.10.0: + version "16.10.0" + resolved "http://verdaccio.ds.io:4873/stylelint/-/stylelint-16.10.0.tgz#452b42a5d82f2ad910954eb2ba2b3a2ec583cd75" + integrity sha512-z/8X2rZ52dt2c0stVwI9QL2AFJhLhbPkyfpDFcizs200V/g7v+UYY6SNcB9hKOLcDDX/yGLDsY/pX08sLkz9xQ== dependencies: - "@stylelint/postcss-css-in-js" "^0.37.2" - "@stylelint/postcss-markdown" "^0.36.2" - autoprefixer "^9.8.6" + "@csstools/css-parser-algorithms" "^3.0.1" + "@csstools/css-tokenizer" "^3.0.1" + "@csstools/media-query-list-parser" "^3.0.1" + "@csstools/selector-specificity" "^4.0.0" + "@dual-bundle/import-meta-resolve" "^4.1.0" balanced-match "^2.0.0" - chalk "^4.1.1" - cosmiconfig "^7.0.0" - debug "^4.3.1" - execall "^2.0.0" - fast-glob "^3.2.5" - fastest-levenshtein "^1.0.12" - file-entry-cache "^6.0.1" - get-stdin "^8.0.0" + colord "^2.9.3" + cosmiconfig "^9.0.0" + css-functions-list "^3.2.3" + css-tree "^3.0.0" + debug "^4.3.7" + fast-glob "^3.3.2" + fastest-levenshtein "^1.0.16" + file-entry-cache "^9.1.0" global-modules "^2.0.0" - globby "^11.0.3" + globby "^11.1.0" globjoin "^0.1.4" - html-tags "^3.1.0" - ignore "^5.1.8" - import-lazy "^4.0.0" + html-tags "^3.3.1" + ignore "^6.0.2" imurmurhash "^0.1.4" - known-css-properties "^0.21.0" - lodash "^4.17.21" - log-symbols "^4.1.0" + is-plain-object "^5.0.0" + known-css-properties "^0.34.0" mathml-tag-names "^2.1.3" - meow "^9.0.0" - micromatch "^4.0.4" - normalize-selector "^0.2.0" - postcss "^7.0.35" - postcss-html "^0.36.0" - postcss-less "^3.1.4" - postcss-media-query-parser "^0.2.3" - postcss-resolve-nested-selector "^0.1.1" - postcss-safe-parser "^4.0.2" - postcss-sass "^0.4.4" - postcss-scss "^2.1.1" - postcss-selector-parser "^6.0.5" - postcss-syntax "^0.36.2" - postcss-value-parser "^4.1.0" + meow "^13.2.0" + micromatch "^4.0.8" + normalize-path "^3.0.0" + picocolors "^1.0.1" + postcss "^8.4.47" + postcss-resolve-nested-selector "^0.1.6" + postcss-safe-parser "^7.0.1" + postcss-selector-parser "^6.1.2" + postcss-value-parser "^4.2.0" resolve-from "^5.0.0" - slash "^3.0.0" - specificity "^0.4.1" - string-width "^4.2.2" - strip-ansi "^6.0.0" - style-search "^0.1.0" - sugarss "^2.0.0" + string-width "^4.2.3" + supports-hyperlinks "^3.1.0" svg-tags "^1.0.0" - table "^6.6.0" - v8-compile-cache "^2.3.0" - write-file-atomic "^3.0.3" + table "^6.8.2" + write-file-atomic "^5.0.1" stylis@4.2.0: version "4.2.0" @@ -14177,13 +14085,6 @@ subtag@^0.5.0: resolved "http://verdaccio.ds.io:4873/subtag/-/subtag-0.5.0.tgz#1728a8df5257fb98ded4fb981b2ac7af10cf58ba" integrity sha512-CaIBcTSb/nyk4xiiSOtZYz1B+F12ZxW8NEp54CdT+84vmh/h4sUnHGC6+KQXUfED8u22PQjCYWfZny8d2ELXwg== -sugarss@^2.0.0: - version "2.0.0" - resolved "http://verdaccio.ds.io:4873/sugarss/-/sugarss-2.0.0.tgz#ddd76e0124b297d40bf3cca31c8b22ecb43bc61d" - integrity sha512-WfxjozUk0UVA4jm+U1d736AUpzSrNsQcIbyOkoE364GrtWmIrFdk5lksEupgWMD4VaT/0kVx1dobpiDumSgmJQ== - dependencies: - postcss "^7.0.2" - suggestions@^1.6.0: version "1.7.1" resolved "http://verdaccio.ds.io:4873/suggestions/-/suggestions-1.7.1.tgz#2fefcbde8967353056d1d6eaed891b46d98a7e5c" @@ -14228,6 +14129,14 @@ supports-hyperlinks@^2.0.0: has-flag "^4.0.0" supports-color "^7.0.0" +supports-hyperlinks@^3.1.0: + version "3.1.0" + resolved "http://verdaccio.ds.io:4873/supports-hyperlinks/-/supports-hyperlinks-3.1.0.tgz#b56150ff0173baacc15f21956450b61f2b18d3ac" + integrity sha512-2rn0BZ+/f7puLOHZm1HOJfwBggfaHXUpPUSSG/SWM4TWp5KCfmNYwnC3hruy2rZlMnmWZ+QAGpZfchu3f3695A== + dependencies: + has-flag "^4.0.0" + supports-color "^7.0.0" + supports-preserve-symlinks-flag@^1.0.0: version "1.0.0" resolved "http://verdaccio.ds.io:4873/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09" @@ -14269,10 +14178,10 @@ tabbable@^6.0.1, tabbable@^6.2.0: resolved "http://verdaccio.ds.io:4873/tabbable/-/tabbable-6.2.0.tgz#732fb62bc0175cfcec257330be187dcfba1f3b97" integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== -table@^6.6.0: - version "6.8.0" - resolved "http://verdaccio.ds.io:4873/table/-/table-6.8.0.tgz#87e28f14fa4321c3377ba286f07b79b281a3b3ca" - integrity sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA== +table@^6.8.2: + version "6.8.2" + resolved "http://verdaccio.ds.io:4873/table/-/table-6.8.2.tgz#c5504ccf201213fa227248bdc8c5569716ac6c58" + integrity sha512-w2sfv80nrAh2VCbqR5AK27wswXhqcck2AhfnNW76beQXskGZ1V12GwS//yYVa3d3fcvAip2OUnbDAjW2k3v9fA== dependencies: ajv "^8.0.1" lodash.truncate "^4.4.2" @@ -14569,11 +14478,6 @@ type-fest@^0.13.1: resolved "http://verdaccio.ds.io:4873/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934" integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg== -type-fest@^0.18.0: - version "0.18.1" - resolved "http://verdaccio.ds.io:4873/type-fest/-/type-fest-0.18.1.tgz#db4bc151a4a2cf4eebf9add5db75508db6cc841f" - integrity sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw== - type-fest@^0.20.2: version "0.20.2" resolved "http://verdaccio.ds.io:4873/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4" @@ -14614,13 +14518,6 @@ type@^2.7.2: resolved "http://verdaccio.ds.io:4873/type/-/type-2.7.3.tgz#436981652129285cc3ba94f392886c2637ea0486" integrity sha512-8j+1QmAbPvLZow5Qpi6NCaN8FB60p/6x8/vfNqOk/hC+HuvFZhL4+WfekuhQLiqFZXOgQdrs3B+XxEmCc6b3FQ== -typedarray-to-buffer@^3.1.5: - version "3.1.5" - resolved "http://verdaccio.ds.io:4873/typedarray-to-buffer/-/typedarray-to-buffer-3.1.5.tgz#a97ee7a9ff42691b9f783ff1bc5112fe3fca9080" - integrity sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q== - dependencies: - is-typedarray "^1.0.0" - typedarray@^0.0.6: version "0.0.6" resolved "http://verdaccio.ds.io:4873/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" @@ -14745,18 +14642,6 @@ unified@^10.0.0: trough "^2.0.0" vfile "^5.0.0" -unified@^9.1.0: - version "9.2.2" - resolved "http://verdaccio.ds.io:4873/unified/-/unified-9.2.2.tgz#67649a1abfc3ab85d2969502902775eb03146975" - integrity sha512-Sg7j110mtefBD+qunSLO1lqOEKdrwBFBrR6Qd8f4uwkhWNlbkaqwHse6e7QvD3AP/MNoJdEDLaf8OxYyoWgorQ== - dependencies: - bail "^1.0.0" - extend "^3.0.0" - is-buffer "^2.0.0" - is-plain-obj "^2.0.0" - trough "^1.0.0" - vfile "^4.0.0" - union-value@^1.0.0, union-value@^1.0.1: version "1.0.1" resolved "http://verdaccio.ds.io:4873/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847" @@ -14787,13 +14672,6 @@ unist-builder@^3.0.0: dependencies: "@types/unist" "^2.0.0" -unist-util-find-all-after@^3.0.2: - version "3.0.2" - resolved "http://verdaccio.ds.io:4873/unist-util-find-all-after/-/unist-util-find-all-after-3.0.2.tgz#fdfecd14c5b7aea5e9ef38d5e0d5f774eeb561f6" - integrity sha512-xaTC/AGZ0rIM2gM28YVRAFPIZpzbpDtU3dRmp7EXlNVA8ziQc4hY3H7BHXM1J49nEmiqc3svnqMReW+PGqbZKQ== - dependencies: - unist-util-is "^4.0.0" - unist-util-generated@^1.0.0: version "1.1.6" resolved "http://verdaccio.ds.io:4873/unist-util-generated/-/unist-util-generated-1.1.6.tgz#5ab51f689e2992a472beb1b35f2ce7ff2f324d4b" @@ -15023,7 +14901,7 @@ uvu@^0.5.0: kleur "^4.0.3" sade "^1.7.3" -v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0: +v8-compile-cache@^2.0.3: version "2.3.0" resolved "http://verdaccio.ds.io:4873/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee" integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA== @@ -15337,16 +15215,6 @@ wrappy@1: resolved "http://verdaccio.ds.io:4873/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f" integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= -write-file-atomic@^3.0.3: - version "3.0.3" - resolved "http://verdaccio.ds.io:4873/write-file-atomic/-/write-file-atomic-3.0.3.tgz#56bd5c5a5c70481cd19c571bd39ab965a5de56e8" - integrity sha512-AvHcyZ5JnSfq3ioSyjrBkH9yW4m7Ayk8/9My/DD9onKeu/94fwrMocemO2QAJFAlnnDN+ZDS+ZjAR5ua1/PV/Q== - dependencies: - imurmurhash "^0.1.4" - is-typedarray "^1.0.0" - signal-exit "^3.0.2" - typedarray-to-buffer "^3.1.5" - write-file-atomic@^4.0.1: version "4.0.1" resolved "http://verdaccio.ds.io:4873/write-file-atomic/-/write-file-atomic-4.0.1.tgz#9faa33a964c1c85ff6f849b80b42a88c2c537c8f" @@ -15355,6 +15223,14 @@ write-file-atomic@^4.0.1: imurmurhash "^0.1.4" signal-exit "^3.0.7" +write-file-atomic@^5.0.1: + version "5.0.1" + resolved "http://verdaccio.ds.io:4873/write-file-atomic/-/write-file-atomic-5.0.1.tgz#68df4717c55c6fa4281a7860b4c2ba0a6d2b11e7" + integrity sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw== + dependencies: + imurmurhash "^0.1.4" + signal-exit "^4.0.1" + ws@^8.2.3: version "8.8.1" resolved "http://verdaccio.ds.io:4873/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0" @@ -15431,11 +15307,6 @@ yargs-parser@^18.1.3: camelcase "^5.0.0" decamelize "^1.2.0" -yargs-parser@^20.2.3: - version "20.2.9" - resolved "http://verdaccio.ds.io:4873/yargs-parser/-/yargs-parser-20.2.9.tgz#2eb7dc3b0289718fc295f362753845c41a0c94ee" - integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w== - yargs-parser@^21.0.0, yargs-parser@^21.0.1: version "21.0.1" resolved "http://verdaccio.ds.io:4873/yargs-parser/-/yargs-parser-21.0.1.tgz#0267f286c877a4f0f728fceb6f8a3e4cb95c6e35" From f0f174dc232187b10c939d10403c013c68d4a272 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= <alice@developmentseed.org> Date: Thu, 7 Nov 2024 11:15:23 +0100 Subject: [PATCH 05/87] Make toggle work for multiple menus --- .../components/common/page-header/index.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index aae36cf33..3ec37ad45 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -20,7 +20,18 @@ interface PageHeaderProps { export default function PageHeader(props: PageHeaderProps) { const [expanded, setExpanded] = useState(false); const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); - const [isOpen, setIsOpen] = useState<boolean>(false); + + const [isOpen, setIsOpen] = useState([false]); + const onToggle = ( + index: number, + setIsOpen: React.Dispatch<React.SetStateAction<boolean[]>> + ): void => { + setIsOpen((prevIsOpen) => { + const newIsOpen = [...prevIsOpen]; + newIsOpen[index] = !newIsOpen[index]; + return newIsOpen; + }); + }; const testMenuItems = [ <a href='#linkOne' key='one'> @@ -31,13 +42,11 @@ export default function PageHeader(props: PageHeaderProps) { </a> ]; - const onToggle = () => setIsOpen(!isOpen); - const testItemsMenu = [ <> <USWDSNavDropDownButton onToggle={(): void => { - onToggle(); + onToggle(0, setIsOpen); }} menuId='testDropDownOne' isOpen={isOpen[0]} From 157be1cc9913ee1a6201205901c13d54cbf2ed41 Mon Sep 17 00:00:00 2001 From: Sandra Hoang <sandrahoang686@gmail.com> Date: Thu, 7 Nov 2024 16:34:28 -0500 Subject: [PATCH 06/87] Update nav menu to use navItems config --- .../components/common/page-header/index.tsx | 87 ++++++++++++------- .../common/page-header/nav-menu-item.tsx | 2 + app/scripts/components/common/smart-link.tsx | 1 + 3 files changed, 60 insertions(+), 30 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 3ec37ad45..7aaf297f2 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -18,6 +18,9 @@ interface PageHeaderProps { } export default function PageHeader(props: PageHeaderProps) { + const { mainNavItems, subNavItems, logo, linkProperties } = props; + console.log(`mainNavItems: `, mainNavItems) + console.log(`subNavItems: `, subNavItems) const [expanded, setExpanded] = useState(false); const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); @@ -35,39 +38,63 @@ export default function PageHeader(props: PageHeaderProps) { const testMenuItems = [ <a href='#linkOne' key='one'> - Simple link one + Simple link dog </a>, <a href='#linkTwo' key='two'> - Simple link two - </a> - ]; - - const testItemsMenu = [ - <> - <USWDSNavDropDownButton - onToggle={(): void => { - onToggle(0, setIsOpen); - }} - menuId='testDropDownOne' - isOpen={isOpen[0]} - label='Nav Label' - isCurrent={true} - /> - <USWDSMenu - key='one' - items={testMenuItems} - isOpen={isOpen[0]} - id='testDropDownOne' - /> - </>, - <a href='#two' key='two' className='usa-nav__link'> - <span>Parent link</span> - </a>, - <a href='#three' key='three' className='usa-nav__link'> - <span>Parent link</span> + Simple link cat </a> ]; + const CreateNavMenu = (navItems: NavItem[]) => { + return ( + navItems.map((item) => { + if(item.type == NavItemType.DROPDOWN) { + return ( + <> + <USWDSNavDropDownButton + onToggle={(): void => { + onToggle(0, setIsOpen); + }} + menuId={item.title} + isOpen={isOpen[0]} + label={item.title} + /> + <USWDSMenu + key='one' + items={CreateNavMenu(item.children)} + isOpen={isOpen[0]} + id={`${item.title}-dropdown`} + /> + </> + ) + } else if (item.type == NavItemType.INTERNAL_LINK && linkProperties.LinkElement) { + const path = {[linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to} + const LinkElement = linkProperties.LinkElement; + return ( + <LinkElement {...path} className='usa-nav__link'> + <span> + {item.title} + </span> + </LinkElement> + ); + } else if (item.type == NavItemType.EXTERNAL_LINK) { + return ( + <a + target='_blank' + rel='noopener' + onClick={onClick} + href={(item as ExternalNavLink).href} + className='usa-nav__link' + > + <span> + {item.title} + </span> + </a> + ); + } + })) + }; + return ( <> <USWDSHeader extended={true} showMobileOverlay={expanded}> @@ -76,8 +103,8 @@ export default function PageHeader(props: PageHeaderProps) { <USWDSNavMenuButton onClick={onClick} label='Menu' /> </div> <USWDSExtendedNav - primaryItems={testItemsMenu} - secondaryItems={testMenuItems} + primaryItems={CreateNavMenu(mainNavItems)} + secondaryItems={CreateNavMenu(subNavItems)} mobileExpanded={expanded} onToggleMobileNav={onClick} /> diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header/nav-menu-item.tsx index c56249d63..109f2e571 100644 --- a/app/scripts/components/common/page-header/nav-menu-item.tsx +++ b/app/scripts/components/common/page-header/nav-menu-item.tsx @@ -17,6 +17,8 @@ import GlobalMenuLinkCSS from '$styles/menu-link'; import { useMediaQuery } from '$utils/use-media-query'; import { LinkProperties } from '$types/veda'; +// @NOTE: likely able to deprecate this file with the new page-header +// @DEPRECATE: Look at note above const rgbaFixed = rgba as any; diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx index 7b0a369b0..4f4a4d031 100644 --- a/app/scripts/components/common/smart-link.tsx +++ b/app/scripts/components/common/smart-link.tsx @@ -6,6 +6,7 @@ import { getLinkProps } from '$utils/url'; interface SmartLinkProps { to: string; children?: ReactNode; + className?: string; } /** From 1dc6e0b63dc5ebf5fbaedc38392fa723fd492ef3 Mon Sep 17 00:00:00 2001 From: Sandra Hoang <sandrahoang686@gmail.com> Date: Thu, 7 Nov 2024 17:54:22 -0500 Subject: [PATCH 07/87] Remove ModalNavLink type and create ButtonNavLink type --- app/scripts/components/common/google-form.tsx | 39 ++++--------------- .../common/page-header/default-config.ts | 8 ++-- .../components/common/page-header/index.tsx | 26 ++++++++++++- .../common/page-header/nav-menu-item.tsx | 7 ++-- .../components/common/page-header/types.ts | 9 +++-- mock/veda.config.js | 6 ++- parcel-resolver-veda/index.d.ts | 9 +++-- 7 files changed, 55 insertions(+), 49 deletions(-) diff --git a/app/scripts/components/common/google-form.tsx b/app/scripts/components/common/google-form.tsx index 923c4ff80..e07bffe47 100644 --- a/app/scripts/components/common/google-form.tsx +++ b/app/scripts/components/common/google-form.tsx @@ -3,6 +3,9 @@ import styled from 'styled-components'; import { Button } from '@devseed-ui/button'; import { Modal } from '@devseed-ui/modal'; import { media, themeVal } from '@devseed-ui/theme-provider'; +import { + USWDSButton, +} from '$components/common/uswds'; import { useFeedbackModal } from './layout-root'; @@ -16,46 +19,20 @@ interface BtnMediaProps { active?: boolean; } -// Global menu link style -const ButtonAsNavLink = styled(Button)` - ${media.mediumUp<BtnMediaProps>` - background-color: ${themeVal('color.primary-700')}; - - &:hover { - background-color: ${themeVal('color.primary-800')}; - } - - /* Print & when prop is passed */ - ${({ active }) => active && '&,'} - &:active, - &.active { - background-color: ${themeVal('color.primary-900')}; - } - - &:focus-visible { - background-color: ${themeVal('color.primary-200a')}; - } - `} - - ${media.mediumDown` - ${GlobalMenuLinkCSS} - `} -`; - const GoogleForm: React.FC<{ title: string, src: string }> = (props) => { const { title, src } = props; const { isRevealed, show, hide } = useFeedbackModal(); return ( <> - <ButtonAsNavLink - type='button' - size='large' + <USWDSButton onClick={show} - style={{ color: 'white' }} + outline={true} + type='button' + size='small' > {title} - </ButtonAsNavLink> + </USWDSButton> <Modal id='modal' size='large' diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index 889f884b8..8b2298dc9 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -1,5 +1,5 @@ import { getString, getNavItemsFromVedaConfig } from 'veda'; -import { InternalNavLink, ExternalNavLink, ModalNavLink, DropdownNavLink, NavItemType } from '$components/common/page-header/types'; +import { InternalNavLink, ExternalNavLink, ButtonNavLink, DropdownNavLink, NavItemType } from '$components/common/page-header/types'; import { STORIES_PATH, @@ -8,7 +8,7 @@ import { ABOUT_PATH } from '$utils/routes'; -let defaultMainNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ModalNavLink)[] = [{ + let defaultMainNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ title: 'Data Catalog', to: DATASETS_PATH, type: NavItemType.INTERNAL_LINK @@ -28,7 +28,7 @@ if (!!process.env.HUB_URL && !!process.env.HUB_NAME) defaultMainNavItems = [...d type: NavItemType.EXTERNAL_LINK } as ExternalNavLink]; -let defaultSubNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ModalNavLink)[] = [{ + let defaultSubNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ title: 'About', to: ABOUT_PATH, type: NavItemType.INTERNAL_LINK @@ -38,7 +38,7 @@ if (process.env.GOOGLE_FORM) { defaultSubNavItems = [...defaultSubNavItems, { title: 'Contact us', src: process.env.GOOGLE_FORM, - type: NavItemType.MODAL + type: NavItemType.BUTTON, }]; } diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 7aaf297f2..2d2003395 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -9,6 +9,10 @@ import { USWDSMenu } from '../uswds/header/menu'; import { USWDSNavDropDownButton } from '$components/common/uswds/header/nav-drop-down-button'; import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; +import { + USWDSButton, +} from '$components/common/uswds'; +import GoogleForm from '../google-form'; interface PageHeaderProps { mainNavItems: NavItem[]; @@ -91,7 +95,27 @@ export default function PageHeader(props: PageHeaderProps) { </span> </a> ); - } + } else if (item.type == NavItemType.BUTTON && item.title.toLocaleLowerCase() == 'contact us') { + // @NOTE: This is a workaround right now because we can't provide a callback that returns some jsx element from veda.config.js where this nav config is being defined + // This ideally would just go away once we migrate the instances over and there is no need for the veda.config file. The nav config can just specify the action attribute directly + + // @NOTE: Also GoogleForm component is coupled with the button component already, Ideally it would be broken out, possible @TECH-DEBT but since it is currently coupled... + // we either have to decouple it or we would create another Nav Item Type where it is a more generic component type + return ( + <GoogleForm title={item.title} src={(item as ButtonNavLink).src} /> + ) + } else if (item.type == NavItemType.BUTTON) { + return ( + <USWDSButton + onClick={item.action} + outline={true} + type='button' + size='small' + > + {item.title} + </USWDSButton> + ) + } })) }; diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header/nav-menu-item.tsx index 109f2e571..b429e25c5 100644 --- a/app/scripts/components/common/page-header/nav-menu-item.tsx +++ b/app/scripts/components/common/page-header/nav-menu-item.tsx @@ -12,7 +12,7 @@ import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown'; import DropdownScrollable from '../dropdown-scrollable'; import GoogleForm from '../google-form'; -import { AlignmentEnum, InternalNavLink, ExternalNavLink, NavLinkItem, DropdownNavLink, ModalNavLink, NavItem, NavItemType } from './types'; +import { AlignmentEnum, InternalNavLink, ExternalNavLink, NavLinkItem, DropdownNavLink, ButtonNavLink, NavItem, NavItemType } from './types'; import GlobalMenuLinkCSS from '$styles/menu-link'; import { useMediaQuery } from '$utils/use-media-query'; import { LinkProperties } from '$types/veda'; @@ -130,8 +130,9 @@ export default function NavMenuItem({ item, alignment, onClick, linkProperties } </li> ); - } else if (type === NavItemType.MODAL) { - return (<li><GoogleForm title={title} src={(item as ModalNavLink).src} /></li>); + } + else if (type === NavItemType.BUTTON && title.toLocaleLowerCase() == 'contact us') { + return (<li><GoogleForm title={title} src={(item as ButtonNavLink).src} /></li>); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition } else if (type === NavItemType.DROPDOWN) { const { title } = item as DropdownNavLink; diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 0c9ada42d..8a53ffc8e 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -4,7 +4,7 @@ export enum NavItemType { INTERNAL_LINK= 'internalLink', EXTERNAL_LINK= 'externalLink', DROPDOWN= 'dropdown', - MODAL= 'modal' + BUTTON= 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action } export interface InternalNavLink { @@ -21,9 +21,10 @@ export interface ExternalNavLink { export type NavLinkItem = (ExternalNavLink | InternalNavLink); -export interface ModalNavLink { +export interface ButtonNavLink { title: string; - type: NavItemType.MODAL; + type: NavItemType.BUTTON; + action?: () => void; // @NOTE-SANDRA: This should be required, workaround for now because googleform comes with button src: string; } @@ -33,4 +34,4 @@ export interface DropdownNavLink { children: NavLinkItem[]; } -export type NavItem = (NavLinkItem | ModalNavLink | DropdownNavLink); \ No newline at end of file +export type NavItem = (NavLinkItem | ButtonNavLink | DropdownNavLink); \ No newline at end of file diff --git a/mock/veda.config.js b/mock/veda.config.js index 307e83338..856761849 100644 --- a/mock/veda.config.js +++ b/mock/veda.config.js @@ -10,7 +10,7 @@ let mainNavItems = [ type: 'dropdown', children: [ { - title: 'test dropdown', + title: 'dropdown menu item 1', to: '/stories', type: 'internalLink' } @@ -57,7 +57,9 @@ if (config.GOOGLE_FORM) { { title: 'Contact us', src: config.GOOGLE_FORM, - type: 'modal' + type: 'button' + // @NOTE: action attribute is required here but we cant pass in a callback that opens appropriate modal because this file is outside the modules + // Will provide a work around for this for not but this will soon go away with the refactor anyways } ]; } diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index eee428ff4..4891179b0 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -290,9 +290,10 @@ declare module 'veda' { type: 'externalLink'; } type NavLinkItem = ExternalNavLink | InternalNavLink; - export interface ModalNavLink { + export interface ButtonNavLink { title: string; - type: 'modal'; + type: 'button'; + action: () => void; src: string; } @@ -352,10 +353,10 @@ declare module 'veda' { export const getNavItemsFromVedaConfig: () => | { mainNavItems: - | (NavLinkItem | ModalNavLink | DropdownNavLink)[] + | (NavLinkItem | ButtonNavLink | DropdownNavLink)[] | undefined; subNavItems: - | (NavLinkItem | ModalNavLink | DropdownNavLink)[] + | (NavLinkItem | ButtonNavLink | DropdownNavLink)[] | undefined; } | undefined; From 506bd794517caa87a23f3513cd5ea4fa91b09b1f Mon Sep 17 00:00:00 2001 From: Sandra Hoang <sandrahoang686@gmail.com> Date: Thu, 7 Nov 2024 17:55:33 -0500 Subject: [PATCH 08/87] remove placeholder vars --- app/scripts/components/common/page-header/index.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 2d2003395..9e7a88dfd 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -23,8 +23,6 @@ interface PageHeaderProps { export default function PageHeader(props: PageHeaderProps) { const { mainNavItems, subNavItems, logo, linkProperties } = props; - console.log(`mainNavItems: `, mainNavItems) - console.log(`subNavItems: `, subNavItems) const [expanded, setExpanded] = useState(false); const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); @@ -40,15 +38,6 @@ export default function PageHeader(props: PageHeaderProps) { }); }; - const testMenuItems = [ - <a href='#linkOne' key='one'> - Simple link dog - </a>, - <a href='#linkTwo' key='two'> - Simple link cat - </a> - ]; - const CreateNavMenu = (navItems: NavItem[]) => { return ( navItems.map((item) => { From e6e9851e4c1abdc9279c7e97fa9d7ff0dda0e7ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= <alice@developmentseed.org> Date: Mon, 11 Nov 2024 12:40:05 +0100 Subject: [PATCH 09/87] Add old logo to header this requires more refactoring, to use only USWDS eventually --- .../components/common/page-header/index.tsx | 169 ++++++++++-------- .../components/common/page-header/logo.tsx | 58 +++--- app/scripts/components/common/uswds/logo.tsx | 6 + 3 files changed, 128 insertions(+), 105 deletions(-) create mode 100644 app/scripts/components/common/uswds/logo.tsx diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 9e7a88dfd..3f1824528 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,23 +1,26 @@ import React, { ReactElement, useState } from 'react'; -import { NavItem } from './types'; +import { Link } from 'react-router-dom'; import { LinkProperties } from '$types/veda'; -import { - USWDSHeader, - USWDSHeaderTitle -} from '$components/common/uswds/header'; import { USWDSMenu } from '../uswds/header/menu'; +import GoogleForm from '../google-form'; +import { + NavItem, + NavItemType, + InternalNavLink, + ExternalNavLink, + ButtonNavLink +} from './types'; +import Logo from './logo'; +import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; import { USWDSNavDropDownButton } from '$components/common/uswds/header/nav-drop-down-button'; import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; -import { - USWDSButton, -} from '$components/common/uswds'; -import GoogleForm from '../google-form'; +import { USWDSButton } from '$components/common/uswds'; interface PageHeaderProps { mainNavItems: NavItem[]; subNavItems: NavItem[]; - logo: ReactElement; + logo?: ReactElement; linkProperties: LinkProperties; } @@ -39,80 +42,92 @@ export default function PageHeader(props: PageHeaderProps) { }; const CreateNavMenu = (navItems: NavItem[]) => { - return ( - navItems.map((item) => { - if(item.type == NavItemType.DROPDOWN) { - return ( - <> - <USWDSNavDropDownButton - onToggle={(): void => { - onToggle(0, setIsOpen); - }} - menuId={item.title} - isOpen={isOpen[0]} - label={item.title} - /> - <USWDSMenu - key='one' - items={CreateNavMenu(item.children)} - isOpen={isOpen[0]} - id={`${item.title}-dropdown`} - /> - </> - ) - } else if (item.type == NavItemType.INTERNAL_LINK && linkProperties.LinkElement) { - const path = {[linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to} - const LinkElement = linkProperties.LinkElement; - return ( - <LinkElement {...path} className='usa-nav__link'> - <span> - {item.title} - </span> - </LinkElement> - ); - } else if (item.type == NavItemType.EXTERNAL_LINK) { - return ( - <a - target='_blank' - rel='noopener' - onClick={onClick} - href={(item as ExternalNavLink).href} - className='usa-nav__link' - > - <span> - {item.title} - </span> - </a> - ); - } else if (item.type == NavItemType.BUTTON && item.title.toLocaleLowerCase() == 'contact us') { - // @NOTE: This is a workaround right now because we can't provide a callback that returns some jsx element from veda.config.js where this nav config is being defined - // This ideally would just go away once we migrate the instances over and there is no need for the veda.config file. The nav config can just specify the action attribute directly + return navItems.map((item) => { + if (item.type == NavItemType.DROPDOWN) { + return ( + <> + <USWDSNavDropDownButton + onToggle={(): void => { + onToggle(0, setIsOpen); + }} + menuId={item.title} + isOpen={isOpen[0]} + label={item.title} + /> + <USWDSMenu + key='one' + items={CreateNavMenu(item.children)} + isOpen={isOpen[0]} + id={`${item.title}-dropdown`} + /> + </> + ); + } else if ( + item.type == NavItemType.INTERNAL_LINK && + linkProperties.LinkElement + ) { + const path = { + [linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to + }; + const LinkElement = linkProperties.LinkElement; + return ( + <LinkElement {...path} className='usa-nav__link'> + <span>{item.title}</span> + </LinkElement> + ); + } else if (item.type == NavItemType.EXTERNAL_LINK) { + return ( + <a + target='_blank' + rel='noopener noreferrer' + onClick={onClick} + href={(item as ExternalNavLink).href} + className='usa-nav__link' + > + <span>{item.title}</span> + </a> + ); + } else if ( + item.type == NavItemType.BUTTON && + item.title.toLocaleLowerCase() == 'contact us' + ) { + // @NOTE: This is a workaround right now because we can't provide a callback that returns some jsx element from veda.config.js where this nav config is being defined + // This ideally would just go away once we migrate the instances over and there is no need for the veda.config file. The nav config can just specify the action attribute directly - // @NOTE: Also GoogleForm component is coupled with the button component already, Ideally it would be broken out, possible @TECH-DEBT but since it is currently coupled... - // we either have to decouple it or we would create another Nav Item Type where it is a more generic component type - return ( - <GoogleForm title={item.title} src={(item as ButtonNavLink).src} /> - ) - } else if (item.type == NavItemType.BUTTON) { - return ( - <USWDSButton - onClick={item.action} - outline={true} - type='button' - size='small' - > - {item.title} - </USWDSButton> - ) + // @NOTE: Also GoogleForm component is coupled with the button component already, Ideally it would be broken out, possible @TECH-DEBT but since it is currently coupled... + // we either have to decouple it or we would create another Nav Item Type where it is a more generic component type + return ( + <GoogleForm title={item.title} src={(item as ButtonNavLink).src} /> + ); + } else if (item.type == NavItemType.BUTTON) { + return ( + <USWDSButton + onClick={item.action} + outline={true} + type='button' + size='small' + > + {item.title} + </USWDSButton> + ); } - })) + }); }; - + return ( <> <USWDSHeader extended={true} showMobileOverlay={expanded}> <div className='usa-navbar'> - <USWDSHeaderTitle>Project Title</USWDSHeaderTitle> + <USWDSHeaderTitle> + {logo ?? ( + <Logo + linkProperties={{ + LinkElement: Link, + pathAttributeKeyName: 'to' + }} + /> + )} + </USWDSHeaderTitle> <USWDSNavMenuButton onClick={onClick} label='Menu' /> </div> <USWDSExtendedNav diff --git a/app/scripts/components/common/page-header/logo.tsx b/app/scripts/components/common/page-header/logo.tsx index 383539ed4..9567293ca 100644 --- a/app/scripts/components/common/page-header/logo.tsx +++ b/app/scripts/components/common/page-header/logo.tsx @@ -25,28 +25,16 @@ export const Brand = styled.div` } #nasa-logo-neg-mono { - opacity: 1; + opacity: 0; transition: all 0.32s ease 0s; } #nasa-logo-pos { - opacity: 0; + opacity: 1; transform: translate(0, -100%); transition: all 0.32s ease 0s; } - &:hover { - opacity: 1; - - #nasa-logo-neg-mono { - opacity: 0; - } - - #nasa-logo-pos { - opacity: 1; - } - } - svg { grid-row: 1 / span 2; height: 2.5rem; @@ -98,19 +86,33 @@ export const PageTitleSecLink = styled.a` `} `; -export default function Logo ({ linkProperties }: { linkProperties: LinkProperties }) { - const LinkElement: ComponentType<any> = linkProperties.LinkElement as ComponentType<any>; +// @TODO: Reactor to use new USWDS components +export default function Logo({ + linkProperties +}: { + linkProperties: LinkProperties; +}) { + const LinkElement: ComponentType<any> = + linkProperties.LinkElement as ComponentType<any>; return ( - <ComponentOverride with='headerBrand'> - <Brand> - <LinkElement {...{[linkProperties.pathAttributeKeyName]: '/'}}> - <NasaLogo /> - <span>Earthdata</span> <span>{appTitle}</span> - </LinkElement> - <Tip content={`v${appVersion}`}> - <PageTitleSecLink {...{as: linkProperties.LinkElement as ComponentType<any>, [linkProperties.pathAttributeKeyName]: '/development'}}>Beta</PageTitleSecLink> - </Tip> - </Brand> - </ComponentOverride>); -} \ No newline at end of file + <ComponentOverride with='headerBrand'> + <Brand> + <LinkElement {...{ [linkProperties.pathAttributeKeyName]: '/' }}> + <NasaLogo /> + <span>Earthdata</span> <span>{appTitle}</span> + </LinkElement> + <Tip content={`v${appVersion}`}> + <PageTitleSecLink + {...{ + as: linkProperties.LinkElement as ComponentType<any>, + [linkProperties.pathAttributeKeyName]: '/development' + }} + > + Beta + </PageTitleSecLink> + </Tip> + </Brand> + </ComponentOverride> + ); +} diff --git a/app/scripts/components/common/uswds/logo.tsx b/app/scripts/components/common/uswds/logo.tsx new file mode 100644 index 000000000..5b7f8f348 --- /dev/null +++ b/app/scripts/components/common/uswds/logo.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { Logo } from '@trussworks/react-uswds'; + +export function USWDSLogo(props, children) { + return <Logo {...props}>{children}</Logo>; +} From 973875ddae8184ccfb4f38761d78d79b6cc64875 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= <alice@developmentseed.org> Date: Mon, 11 Nov 2024 17:42:56 +0100 Subject: [PATCH 10/87] Use flexible logo container and drop logo component --- .../components/common/layout-root/index.tsx | 10 +- .../components/common/nasa-logo-mono.js | 217 ++++++++++++++++++ app/scripts/components/common/nasa-logo.js | 198 ---------------- .../components/common/page-header/index.tsx | 25 +- .../common/page-header/logo-container.tsx | 110 +++++++-- 5 files changed, 327 insertions(+), 233 deletions(-) create mode 100644 app/scripts/components/common/nasa-logo-mono.js diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 6fe9add22..4999a0a9b 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'; -import { Link, useLocation } from 'react-router-dom'; +import { useLocation } from 'react-router-dom'; import { useDeepCompareEffect } from 'use-deep-compare'; import styled from 'styled-components'; import { Outlet } from 'react-router'; @@ -21,7 +21,7 @@ import { LayoutRootContext } from './context'; import { setGoogleTagManager } from '$utils/use-google-tag-manager'; import NavWrapper from '$components/common/nav-wrapper'; -import Logo from '$components/common/page-header/logo'; +import NasaLogo from '$components/common/nasa-logo'; import { mainNavItems, subNavItems @@ -80,11 +80,7 @@ function LayoutRoot(props: { children?: ReactNode }) { <NavWrapper mainNavItems={mainNavItems} subNavItems={subNavItems} - logo={ - <Logo - linkProperties={{ LinkElement: Link, pathAttributeKeyName: 'to' }} - /> - } + logo={<NasaLogo />} /> <PageBody id={PAGE_BODY_ID} tabIndex={-1}> <Outlet /> diff --git a/app/scripts/components/common/nasa-logo-mono.js b/app/scripts/components/common/nasa-logo-mono.js new file mode 100644 index 000000000..28486e9fe --- /dev/null +++ b/app/scripts/components/common/nasa-logo-mono.js @@ -0,0 +1,217 @@ +import React from 'react'; + +export default function NasaLogoMono() { + return ( + <svg + width={312} + height={258} + viewBox='0 0 312 258' + style={{ + fillRule: 'evenodd', + clipRule: 'evenodd', + strokeLinejoin: 'round', + strokeMiterlimit: 2 + }} + > + <title>NASA + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/app/scripts/components/common/nasa-logo.js b/app/scripts/components/common/nasa-logo.js index 693c031f3..27be41024 100644 --- a/app/scripts/components/common/nasa-logo.js +++ b/app/scripts/components/common/nasa-logo.js @@ -212,204 +212,6 @@ export default function NasaLogo() { style={{ fill: 'white', fillRule: 'nonzero' }} /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); } diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 3f1824528..53207da31 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -10,13 +10,16 @@ import { ExternalNavLink, ButtonNavLink } from './types'; -import Logo from './logo'; +import LogoContainer from './logo-container'; import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; import { USWDSNavDropDownButton } from '$components/common/uswds/header/nav-drop-down-button'; import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; import { USWDSButton } from '$components/common/uswds'; +const appTitle = process.env.APP_TITLE; +const appVersion = process.env.APP_VERSION; + interface PageHeaderProps { mainNavItems: NavItem[]; subNavItems: NavItem[]; @@ -25,7 +28,7 @@ interface PageHeaderProps { } export default function PageHeader(props: PageHeaderProps) { - const { mainNavItems, subNavItems, logo, linkProperties } = props; + const { mainNavItems, subNavItems, logo: Logo, linkProperties } = props; const [expanded, setExpanded] = useState(false); const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); @@ -119,14 +122,16 @@ export default function PageHeader(props: PageHeaderProps) {
- {logo ?? ( - - )} +
diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx index d0cac7c6d..46709fc35 100644 --- a/app/scripts/components/common/page-header/logo-container.tsx +++ b/app/scripts/components/common/page-header/logo-container.tsx @@ -1,31 +1,105 @@ import React, { ComponentType } from 'react'; +import styled from 'styled-components'; import { Tip } from '../tip'; -import { Brand, PageTitleSecLink } from './logo'; import { LinkProperties } from '$types/veda'; +//@TODO: Add design tokens from theme +const Container = styled.div` + display: flex; + flex-shrink: 0; + + a { + display: grid; + align-items: center; + + &, + &:visited { + color: inherit; + text-decoration: none; + } + + #nasa-logo-pos { + opacity: 1; + transform: translate(0, -100%); //@TODO: fix svg translate + } + + svg { + grid-row: 1 / span 2; + height: 2.5rem; + width: auto; + } + + span:first-of-type { + font-size: 0.875rem; + line-height: 1rem; + font-weight: extrabold; + text-transform: uppercase; + } + + span:last-of-type { + grid-row: 2; + font-size: 1.25rem; + line-height: 1.5rem; + font-weight: regular; + letter-spacing: -0.025em; + } + } +`; + +export const BetaTag = styled.a` + align-self: end; + font-size: 0.75rem; + font-weight: bold; + line-height: 1rem; + text-transform: uppercase; + + &&, + &&:visited { + color: primary; + } +`; + /** - * LogoContainer that is meant to integrate in the default page header without the dependencies of the veda virtual modules - * and expects the Logo SVG to be passed in as a prop - this will support the instance for refactor + * LogoContainer that is meant to integrate in the default + * page header without the dependencies of the veda virtual modules + * and expects the Logo SVG to be passed in as a prop - this will + * support the instance for refactor */ -export default function LogoContainer ({ linkProperties, Logo, title, subTitle, version }: { - linkProperties: LinkProperties, - Logo: JSX.Element, - title: string, - subTitle: string, - version: string +export default function LogoContainer({ + linkProperties, + Logo, + title, + subTitle, + version +}: { + linkProperties: LinkProperties; + Logo?: JSX.Element; + title: string; + subTitle?: string; + version?: string; }) { - const LinkElement: ComponentType = linkProperties.LinkElement as ComponentType; + const LinkElement: ComponentType = + linkProperties.LinkElement as ComponentType; return ( - - + + {Logo} - {title} {subTitle} + {title} {subTitle && {subTitle}} - - , [linkProperties.pathAttributeKeyName]: '/development'}}>Beta - - + {version && ( + + , + [linkProperties.pathAttributeKeyName]: '/development' + }} + > + Beta + + + )} + ); -} \ No newline at end of file +} From aeb15b194efecba556a1fd8115ac620eb8e0963c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 12 Nov 2024 10:03:23 +0100 Subject: [PATCH 11/87] Restore old header and enable feature flag the refactored uswds header now lives in a separate directory --- .env | 2 +- .../components/common/layout-root/index.tsx | 10 +- app/scripts/components/common/nasa-logo.js | 198 ++++++++++ app/scripts/components/common/nav-wrapper.js | 27 +- .../page-header-uswds/default-config.ts | 79 ++++ .../common/page-header-uswds/index.tsx | 148 ++++++++ .../logo-container.tsx | 0 .../common/page-header-uswds/types.d.ts | 37 ++ .../common/page-header/default-config.ts | 6 +- .../common/page-header/index-old.tsx | 340 ------------------ .../components/common/page-header/index.tsx | 143 +++----- .../components/common/page-header/logo.tsx | 58 ++- .../common/page-header/nav-menu-item.tsx | 5 +- .../components/common/page-header/types.ts | 1 - app/scripts/index.ts | 4 +- 15 files changed, 560 insertions(+), 498 deletions(-) create mode 100644 app/scripts/components/common/page-header-uswds/default-config.ts create mode 100644 app/scripts/components/common/page-header-uswds/index.tsx rename app/scripts/components/common/{page-header => page-header-uswds}/logo-container.tsx (100%) create mode 100644 app/scripts/components/common/page-header-uswds/types.d.ts delete mode 100644 app/scripts/components/common/page-header/index-old.tsx diff --git a/.env b/.env index ce7e2b852..9f6c1f1e2 100644 --- a/.env +++ b/.env @@ -13,4 +13,4 @@ API_STAC_ENDPOINT='https://staging.openveda.cloud/api/stac' GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f88hX8RZ4Qef7qBsTtDqxjTSkg/viewform?embedded=true' SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE' - +FEATURE_FLAG_USWDS= 'TRUE' diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 4999a0a9b..6fe9add22 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -5,7 +5,7 @@ import React, { useEffect, useState } from 'react'; -import { useLocation } from 'react-router-dom'; +import { Link, useLocation } from 'react-router-dom'; import { useDeepCompareEffect } from 'use-deep-compare'; import styled from 'styled-components'; import { Outlet } from 'react-router'; @@ -21,7 +21,7 @@ import { LayoutRootContext } from './context'; import { setGoogleTagManager } from '$utils/use-google-tag-manager'; import NavWrapper from '$components/common/nav-wrapper'; -import NasaLogo from '$components/common/nasa-logo'; +import Logo from '$components/common/page-header/logo'; import { mainNavItems, subNavItems @@ -80,7 +80,11 @@ function LayoutRoot(props: { children?: ReactNode }) { } + logo={ + + } /> diff --git a/app/scripts/components/common/nasa-logo.js b/app/scripts/components/common/nasa-logo.js index 27be41024..693c031f3 100644 --- a/app/scripts/components/common/nasa-logo.js +++ b/app/scripts/components/common/nasa-logo.js @@ -212,6 +212,204 @@ export default function NasaLogo() { style={{ fill: 'white', fillRule: 'nonzero' }} /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); } diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 99e3afd41..8062b1f26 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -2,8 +2,8 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { themeVal } from '@devseed-ui/theme-provider'; import { NavLink } from 'react-router-dom'; -// import PageHeader from './page-header/index-old'; import PageHeader from './page-header'; +import PageHeaderUSWDS from './page-header-uswds'; import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps'; import { @@ -11,7 +11,7 @@ import { HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header'; -const NavWrapper = styled.div` +const NavWrapperContainer = styled.div` position: sticky; top: 0; width: 100%; @@ -28,20 +28,27 @@ const NavWrapper = styled.div` `} `; -function PageNavWrapper(props) { +function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); return ( - - - + {process.env.FEATURE_FLAG_USWDS === 'TRUE' ? ( + + ) : ( + + )} + ); } -export default PageNavWrapper; +export default NavWrapper; diff --git a/app/scripts/components/common/page-header-uswds/default-config.ts b/app/scripts/components/common/page-header-uswds/default-config.ts new file mode 100644 index 000000000..b2b97d357 --- /dev/null +++ b/app/scripts/components/common/page-header-uswds/default-config.ts @@ -0,0 +1,79 @@ +import { getString, getNavItemsFromVedaConfig } from 'veda'; +import { + InternalNavLink, + ExternalNavLink, + ButtonNavLink, + DropdownNavLink, + NavItemType +} from '$components/common/page-header-uswds/types.d'; + +import { + STORIES_PATH, + DATASETS_PATH, + EXPLORATION_PATH, + ABOUT_PATH +} from '$utils/routes'; + +let defaultMainNavItems: ( + | ExternalNavLink + | InternalNavLink + | DropdownNavLink + | ButtonNavLink +)[] = [ + { + title: 'Data Catalog', + to: DATASETS_PATH, + type: NavItemType.INTERNAL_LINK + }, + { + title: 'Exploration', + to: EXPLORATION_PATH, + type: NavItemType.INTERNAL_LINK + }, + { + title: getString('stories').other, + to: STORIES_PATH, + type: NavItemType.INTERNAL_LINK + } +]; + +if (!!process.env.HUB_URL && !!process.env.HUB_NAME) + defaultMainNavItems = [ + ...defaultMainNavItems, + { + title: process.env.HUB_NAME, + href: process.env.HUB_URL, + type: NavItemType.EXTERNAL_LINK + } as ExternalNavLink + ]; + +let defaultSubNavItems: ( + | ExternalNavLink + | InternalNavLink + | DropdownNavLink + | ButtonNavLink +)[] = [ + { + title: 'About', + to: ABOUT_PATH, + type: NavItemType.INTERNAL_LINK + } +]; + +if (process.env.GOOGLE_FORM) { + defaultSubNavItems = [ + ...defaultSubNavItems, + { + title: 'Contact us', + src: process.env.GOOGLE_FORM, + type: NavItemType.BUTTON + } + ]; +} + +const mainNavItems = + getNavItemsFromVedaConfig()?.mainNavItems ?? defaultMainNavItems; +const subNavItems = + getNavItemsFromVedaConfig()?.subNavItems ?? defaultSubNavItems; + +export { mainNavItems, subNavItems }; diff --git a/app/scripts/components/common/page-header-uswds/index.tsx b/app/scripts/components/common/page-header-uswds/index.tsx new file mode 100644 index 000000000..4c9ddc60a --- /dev/null +++ b/app/scripts/components/common/page-header-uswds/index.tsx @@ -0,0 +1,148 @@ +import React, { ReactElement, useState } from 'react'; +import { Link } from 'react-router-dom'; +import { LinkProperties } from '../card'; +import { USWDSMenu } from '../uswds/header/menu'; +import GoogleForm from '../google-form'; +import { + NavItem, + NavItemType, + InternalNavLink, + ExternalNavLink, + ButtonNavLink +} from './types.d'; +import LogoContainer from './logo-container'; + +import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; +import { USWDSNavDropDownButton } from '$components/common/uswds/header/nav-drop-down-button'; +import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; +import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; +import { USWDSButton } from '$components/common/uswds'; + +const appTitle = process.env.APP_TITLE; +const appVersion = process.env.APP_VERSION; + +interface PageHeaderProps { + mainNavItems: NavItem[]; + subNavItems: NavItem[]; + logo?: ReactElement; + linkProperties: LinkProperties; +} + +export default function PageHeader(props: PageHeaderProps) { + const { mainNavItems, subNavItems, logo: Logo, linkProperties } = props; + const [expanded, setExpanded] = useState(false); + const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); + + const [isOpen, setIsOpen] = useState([false]); + const onToggle = ( + index: number, + setIsOpen: React.Dispatch> + ): void => { + setIsOpen((prevIsOpen) => { + const newIsOpen = [...prevIsOpen]; + newIsOpen[index] = !newIsOpen[index]; + return newIsOpen; + }); + }; + + const CreateNavMenu = (navItems: NavItem[]) => { + return navItems.map((item) => { + if (item.type == NavItemType.DROPDOWN) { + return ( + <> + { + onToggle(0, setIsOpen); + }} + menuId={item.title} + isOpen={isOpen[0]} + label={item.title} + /> + + + ); + } else if ( + item.type == NavItemType.INTERNAL_LINK && + linkProperties.LinkElement + ) { + const path = { + [linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to + }; + const LinkElement = linkProperties.LinkElement; + return ( + + {item.title} + + ); + } else if (item.type == NavItemType.EXTERNAL_LINK) { + return ( + + {item.title} + + ); + } else if ( + item.type == NavItemType.BUTTON && + item.title.toLocaleLowerCase() == 'contact us' + ) { + // @NOTE: This is a workaround right now because we can't provide a callback that returns some jsx element from veda.config.js where this nav config is being defined + // This ideally would just go away once we migrate the instances over and there is no need for the veda.config file. The nav config can just specify the action attribute directly + + // @NOTE: Also GoogleForm component is coupled with the button component already, Ideally it would be broken out, possible @TECH-DEBT but since it is currently coupled... + // we either have to decouple it or we would create another Nav Item Type where it is a more generic component type + return ( + + ); + } else if (item.type == NavItemType.BUTTON) { + return ( + + {item.title} + + ); + } + }); + }; + + return ( + <> + +
+ + + + +
+ + + + ); +} diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header-uswds/logo-container.tsx similarity index 100% rename from app/scripts/components/common/page-header/logo-container.tsx rename to app/scripts/components/common/page-header-uswds/logo-container.tsx diff --git a/app/scripts/components/common/page-header-uswds/types.d.ts b/app/scripts/components/common/page-header-uswds/types.d.ts new file mode 100644 index 000000000..d14eef7bf --- /dev/null +++ b/app/scripts/components/common/page-header-uswds/types.d.ts @@ -0,0 +1,37 @@ +export type AlignmentEnum = 'left' | 'right'; + +export enum NavItemType { + INTERNAL_LINK = 'internalLink', + EXTERNAL_LINK = 'externalLink', + DROPDOWN = 'dropdown', + BUTTON = 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action +} + +export interface InternalNavLink { + title: string; + to: string; + type: NavItemType.INTERNAL_LINK; +} + +export interface ExternalNavLink { + title: string; + href: string; + type: NavItemType.EXTERNAL_LINK; +} + +export type NavLinkItem = ExternalNavLink | InternalNavLink; + +export interface ButtonNavLink { + title: string; + type: NavItemType.BUTTON; + action?: () => void; // @NOTE-SANDRA: This should be required, workaround for now because googleform comes with button + src: string; +} + +export interface DropdownNavLink { + title: string; + type: NavItemType.DROPDOWN; + children: NavLinkItem[]; +} + +export type NavItem = NavLinkItem | ButtonNavLink | DropdownNavLink; diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index 8b2298dc9..5a9cadd87 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -8,7 +8,7 @@ import { ABOUT_PATH } from '$utils/routes'; - let defaultMainNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ +let defaultMainNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ title: 'Data Catalog', to: DATASETS_PATH, type: NavItemType.INTERNAL_LINK @@ -28,7 +28,7 @@ if (!!process.env.HUB_URL && !!process.env.HUB_NAME) defaultMainNavItems = [...d type: NavItemType.EXTERNAL_LINK } as ExternalNavLink]; - let defaultSubNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ +let defaultSubNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ title: 'About', to: ABOUT_PATH, type: NavItemType.INTERNAL_LINK @@ -38,7 +38,7 @@ if (process.env.GOOGLE_FORM) { defaultSubNavItems = [...defaultSubNavItems, { title: 'Contact us', src: process.env.GOOGLE_FORM, - type: NavItemType.BUTTON, + type: NavItemType.BUTTON }]; } diff --git a/app/scripts/components/common/page-header/index-old.tsx b/app/scripts/components/common/page-header/index-old.tsx deleted file mode 100644 index 83cf15661..000000000 --- a/app/scripts/components/common/page-header/index-old.tsx +++ /dev/null @@ -1,340 +0,0 @@ -import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react'; -import styled, { css } from 'styled-components'; -import { - glsp, - listReset, - media, - themeVal, - visuallyHidden -} from '@devseed-ui/theme-provider'; -import { reveal } from '@devseed-ui/animation'; -import { Heading, Overline } from '@devseed-ui/typography'; -import { Button } from '@devseed-ui/button'; -import { - CollecticonHamburgerMenu -} from '@devseed-ui/collecticons'; - -import UnscrollableBody from '../unscrollable-body'; -import { LinkProperties } from '../card'; -import NavMenuItem from './nav-menu-item'; -import { NavItem } from './types'; - -import { variableGlsp } from '$styles/variable-utils'; -import { PAGE_BODY_ID } from '$components/common/layout-root'; -import { useMediaQuery } from '$utils/use-media-query'; -import { HEADER_ID } from '$utils/use-sliding-sticky-header'; - - -const PageHeaderSelf = styled.header` - display: flex; - flex-flow: row nowrap; - align-items: center; - justify-content: space-between; - gap: ${variableGlsp()}; - padding: ${variableGlsp(0.75, 1)}; - background: ${themeVal('color.primary')}; - animation: ${reveal} 0.32s ease 0s 1; - - &, - &:visited { - color: ${themeVal('color.surface')}; - } -`; - - -const GlobalNav = styled.nav<{ revealed: boolean }>` - position: fixed; - inset: 0 0 0 auto; - z-index: 900; - display: flex; - flex-flow: column nowrap; - width: 20rem; - margin-right: -20rem; - transition: margin 0.24s ease 0s; - - ${({ revealed }) => - revealed && - css` - & { - margin-right: 0; - } - `} - - ${media.largeUp` - position: static; - flex: 1; - margin: 0; - } - - &:before { - content: ''; - } - `} - - /* Show page nav backdrop on small screens */ - - &::after { - content: ''; - position: absolute; - inset: 0 0 0 auto; - z-index: -1; - background: transparent; - width: 0; - transition: background 0.64s ease 0s; - - ${({ revealed }) => - revealed && - css` - ${media.mediumDown` - background: ${themeVal('color.base-400a')}; - width: 200vw; - `} - `} - } -`; - -const GlobalNavInner = styled.div` - display: flex; - flex-direction: column; - flex: 1; - background-color: ${themeVal('color.primary')}; - - ${media.mediumDown` - box-shadow: ${themeVal('boxShadow.elevationD')}; - `} -`; - -const GlobalNavHeader = styled.div` - padding: ${variableGlsp(1)}; - box-shadow: inset 0 -1px 0 0 ${themeVal('color.surface-200a')}; - ${media.largeUp` - display: none; - `} -`; - -const GlobalNavTitle = styled(Heading).attrs({ - as: 'span', - size: 'small' -})` - /* styled-component */ -`; - -export const GlobalNavActions = styled.div` - align-self: start; - ${media.largeUp` - display: none; - `} -`; - -export const GlobalNavToggle = styled(Button)` - z-index: 2000; -`; - -const GlobalNavBody = styled.div` - display: flex; - flex: 1; - - .shadow-top { - background: linear-gradient( - to top, - ${themeVal('color.primary-600')}00 0%, - ${themeVal('color.primary-600')} 100% - ); - } - - .shadow-bottom { - background: linear-gradient( - to bottom, - ${themeVal('color.primary-600')}00 0%, - ${themeVal('color.primary-600')} 100% - ); - } -`; - -const GlobalNavBodyInner = styled.div` - display: flex; - flex-direction: column; - flex: 1; - gap: ${variableGlsp()}; - padding: ${variableGlsp(1, 0)}; - - ${media.largeUp` - flex-direction: row; - justify-content: space-between; - padding: 0; - `} -`; - -const NavBlock = styled.div` - display: flex; - flex-flow: column nowrap; - gap: ${glsp(0.25)}; - - ${media.largeUp` - flex-direction: row; - align-items: center; - gap: ${glsp(1.5)}; - `} -`; - -const SROnly = styled.a` - height: 1px; - left: -10000px; - overflow: hidden; - position: absolute; - top: auto; - width: 1px; - color: ${themeVal('color.link')}; - &:focus { - top: 0; - left: 0; - background-color: ${themeVal('color.surface')}; - padding: ${glsp(0.25)}; - height: auto; - width: auto; - } -`; - -const SectionsNavBlock = styled(NavBlock)` - /* styled-component */ -`; - -const GlobalNavBlockTitle = styled(Overline).attrs({ - as: 'span' -})` - ${visuallyHidden} - display: block; - padding: ${variableGlsp(1, 1, 0.25, 1)}; - color: currentColor; - opacity: 0.64; - - ${media.largeUp` - padding: 0; - `} -`; - -const GlobalMenu = styled.ul` - ${listReset()} - display: flex; - flex-flow: column nowrap; - gap: ${glsp(0.5)}; - - ${media.largeUp` - flex-direction: row; - justify-content: flex-start; - align-items: center; - gap: ${glsp(1.5)}; - `} -`; - -interface PageHeaderProps { - mainNavItems: NavItem[]; - subNavItems: NavItem[]; - logo: ReactElement; - linkProperties: LinkProperties; -} - -function PageHeader(props: PageHeaderProps) { - const { mainNavItems, subNavItems, logo, linkProperties } = props; - const { isMediumDown } = useMediaQuery(); - const [globalNavRevealed, setGlobalNavRevealed] = useState(false); - - const globalNavBodyRef = useRef(null); - // Click listener for the whole global nav body so we can close it when clicking - // the overlay on medium down media query. - const onGlobalNavClick = useCallback((e) => { - if (!globalNavBodyRef.current?.contains(e.target)) { - setGlobalNavRevealed(false); - } - }, []); - - useEffect(() => { - // Close global nav when media query changes. - // NOTE: isMediumDown is returning document.body's width, not the whole window width - // which conflicts with how mediaquery decides the width. - // JSX element susing isMediumDown is also protected with css logic because of this. - // ex. Look at GlobalNavActions - if (!isMediumDown) setGlobalNavRevealed(false); - }, [isMediumDown]); - - const closeNavOnClick = useCallback(() => { - setGlobalNavRevealed(false); - }, []); - - function skipNav(e) { - // a tag won't appear for keyboard focus without href - // so we are preventing the default behaviour of a link here - e.preventDefault(); - // Then find a next focusable element in pagebody,focus it. - const pageBody = document.getElementById(PAGE_BODY_ID); - if (pageBody) { - pageBody.focus(); - } - } - - return ( - <> - Skip to main content - - {globalNavRevealed && isMediumDown && } - {logo} - {isMediumDown && ( - - setGlobalNavRevealed((v) => !v)} - active={globalNavRevealed} - > - - - - )} - - - {isMediumDown && ( - <> - - - - - )} - - - - Global - - {mainNavItems.map((item) => { - return ; - })} - - - - Meta - - {subNavItems.map((item) => { - return ; - })} - - - - - - - - - ); -} - -export default PageHeader; diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 53207da31..c5ddd82af 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,21 +1,14 @@ import React, { ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; + import { LinkProperties } from '$types/veda'; -import { USWDSMenu } from '../uswds/header/menu'; -import GoogleForm from '../google-form'; -import { - NavItem, - NavItemType, - InternalNavLink, - ExternalNavLink, - ButtonNavLink -} from './types'; +import { NavItem } from './types'; import LogoContainer from './logo-container'; +import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; -import { USWDSNavDropDownButton } from '$components/common/uswds/header/nav-drop-down-button'; import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; -import { USWDSButton } from '$components/common/uswds'; +import './styles.scss'; const appTitle = process.env.APP_TITLE; const appVersion = process.env.APP_VERSION; @@ -25,101 +18,42 @@ interface PageHeaderProps { subNavItems: NavItem[]; logo?: ReactElement; linkProperties: LinkProperties; + mode?: 'dark' | 'light'; } -export default function PageHeader(props: PageHeaderProps) { - const { mainNavItems, subNavItems, logo: Logo, linkProperties } = props; - const [expanded, setExpanded] = useState(false); - const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); +const PageHeader: React.FC = ({ + mainNavItems, + subNavItems, + logo: Logo, + linkProperties, + mode +}) => { + //@TODO: toggle expanded on window resize! Or on click anywhere? + // weird, should be implemented on the library side of things, see https://vscode.dev/github/NASA-IMPACT/veda-ui/blob/1137-implement-new-ds-page-header/node_modules/%40uswds/uswds/packages/usa-header/src/index.js#L155-L156 - const [isOpen, setIsOpen] = useState([false]); - const onToggle = ( - index: number, - setIsOpen: React.Dispatch> - ): void => { - setIsOpen((prevIsOpen) => { - const newIsOpen = [...prevIsOpen]; - newIsOpen[index] = !newIsOpen[index]; - return newIsOpen; + const [expanded, setExpanded] = useState(false); + const toggleExpansion = (): void => + setExpanded((prvExpanded) => { + return !prvExpanded; }); - }; - const CreateNavMenu = (navItems: NavItem[]) => { - return navItems.map((item) => { - if (item.type == NavItemType.DROPDOWN) { - return ( - <> - { - onToggle(0, setIsOpen); - }} - menuId={item.title} - isOpen={isOpen[0]} - label={item.title} - /> - - - ); - } else if ( - item.type == NavItemType.INTERNAL_LINK && - linkProperties.LinkElement - ) { - const path = { - [linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to - }; - const LinkElement = linkProperties.LinkElement; - return ( - - {item.title} - - ); - } else if (item.type == NavItemType.EXTERNAL_LINK) { - return ( - - {item.title} - - ); - } else if ( - item.type == NavItemType.BUTTON && - item.title.toLocaleLowerCase() == 'contact us' - ) { - // @NOTE: This is a workaround right now because we can't provide a callback that returns some jsx element from veda.config.js where this nav config is being defined - // This ideally would just go away once we migrate the instances over and there is no need for the veda.config file. The nav config can just specify the action attribute directly + const [isOpen, setIsOpen] = useState( + mainNavItems.map(() => false) + ); - // @NOTE: Also GoogleForm component is coupled with the button component already, Ideally it would be broken out, possible @TECH-DEBT but since it is currently coupled... - // we either have to decouple it or we would create another Nav Item Type where it is a more generic component type - return ( - - ); - } else if (item.type == NavItemType.BUTTON) { - return ( - - {item.title} - - ); - } - }); - }; + const primaryItems = createDynamicNavMenuList( + mainNavItems, + linkProperties, + isOpen, + setIsOpen + ); + const secondaryItems = createDynamicNavMenuList(subNavItems, linkProperties); + // @TODO: we should close the menu when the user clicks on a link (internal or other cta) + const themeMode = mode ? `mode-${mode}` : 'mode-light'; return ( <> - +
- +
); -} +}; + +export default PageHeader; \ No newline at end of file diff --git a/app/scripts/components/common/page-header/logo.tsx b/app/scripts/components/common/page-header/logo.tsx index 9567293ca..383539ed4 100644 --- a/app/scripts/components/common/page-header/logo.tsx +++ b/app/scripts/components/common/page-header/logo.tsx @@ -25,16 +25,28 @@ export const Brand = styled.div` } #nasa-logo-neg-mono { - opacity: 0; + opacity: 1; transition: all 0.32s ease 0s; } #nasa-logo-pos { - opacity: 1; + opacity: 0; transform: translate(0, -100%); transition: all 0.32s ease 0s; } + &:hover { + opacity: 1; + + #nasa-logo-neg-mono { + opacity: 0; + } + + #nasa-logo-pos { + opacity: 1; + } + } + svg { grid-row: 1 / span 2; height: 2.5rem; @@ -86,33 +98,19 @@ export const PageTitleSecLink = styled.a` `} `; -// @TODO: Reactor to use new USWDS components -export default function Logo({ - linkProperties -}: { - linkProperties: LinkProperties; -}) { - const LinkElement: ComponentType = - linkProperties.LinkElement as ComponentType; +export default function Logo ({ linkProperties }: { linkProperties: LinkProperties }) { + const LinkElement: ComponentType = linkProperties.LinkElement as ComponentType; return ( - - - - - Earthdata {appTitle} - - - , - [linkProperties.pathAttributeKeyName]: '/development' - }} - > - Beta - - - - - ); -} + + + + + Earthdata {appTitle} + + + , [linkProperties.pathAttributeKeyName]: '/development'}}>Beta + + + ); +} \ No newline at end of file diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header/nav-menu-item.tsx index b429e25c5..ab5fbf757 100644 --- a/app/scripts/components/common/page-header/nav-menu-item.tsx +++ b/app/scripts/components/common/page-header/nav-menu-item.tsx @@ -17,8 +17,6 @@ import GlobalMenuLinkCSS from '$styles/menu-link'; import { useMediaQuery } from '$utils/use-media-query'; import { LinkProperties } from '$types/veda'; -// @NOTE: likely able to deprecate this file with the new page-header -// @DEPRECATE: Look at note above const rgbaFixed = rgba as any; @@ -130,8 +128,7 @@ export default function NavMenuItem({ item, alignment, onClick, linkProperties } ); - } - else if (type === NavItemType.BUTTON && title.toLocaleLowerCase() == 'contact us') { + } else if (type === NavItemType.BUTTON) { return (
    • ); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition } else if (type === NavItemType.DROPDOWN) { diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 8a53ffc8e..55dc24742 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -24,7 +24,6 @@ export type NavLinkItem = (ExternalNavLink | InternalNavLink); export interface ButtonNavLink { title: string; type: NavItemType.BUTTON; - action?: () => void; // @NOTE-SANDRA: This should be required, workaround for now because googleform comes with button src: string; } diff --git a/app/scripts/index.ts b/app/scripts/index.ts index 7a5e9c3b1..3400f21ab 100644 --- a/app/scripts/index.ts +++ b/app/scripts/index.ts @@ -16,8 +16,7 @@ import { PageMainContent } from '$styles/page'; import PageHero from '$components/common/page-hero'; import StoriesHubContent from '$components/stories/hub/hub-content'; import { useFiltersWithQS } from '$components/common/catalog/controls/hooks/use-filters-with-query'; -import PageHeader from '$components/common/page-header/index-old'; -import LogoContainer from '$components/common/page-header/logo-container'; +import PageHeader from '$components/common/page-header'; import type { NavItem, InternalNavLink, @@ -63,7 +62,6 @@ export { ReactQueryProvider, EnvConfigProvider, StoriesHubContent, - LogoContainer, ExplorationAndAnalysis, DatasetSelectorModal, From 3593fe1144effe60bc1793a3afbf712721a132d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 12 Nov 2024 11:39:36 +0100 Subject: [PATCH 12/87] Fix logo in new header --- .../components/common/nasa-logo-color.js | 217 ++++++++++++++++++ .../components/common/nasa-logo-mono.js | 217 ------------------ app/scripts/components/common/nav-wrapper.js | 2 + 3 files changed, 219 insertions(+), 217 deletions(-) create mode 100644 app/scripts/components/common/nasa-logo-color.js delete mode 100644 app/scripts/components/common/nasa-logo-mono.js diff --git a/app/scripts/components/common/nasa-logo-color.js b/app/scripts/components/common/nasa-logo-color.js new file mode 100644 index 000000000..b85ff9b3b --- /dev/null +++ b/app/scripts/components/common/nasa-logo-color.js @@ -0,0 +1,217 @@ +import React from 'react'; + +export default function NasaLogoColor() { + return ( + + NASA + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/app/scripts/components/common/nasa-logo-mono.js b/app/scripts/components/common/nasa-logo-mono.js deleted file mode 100644 index 28486e9fe..000000000 --- a/app/scripts/components/common/nasa-logo-mono.js +++ /dev/null @@ -1,217 +0,0 @@ -import React from 'react'; - -export default function NasaLogoMono() { - return ( - - NASA - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 8062b1f26..9c0dfced1 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -6,6 +6,7 @@ import PageHeader from './page-header'; import PageHeaderUSWDS from './page-header-uswds'; import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps'; +import NasaLogoColor from './nasa-logo-color'; import { HEADER_WRAPPER_ID, HEADER_TRANSITION_DURATION @@ -39,6 +40,7 @@ function NavWrapper(props) { {process.env.FEATURE_FLAG_USWDS === 'TRUE' ? ( } // Override the composition from old page-header with simple svg linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} /> ) : ( From 5e8fae092303c55c71cc0cba688f5f3ab0ffa01c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 12 Nov 2024 12:26:55 +0100 Subject: [PATCH 13/87] Avoid nav wrapper for uswds header as the sliding header did not properly work with the USWDS components --- app/scripts/components/common/nav-wrapper.js | 24 +++++++++----------- 1 file changed, 11 insertions(+), 13 deletions(-) diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 9c0dfced1..25e23392f 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -31,24 +31,22 @@ const NavWrapperContainer = styled.div` function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); - return ( + return process.env.FEATURE_FLAG_USWDS === 'TRUE' ? ( + } // Override the composition from old page-header with simple svg + linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} + /> + ) : ( - {process.env.FEATURE_FLAG_USWDS === 'TRUE' ? ( - } // Override the composition from old page-header with simple svg - linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} - /> - ) : ( - - )} + ); } From 0a8f153fd49d211e6b8d94d25a2975f1e44f4b55 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 12 Nov 2024 16:46:56 -0500 Subject: [PATCH 14/87] update FF & update directories --- .env | 2 +- app/scripts/components/common/google-form.tsx | 9 - .../components/common/layout-root/index.tsx | 2 +- app/scripts/components/common/nav-wrapper.js | 10 +- .../common/page-header-legacy/index.tsx | 340 ++++++++++++++++++ .../logo.tsx | 0 .../nav-menu-item.tsx | 0 .../common/page-header-legacy/types.ts | 36 ++ .../page-header-uswds/default-config.ts | 79 ---- .../common/page-header-uswds/index.tsx | 148 -------- .../common/page-header-uswds/types.d.ts | 37 -- .../common/page-header/default-config.ts | 98 +++-- .../components/common/page-header/index.tsx | 2 +- .../logo-container.tsx | 0 .../components/common/page-header/types.ts | 13 +- 15 files changed, 454 insertions(+), 322 deletions(-) create mode 100644 app/scripts/components/common/page-header-legacy/index.tsx rename app/scripts/components/common/{page-header => page-header-legacy}/logo.tsx (100%) rename app/scripts/components/common/{page-header => page-header-legacy}/nav-menu-item.tsx (100%) create mode 100644 app/scripts/components/common/page-header-legacy/types.ts delete mode 100644 app/scripts/components/common/page-header-uswds/default-config.ts delete mode 100644 app/scripts/components/common/page-header-uswds/index.tsx delete mode 100644 app/scripts/components/common/page-header-uswds/types.d.ts rename app/scripts/components/common/{page-header-uswds => page-header}/logo-container.tsx (100%) diff --git a/.env b/.env index 9f6c1f1e2..f53e49a5b 100644 --- a/.env +++ b/.env @@ -13,4 +13,4 @@ API_STAC_ENDPOINT='https://staging.openveda.cloud/api/stac' GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f88hX8RZ4Qef7qBsTtDqxjTSkg/viewform?embedded=true' SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE' -FEATURE_FLAG_USWDS= 'TRUE' +ENABLE_USWDS_PAGE_HEADER=true # Enables the refactor page header component that uses the USWDS design system diff --git a/app/scripts/components/common/google-form.tsx b/app/scripts/components/common/google-form.tsx index e07bffe47..67bb10468 100644 --- a/app/scripts/components/common/google-form.tsx +++ b/app/scripts/components/common/google-form.tsx @@ -1,24 +1,16 @@ import React from 'react'; import styled from 'styled-components'; -import { Button } from '@devseed-ui/button'; import { Modal } from '@devseed-ui/modal'; -import { media, themeVal } from '@devseed-ui/theme-provider'; import { USWDSButton, } from '$components/common/uswds'; import { useFeedbackModal } from './layout-root'; -import GlobalMenuLinkCSS from '$styles/menu-link'; - const StyledGoogleForm = styled.iframe` width: 100%; `; -interface BtnMediaProps { - active?: boolean; -} - const GoogleForm: React.FC<{ title: string, src: string }> = (props) => { const { title, src } = props; const { isRevealed, show, hide } = useFeedbackModal(); @@ -27,7 +19,6 @@ const GoogleForm: React.FC<{ title: string, src: string }> = (props) => { <> diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx index 6fe9add22..9f67192bb 100644 --- a/app/scripts/components/common/layout-root/index.tsx +++ b/app/scripts/components/common/layout-root/index.tsx @@ -21,7 +21,7 @@ import { LayoutRootContext } from './context'; import { setGoogleTagManager } from '$utils/use-google-tag-manager'; import NavWrapper from '$components/common/nav-wrapper'; -import Logo from '$components/common/page-header/logo'; +import Logo from '$components/common/page-header-legacy/logo'; import { mainNavItems, subNavItems diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 25e23392f..3fc71e8eb 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -2,10 +2,9 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { themeVal } from '@devseed-ui/theme-provider'; import { NavLink } from 'react-router-dom'; +import { default as PageHeaderLegacy } from './page-header-legacy'; import PageHeader from './page-header'; -import PageHeaderUSWDS from './page-header-uswds'; import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps'; - import NasaLogoColor from './nasa-logo-color'; import { HEADER_WRAPPER_ID, @@ -31,8 +30,9 @@ const NavWrapperContainer = styled.div` function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); - return process.env.FEATURE_FLAG_USWDS === 'TRUE' ? ( - } // Override the composition from old page-header with simple svg linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} @@ -43,7 +43,7 @@ function NavWrapper(props) { shouldSlideHeader={isHeaderHidden} headerHeight={headerHeight} > - diff --git a/app/scripts/components/common/page-header-legacy/index.tsx b/app/scripts/components/common/page-header-legacy/index.tsx new file mode 100644 index 000000000..83cf15661 --- /dev/null +++ b/app/scripts/components/common/page-header-legacy/index.tsx @@ -0,0 +1,340 @@ +import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react'; +import styled, { css } from 'styled-components'; +import { + glsp, + listReset, + media, + themeVal, + visuallyHidden +} from '@devseed-ui/theme-provider'; +import { reveal } from '@devseed-ui/animation'; +import { Heading, Overline } from '@devseed-ui/typography'; +import { Button } from '@devseed-ui/button'; +import { + CollecticonHamburgerMenu +} from '@devseed-ui/collecticons'; + +import UnscrollableBody from '../unscrollable-body'; +import { LinkProperties } from '../card'; +import NavMenuItem from './nav-menu-item'; +import { NavItem } from './types'; + +import { variableGlsp } from '$styles/variable-utils'; +import { PAGE_BODY_ID } from '$components/common/layout-root'; +import { useMediaQuery } from '$utils/use-media-query'; +import { HEADER_ID } from '$utils/use-sliding-sticky-header'; + + +const PageHeaderSelf = styled.header` + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + gap: ${variableGlsp()}; + padding: ${variableGlsp(0.75, 1)}; + background: ${themeVal('color.primary')}; + animation: ${reveal} 0.32s ease 0s 1; + + &, + &:visited { + color: ${themeVal('color.surface')}; + } +`; + + +const GlobalNav = styled.nav<{ revealed: boolean }>` + position: fixed; + inset: 0 0 0 auto; + z-index: 900; + display: flex; + flex-flow: column nowrap; + width: 20rem; + margin-right: -20rem; + transition: margin 0.24s ease 0s; + + ${({ revealed }) => + revealed && + css` + & { + margin-right: 0; + } + `} + + ${media.largeUp` + position: static; + flex: 1; + margin: 0; + } + + &:before { + content: ''; + } + `} + + /* Show page nav backdrop on small screens */ + + &::after { + content: ''; + position: absolute; + inset: 0 0 0 auto; + z-index: -1; + background: transparent; + width: 0; + transition: background 0.64s ease 0s; + + ${({ revealed }) => + revealed && + css` + ${media.mediumDown` + background: ${themeVal('color.base-400a')}; + width: 200vw; + `} + `} + } +`; + +const GlobalNavInner = styled.div` + display: flex; + flex-direction: column; + flex: 1; + background-color: ${themeVal('color.primary')}; + + ${media.mediumDown` + box-shadow: ${themeVal('boxShadow.elevationD')}; + `} +`; + +const GlobalNavHeader = styled.div` + padding: ${variableGlsp(1)}; + box-shadow: inset 0 -1px 0 0 ${themeVal('color.surface-200a')}; + ${media.largeUp` + display: none; + `} +`; + +const GlobalNavTitle = styled(Heading).attrs({ + as: 'span', + size: 'small' +})` + /* styled-component */ +`; + +export const GlobalNavActions = styled.div` + align-self: start; + ${media.largeUp` + display: none; + `} +`; + +export const GlobalNavToggle = styled(Button)` + z-index: 2000; +`; + +const GlobalNavBody = styled.div` + display: flex; + flex: 1; + + .shadow-top { + background: linear-gradient( + to top, + ${themeVal('color.primary-600')}00 0%, + ${themeVal('color.primary-600')} 100% + ); + } + + .shadow-bottom { + background: linear-gradient( + to bottom, + ${themeVal('color.primary-600')}00 0%, + ${themeVal('color.primary-600')} 100% + ); + } +`; + +const GlobalNavBodyInner = styled.div` + display: flex; + flex-direction: column; + flex: 1; + gap: ${variableGlsp()}; + padding: ${variableGlsp(1, 0)}; + + ${media.largeUp` + flex-direction: row; + justify-content: space-between; + padding: 0; + `} +`; + +const NavBlock = styled.div` + display: flex; + flex-flow: column nowrap; + gap: ${glsp(0.25)}; + + ${media.largeUp` + flex-direction: row; + align-items: center; + gap: ${glsp(1.5)}; + `} +`; + +const SROnly = styled.a` + height: 1px; + left: -10000px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; + color: ${themeVal('color.link')}; + &:focus { + top: 0; + left: 0; + background-color: ${themeVal('color.surface')}; + padding: ${glsp(0.25)}; + height: auto; + width: auto; + } +`; + +const SectionsNavBlock = styled(NavBlock)` + /* styled-component */ +`; + +const GlobalNavBlockTitle = styled(Overline).attrs({ + as: 'span' +})` + ${visuallyHidden} + display: block; + padding: ${variableGlsp(1, 1, 0.25, 1)}; + color: currentColor; + opacity: 0.64; + + ${media.largeUp` + padding: 0; + `} +`; + +const GlobalMenu = styled.ul` + ${listReset()} + display: flex; + flex-flow: column nowrap; + gap: ${glsp(0.5)}; + + ${media.largeUp` + flex-direction: row; + justify-content: flex-start; + align-items: center; + gap: ${glsp(1.5)}; + `} +`; + +interface PageHeaderProps { + mainNavItems: NavItem[]; + subNavItems: NavItem[]; + logo: ReactElement; + linkProperties: LinkProperties; +} + +function PageHeader(props: PageHeaderProps) { + const { mainNavItems, subNavItems, logo, linkProperties } = props; + const { isMediumDown } = useMediaQuery(); + const [globalNavRevealed, setGlobalNavRevealed] = useState(false); + + const globalNavBodyRef = useRef(null); + // Click listener for the whole global nav body so we can close it when clicking + // the overlay on medium down media query. + const onGlobalNavClick = useCallback((e) => { + if (!globalNavBodyRef.current?.contains(e.target)) { + setGlobalNavRevealed(false); + } + }, []); + + useEffect(() => { + // Close global nav when media query changes. + // NOTE: isMediumDown is returning document.body's width, not the whole window width + // which conflicts with how mediaquery decides the width. + // JSX element susing isMediumDown is also protected with css logic because of this. + // ex. Look at GlobalNavActions + if (!isMediumDown) setGlobalNavRevealed(false); + }, [isMediumDown]); + + const closeNavOnClick = useCallback(() => { + setGlobalNavRevealed(false); + }, []); + + function skipNav(e) { + // a tag won't appear for keyboard focus without href + // so we are preventing the default behaviour of a link here + e.preventDefault(); + // Then find a next focusable element in pagebody,focus it. + const pageBody = document.getElementById(PAGE_BODY_ID); + if (pageBody) { + pageBody.focus(); + } + } + + return ( + <> + Skip to main content + + {globalNavRevealed && isMediumDown && } + {logo} + {isMediumDown && ( + + setGlobalNavRevealed((v) => !v)} + active={globalNavRevealed} + > + + + + )} + + + {isMediumDown && ( + <> + + + + + )} + + + + Global + + {mainNavItems.map((item) => { + return ; + })} + + + + Meta + + {subNavItems.map((item) => { + return ; + })} + + + + + + + + + ); +} + +export default PageHeader; diff --git a/app/scripts/components/common/page-header/logo.tsx b/app/scripts/components/common/page-header-legacy/logo.tsx similarity index 100% rename from app/scripts/components/common/page-header/logo.tsx rename to app/scripts/components/common/page-header-legacy/logo.tsx diff --git a/app/scripts/components/common/page-header/nav-menu-item.tsx b/app/scripts/components/common/page-header-legacy/nav-menu-item.tsx similarity index 100% rename from app/scripts/components/common/page-header/nav-menu-item.tsx rename to app/scripts/components/common/page-header-legacy/nav-menu-item.tsx diff --git a/app/scripts/components/common/page-header-legacy/types.ts b/app/scripts/components/common/page-header-legacy/types.ts new file mode 100644 index 000000000..55dc24742 --- /dev/null +++ b/app/scripts/components/common/page-header-legacy/types.ts @@ -0,0 +1,36 @@ +export type AlignmentEnum = 'left' | 'right'; + +export enum NavItemType { + INTERNAL_LINK= 'internalLink', + EXTERNAL_LINK= 'externalLink', + DROPDOWN= 'dropdown', + BUTTON= 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action +} + +export interface InternalNavLink { + title: string; + to: string; + type: NavItemType.INTERNAL_LINK; +} + +export interface ExternalNavLink { + title: string; + href: string; + type: NavItemType.EXTERNAL_LINK; +} + +export type NavLinkItem = (ExternalNavLink | InternalNavLink); + +export interface ButtonNavLink { + title: string; + type: NavItemType.BUTTON; + src: string; +} + +export interface DropdownNavLink { + title: string; + type: NavItemType.DROPDOWN; + children: NavLinkItem[]; +} + +export type NavItem = (NavLinkItem | ButtonNavLink | DropdownNavLink); \ No newline at end of file diff --git a/app/scripts/components/common/page-header-uswds/default-config.ts b/app/scripts/components/common/page-header-uswds/default-config.ts deleted file mode 100644 index b2b97d357..000000000 --- a/app/scripts/components/common/page-header-uswds/default-config.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { getString, getNavItemsFromVedaConfig } from 'veda'; -import { - InternalNavLink, - ExternalNavLink, - ButtonNavLink, - DropdownNavLink, - NavItemType -} from '$components/common/page-header-uswds/types.d'; - -import { - STORIES_PATH, - DATASETS_PATH, - EXPLORATION_PATH, - ABOUT_PATH -} from '$utils/routes'; - -let defaultMainNavItems: ( - | ExternalNavLink - | InternalNavLink - | DropdownNavLink - | ButtonNavLink -)[] = [ - { - title: 'Data Catalog', - to: DATASETS_PATH, - type: NavItemType.INTERNAL_LINK - }, - { - title: 'Exploration', - to: EXPLORATION_PATH, - type: NavItemType.INTERNAL_LINK - }, - { - title: getString('stories').other, - to: STORIES_PATH, - type: NavItemType.INTERNAL_LINK - } -]; - -if (!!process.env.HUB_URL && !!process.env.HUB_NAME) - defaultMainNavItems = [ - ...defaultMainNavItems, - { - title: process.env.HUB_NAME, - href: process.env.HUB_URL, - type: NavItemType.EXTERNAL_LINK - } as ExternalNavLink - ]; - -let defaultSubNavItems: ( - | ExternalNavLink - | InternalNavLink - | DropdownNavLink - | ButtonNavLink -)[] = [ - { - title: 'About', - to: ABOUT_PATH, - type: NavItemType.INTERNAL_LINK - } -]; - -if (process.env.GOOGLE_FORM) { - defaultSubNavItems = [ - ...defaultSubNavItems, - { - title: 'Contact us', - src: process.env.GOOGLE_FORM, - type: NavItemType.BUTTON - } - ]; -} - -const mainNavItems = - getNavItemsFromVedaConfig()?.mainNavItems ?? defaultMainNavItems; -const subNavItems = - getNavItemsFromVedaConfig()?.subNavItems ?? defaultSubNavItems; - -export { mainNavItems, subNavItems }; diff --git a/app/scripts/components/common/page-header-uswds/index.tsx b/app/scripts/components/common/page-header-uswds/index.tsx deleted file mode 100644 index 4c9ddc60a..000000000 --- a/app/scripts/components/common/page-header-uswds/index.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React, { ReactElement, useState } from 'react'; -import { Link } from 'react-router-dom'; -import { LinkProperties } from '../card'; -import { USWDSMenu } from '../uswds/header/menu'; -import GoogleForm from '../google-form'; -import { - NavItem, - NavItemType, - InternalNavLink, - ExternalNavLink, - ButtonNavLink -} from './types.d'; -import LogoContainer from './logo-container'; - -import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; -import { USWDSNavDropDownButton } from '$components/common/uswds/header/nav-drop-down-button'; -import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; -import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; -import { USWDSButton } from '$components/common/uswds'; - -const appTitle = process.env.APP_TITLE; -const appVersion = process.env.APP_VERSION; - -interface PageHeaderProps { - mainNavItems: NavItem[]; - subNavItems: NavItem[]; - logo?: ReactElement; - linkProperties: LinkProperties; -} - -export default function PageHeader(props: PageHeaderProps) { - const { mainNavItems, subNavItems, logo: Logo, linkProperties } = props; - const [expanded, setExpanded] = useState(false); - const onClick = (): void => setExpanded((prvExpanded) => !prvExpanded); - - const [isOpen, setIsOpen] = useState([false]); - const onToggle = ( - index: number, - setIsOpen: React.Dispatch> - ): void => { - setIsOpen((prevIsOpen) => { - const newIsOpen = [...prevIsOpen]; - newIsOpen[index] = !newIsOpen[index]; - return newIsOpen; - }); - }; - - const CreateNavMenu = (navItems: NavItem[]) => { - return navItems.map((item) => { - if (item.type == NavItemType.DROPDOWN) { - return ( - <> - { - onToggle(0, setIsOpen); - }} - menuId={item.title} - isOpen={isOpen[0]} - label={item.title} - /> - - - ); - } else if ( - item.type == NavItemType.INTERNAL_LINK && - linkProperties.LinkElement - ) { - const path = { - [linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to - }; - const LinkElement = linkProperties.LinkElement; - return ( - - {item.title} - - ); - } else if (item.type == NavItemType.EXTERNAL_LINK) { - return ( - - {item.title} - - ); - } else if ( - item.type == NavItemType.BUTTON && - item.title.toLocaleLowerCase() == 'contact us' - ) { - // @NOTE: This is a workaround right now because we can't provide a callback that returns some jsx element from veda.config.js where this nav config is being defined - // This ideally would just go away once we migrate the instances over and there is no need for the veda.config file. The nav config can just specify the action attribute directly - - // @NOTE: Also GoogleForm component is coupled with the button component already, Ideally it would be broken out, possible @TECH-DEBT but since it is currently coupled... - // we either have to decouple it or we would create another Nav Item Type where it is a more generic component type - return ( - - ); - } else if (item.type == NavItemType.BUTTON) { - return ( - - {item.title} - - ); - } - }); - }; - - return ( - <> - -
    - - - - -
    - -     - - ); -} diff --git a/app/scripts/components/common/page-header-uswds/types.d.ts b/app/scripts/components/common/page-header-uswds/types.d.ts deleted file mode 100644 index d14eef7bf..000000000 --- a/app/scripts/components/common/page-header-uswds/types.d.ts +++ /dev/null @@ -1,37 +0,0 @@ -export type AlignmentEnum = 'left' | 'right'; - -export enum NavItemType { - INTERNAL_LINK = 'internalLink', - EXTERNAL_LINK = 'externalLink', - DROPDOWN = 'dropdown', - BUTTON = 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action -} - -export interface InternalNavLink { - title: string; - to: string; - type: NavItemType.INTERNAL_LINK; -} - -export interface ExternalNavLink { - title: string; - href: string; - type: NavItemType.EXTERNAL_LINK; -} - -export type NavLinkItem = ExternalNavLink | InternalNavLink; - -export interface ButtonNavLink { - title: string; - type: NavItemType.BUTTON; - action?: () => void; // @NOTE-SANDRA: This should be required, workaround for now because googleform comes with button - src: string; -} - -export interface DropdownNavLink { - title: string; - type: NavItemType.DROPDOWN; - children: NavLinkItem[]; -} - -export type NavItem = NavLinkItem | ButtonNavLink | DropdownNavLink; diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index 5a9cadd87..fa650eafb 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -1,5 +1,11 @@ import { getString, getNavItemsFromVedaConfig } from 'veda'; -import { InternalNavLink, ExternalNavLink, ButtonNavLink, DropdownNavLink, NavItemType } from '$components/common/page-header/types'; +import { + InternalNavLink, + ExternalNavLink, + ButtonNavLink, + DropdownNavLink, + NavItemType +} from '$components/common/page-header/types'; import { STORIES_PATH, @@ -8,44 +14,66 @@ import { ABOUT_PATH } from '$utils/routes'; -let defaultMainNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ - title: 'Data Catalog', - to: DATASETS_PATH, - type: NavItemType.INTERNAL_LINK -}, { - title: 'Exploration', - to: EXPLORATION_PATH, - type: NavItemType.INTERNAL_LINK -}, { - title: getString('stories').other, - to: STORIES_PATH, - type: NavItemType.INTERNAL_LINK -}]; +let defaultMainNavItems: ( + | ExternalNavLink + | InternalNavLink + | DropdownNavLink + | ButtonNavLink +)[] = [ + { + title: 'Data Catalog', + to: DATASETS_PATH, + type: NavItemType.INTERNAL_LINK + }, + { + title: 'Exploration', + to: EXPLORATION_PATH, + type: NavItemType.INTERNAL_LINK + }, + { + title: getString('stories').other, + to: STORIES_PATH, + type: NavItemType.INTERNAL_LINK + } +]; -if (!!process.env.HUB_URL && !!process.env.HUB_NAME) defaultMainNavItems = [...defaultMainNavItems, { - title: process.env.HUB_NAME, - href: process.env.HUB_URL, - type: NavItemType.EXTERNAL_LINK -} as ExternalNavLink]; +if (!!process.env.HUB_URL && !!process.env.HUB_NAME) + defaultMainNavItems = [ + ...defaultMainNavItems, + { + title: process.env.HUB_NAME, + href: process.env.HUB_URL, + type: NavItemType.EXTERNAL_LINK + } as ExternalNavLink + ]; -let defaultSubNavItems:(ExternalNavLink | InternalNavLink | DropdownNavLink | ButtonNavLink)[] = [{ - title: 'About', - to: ABOUT_PATH, - type: NavItemType.INTERNAL_LINK -}]; +let defaultSubNavItems: ( + | ExternalNavLink + | InternalNavLink + | DropdownNavLink + | ButtonNavLink +)[] = [ + { + title: 'About', + to: ABOUT_PATH, + type: NavItemType.INTERNAL_LINK + } +]; if (process.env.GOOGLE_FORM) { - defaultSubNavItems = [...defaultSubNavItems, { - title: 'Contact us', - src: process.env.GOOGLE_FORM, - type: NavItemType.BUTTON - }]; + defaultSubNavItems = [ + ...defaultSubNavItems, + { + title: 'Contact us', + src: process.env.GOOGLE_FORM, + type: NavItemType.BUTTON + } + ]; } -const mainNavItems = getNavItemsFromVedaConfig()?.mainNavItems?? defaultMainNavItems; -const subNavItems = getNavItemsFromVedaConfig()?.subNavItems?? defaultSubNavItems; +const mainNavItems = + getNavItemsFromVedaConfig()?.mainNavItems ?? defaultMainNavItems; +const subNavItems = + getNavItemsFromVedaConfig()?.subNavItems ?? defaultSubNavItems; -export { - mainNavItems, - subNavItems -}; \ No newline at end of file +export { mainNavItems, subNavItems }; diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index c5ddd82af..1c327ace4 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; -import { LinkProperties } from '$types/veda'; +import { LinkProperties } from '@types/veda'; import { NavItem } from './types'; import LogoContainer from './logo-container'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; diff --git a/app/scripts/components/common/page-header-uswds/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx similarity index 100% rename from app/scripts/components/common/page-header-uswds/logo-container.tsx rename to app/scripts/components/common/page-header/logo-container.tsx diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 55dc24742..d14eef7bf 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -1,10 +1,10 @@ export type AlignmentEnum = 'left' | 'right'; export enum NavItemType { - INTERNAL_LINK= 'internalLink', - EXTERNAL_LINK= 'externalLink', - DROPDOWN= 'dropdown', - BUTTON= 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action + INTERNAL_LINK = 'internalLink', + EXTERNAL_LINK = 'externalLink', + DROPDOWN = 'dropdown', + BUTTON = 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action } export interface InternalNavLink { @@ -19,11 +19,12 @@ export interface ExternalNavLink { type: NavItemType.EXTERNAL_LINK; } -export type NavLinkItem = (ExternalNavLink | InternalNavLink); +export type NavLinkItem = ExternalNavLink | InternalNavLink; export interface ButtonNavLink { title: string; type: NavItemType.BUTTON; + action?: () => void; // @NOTE-SANDRA: This should be required, workaround for now because googleform comes with button src: string; } @@ -33,4 +34,4 @@ export interface DropdownNavLink { children: NavLinkItem[]; } -export type NavItem = (NavLinkItem | ButtonNavLink | DropdownNavLink); \ No newline at end of file +export type NavItem = NavLinkItem | ButtonNavLink | DropdownNavLink; From 1f0d3e471cf447c37a1c6a33a593faa626f66e9c Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Wed, 13 Nov 2024 00:55:41 -0500 Subject: [PATCH 15/87] Make contact-us link style, Updated to add actionNavItem, decouple button from google-form, update nav configs --- app/scripts/components/common/google-form.tsx | 17 +------- .../common/page-header-legacy/index.tsx | 2 +- .../page-header-legacy/nav-menu-item.tsx | 24 +++++++++-- .../common/page-header-legacy/types.ts | 36 ---------------- .../common/page-header/default-config.ts | 41 +++++++++++++------ .../components/common/page-header/types.ts | 18 ++++++-- mock/veda.config.js | 31 +++++++++----- parcel-resolver-veda/index.d.ts | 6 +-- 8 files changed, 89 insertions(+), 86 deletions(-) delete mode 100644 app/scripts/components/common/page-header-legacy/types.ts diff --git a/app/scripts/components/common/google-form.tsx b/app/scripts/components/common/google-form.tsx index 67bb10468..109f52783 100644 --- a/app/scripts/components/common/google-form.tsx +++ b/app/scripts/components/common/google-form.tsx @@ -1,29 +1,16 @@ import React from 'react'; import styled from 'styled-components'; import { Modal } from '@devseed-ui/modal'; -import { - USWDSButton, -} from '$components/common/uswds'; - -import { useFeedbackModal } from './layout-root'; const StyledGoogleForm = styled.iframe` width: 100%; `; -const GoogleForm: React.FC<{ title: string, src: string }> = (props) => { - const { title, src } = props; - const { isRevealed, show, hide } = useFeedbackModal(); +const GoogleForm: React.FC<{ src: string, isRevealed: boolean, hide: () => void }> = (props) => { + const { src, isRevealed, hide } = props; return ( <> - - {title} - void, linkProperties: LinkProperties }) { const { isMediumDown } = useMediaQuery(); + const { isRevealed, show, hide } = useFeedbackModal(); const { title, type, ...rest } = item; if (type === NavItemType.INTERNAL_LINK) { @@ -128,8 +131,23 @@ export default function NavMenuItem({ item, alignment, onClick, linkProperties } ); - } else if (type === NavItemType.BUTTON) { - return (
    • ); + } else if (type == NavItemType.BUTTON || type == NavItemType.ACTION) { + return ( +
  • + + {item.title} + + { + process.env.GOOGLE_FORM && + } +
    • + ); // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition } else if (type === NavItemType.DROPDOWN) { const { title } = item as DropdownNavLink; diff --git a/app/scripts/components/common/page-header-legacy/types.ts b/app/scripts/components/common/page-header-legacy/types.ts deleted file mode 100644 index 55dc24742..000000000 --- a/app/scripts/components/common/page-header-legacy/types.ts +++ /dev/null @@ -1,36 +0,0 @@ -export type AlignmentEnum = 'left' | 'right'; - -export enum NavItemType { - INTERNAL_LINK= 'internalLink', - EXTERNAL_LINK= 'externalLink', - DROPDOWN= 'dropdown', - BUTTON= 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action -} - -export interface InternalNavLink { - title: string; - to: string; - type: NavItemType.INTERNAL_LINK; -} - -export interface ExternalNavLink { - title: string; - href: string; - type: NavItemType.EXTERNAL_LINK; -} - -export type NavLinkItem = (ExternalNavLink | InternalNavLink); - -export interface ButtonNavLink { - title: string; - type: NavItemType.BUTTON; - src: string; -} - -export interface DropdownNavLink { - title: string; - type: NavItemType.DROPDOWN; - children: NavLinkItem[]; -} - -export type NavItem = (NavLinkItem | ButtonNavLink | DropdownNavLink); \ No newline at end of file diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index fa650eafb..d9ec5d038 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -2,9 +2,10 @@ import { getString, getNavItemsFromVedaConfig } from 'veda'; import { InternalNavLink, ExternalNavLink, - ButtonNavLink, + ButtonNavItem, DropdownNavLink, - NavItemType + NavItemType, + ActionNavItem } from '$components/common/page-header/types'; import { @@ -18,7 +19,8 @@ let defaultMainNavItems: ( | ExternalNavLink | InternalNavLink | DropdownNavLink - | ButtonNavLink + | ButtonNavItem + | ActionNavItem )[] = [ { title: 'Data Catalog', @@ -51,7 +53,8 @@ let defaultSubNavItems: ( | ExternalNavLink | InternalNavLink | DropdownNavLink - | ButtonNavLink + | ButtonNavItem + | ActionNavItem )[] = [ { title: 'About', @@ -60,15 +63,27 @@ let defaultSubNavItems: ( } ]; -if (process.env.GOOGLE_FORM) { - defaultSubNavItems = [ - ...defaultSubNavItems, - { - title: 'Contact us', - src: process.env.GOOGLE_FORM, - type: NavItemType.BUTTON - } - ]; +if (process.env.GOOGLE_FORM !== undefined) { + if (process.env.ENABLE_USWDS_PAGE_HEADER) { + defaultSubNavItems = [ + ...defaultSubNavItems, + { + title: 'Contact us', + actionId: 'open-google-form', + type: NavItemType.ACTION + } + ]; + } else { + defaultSubNavItems = [ + ...defaultSubNavItems, + { + title: 'Contact us', + actionId: 'open-google-form', + src: process.env.GOOGLE_FORM, + type: NavItemType.BUTTON + } + ]; + } } const mainNavItems = diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index d14eef7bf..96bb58394 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -4,9 +4,12 @@ export enum NavItemType { INTERNAL_LINK = 'internalLink', EXTERNAL_LINK = 'externalLink', DROPDOWN = 'dropdown', + ACTION = 'action', // styled as the link but performs some type of action instead of re-routing BUTTON = 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action } +export type ActionId = 'open-google-form'; // @NOTE: ActionIds are nav items that perform some type of action but without it being a button + export interface InternalNavLink { title: string; to: string; @@ -21,11 +24,18 @@ export interface ExternalNavLink { export type NavLinkItem = ExternalNavLink | InternalNavLink; -export interface ButtonNavLink { +export interface ActionNavItem { + title: string; + actionId: ActionId; + type: NavItemType.ACTION; +} + + +export interface ButtonNavItem { title: string; type: NavItemType.BUTTON; - action?: () => void; // @NOTE-SANDRA: This should be required, workaround for now because googleform comes with button - src: string; + actionId: ActionId; + src?: string; } export interface DropdownNavLink { @@ -34,4 +44,4 @@ export interface DropdownNavLink { children: NavLinkItem[]; } -export type NavItem = NavLinkItem | ButtonNavLink | DropdownNavLink; +export type NavItem = NavLinkItem | ButtonNavItem | DropdownNavLink | ActionNavItem; diff --git a/mock/veda.config.js b/mock/veda.config.js index 856761849..ea35c1719 100644 --- a/mock/veda.config.js +++ b/mock/veda.config.js @@ -27,7 +27,7 @@ let mainNavItems = [ type: 'internalLink' }, { - title: 'stories', + title: 'Stories', to: '/stories', type: 'internalLink' } @@ -52,16 +52,25 @@ let subNavItems = [ ]; if (config.GOOGLE_FORM) { - subNavItems = [ - ...subNavItems, - { - title: 'Contact us', - src: config.GOOGLE_FORM, - type: 'button' - // @NOTE: action attribute is required here but we cant pass in a callback that opens appropriate modal because this file is outside the modules - // Will provide a work around for this for not but this will soon go away with the refactor anyways - } - ]; + if (config.ENABLE_USWDS_PAGE_HEADER) { + subNavItems = [ + ...subNavItems, + { + title: 'Contact us', + actionId: 'open-google-form', + type: 'action' + } + ]; + } else { + subNavItems = [ + ...subNavItems, + { + title: 'Contact us', + actionId: 'open-google-form', + type: 'button' + } + ]; + } } module.exports = { diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index 4891179b0..bbe892d43 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -290,7 +290,7 @@ declare module 'veda' { type: 'externalLink'; } type NavLinkItem = ExternalNavLink | InternalNavLink; - export interface ButtonNavLink { + export interface ButtonNavItem { title: string; type: 'button'; action: () => void; @@ -353,10 +353,10 @@ declare module 'veda' { export const getNavItemsFromVedaConfig: () => | { mainNavItems: - | (NavLinkItem | ButtonNavLink | DropdownNavLink)[] + | (NavLinkItem | ButtonNavItem | DropdownNavLink)[] | undefined; subNavItems: - | (NavLinkItem | ButtonNavLink | DropdownNavLink)[] + | (NavLinkItem | ButtonNavItem | DropdownNavLink)[] | undefined; } | undefined; From 3a09d0fde0fee32f2ee7f72a1887e145ada09ae8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 13 Nov 2024 12:01:10 +0100 Subject: [PATCH 16/87] Use env flag utils and fix env var not sure why the inline comment was ending up in the variable as part of the string, but a separate line for the comment fixed it --- .env | 4 +++- app/scripts/components/common/nav-wrapper.js | 5 ++++- app/scripts/utils/utils.ts | 3 +-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/.env b/.env index f53e49a5b..c605a97a2 100644 --- a/.env +++ b/.env @@ -13,4 +13,6 @@ API_STAC_ENDPOINT='https://staging.openveda.cloud/api/stac' GOOGLE_FORM = 'https://docs.google.com/forms/d/e/1FAIpQLSfGcd3FDsM3kQIOVKjzdPn4f88hX8RZ4Qef7qBsTtDqxjTSkg/viewform?embedded=true' SHOW_CONFIGURABLE_COLOR_MAP = 'TRUE' -ENABLE_USWDS_PAGE_HEADER=true # Enables the refactor page header component that uses the USWDS design system + +# Enables the refactor page header component that uses the USWDS design system +ENABLE_USWDS_PAGE_HEADER = 'TRUE' \ No newline at end of file diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 3fc71e8eb..52c8908a8 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -10,6 +10,7 @@ import { HEADER_WRAPPER_ID, HEADER_TRANSITION_DURATION } from '$utils/use-sliding-sticky-header'; +import { checkEnvFlag } from '$utils/utils'; const NavWrapperContainer = styled.div` position: sticky; @@ -27,11 +28,13 @@ const NavWrapperContainer = styled.div` top: -${headerHeight}px; `} `; +// Hiding configurable map for now until Instances are ready to adapt it +const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_HEADER); function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); - return process.env.ENABLE_USWDS_PAGE_HEADER === 'true' ? ( + return isUSWDSEnabled ? ( } // Override the composition from old page-header with simple svg diff --git a/app/scripts/utils/utils.ts b/app/scripts/utils/utils.ts index 034f83821..088e54764 100644 --- a/app/scripts/utils/utils.ts +++ b/app/scripts/utils/utils.ts @@ -87,12 +87,11 @@ export function composeVisuallyDisabled( `; } - /** * Checks if the given environment variable is set to 'true', ignoring case. * @param value - The value of the environment variable. * @returns A boolean indicating whether the flag is true. */ -export function checkEnvFlag(value?: string) { +export function checkEnvFlag(value?: string): boolean { return (value ?? '').toLowerCase() === 'true'; } From 7326a7254f9d50ae388644558afcb27b444acaad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 13 Nov 2024 12:55:18 +0100 Subject: [PATCH 17/87] Encapsulate components Starting with the nav dropdown button --- .../page-header/nav-dropdown-button.tsx | 40 +++++++++++++++++++ mock/veda.config.js | 11 +++++ 2 files changed, 51 insertions(+) create mode 100644 app/scripts/components/common/page-header/nav-dropdown-button.tsx diff --git a/app/scripts/components/common/page-header/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav-dropdown-button.tsx new file mode 100644 index 000000000..568b42065 --- /dev/null +++ b/app/scripts/components/common/page-header/nav-dropdown-button.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { USWDSNavDropDownButton } from '../uswds/header/nav-drop-down-button'; +import { USWDSMenu } from '../uswds/header/menu'; + +interface NavDropDownButtonProps { + item: { title: string; children: any[] }; + isOpen: boolean[]; + setIsOpen: React.Dispatch>; + onToggle: ( + index: number, + setIsOpen: React.Dispatch> + ) => void; + index: number; + CreateNavMenu: (children: any[]) => React.ReactNode; +} + +export const NavDropDownButton: React.FC = ({ + item, + isOpen, + setIsOpen, + onToggle, + index, + CreateNavMenu +}) => { + return ( + + onToggle(index, setIsOpen)} + menuId={item.title} + isOpen={isOpen[index]} + label={item.title} + /> + + + ); +}; diff --git a/mock/veda.config.js b/mock/veda.config.js index ea35c1719..355cce714 100644 --- a/mock/veda.config.js +++ b/mock/veda.config.js @@ -16,6 +16,17 @@ let mainNavItems = [ } ] }, + { + title: 'Another Test', + type: 'dropdown', + children: [ + { + title: 'dropdown menu item 2', + to: '/stories', + type: 'internalLink' + } + ] + }, { title: 'Data Catalog', to: '/data-catalog', From 32137bf3b2ef17649e76e5660567925e8becac67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Thu, 14 Nov 2024 10:15:33 +0100 Subject: [PATCH 18/87] Fix toggle for multiple dropdowns make other dropdowns close on toggle --- .../components/common/page-header/index.tsx | 2 +- .../page-header/nav-dropdown-button.tsx | 20 ++++++++++++++----- 2 files changed, 16 insertions(+), 6 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 1c327ace4..9bf78b02b 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; -import { LinkProperties } from '@types/veda'; +import { LinkProperties } from '../card'; import { NavItem } from './types'; import LogoContainer from './logo-container'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; diff --git a/app/scripts/components/common/page-header/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav-dropdown-button.tsx index 568b42065..17d9fd223 100644 --- a/app/scripts/components/common/page-header/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav-dropdown-button.tsx @@ -6,10 +6,6 @@ interface NavDropDownButtonProps { item: { title: string; children: any[] }; isOpen: boolean[]; setIsOpen: React.Dispatch>; - onToggle: ( - index: number, - setIsOpen: React.Dispatch> - ) => void; index: number; CreateNavMenu: (children: any[]) => React.ReactNode; } @@ -18,10 +14,24 @@ export const NavDropDownButton: React.FC = ({ item, isOpen, setIsOpen, - onToggle, index, CreateNavMenu }) => { + const onToggle = ( + index: number, + setIsOpen: React.Dispatch> + ): void => { + setIsOpen((prevIsOpen) => { + const newIsOpen = prevIsOpen.map( + (prev, i) => + i === index + ? !prev // toggle the current dropdown + : false // close all other dropdowns + ); + return newIsOpen; + }); + }; + return ( Date: Thu, 14 Nov 2024 11:03:14 +0100 Subject: [PATCH 19/87] Refactor nav items into separate components to improve readability --- .../common/page-header/nav-item-cta.tsx | 96 +++++++++++++++++++ .../common/page-header/nav-item-links.tsx | 50 ++++++++++ .../components/common/page-header/types.ts | 9 +- 3 files changed, 152 insertions(+), 3 deletions(-) create mode 100644 app/scripts/components/common/page-header/nav-item-cta.tsx create mode 100644 app/scripts/components/common/page-header/nav-item-links.tsx diff --git a/app/scripts/components/common/page-header/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav-item-cta.tsx new file mode 100644 index 000000000..2c838a042 --- /dev/null +++ b/app/scripts/components/common/page-header/nav-item-cta.tsx @@ -0,0 +1,96 @@ +import React from 'react'; +import GoogleForm from '../google-form'; +import { useFeedbackModal } from '../layout-root'; +import { NavItemType, ButtonNavItem, ActionNavItem } from './types'; +import { USWDSButton } from '$components/common/uswds'; + +interface NavItemCTAButtonProps { + item: ButtonNavItem; +} +interface NavItemCTAActionProps { + item: ActionNavItem; +} + +const mapActionNavItemId = ( + item: ActionNavItem | ButtonNavItem, + isRevealed, + show, + hide +) => { + switch (item.actionId) { + case 'open-google-form': { + return ( + <> + {item.type == NavItemType.BUTTON ? ( + + {item.title} + + ) : ( + + {item.title} + + )} + + + ); + } + default: { + return null; + } + } +}; + +export const NavItemCTAButton: React.FC = ({ + item +}): JSX.Element => { + const { isRevealed, show, hide } = useFeedbackModal(); + return ( + + {/* //@TODO: Ask Sandra about this conditional */} + {item.actionId === 'open-google-form' ? ( + mapActionNavItemId(item, isRevealed, show, hide) + ) : ( + { + mapActionNavItemId(item, isRevealed, show, hide); + }} + outline={true} + type='button' + size='small' + > + {item.title} + + )} + + ); +}; + +export const NavItemCTAAction: React.FC = ({ + item +}): JSX.Element => { + const { isRevealed, show, hide } = useFeedbackModal(); + return ( + + {item.actionId === 'open-google-form' ? ( + mapActionNavItemId(item, isRevealed, show, hide) + ) : ( + + mapActionNavItemId(item, isRevealed, show, hide)} + > + {item.title} + + + )} + + ); +}; diff --git a/app/scripts/components/common/page-header/nav-item-links.tsx b/app/scripts/components/common/page-header/nav-item-links.tsx new file mode 100644 index 000000000..a0e42db93 --- /dev/null +++ b/app/scripts/components/common/page-header/nav-item-links.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { LinkProperties } from '../card'; +import { ExternalNavLink, InternalNavLink } from './types'; + +interface NavItemExternalLinkProps { + item: ExternalNavLink; + onClick: () => void; +} + +interface NavItemInternalLinkProps { + item: InternalNavLink; + linkProperties: LinkProperties; +} + +export const NavItemExternalLink: React.FC = ({ + item, + onClick +}): JSX.Element => { + return ( + + {item.title} + + ); +}; + +export const NavItemInternalLink: React.FC = ({ + item, + linkProperties +}): JSX.Element | null => { + if (linkProperties.LinkElement) { + const path = { + [linkProperties.pathAttributeKeyName]: (item as InternalNavLink).to + }; + const LinkElement = linkProperties.LinkElement; + return ( + + {item.title} + + ); + } + // If the link provided is invalid, do not render the element + return null; +}; diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 96bb58394..77b17da2f 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -8,7 +8,7 @@ export enum NavItemType { BUTTON = 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action } -export type ActionId = 'open-google-form'; // @NOTE: ActionIds are nav items that perform some type of action but without it being a button +export type ActionId = 'open-google-form' | undefined; // @NOTE: ActionIds are nav items that perform some type of action but without it being a button export interface InternalNavLink { title: string; @@ -30,7 +30,6 @@ export interface ActionNavItem { type: NavItemType.ACTION; } - export interface ButtonNavItem { title: string; type: NavItemType.BUTTON; @@ -44,4 +43,8 @@ export interface DropdownNavLink { children: NavLinkItem[]; } -export type NavItem = NavLinkItem | ButtonNavItem | DropdownNavLink | ActionNavItem; +export type NavItem = + | NavLinkItem + | ButtonNavItem + | DropdownNavLink + | ActionNavItem; From 5ebcbce2ec1024b7d3eb542bbb88378fb4244fc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Thu, 14 Nov 2024 12:47:07 +0100 Subject: [PATCH 20/87] Extract dynamic nav creation not sure about this... feels even more confusing. --- .../common/page-header/dynamic-nav-menu.tsx | 63 +++++++++++++++++++ .../page-header/nav-dropdown-button.tsx | 18 +++++- .../common/page-header/nav-item-cta.tsx | 2 +- .../common/page-header/nav-item-links.tsx | 6 +- 4 files changed, 82 insertions(+), 7 deletions(-) create mode 100644 app/scripts/components/common/page-header/dynamic-nav-menu.tsx diff --git a/app/scripts/components/common/page-header/dynamic-nav-menu.tsx b/app/scripts/components/common/page-header/dynamic-nav-menu.tsx new file mode 100644 index 000000000..e40f3acad --- /dev/null +++ b/app/scripts/components/common/page-header/dynamic-nav-menu.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { LinkProperties } from '../card'; +import { NavItem, NavItemType } from './types'; +import { NavDropDownButton } from './nav-dropdown-button'; +import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; +import { NavItemCTAAction, NavItemCTAButton } from './nav-item-cta'; + +export interface renderDynamicNavMenuProps { + navItems: NavItem[]; + linkProperties: LinkProperties | null; + toggleExpansion: (() => void) | null; + isOpen; + setIsOpen; +} + +export const renderDynamicNavMenu = ({ + navItems, + linkProperties, + toggleExpansion, + isOpen, + setIsOpen +}): renderDynamicNavMenuProps => { + return navItems.map((item, index) => { + switch (item.type) { + case NavItemType.DROPDOWN: + return ( + + ); + + case NavItemType.INTERNAL_LINK: + return ( + linkProperties && ( + + ) + ); + + case NavItemType.EXTERNAL_LINK: + return ( + toggleExpansion && ( + + ) + ); + + case NavItemType.BUTTON: + return ; + + case NavItemType.ACTION: + return ; + + default: + return null; + } + }); +}; diff --git a/app/scripts/components/common/page-header/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav-dropdown-button.tsx index 17d9fd223..4d8537e2b 100644 --- a/app/scripts/components/common/page-header/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav-dropdown-button.tsx @@ -1,21 +1,25 @@ import React from 'react'; +import { LinkProperties } from '../card'; import { USWDSNavDropDownButton } from '../uswds/header/nav-drop-down-button'; import { USWDSMenu } from '../uswds/header/menu'; +import { renderDynamicNavMenu } from './dynamic-nav-menu'; interface NavDropDownButtonProps { item: { title: string; children: any[] }; isOpen: boolean[]; setIsOpen: React.Dispatch>; + toggleExpansion: () => void; index: number; - CreateNavMenu: (children: any[]) => React.ReactNode; + linkProperties: LinkProperties; } export const NavDropDownButton: React.FC = ({ item, isOpen, setIsOpen, + toggleExpansion, index, - CreateNavMenu + linkProperties }) => { const onToggle = ( index: number, @@ -32,6 +36,14 @@ export const NavDropDownButton: React.FC = ({ }); }; + const submenuItems = renderDynamicNavMenu({ + navItems: item.children, + linkProperties, + toggleExpansion, + isOpen, + setIsOpen + }); + return ( = ({ label={item.title} /> diff --git a/app/scripts/components/common/page-header/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav-item-cta.tsx index 2c838a042..87474e42a 100644 --- a/app/scripts/components/common/page-header/nav-item-cta.tsx +++ b/app/scripts/components/common/page-header/nav-item-cta.tsx @@ -18,6 +18,7 @@ const mapActionNavItemId = ( hide ) => { switch (item.actionId) { + // @TODO: what are the other cases? case 'open-google-form': { return ( <> @@ -55,7 +56,6 @@ export const NavItemCTAButton: React.FC = ({ const { isRevealed, show, hide } = useFeedbackModal(); return ( - {/* //@TODO: Ask Sandra about this conditional */} {item.actionId === 'open-google-form' ? ( mapActionNavItemId(item, isRevealed, show, hide) ) : ( diff --git a/app/scripts/components/common/page-header/nav-item-links.tsx b/app/scripts/components/common/page-header/nav-item-links.tsx index a0e42db93..2805fc233 100644 --- a/app/scripts/components/common/page-header/nav-item-links.tsx +++ b/app/scripts/components/common/page-header/nav-item-links.tsx @@ -4,7 +4,7 @@ import { ExternalNavLink, InternalNavLink } from './types'; interface NavItemExternalLinkProps { item: ExternalNavLink; - onClick: () => void; + toggleExpansion: () => void; } interface NavItemInternalLinkProps { @@ -14,14 +14,14 @@ interface NavItemInternalLinkProps { export const NavItemExternalLink: React.FC = ({ item, - onClick + toggleExpansion }): JSX.Element => { return ( From 78543f0f0df247245b5ee2624acb42635658ca00 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Thu, 14 Nov 2024 17:55:13 +0100 Subject: [PATCH 21/87] Remove toggle expansion from nav item external link --- .../components/common/page-header/dynamic-nav-menu.tsx | 9 +-------- .../common/page-header/nav-dropdown-button.tsx | 3 --- .../components/common/page-header/nav-item-links.tsx | 5 +---- 3 files changed, 2 insertions(+), 15 deletions(-) diff --git a/app/scripts/components/common/page-header/dynamic-nav-menu.tsx b/app/scripts/components/common/page-header/dynamic-nav-menu.tsx index e40f3acad..522835ab7 100644 --- a/app/scripts/components/common/page-header/dynamic-nav-menu.tsx +++ b/app/scripts/components/common/page-header/dynamic-nav-menu.tsx @@ -8,7 +8,6 @@ import { NavItemCTAAction, NavItemCTAButton } from './nav-item-cta'; export interface renderDynamicNavMenuProps { navItems: NavItem[]; linkProperties: LinkProperties | null; - toggleExpansion: (() => void) | null; isOpen; setIsOpen; } @@ -16,7 +15,6 @@ export interface renderDynamicNavMenuProps { export const renderDynamicNavMenu = ({ navItems, linkProperties, - toggleExpansion, isOpen, setIsOpen }): renderDynamicNavMenuProps => { @@ -29,7 +27,6 @@ export const renderDynamicNavMenu = ({ item, isOpen, setIsOpen, - toggleExpansion, index, linkProperties }} @@ -44,11 +41,7 @@ export const renderDynamicNavMenu = ({ ); case NavItemType.EXTERNAL_LINK: - return ( - toggleExpansion && ( - - ) - ); + return ; case NavItemType.BUTTON: return ; diff --git a/app/scripts/components/common/page-header/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav-dropdown-button.tsx index 4d8537e2b..ade92c49b 100644 --- a/app/scripts/components/common/page-header/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav-dropdown-button.tsx @@ -8,7 +8,6 @@ interface NavDropDownButtonProps { item: { title: string; children: any[] }; isOpen: boolean[]; setIsOpen: React.Dispatch>; - toggleExpansion: () => void; index: number; linkProperties: LinkProperties; } @@ -17,7 +16,6 @@ export const NavDropDownButton: React.FC = ({ item, isOpen, setIsOpen, - toggleExpansion, index, linkProperties }) => { @@ -39,7 +37,6 @@ export const NavDropDownButton: React.FC = ({ const submenuItems = renderDynamicNavMenu({ navItems: item.children, linkProperties, - toggleExpansion, isOpen, setIsOpen }); diff --git a/app/scripts/components/common/page-header/nav-item-links.tsx b/app/scripts/components/common/page-header/nav-item-links.tsx index 2805fc233..3799a53ee 100644 --- a/app/scripts/components/common/page-header/nav-item-links.tsx +++ b/app/scripts/components/common/page-header/nav-item-links.tsx @@ -4,7 +4,6 @@ import { ExternalNavLink, InternalNavLink } from './types'; interface NavItemExternalLinkProps { item: ExternalNavLink; - toggleExpansion: () => void; } interface NavItemInternalLinkProps { @@ -13,15 +12,13 @@ interface NavItemInternalLinkProps { } export const NavItemExternalLink: React.FC = ({ - item, - toggleExpansion + item }): JSX.Element => { return ( From c8e5b7f0819b785c27718fb5d7951beda86c7af0 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Fri, 15 Nov 2024 15:30:35 -0500 Subject: [PATCH 22/87] change dynamicNavMenu function name to something more suitable and update param types --- .../common/page-header/dynamic-nav-menu.tsx | 22 +++++++------------ .../page-header/nav-dropdown-button.tsx | 4 ++-- 2 files changed, 10 insertions(+), 16 deletions(-) diff --git a/app/scripts/components/common/page-header/dynamic-nav-menu.tsx b/app/scripts/components/common/page-header/dynamic-nav-menu.tsx index 522835ab7..f7cec3648 100644 --- a/app/scripts/components/common/page-header/dynamic-nav-menu.tsx +++ b/app/scripts/components/common/page-header/dynamic-nav-menu.tsx @@ -5,22 +5,16 @@ import { NavDropDownButton } from './nav-dropdown-button'; import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; import { NavItemCTAAction, NavItemCTAButton } from './nav-item-cta'; -export interface renderDynamicNavMenuProps { - navItems: NavItem[]; - linkProperties: LinkProperties | null; - isOpen; - setIsOpen; -} - -export const renderDynamicNavMenu = ({ - navItems, - linkProperties, - isOpen, - setIsOpen -}): renderDynamicNavMenuProps => { +export const createDynamicNavMenuList = ( + navItems: NavItem[], + linkProperties: LinkProperties, + isOpen: boolean[] | undefined = undefined, + setIsOpen: React.Dispatch> | undefined = undefined +): JSX.Element[] => { return navItems.map((item, index) => { switch (item.type) { case NavItemType.DROPDOWN: + if (isOpen === undefined || setIsOpen === undefined) return <>; return ( ; default: - return null; + return <>; } }); }; diff --git a/app/scripts/components/common/page-header/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav-dropdown-button.tsx index ade92c49b..f6ce1ab0c 100644 --- a/app/scripts/components/common/page-header/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav-dropdown-button.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { LinkProperties } from '../card'; import { USWDSNavDropDownButton } from '../uswds/header/nav-drop-down-button'; import { USWDSMenu } from '../uswds/header/menu'; -import { renderDynamicNavMenu } from './dynamic-nav-menu'; +import { createDynamicNavMenuList } from './dynamic-nav-menu'; interface NavDropDownButtonProps { item: { title: string; children: any[] }; @@ -34,7 +34,7 @@ export const NavDropDownButton: React.FC = ({ }); }; - const submenuItems = renderDynamicNavMenu({ + const submenuItems = createDynamicNavMenuList({ navItems: item.children, linkProperties, isOpen, From 1e9ad22b97207327b264faee252374624821a904 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Fri, 15 Nov 2024 16:55:25 -0500 Subject: [PATCH 23/87] rid of ButtonNavItem, rid of actionIdMap, and filename change for better suitability --- ...u.tsx => create-dynamic-nav-menu-list.tsx} | 5 +- .../common/page-header/default-config.ts | 3 - .../page-header/nav-dropdown-button.tsx | 12 ++- .../common/page-header/nav-item-cta.tsx | 89 +++---------------- .../components/common/page-header/types.ts | 10 +-- parcel-resolver-veda/index.d.ts | 10 +-- 6 files changed, 21 insertions(+), 108 deletions(-) rename app/scripts/components/common/page-header/{dynamic-nav-menu.tsx => create-dynamic-nav-menu-list.tsx} (89%) diff --git a/app/scripts/components/common/page-header/dynamic-nav-menu.tsx b/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx similarity index 89% rename from app/scripts/components/common/page-header/dynamic-nav-menu.tsx rename to app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx index f7cec3648..1d4ac137c 100644 --- a/app/scripts/components/common/page-header/dynamic-nav-menu.tsx +++ b/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx @@ -3,7 +3,7 @@ import { LinkProperties } from '../card'; import { NavItem, NavItemType } from './types'; import { NavDropDownButton } from './nav-dropdown-button'; import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; -import { NavItemCTAAction, NavItemCTAButton } from './nav-item-cta'; +import { NavItemCTAAction } from './nav-item-cta'; export const createDynamicNavMenuList = ( navItems: NavItem[], @@ -37,9 +37,6 @@ export const createDynamicNavMenuList = ( case NavItemType.EXTERNAL_LINK: return ; - case NavItemType.BUTTON: - return ; - case NavItemType.ACTION: return ; diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index d9ec5d038..431d4ac31 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -2,7 +2,6 @@ import { getString, getNavItemsFromVedaConfig } from 'veda'; import { InternalNavLink, ExternalNavLink, - ButtonNavItem, DropdownNavLink, NavItemType, ActionNavItem @@ -19,7 +18,6 @@ let defaultMainNavItems: ( | ExternalNavLink | InternalNavLink | DropdownNavLink - | ButtonNavItem | ActionNavItem )[] = [ { @@ -53,7 +51,6 @@ let defaultSubNavItems: ( | ExternalNavLink | InternalNavLink | DropdownNavLink - | ButtonNavItem | ActionNavItem )[] = [ { diff --git a/app/scripts/components/common/page-header/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav-dropdown-button.tsx index f6ce1ab0c..648bdf07a 100644 --- a/app/scripts/components/common/page-header/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav-dropdown-button.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { LinkProperties } from '../card'; import { USWDSNavDropDownButton } from '../uswds/header/nav-drop-down-button'; import { USWDSMenu } from '../uswds/header/menu'; -import { createDynamicNavMenuList } from './dynamic-nav-menu'; +import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list'; interface NavDropDownButtonProps { item: { title: string; children: any[] }; @@ -34,12 +34,10 @@ export const NavDropDownButton: React.FC = ({ }); }; - const submenuItems = createDynamicNavMenuList({ - navItems: item.children, - linkProperties, - isOpen, - setIsOpen - }); + const submenuItems = createDynamicNavMenuList( + item.children, + linkProperties + ); return ( diff --git a/app/scripts/components/common/page-header/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav-item-cta.tsx index 87474e42a..d392e073b 100644 --- a/app/scripts/components/common/page-header/nav-item-cta.tsx +++ b/app/scripts/components/common/page-header/nav-item-cta.tsx @@ -1,96 +1,31 @@ import React from 'react'; import GoogleForm from '../google-form'; import { useFeedbackModal } from '../layout-root'; -import { NavItemType, ButtonNavItem, ActionNavItem } from './types'; -import { USWDSButton } from '$components/common/uswds'; +import { ActionNavItem } from './types'; -interface NavItemCTAButtonProps { - item: ButtonNavItem; -} interface NavItemCTAActionProps { item: ActionNavItem; } -const mapActionNavItemId = ( - item: ActionNavItem | ButtonNavItem, - isRevealed, - show, - hide -) => { - switch (item.actionId) { - // @TODO: what are the other cases? - case 'open-google-form': { - return ( +export const NavItemCTAAction: React.FC = ({ + item +}): JSX.Element => { + const { isRevealed, show, hide } = useFeedbackModal(); + return ( + + {item.actionId === 'open-google-form' && ( <> - {item.type == NavItemType.BUTTON ? ( - - {item.title} - - ) : ( - - {item.title} - - )} + + {item.title} + - ); - } - default: { - return null; - } - } -}; - -export const NavItemCTAButton: React.FC = ({ - item -}): JSX.Element => { - const { isRevealed, show, hide } = useFeedbackModal(); - return ( - - {item.actionId === 'open-google-form' ? ( - mapActionNavItemId(item, isRevealed, show, hide) - ) : ( - { - mapActionNavItemId(item, isRevealed, show, hide); - }} - outline={true} - type='button' - size='small' - > - {item.title} - - )} - - ); -}; - -export const NavItemCTAAction: React.FC = ({ - item -}): JSX.Element => { - const { isRevealed, show, hide } = useFeedbackModal(); - return ( - - {item.actionId === 'open-google-form' ? ( - mapActionNavItemId(item, isRevealed, show, hide) - ) : ( - - mapActionNavItemId(item, isRevealed, show, hide)} - > - {item.title} - - )} + {/* @TODO: Other possible cases would go here to perform some type of action */} ); }; diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 77b17da2f..6e9378ec3 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -30,13 +30,6 @@ export interface ActionNavItem { type: NavItemType.ACTION; } -export interface ButtonNavItem { - title: string; - type: NavItemType.BUTTON; - actionId: ActionId; - src?: string; -} - export interface DropdownNavLink { title: string; type: NavItemType.DROPDOWN; @@ -44,7 +37,6 @@ export interface DropdownNavLink { } export type NavItem = - | NavLinkItem - | ButtonNavItem + | NavLinkItems | DropdownNavLink | ActionNavItem; diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index bbe892d43..aeec918e0 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -290,12 +290,6 @@ declare module 'veda' { type: 'externalLink'; } type NavLinkItem = ExternalNavLink | InternalNavLink; - export interface ButtonNavItem { - title: string; - type: 'button'; - action: () => void; - src: string; - } export interface DropdownNavLink { title: string; @@ -353,10 +347,10 @@ declare module 'veda' { export const getNavItemsFromVedaConfig: () => | { mainNavItems: - | (NavLinkItem | ButtonNavItem | DropdownNavLink)[] + | (NavLinkItem | DropdownNavLink)[] | undefined; subNavItems: - | (NavLinkItem | ButtonNavItem | DropdownNavLink)[] + | (NavLinkItem | DropdownNavLink)[] | undefined; } | undefined; From 0705da66ad95c176537006eb7d2267b667b22781 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Fri, 15 Nov 2024 16:56:43 -0500 Subject: [PATCH 24/87] Rename Proptype NavItemCTA --- .../common/page-header/create-dynamic-nav-menu-list.tsx | 4 ++-- app/scripts/components/common/page-header/nav-item-cta.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx index 1d4ac137c..5ef2159f5 100644 --- a/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx @@ -3,7 +3,7 @@ import { LinkProperties } from '../card'; import { NavItem, NavItemType } from './types'; import { NavDropDownButton } from './nav-dropdown-button'; import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; -import { NavItemCTAAction } from './nav-item-cta'; +import { NavItemCTA } from './nav-item-cta'; export const createDynamicNavMenuList = ( navItems: NavItem[], @@ -38,7 +38,7 @@ export const createDynamicNavMenuList = ( return ; case NavItemType.ACTION: - return ; + return ; default: return <>; diff --git a/app/scripts/components/common/page-header/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav-item-cta.tsx index d392e073b..6a2ad1119 100644 --- a/app/scripts/components/common/page-header/nav-item-cta.tsx +++ b/app/scripts/components/common/page-header/nav-item-cta.tsx @@ -3,11 +3,11 @@ import GoogleForm from '../google-form'; import { useFeedbackModal } from '../layout-root'; import { ActionNavItem } from './types'; -interface NavItemCTAActionProps { +interface NavItemCTAProps { item: ActionNavItem; } -export const NavItemCTAAction: React.FC = ({ +export const NavItemCTA: React.FC = ({ item }): JSX.Element => { const { isRevealed, show, hide } = useFeedbackModal(); From 8b5d5083adca326e17c11583547eaa61822a3e38 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Sun, 17 Nov 2024 20:40:05 -0500 Subject: [PATCH 25/87] remove styled components and add scss file for logo-container, add map for uswds tokens as sass vars --- .../create-dynamic-nav-menu-list.tsx | 4 +- .../page-header/logo-container/index.tsx | 49 +++++++++++++++++ .../page-header/logo-container/styles.scss | 52 +++++++++++++++++++ app/scripts/styles/_uswds-theme.scss | 3 +- app/scripts/styles/_veda-ui-theme-vars.scss | 19 +++++++ 5 files changed, 124 insertions(+), 3 deletions(-) create mode 100644 app/scripts/components/common/page-header/logo-container/index.tsx create mode 100644 app/scripts/components/common/page-header/logo-container/styles.scss create mode 100644 app/scripts/styles/_veda-ui-theme-vars.scss diff --git a/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx index 5ef2159f5..96074e32d 100644 --- a/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx @@ -35,10 +35,10 @@ export const createDynamicNavMenuList = ( ); case NavItemType.EXTERNAL_LINK: - return ; + return ; case NavItemType.ACTION: - return ; + return ; default: return <>; diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx new file mode 100644 index 000000000..d4bc80a4a --- /dev/null +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -0,0 +1,49 @@ +import React, { ComponentType } from 'react'; +import { Tip } from '../../tip'; +import { LinkProperties } from '../../card'; +import './styles.scss'; + +/** + * LogoContainer that is meant to integrate in the default + * page header without the dependencies of the veda virtual modules + * and expects the Logo SVG to be passed in as a prop - this will + * support the instance for refactor + */ + +export default function LogoContainer({ + linkProperties, + Logo, + title, + version +}: { + linkProperties: LinkProperties; + Logo?: JSX.Element; + title: string; + subTitle?: string; + version?: string; +}) { + const LinkElement: ComponentType = + linkProperties.LinkElement as ComponentType; + + return ( +
    + + {Logo} + {title} + + {version && ( + +
    , + [linkProperties.pathAttributeKeyName]: '/development' + }} + > + BETA +
    +     + )} +
    + ); +} diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss new file mode 100644 index 000000000..a33344ab1 --- /dev/null +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -0,0 +1,52 @@ +@use '$styles/veda-ui-theme-vars' as veda-theme; + +#logo-container { + display: flex; + flex-shrink: 0; + font-family: veda-theme.$veda-uswds-basefont-sans; + gap: veda-theme.$veda-uswds-spacing-105; + span { + color: veda-theme.$veda-uswds-color-base-darkest; + } + + a { + display: grid; + align-items: center; + + #nasa-logo-pos { + opacity: 1; + transform: translate(0, -100%); //@TODO: fix svg translate + } + svg { + height: 2.5rem; + width: auto; + } + } + + #logo-container-beta-tag { + color: white; + align-self: end; + font-size: 0.75rem; + font-weight: bold; + line-height: 1rem; + padding: 0 veda-theme.$veda-uswds-spacing-5; + justify-content: center; + border-radius: 2px; + background-color: veda-theme.$veda-uswds-color-secondary; + } + + + span:first-of-type { + font-size: 0.875rem; + line-height: 1rem; + font-weight: extrabold; + } + + span:last-of-type { + // grid-row: 2; + font-size: 1.25rem; + line-height: 1.5rem; + font-weight: regular; + letter-spacing: -0.025em; + } +} \ No newline at end of file diff --git a/app/scripts/styles/_uswds-theme.scss b/app/scripts/styles/_uswds-theme.scss index 39e5f6eb6..c80f86135 100644 --- a/app/scripts/styles/_uswds-theme.scss +++ b/app/scripts/styles/_uswds-theme.scss @@ -1,3 +1,4 @@ +// @QUESTION: Move to under uswds dir? @use 'uswds-core' as * with ( $utilities-use-important: true, $theme-show-notifications: false, @@ -16,4 +17,4 @@ ), $theme-font-type-sans: baseFontFamily, $theme-font-type-serif: baseFontFamily, -); \ No newline at end of file +); diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss new file mode 100644 index 000000000..dd5015213 --- /dev/null +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -0,0 +1,19 @@ +@use "uswds-core/src/styles/functions/utilities" as utils; +@use "uswds-core/src/styles/functions/units" as spacing; +// @use "uswds-core/src/styles/functions/font" as font; +@use "uswds-core/src/styles/mixins/utilities" as mixins; +@use "uswds-core/src/styles/mixins/typography" as typography; + +/*********** VEDAUI THEME PALETTE ***********/ +// These map to the uswds design tokens found at https://designsystem.digital.gov/design-tokens/ + +// TYPOGRAPHY +$veda-uswds-basefont-sans: utils.family('sans'); + +// COLORS +$veda-uswds-color-secondary: utils.color('secondary'); +$veda-uswds-color-base-darkest: utils.color('base-darkest'); + +// SPACING +$veda-uswds-spacing-5: spacing.units(0.5); +$veda-uswds-spacing-105: spacing.units(1.5); \ No newline at end of file From a05431b2834b1fa1f4d0a6994c90c83daf8e7200 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 18 Nov 2024 12:41:43 +0100 Subject: [PATCH 26/87] Add jest test for page-header wip, the test does not run yet... --- .../common/page-header/page-header.test.tsx | 66 +++++++++++++++++++ .../components/common/page-header/types.ts | 5 +- jest-transformer-mdx.js | 18 +++++ jest.config.js | 4 +- jest.setup.js | 5 ++ 5 files changed, 93 insertions(+), 5 deletions(-) create mode 100644 app/scripts/components/common/page-header/page-header.test.tsx create mode 100644 jest-transformer-mdx.js create mode 100644 jest.setup.js diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx new file mode 100644 index 000000000..28a98f0d7 --- /dev/null +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -0,0 +1,66 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; + +import { LinkProperties } from '../card'; +import NasaLogoColor from '../nasa-logo-color'; +import { NavItem, NavItemType } from './types'; +import PageHeader from './index'; + +const mockMainNavItems: NavItem[] = [ + { + title: 'Data Catalog', + to: '/data-catalog', + type: NavItemType.INTERNAL_LINK + }, + { + title: 'Exploration', + to: '/exploration', + type: NavItemType.INTERNAL_LINK + }, + { + title: 'Stories', + to: '/stories', + type: NavItemType.INTERNAL_LINK + } +]; + +const mockSubNavItems: NavItem[] = [ + { + title: 'About', + to: '/about', + type: NavItemType.INTERNAL_LINK + }, + { + title: 'Contact', + to: '/contact', + type: NavItemType.INTERNAL_LINK + } +]; + +const mockLinkProperties: LinkProperties = { + pathAttributeKeyName: 'to', + LinkElement: 'a' +}; + +describe('PageHeader', () => { + test('renders the PageHeader component', () => { + render( + } + linkProperties={mockLinkProperties} + /> + ); + + expect(screen.getByRole('header')).toHaveTextContent( + 'Earthdata VEDA Dashboard' + ); + expect( + screen.getByRole('nav', { + name: 'Main Navigation' + }) + ).toHaveTextContent('Data Catalog'); + }); +}); diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 6e9378ec3..837851b46 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -36,7 +36,4 @@ export interface DropdownNavLink { children: NavLinkItem[]; } -export type NavItem = - | NavLinkItems - | DropdownNavLink - | ActionNavItem; +export type NavItem = NavLinkItem | DropdownNavLink | ActionNavItem; diff --git a/jest-transformer-mdx.js b/jest-transformer-mdx.js new file mode 100644 index 000000000..6dd4e46c1 --- /dev/null +++ b/jest-transformer-mdx.js @@ -0,0 +1,18 @@ +/* eslint-disable no-unused-vars */ +const mdx = require('@mdx-js/react'); + +/** + * Currently, Jest tests for components importing MDX content will fail. + * Properly setting up MDX rendering in Jest is complex. For now, + * we will render the MDX content as null to prevent Jest errors. + */ + +const transformer = { + process: function (sourceText, sourcePath, options) { + return { + code: 'module.exports = () => null' + }; + } +}; + +module.exports = transformer; diff --git a/jest.config.js b/jest.config.js index dfdca18ce..f1ff4090f 100644 --- a/jest.config.js +++ b/jest.config.js @@ -140,6 +140,7 @@ module.exports = { // The paths to modules that run some code to configure or set up the testing environment before each test // setupFiles: [], + setupFiles: [`/jest.setup.js`], // A list of paths to modules that run some code to configure or set up the testing framework before each test // setupFilesAfterEnv: [], @@ -188,7 +189,8 @@ module.exports = { // A map from regular expressions to paths to transformers transform: { '^.+\\.(js|jsx)$': 'babel-jest', - '^.+\\.(ts|tsx)?$': 'ts-jest' + '^.+\\.(ts|tsx)?$': 'ts-jest', + '^.+\\.mdx$': '/jest-transformer-mdx.js' }, // An array of regexp pattern strings that are matched against all source file paths, matched files will skip transformation diff --git a/jest.setup.js b/jest.setup.js new file mode 100644 index 000000000..ffef62ce3 --- /dev/null +++ b/jest.setup.js @@ -0,0 +1,5 @@ +jest.mock('@mdx-js/react', () => ({ + MDXProvider: ({}) => null +})); + +export default undefined; From 81199ab707bed558ae8c26cc1695aac1639cae4d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 18 Nov 2024 17:28:44 +0100 Subject: [PATCH 27/87] Fix some type issues to make tests run --- .../page-header-legacy/nav-menu-item.tsx | 179 ++++++++++++------ .../common/page-header/default-config.ts | 2 +- .../common/page-header/page-header.test.tsx | 10 +- .../components/common/page-header/types.ts | 1 + jest-transformer-mdx.js | 2 +- jest.setup.js | 14 +- 6 files changed, 137 insertions(+), 71 deletions(-) diff --git a/app/scripts/components/common/page-header-legacy/nav-menu-item.tsx b/app/scripts/components/common/page-header-legacy/nav-menu-item.tsx index 0a697d2b0..d4ea7d812 100644 --- a/app/scripts/components/common/page-header-legacy/nav-menu-item.tsx +++ b/app/scripts/components/common/page-header-legacy/nav-menu-item.tsx @@ -1,25 +1,27 @@ import React, { ComponentType } from 'react'; import styled from 'styled-components'; -import { - glsp, - media, - rgba, - themeVal -} from '@devseed-ui/theme-provider'; +import { glsp, media, rgba, themeVal } from '@devseed-ui/theme-provider'; import { Button } from '@devseed-ui/button'; import { CollecticonChevronDownSmall } from '@devseed-ui/collecticons'; import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown'; import DropdownScrollable from '../dropdown-scrollable'; import GoogleForm from '../google-form'; -import { AlignmentEnum, InternalNavLink, ExternalNavLink, NavLinkItem, DropdownNavLink, NavItem, NavItemType } from '../page-header/types'; +import { + AlignmentEnum, + InternalNavLink, + ExternalNavLink, + NavLinkItem, + DropdownNavLink, + NavItem, + NavItemType +} from '../page-header/types'; import { USWDSButton } from '../uswds/button'; import { useFeedbackModal } from '../layout-root'; import GlobalMenuLinkCSS from '$styles/menu-link'; import { useMediaQuery } from '$utils/use-media-query'; import { LinkProperties } from '$types/veda'; - const rgbaFixed = rgba as any; export const GlobalNavActions = styled.div` @@ -64,27 +66,46 @@ const DropMenuNavItem = styled(DropMenuItem)` const LOG = true; -function LinkDropMenuNavItem({ child, onClick, linkProperties }: { child: NavLinkItem, onClick?:() => void, linkProperties: LinkProperties }) { +function LinkDropMenuNavItem({ + child, + onClick, + linkProperties +}: { + child: NavLinkItem; + onClick?: () => void; + linkProperties: LinkProperties; +}) { const { title, type, ...rest } = child; const linkProps = { as: linkProperties.LinkElement as ComponentType, - [linkProperties.pathAttributeKeyName]: (rest as InternalNavLink).to, + [linkProperties.pathAttributeKeyName]: (rest as InternalNavLink).to }; if (type === NavItemType.INTERNAL_LINK) { return ( -
  • - - {title} - -
    • +
  • + + {title} + +
    • ); // In case a user inputs a wrong type // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition } else if (type === NavItemType.EXTERNAL_LINK) { return (
  • - + {title}
    • @@ -92,13 +113,25 @@ function LinkDropMenuNavItem({ child, onClick, linkProperties }: { child: NavLin } else { LOG && /* eslint-disable-next-line no-console */ - console.error(`Invalid child Nav Item type, type "${type}" is not of `, NavItemType); + console.error( + `Invalid child Nav Item type, type "${type}" is not of `, + NavItemType + ); return null; } } - -export default function NavMenuItem({ item, alignment, onClick, linkProperties }: {item: NavItem, alignment?: AlignmentEnum, onClick?: () => void, linkProperties: LinkProperties }) { +export default function NavMenuItem({ + item, + alignment, + onClick, + linkProperties +}: { + item: NavItem; + alignment?: AlignmentEnum; + onClick?: () => void; + linkProperties: LinkProperties; +}) { const { isMediumDown } = useMediaQuery(); const { isRevealed, show, hide } = useFeedbackModal(); const { title, type, ...rest } = item; @@ -106,32 +139,30 @@ export default function NavMenuItem({ item, alignment, onClick, linkProperties } if (type === NavItemType.INTERNAL_LINK) { const linkProps = { as: linkProperties.LinkElement as ComponentType, - [linkProperties.pathAttributeKeyName]: (rest as InternalNavLink).to, + [linkProperties.pathAttributeKeyName]: (rest as InternalNavLink).to }; return (
  • - - {title} - + + {title} +
    • - ); } else if (item.type === NavItemType.EXTERNAL_LINK) { return (
  • - - {title} - + + {title} +
    • - ); - } else if (type == NavItemType.BUTTON || type == NavItemType.ACTION) { + } else if (item.type === NavItemType.ACTION) { return (
  • {item.title} - { - process.env.GOOGLE_FORM && - } + {process.env.GOOGLE_FORM && ( + + )}
    • ); - // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition } else if (type === NavItemType.DROPDOWN) { const { title } = item as DropdownNavLink; // Mobile view if (isMediumDown) { return ( <> -
  • {title}
    • +
  • + {title} +
    • {item.children.map((child) => { - return ; + return ( + + ); })} ); } else { - return (
  • - ( - // @ts-expect-error achromic text exists - - {title} - - )} - > - - {(item as DropdownNavLink).children.map((child) => { - return ; - })} - - -
    • ); + return ( +
  • + ( + + {title} + + )} + > + + {(item as DropdownNavLink).children.map((child) => { + return ( + + ); + })} + + +
    • + ); } } else { LOG && /* eslint-disable-next-line no-console */ - console.error(`Invalid type for Nav Items, type "${type}" is not of `, NavItemType); + console.error( + `Invalid type for Nav Items, type "${type}" is not of `, + NavItemType + ); return null; } -} \ No newline at end of file +} diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index 431d4ac31..0c9a3b162 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -77,7 +77,7 @@ if (process.env.GOOGLE_FORM !== undefined) { title: 'Contact us', actionId: 'open-google-form', src: process.env.GOOGLE_FORM, - type: NavItemType.BUTTON + type: NavItemType.ACTION } ]; } diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 28a98f0d7..d46586052 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; +import { NavLink } from 'react-router-dom'; import { LinkProperties } from '../card'; import NasaLogoColor from '../nasa-logo-color'; import { NavItem, NavItemType } from './types'; @@ -40,7 +41,7 @@ const mockSubNavItems: NavItem[] = [ const mockLinkProperties: LinkProperties = { pathAttributeKeyName: 'to', - LinkElement: 'a' + LinkElement: NavLink }; describe('PageHeader', () => { @@ -54,13 +55,8 @@ describe('PageHeader', () => { /> ); - expect(screen.getByRole('header')).toHaveTextContent( + expect(screen.getByTestId('header')).toHaveTextContent( 'Earthdata VEDA Dashboard' ); - expect( - screen.getByRole('nav', { - name: 'Main Navigation' - }) - ).toHaveTextContent('Data Catalog'); }); }); diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 837851b46..1ad99f16e 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -27,6 +27,7 @@ export type NavLinkItem = ExternalNavLink | InternalNavLink; export interface ActionNavItem { title: string; actionId: ActionId; + src?: string; type: NavItemType.ACTION; } diff --git a/jest-transformer-mdx.js b/jest-transformer-mdx.js index 6dd4e46c1..52c87de72 100644 --- a/jest-transformer-mdx.js +++ b/jest-transformer-mdx.js @@ -1,5 +1,5 @@ /* eslint-disable no-unused-vars */ -const mdx = require('@mdx-js/react'); +// const mdx = require('@mdx-js/react'); /** * Currently, Jest tests for components importing MDX content will fail. diff --git a/jest.setup.js b/jest.setup.js index ffef62ce3..ad5ce62e1 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -1,5 +1,15 @@ jest.mock('@mdx-js/react', () => ({ - MDXProvider: ({}) => null + MDXProvider: () => null +})); +jest.mock('react-router-dom', () => ({ + Link: ({ children }) => children, + useHref: () => null +})); +jest.mock('veda', () => ({ + getString: (variable) => ({ + one: variable, + other: variable + }), + getNavItemsFromVedaConfig: () => [] })); - export default undefined; From 74317718cfb68b153a90ec61f389b56ee085e5d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 18 Nov 2024 17:38:21 +0100 Subject: [PATCH 28/87] Test nav bar, but can't find by data-testid --- app/scripts/components/common/page-header/index.tsx | 1 + .../components/common/page-header/page-header.test.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 9bf78b02b..5d72d07ca 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -75,6 +75,7 @@ const PageHeader: React.FC = ({ secondaryItems={secondaryItems} mobileExpanded={expanded} onToggleMobileNav={toggleExpansion} + data-testid='extended-nav' />     diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index d46586052..873927b1b 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -45,7 +45,7 @@ const mockLinkProperties: LinkProperties = { }; describe('PageHeader', () => { - test('renders the PageHeader component', () => { + beforeAll(() => { render( { linkProperties={mockLinkProperties} /> ); + }); + test('renders the PageHeader component title', () => { expect(screen.getByTestId('header')).toHaveTextContent( 'Earthdata VEDA Dashboard' ); }); + + test('renders the PageHeader nav items', () => { + expect(screen.getByTestId('extended-nav')).toHaveTextContent('Exploration'); + }); }); From 31ff4fba40a5d27dc313234e6f81e89c1d0c4c3b Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 18 Nov 2024 16:10:39 -0500 Subject: [PATCH 29/87] Match logo/title to design, organize page-header dir, and scss file --- .../common/page-header/logo-container/index.tsx | 2 +- .../page-header/logo-container/styles.scss | 16 ++++++++-------- .../{ => nav}/create-dynamic-nav-menu-list.tsx | 4 ++-- .../{ => nav}/nav-dropdown-button.tsx | 6 +++--- .../page-header/{ => nav}/nav-item-cta.tsx | 6 +++--- .../page-header/{ => nav}/nav-item-links.tsx | 4 ++-- .../components/common/page-header/styles.scss | 3 +++ 7 files changed, 22 insertions(+), 19 deletions(-) rename app/scripts/components/common/page-header/{ => nav}/create-dynamic-nav-menu-list.tsx (92%) rename app/scripts/components/common/page-header/{ => nav}/nav-dropdown-button.tsx (87%) rename app/scripts/components/common/page-header/{ => nav}/nav-item-cta.tsx (83%) rename app/scripts/components/common/page-header/{ => nav}/nav-item-links.tsx (90%) create mode 100644 app/scripts/components/common/page-header/styles.scss diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index d4bc80a4a..a2b48bb96 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -27,7 +27,7 @@ export default function LogoContainer({ return (
    - + {Logo} {title} diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index a33344ab1..806611e06 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -2,20 +2,22 @@ #logo-container { display: flex; - flex-shrink: 0; font-family: veda-theme.$veda-uswds-basefont-sans; gap: veda-theme.$veda-uswds-spacing-105; + + #logo-container-link { + display: flex; + align-items: center; + } + span { color: veda-theme.$veda-uswds-color-base-darkest; } a { - display: grid; - align-items: center; - #nasa-logo-pos { opacity: 1; - transform: translate(0, -100%); //@TODO: fix svg translate + transform: translate(0, -100%); } svg { height: 2.5rem; @@ -25,12 +27,11 @@ #logo-container-beta-tag { color: white; - align-self: end; + align-self: center; font-size: 0.75rem; font-weight: bold; line-height: 1rem; padding: 0 veda-theme.$veda-uswds-spacing-5; - justify-content: center; border-radius: 2px; background-color: veda-theme.$veda-uswds-color-secondary; } @@ -43,7 +44,6 @@ } span:last-of-type { - // grid-row: 2; font-size: 1.25rem; line-height: 1.5rem; font-weight: regular; diff --git a/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx similarity index 92% rename from app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx rename to app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx index 96074e32d..f5341a462 100644 --- a/app/scripts/components/common/page-header/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { LinkProperties } from '../card'; -import { NavItem, NavItemType } from './types'; +import { LinkProperties } from '../../card'; +import { NavItem, NavItemType } from '../types'; import { NavDropDownButton } from './nav-dropdown-button'; import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; import { NavItemCTA } from './nav-item-cta'; diff --git a/app/scripts/components/common/page-header/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx similarity index 87% rename from app/scripts/components/common/page-header/nav-dropdown-button.tsx rename to app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx index 648bdf07a..2d3387621 100644 --- a/app/scripts/components/common/page-header/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import { LinkProperties } from '../card'; -import { USWDSNavDropDownButton } from '../uswds/header/nav-drop-down-button'; -import { USWDSMenu } from '../uswds/header/menu'; +import { LinkProperties } from '../../card'; +import { USWDSNavDropDownButton } from '../../uswds/header/nav-drop-down-button'; +import { USWDSMenu } from '../../uswds/header/menu'; import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list'; interface NavDropDownButtonProps { diff --git a/app/scripts/components/common/page-header/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx similarity index 83% rename from app/scripts/components/common/page-header/nav-item-cta.tsx rename to app/scripts/components/common/page-header/nav/nav-item-cta.tsx index 6a2ad1119..c91f9c8a7 100644 --- a/app/scripts/components/common/page-header/nav-item-cta.tsx +++ b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx @@ -1,7 +1,7 @@ import React from 'react'; -import GoogleForm from '../google-form'; -import { useFeedbackModal } from '../layout-root'; -import { ActionNavItem } from './types'; +import GoogleForm from '../../google-form'; +import { useFeedbackModal } from '../../layout-root'; +import { ActionNavItem } from '../types'; interface NavItemCTAProps { item: ActionNavItem; diff --git a/app/scripts/components/common/page-header/nav-item-links.tsx b/app/scripts/components/common/page-header/nav/nav-item-links.tsx similarity index 90% rename from app/scripts/components/common/page-header/nav-item-links.tsx rename to app/scripts/components/common/page-header/nav/nav-item-links.tsx index 3799a53ee..44a33a28e 100644 --- a/app/scripts/components/common/page-header/nav-item-links.tsx +++ b/app/scripts/components/common/page-header/nav/nav-item-links.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { LinkProperties } from '../card'; -import { ExternalNavLink, InternalNavLink } from './types'; +import { LinkProperties } from '../../card'; +import { ExternalNavLink, InternalNavLink } from '../types'; interface NavItemExternalLinkProps { item: ExternalNavLink; diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss new file mode 100644 index 000000000..7a98ecdab --- /dev/null +++ b/app/scripts/components/common/page-header/styles.scss @@ -0,0 +1,3 @@ +.usa-logo { + max-width: none !important; +} \ No newline at end of file From f6049b4f32d195ec8b7a68b158f046afbed7aab2 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 18 Nov 2024 18:45:49 -0500 Subject: [PATCH 30/87] Add light/dark mode and more uswds tokens, fix logo container to match --- .../components/common/page-header/index.tsx | 3 +-- .../page-header/logo-container/index.tsx | 6 ++++-- .../page-header/logo-container/styles.scss | 18 ++++++++++++------ .../common/page-header/page-header.test.tsx | 4 ++++ .../components/common/page-header/styles.scss | 17 ++++++++++++++++- app/scripts/styles/_veda-ui-theme-vars.scss | 13 +++++++++++-- 6 files changed, 48 insertions(+), 13 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 5d72d07ca..1c327ace4 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; -import { LinkProperties } from '../card'; +import { LinkProperties } from '@types/veda'; import { NavItem } from './types'; import LogoContainer from './logo-container'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; @@ -75,7 +75,6 @@ const PageHeader: React.FC = ({ secondaryItems={secondaryItems} mobileExpanded={expanded} onToggleMobileNav={toggleExpansion} - data-testid='extended-nav' /> diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index a2b48bb96..59a082de6 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -14,19 +14,21 @@ export default function LogoContainer({ linkProperties, Logo, title, - version + version, + themeMode = 'mode-light', }: { linkProperties: LinkProperties; Logo?: JSX.Element; title: string; subTitle?: string; version?: string; + themeMode?: string; }) { const LinkElement: ComponentType = linkProperties.LinkElement as ComponentType; return ( -
    +
    {Logo} {title} diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index 806611e06..0577c6b17 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -1,9 +1,9 @@ -@use '$styles/veda-ui-theme-vars' as veda-theme; +@use '$styles/veda-ui-theme-vars' as themeVars; #logo-container { display: flex; - font-family: veda-theme.$veda-uswds-basefont-sans; - gap: veda-theme.$veda-uswds-spacing-105; + font-family: themeVars.$veda-uswds-basefont-sans; + gap: themeVars.$veda-uswds-spacing-105; #logo-container-link { display: flex; @@ -11,7 +11,7 @@ } span { - color: veda-theme.$veda-uswds-color-base-darkest; + color: themeVars.$veda-uswds-color-base-darkest !important; } a { @@ -31,9 +31,9 @@ font-size: 0.75rem; font-weight: bold; line-height: 1rem; - padding: 0 veda-theme.$veda-uswds-spacing-5; + padding: 0 themeVars.$veda-uswds-spacing-5; border-radius: 2px; - background-color: veda-theme.$veda-uswds-color-secondary; + background-color: themeVars.$veda-uswds-color-secondary; } @@ -49,4 +49,10 @@ font-weight: regular; letter-spacing: -0.025em; } +} + +.mode-dark { + span { + color: themeVars.$veda-uswds-color-base-white !important; + } } \ No newline at end of file diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 873927b1b..237fc272a 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -8,6 +8,10 @@ import NasaLogoColor from '../nasa-logo-color'; import { NavItem, NavItemType } from './types'; import PageHeader from './index'; +// @NOTE: Possible Test cases +// light vs dark mode +// config & create dynamic nav menu list fn - different scenerios, happy vs unhappy path + const mockMainNavItems: NavItem[] = [ { title: 'Data Catalog', diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index 7a98ecdab..d34190758 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -1,3 +1,18 @@ +@use '$styles/veda-ui-theme-vars' as themeVars; + +#mode-light { + .usa-nav__link { + span { + color: themeVars.$veda-uswds-color-base-ink; + font-weight: themeVars.$veda-uswds-fontweight-regular; + } + } +} + +#mode-dark { + background-color: themeVars.$veda-uswds-color-primary-darker; +} + .usa-logo { max-width: none !important; -} \ No newline at end of file +} diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss index dd5015213..7af323014 100644 --- a/app/scripts/styles/_veda-ui-theme-vars.scss +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -1,18 +1,27 @@ @use "uswds-core/src/styles/functions/utilities" as utils; @use "uswds-core/src/styles/functions/units" as spacing; -// @use "uswds-core/src/styles/functions/font" as font; @use "uswds-core/src/styles/mixins/utilities" as mixins; @use "uswds-core/src/styles/mixins/typography" as typography; /*********** VEDAUI THEME PALETTE ***********/ -// These map to the uswds design tokens found at https://designsystem.digital.gov/design-tokens/ +// These map to the veda defined styles between https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=139-14&node-type=canvas&t=7Qa02mMKUgBy5Qho-0 +// and uswds found at https://designsystem.digital.gov/design-tokens/ // TYPOGRAPHY $veda-uswds-basefont-sans: utils.family('sans'); +// FONT-WEIGHT +$veda-uswds-fontweight-light: utils.font-weight('light'); +$veda-uswds-fontweight-regular: utils.font-weight('normal'); +$veda-uswds-fontweight-bold: utils.font-weight('bold'); + // COLORS +$veda-uswds-color-primary-darker: utils.color('primary-darker'); $veda-uswds-color-secondary: utils.color('secondary'); $veda-uswds-color-base-darkest: utils.color('base-darkest'); +$veda-uswds-color-base-white: #FFFFFF; +$veda-uswds-color-base-light: utils.color('base-light'); +$veda-uswds-color-base-ink: utils.color('ink'); // SPACING $veda-uswds-spacing-5: spacing.units(0.5); From 2a08e201c6b4877c2fc82bf3ca44ec890fcfa678 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 19 Nov 2024 12:43:23 +0100 Subject: [PATCH 31/87] Add more tests for header nav not passing yet, need to figure out why I can't find the actual text content --- .../common/page-header/page-header.test.tsx | 22 ++++++++++++++++--- 1 file changed, 19 insertions(+), 3 deletions(-) diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 237fc272a..a596567ad 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from '@testing-library/react'; +import { getByText, render, screen, within } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import { NavLink } from 'react-router-dom'; @@ -49,7 +49,7 @@ const mockLinkProperties: LinkProperties = { }; describe('PageHeader', () => { - beforeAll(() => { + beforeEach(() => { render( { }); test('renders the PageHeader nav items', () => { - expect(screen.getByTestId('extended-nav')).toHaveTextContent('Exploration'); + const navElement = screen.getByRole('navigation'); + expect(navElement).toBeInTheDocument(); + + const primaryNav = screen.getAllByRole('list')[0]; + const secondaryNav = screen.getAllByRole('list')[1]; + + expect(primaryNav.childElementCount).toEqual(mockMainNavItems.length); + expect(secondaryNav.childElementCount).toEqual(mockSubNavItems.length); + + // @TODO: can't find the text content! + expect(getByText(primaryNav, 'Data Catalog')).toBeInTheDocument(); + expect(within(primaryNav).getByText(/Data Catalog/)).toBeInTheDocument(); + expect(within(primaryNav).getByText('Exploration')).toBeInTheDocument(); + expect(within(primaryNav).getByText('Stories')).toBeInTheDocument(); + + expect(within(secondaryNav).getByText('About')).toBeInTheDocument(); + expect(within(secondaryNav).getByText('Contact')).toBeInTheDocument(); }); }); From 9ee11aaf19fa637336af8b90ad3066c7c8af1a84 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 19 Nov 2024 12:58:04 +0100 Subject: [PATCH 32/87] Limit query scope --- .../components/common/page-header/page-header.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index a596567ad..89ea3c59a 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -70,8 +70,8 @@ describe('PageHeader', () => { const navElement = screen.getByRole('navigation'); expect(navElement).toBeInTheDocument(); - const primaryNav = screen.getAllByRole('list')[0]; - const secondaryNav = screen.getAllByRole('list')[1]; + const primaryNav = within(navElement).getAllByRole('list')[0]; + const secondaryNav = within(navElement).getAllByRole('list')[1]; expect(primaryNav.childElementCount).toEqual(mockMainNavItems.length); expect(secondaryNav.childElementCount).toEqual(mockSubNavItems.length); From 96f9189123853848aea25dc2a72064739692927a Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 19 Nov 2024 14:34:45 -0500 Subject: [PATCH 33/87] resolved conflics, add id to NavItem types --- .../common/page-header/default-config.ts | 6 + .../components/common/page-header/index.tsx | 10 +- .../common/page-header/logo-container.tsx | 105 ------------------ .../page-header/logo-container/index.tsx | 4 +- .../page-header/logo-container/styles.scss | 2 +- .../nav/create-dynamic-nav-menu-list.tsx | 2 +- .../page-header/nav/nav-dropdown-button.tsx | 2 +- .../common/page-header/nav/nav-item-links.tsx | 2 +- .../common/page-header/page-header.test.tsx | 7 +- .../components/common/page-header/types.ts | 15 +-- app/scripts/styles/_uswds-theme.scss | 1 + app/scripts/styles/_veda-ui-theme-vars.scss | 3 +- mock/veda.config.js | 9 ++ 13 files changed, 47 insertions(+), 121 deletions(-) delete mode 100644 app/scripts/components/common/page-header/logo-container.tsx diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index 0c9a3b162..a54584436 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -21,16 +21,19 @@ let defaultMainNavItems: ( | ActionNavItem )[] = [ { + id: 'data-catalog', title: 'Data Catalog', to: DATASETS_PATH, type: NavItemType.INTERNAL_LINK }, { + id: 'exploration', title: 'Exploration', to: EXPLORATION_PATH, type: NavItemType.INTERNAL_LINK }, { + id: 'stories', title: getString('stories').other, to: STORIES_PATH, type: NavItemType.INTERNAL_LINK @@ -54,6 +57,7 @@ let defaultSubNavItems: ( | ActionNavItem )[] = [ { + id: 'about', title: 'About', to: ABOUT_PATH, type: NavItemType.INTERNAL_LINK @@ -65,6 +69,7 @@ if (process.env.GOOGLE_FORM !== undefined) { defaultSubNavItems = [ ...defaultSubNavItems, { + id: 'contact-us', title: 'Contact us', actionId: 'open-google-form', type: NavItemType.ACTION @@ -74,6 +79,7 @@ if (process.env.GOOGLE_FORM !== undefined) { defaultSubNavItems = [ ...defaultSubNavItems, { + id: 'contact-us', title: 'Contact us', actionId: 'open-google-form', src: process.env.GOOGLE_FORM, diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 1c327ace4..34d4ad01f 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, useState } from 'react'; import { Link } from 'react-router-dom'; -import { LinkProperties } from '@types/veda'; +import { LinkProperties } from '$types/veda'; import { NavItem } from './types'; import LogoContainer from './logo-container'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; @@ -51,6 +51,13 @@ const PageHeader: React.FC = ({ const secondaryItems = createDynamicNavMenuList(subNavItems, linkProperties); // @TODO: we should close the menu when the user clicks on a link (internal or other cta) const themeMode = mode ? `mode-${mode}` : 'mode-light'; + + const handleExtendedNavClick = (e) => { + console.log(`ecurrenttarget: `, e.currentTarget) + console.log(`eparentnode: `, e.target.parentNode) + + } + return ( <> @@ -75,6 +82,7 @@ const PageHeader: React.FC = ({ secondaryItems={secondaryItems} mobileExpanded={expanded} onToggleMobileNav={toggleExpansion} + onClick={handleExtendedNavClick} /> diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx deleted file mode 100644 index 46709fc35..000000000 --- a/app/scripts/components/common/page-header/logo-container.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import React, { ComponentType } from 'react'; -import styled from 'styled-components'; -import { Tip } from '../tip'; -import { LinkProperties } from '$types/veda'; - -//@TODO: Add design tokens from theme -const Container = styled.div` - display: flex; - flex-shrink: 0; - - a { - display: grid; - align-items: center; - - &, - &:visited { - color: inherit; - text-decoration: none; - } - - #nasa-logo-pos { - opacity: 1; - transform: translate(0, -100%); //@TODO: fix svg translate - } - - svg { - grid-row: 1 / span 2; - height: 2.5rem; - width: auto; - } - - span:first-of-type { - font-size: 0.875rem; - line-height: 1rem; - font-weight: extrabold; - text-transform: uppercase; - } - - span:last-of-type { - grid-row: 2; - font-size: 1.25rem; - line-height: 1.5rem; - font-weight: regular; - letter-spacing: -0.025em; - } - } -`; - -export const BetaTag = styled.a` - align-self: end; - font-size: 0.75rem; - font-weight: bold; - line-height: 1rem; - text-transform: uppercase; - - &&, - &&:visited { - color: primary; - } -`; - -/** - * LogoContainer that is meant to integrate in the default - * page header without the dependencies of the veda virtual modules - * and expects the Logo SVG to be passed in as a prop - this will - * support the instance for refactor - */ - -export default function LogoContainer({ - linkProperties, - Logo, - title, - subTitle, - version -}: { - linkProperties: LinkProperties; - Logo?: JSX.Element; - title: string; - subTitle?: string; - version?: string; -}) { - const LinkElement: ComponentType = - linkProperties.LinkElement as ComponentType; - - return ( - - - {Logo} - {title} {subTitle && {subTitle}} - - {version && ( - - , - [linkProperties.pathAttributeKeyName]: '/development' - }} - > - Beta - - - )} - - ); -} diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index 59a082de6..62d989368 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -1,6 +1,6 @@ import React, { ComponentType } from 'react'; import { Tip } from '../../tip'; -import { LinkProperties } from '../../card'; +import { LinkProperties } from '$types/veda'; import './styles.scss'; /** @@ -48,4 +48,4 @@ export default function LogoContainer({ )}
    ); -} +} \ No newline at end of file diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index 0577c6b17..02a855646 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -29,7 +29,7 @@ color: white; align-self: center; font-size: 0.75rem; - font-weight: bold; + font-weight: themeVars.$veda-uswds-fontweight-semibold; line-height: 1rem; padding: 0 themeVars.$veda-uswds-spacing-5; border-radius: 2px; diff --git a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx index f5341a462..dcb7501a9 100644 --- a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { LinkProperties } from '../../card'; +import { LinkProperties } from '$types/veda'; import { NavItem, NavItemType } from '../types'; import { NavDropDownButton } from './nav-dropdown-button'; import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; diff --git a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx index 2d3387621..7f4683e3e 100644 --- a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { LinkProperties } from '../../card'; +import { LinkProperties } from '$types/veda'; import { USWDSNavDropDownButton } from '../../uswds/header/nav-drop-down-button'; import { USWDSMenu } from '../../uswds/header/menu'; import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list'; diff --git a/app/scripts/components/common/page-header/nav/nav-item-links.tsx b/app/scripts/components/common/page-header/nav/nav-item-links.tsx index 44a33a28e..22c723d9c 100644 --- a/app/scripts/components/common/page-header/nav/nav-item-links.tsx +++ b/app/scripts/components/common/page-header/nav/nav-item-links.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { LinkProperties } from '../../card'; +import { LinkProperties } from '$types/veda'; import { ExternalNavLink, InternalNavLink } from '../types'; interface NavItemExternalLinkProps { diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 89ea3c59a..0cdaa9b32 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -3,7 +3,7 @@ import { getByText, render, screen, within } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; import { NavLink } from 'react-router-dom'; -import { LinkProperties } from '../card'; +import { LinkProperties } from '$types/veda'; import NasaLogoColor from '../nasa-logo-color'; import { NavItem, NavItemType } from './types'; import PageHeader from './index'; @@ -14,16 +14,19 @@ import PageHeader from './index'; const mockMainNavItems: NavItem[] = [ { + id: 'data-catalog', title: 'Data Catalog', to: '/data-catalog', type: NavItemType.INTERNAL_LINK }, { + id: 'exploration', title: 'Exploration', to: '/exploration', type: NavItemType.INTERNAL_LINK }, { + id: 'stories', title: 'Stories', to: '/stories', type: NavItemType.INTERNAL_LINK @@ -32,11 +35,13 @@ const mockMainNavItems: NavItem[] = [ const mockSubNavItems: NavItem[] = [ { + id: 'about', title: 'About', to: '/about', type: NavItemType.INTERNAL_LINK }, { + id: 'contact', title: 'Contact', to: '/contact', type: NavItemType.INTERNAL_LINK diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 1ad99f16e..5ac37406b 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -10,29 +10,30 @@ export enum NavItemType { export type ActionId = 'open-google-form' | undefined; // @NOTE: ActionIds are nav items that perform some type of action but without it being a button -export interface InternalNavLink { +interface BaseNavItems { + id: string; title: string; +} + +export interface InternalNavLink extends BaseNavItems { to: string; type: NavItemType.INTERNAL_LINK; } -export interface ExternalNavLink { - title: string; +export interface ExternalNavLink extends BaseNavItems { href: string; type: NavItemType.EXTERNAL_LINK; } export type NavLinkItem = ExternalNavLink | InternalNavLink; -export interface ActionNavItem { - title: string; +export interface ActionNavItem extends BaseNavItems { actionId: ActionId; src?: string; type: NavItemType.ACTION; } -export interface DropdownNavLink { - title: string; +export interface DropdownNavLink extends BaseNavItems { type: NavItemType.DROPDOWN; children: NavLinkItem[]; } diff --git a/app/scripts/styles/_uswds-theme.scss b/app/scripts/styles/_uswds-theme.scss index c80f86135..c66cd98f9 100644 --- a/app/scripts/styles/_uswds-theme.scss +++ b/app/scripts/styles/_uswds-theme.scss @@ -2,6 +2,7 @@ @use 'uswds-core' as * with ( $utilities-use-important: true, $theme-show-notifications: false, + $theme-font-weight-semibold: '600', // To add more custom fonts, see 'Adding fonts to USWDS': // https://designsystem.digital.gov/design-tokens/typesetting/font-family/ $theme-typeface-tokens: ( diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss index 7af323014..04645a50f 100644 --- a/app/scripts/styles/_veda-ui-theme-vars.scss +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -14,12 +14,13 @@ $veda-uswds-basefont-sans: utils.family('sans'); $veda-uswds-fontweight-light: utils.font-weight('light'); $veda-uswds-fontweight-regular: utils.font-weight('normal'); $veda-uswds-fontweight-bold: utils.font-weight('bold'); +$veda-uswds-fontweight-semibold: 600; // @TODO: needs to map to uswds token // COLORS $veda-uswds-color-primary-darker: utils.color('primary-darker'); $veda-uswds-color-secondary: utils.color('secondary'); $veda-uswds-color-base-darkest: utils.color('base-darkest'); -$veda-uswds-color-base-white: #FFFFFF; +$veda-uswds-color-base-white: #FFFFFF; // @TODO: wasn't able to find this token $veda-uswds-color-base-light: utils.color('base-light'); $veda-uswds-color-base-ink: utils.color('ink'); diff --git a/mock/veda.config.js b/mock/veda.config.js index 355cce714..8441f2761 100644 --- a/mock/veda.config.js +++ b/mock/veda.config.js @@ -6,6 +6,7 @@ function checkEnvFlag(value) { let mainNavItems = [ { + id: 'test', title: 'Test', type: 'dropdown', children: [ @@ -17,6 +18,7 @@ let mainNavItems = [ ] }, { + id: 'another-test', title: 'Another Test', type: 'dropdown', children: [ @@ -28,16 +30,19 @@ let mainNavItems = [ ] }, { + id: 'data-catalog', title: 'Data Catalog', to: '/data-catalog', type: 'internalLink' }, { + id: 'exploration', title: 'Exploration', to: '/exploration', type: 'internalLink' }, { + id: 'stories', title: 'Stories', to: '/stories', type: 'internalLink' @@ -48,6 +53,7 @@ if (!!config.HUB_URL && !!config.HUB_NAME) mainNavItems = [ ...mainNavItems, { + id: 'hub', title: process.env.HUB_NAME, href: process.env.HUB_URL, type: 'externalLink' @@ -56,6 +62,7 @@ if (!!config.HUB_URL && !!config.HUB_NAME) let subNavItems = [ { + id: 'about', title: 'About', to: '/about', type: 'internalLink' @@ -67,6 +74,7 @@ if (config.GOOGLE_FORM) { subNavItems = [ ...subNavItems, { + id: 'contact-us', title: 'Contact us', actionId: 'open-google-form', type: 'action' @@ -76,6 +84,7 @@ if (config.GOOGLE_FORM) { subNavItems = [ ...subNavItems, { + id: 'contact-us', title: 'Contact us', actionId: 'open-google-form', type: 'button' From b9dd0acfa4180459d65a429044b24e7c0c723b0a Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 19 Nov 2024 17:25:56 -0500 Subject: [PATCH 34/87] add id to navtypes and update accessibility styling on primary nav items --- .../components/common/page-header/index.tsx | 33 ++++++++----------- .../page-header/nav/nav-dropdown-button.tsx | 7 ++-- .../common/page-header/nav/nav-item-cta.tsx | 4 +-- .../common/page-header/nav/nav-item-links.tsx | 9 ++--- .../components/common/page-header/styles.scss | 25 ++++++++++++++ mock/veda.config.js | 2 ++ parcel-resolver-veda/index.d.ts | 3 ++ 7 files changed, 55 insertions(+), 28 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 34d4ad01f..f68d34042 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState } from 'react'; +import React, { ReactElement, useState, useMemo, useEffect } from 'react'; import { Link } from 'react-router-dom'; import { LinkProperties } from '$types/veda'; @@ -31,32 +31,28 @@ const PageHeader: React.FC = ({ //@TODO: toggle expanded on window resize! Or on click anywhere? // weird, should be implemented on the library side of things, see https://vscode.dev/github/NASA-IMPACT/veda-ui/blob/1137-implement-new-ds-page-header/node_modules/%40uswds/uswds/packages/usa-header/src/index.js#L155-L156 - const [expanded, setExpanded] = useState(false); - const toggleExpansion = (): void => - setExpanded((prvExpanded) => { - return !prvExpanded; - }); - + const [expanded, setExpanded] = useState(false); const [isOpen, setIsOpen] = useState( mainNavItems.map(() => false) ); - const primaryItems = createDynamicNavMenuList( - mainNavItems, - linkProperties, - isOpen, - setIsOpen - ); + const toggleExpansion = (): void => { + setExpanded((prvExpanded) => { + return !prvExpanded; + }); + } - const secondaryItems = createDynamicNavMenuList(subNavItems, linkProperties); // @TODO: we should close the menu when the user clicks on a link (internal or other cta) const themeMode = mode ? `mode-${mode}` : 'mode-light'; - const handleExtendedNavClick = (e) => { - console.log(`ecurrenttarget: `, e.currentTarget) - console.log(`eparentnode: `, e.target.parentNode) + const primaryItems = useMemo(() => createDynamicNavMenuList( + mainNavItems, + linkProperties, + isOpen, + setIsOpen, + ), [mainNavItems, isOpen]); - } + const secondaryItems = useMemo(() => createDynamicNavMenuList(subNavItems, linkProperties), [subNavItems]); return ( <> @@ -82,7 +78,6 @@ const PageHeader: React.FC = ({ secondaryItems={secondaryItems} mobileExpanded={expanded} onToggleMobileNav={toggleExpansion} - onClick={handleExtendedNavClick} /> diff --git a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx index 7f4683e3e..39420091a 100644 --- a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx @@ -3,9 +3,10 @@ import { LinkProperties } from '$types/veda'; import { USWDSNavDropDownButton } from '../../uswds/header/nav-drop-down-button'; import { USWDSMenu } from '../../uswds/header/menu'; import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list'; +import { DropdownNavLink } from '../types'; interface NavDropDownButtonProps { - item: { title: string; children: any[] }; + item: DropdownNavLink; isOpen: boolean[]; setIsOpen: React.Dispatch>; index: number; @@ -40,7 +41,7 @@ export const NavDropDownButton: React.FC = ({ ); return ( - + onToggle(index, setIsOpen)} menuId={item.title} @@ -50,7 +51,7 @@ export const NavDropDownButton: React.FC = ({ ); diff --git a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx index c91f9c8a7..e3c999901 100644 --- a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx +++ b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx @@ -12,10 +12,10 @@ export const NavItemCTA: React.FC = ({ }): JSX.Element => { const { isRevealed, show, hide } = useFeedbackModal(); return ( - + {item.actionId === 'open-google-form' && ( <> - + {item.title} = ({ - item + item, }): JSX.Element => { return ( {item.title} @@ -29,7 +30,7 @@ export const NavItemExternalLink: React.FC = ({ export const NavItemInternalLink: React.FC = ({ item, - linkProperties + linkProperties, }): JSX.Element | null => { if (linkProperties.LinkElement) { const path = { @@ -37,7 +38,7 @@ export const NavItemInternalLink: React.FC = ({ }; const LinkElement = linkProperties.LinkElement; return ( - + {item.title} ); diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index d34190758..1802a063a 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -9,6 +9,31 @@ } } +.usa-nav__link { + &[aria-current="page"] { + span { + font-weight: themeVars.$veda-uswds-fontweight-bold !important; + } + } +} + +.usa-nav__primary-item { + button { + &[aria-expanded="true"] { + span { + font-weight: themeVars.$veda-uswds-fontweight-bold !important; + color: themeVars.$veda-uswds-color-base-white !important; + } + } + } + + .usa-nav__submenu { + span { + color: themeVars.$veda-uswds-color-base-white !important; + } + } +} + #mode-dark { background-color: themeVars.$veda-uswds-color-primary-darker; } diff --git a/mock/veda.config.js b/mock/veda.config.js index 8441f2761..68c011ca6 100644 --- a/mock/veda.config.js +++ b/mock/veda.config.js @@ -11,6 +11,7 @@ let mainNavItems = [ type: 'dropdown', children: [ { + id: 'dropdown-menu-item-1', title: 'dropdown menu item 1', to: '/stories', type: 'internalLink' @@ -23,6 +24,7 @@ let mainNavItems = [ type: 'dropdown', children: [ { + id: 'dropdown-menu-item-2', title: 'dropdown menu item 2', to: '/stories', type: 'internalLink' diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index aeec918e0..a47e84c72 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -280,11 +280,13 @@ declare module 'veda' { } interface InternalNavLink { + id: string; title: string; to: string; type: 'internalLink'; } interface ExternalNavLink { + id: string; title: string; href: string; type: 'externalLink'; @@ -292,6 +294,7 @@ declare module 'veda' { type NavLinkItem = ExternalNavLink | InternalNavLink; export interface DropdownNavLink { + id: string; title: string; type: 'dropdown'; children: NavLinkItem[]; From 492929681b58ba2c017b2c7059e396c57ea078b3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 20 Nov 2024 11:22:44 +0100 Subject: [PATCH 35/87] Fix type import in legacy page header Along with prettier formatting... --- .../common/page-header-legacy/index.tsx | 154 ++++++++++-------- .../components/common/page-header/index.tsx | 24 +-- 2 files changed, 100 insertions(+), 78 deletions(-) diff --git a/app/scripts/components/common/page-header-legacy/index.tsx b/app/scripts/components/common/page-header-legacy/index.tsx index baf2bd191..dd286585d 100644 --- a/app/scripts/components/common/page-header-legacy/index.tsx +++ b/app/scripts/components/common/page-header-legacy/index.tsx @@ -1,4 +1,10 @@ -import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react'; +import React, { + useCallback, + useEffect, + useRef, + useState, + ReactElement +} from 'react'; import styled, { css } from 'styled-components'; import { glsp, @@ -10,21 +16,18 @@ import { import { reveal } from '@devseed-ui/animation'; import { Heading, Overline } from '@devseed-ui/typography'; import { Button } from '@devseed-ui/button'; -import { - CollecticonHamburgerMenu -} from '@devseed-ui/collecticons'; +import { CollecticonHamburgerMenu } from '@devseed-ui/collecticons'; import UnscrollableBody from '../unscrollable-body'; -import { LinkProperties } from '../card'; import { NavItem } from '../page-header/types'; import NavMenuItem from './nav-menu-item'; +import { LinkProperties } from '$types/veda'; import { variableGlsp } from '$styles/variable-utils'; import { PAGE_BODY_ID } from '$components/common/layout-root'; import { useMediaQuery } from '$utils/use-media-query'; import { HEADER_ID } from '$utils/use-sliding-sticky-header'; - const PageHeaderSelf = styled.header` display: flex; flex-flow: row nowrap; @@ -41,7 +44,6 @@ const PageHeaderSelf = styled.header` } `; - const GlobalNav = styled.nav<{ revealed: boolean }>` position: fixed; inset: 0 0 0 auto; @@ -268,71 +270,89 @@ function PageHeader(props: PageHeaderProps) { // Then find a next focusable element in pagebody,focus it. const pageBody = document.getElementById(PAGE_BODY_ID); if (pageBody) { - pageBody.focus(); + pageBody.focus(); } } return ( <> - Skip to main content - - {globalNavRevealed && isMediumDown && } - {logo} - {isMediumDown && ( - - setGlobalNavRevealed((v) => !v)} - active={globalNavRevealed} - > - - - - )} - - - {isMediumDown && ( - <> - - - - - )} - - - - Global - - {mainNavItems.map((item) => { - return ; - })} - - - - Meta - - {subNavItems.map((item) => { - return ; - })} - - - - - - - + + Skip to main content + + + {globalNavRevealed && isMediumDown && } + {logo} + {isMediumDown && ( + + setGlobalNavRevealed((v) => !v)} + active={globalNavRevealed} + > + + + + )} + + + {isMediumDown && ( + <> + + + + + )} + + + + Global + + {mainNavItems.map((item) => { + return ( + + ); + })} + + + + Meta + + {subNavItems.map((item) => { + return ( + + ); + })} + + + + + + + ); } diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index f68d34042..7a4081271 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,10 +1,10 @@ -import React, { ReactElement, useState, useMemo, useEffect } from 'react'; +import React, { ReactElement, useState, useMemo } from 'react'; import { Link } from 'react-router-dom'; -import { LinkProperties } from '$types/veda'; import { NavItem } from './types'; import LogoContainer from './logo-container'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; +import { LinkProperties } from '$types/veda'; import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; @@ -40,19 +40,21 @@ const PageHeader: React.FC = ({ setExpanded((prvExpanded) => { return !prvExpanded; }); - } + }; // @TODO: we should close the menu when the user clicks on a link (internal or other cta) const themeMode = mode ? `mode-${mode}` : 'mode-light'; - const primaryItems = useMemo(() => createDynamicNavMenuList( - mainNavItems, - linkProperties, - isOpen, - setIsOpen, - ), [mainNavItems, isOpen]); + const primaryItems = useMemo( + () => + createDynamicNavMenuList(mainNavItems, linkProperties, isOpen, setIsOpen), + [mainNavItems, isOpen] + ); - const secondaryItems = useMemo(() => createDynamicNavMenuList(subNavItems, linkProperties), [subNavItems]); + const secondaryItems = useMemo( + () => createDynamicNavMenuList(subNavItems, linkProperties), + [subNavItems] + ); return ( <> @@ -84,4 +86,4 @@ const PageHeader: React.FC = ({ ); }; -export default PageHeader; \ No newline at end of file +export default PageHeader; From 653577fc7ec8437db059a76d6d2d79f582cddf71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 20 Nov 2024 11:24:48 +0100 Subject: [PATCH 36/87] =?UTF-8?q?Mock=20NavLink=20in=20header=20test:=20?= =?UTF-8?q?=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/page-header/page-header.test.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 0cdaa9b32..2b0f968ee 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -1,9 +1,7 @@ -import React from 'react'; -import { getByText, render, screen, within } from '@testing-library/react'; +import React, { ComponentType } from 'react'; +import { render, screen, within } from '@testing-library/react'; import '@testing-library/jest-dom/extend-expect'; -import { NavLink } from 'react-router-dom'; -import { LinkProperties } from '$types/veda'; import NasaLogoColor from '../nasa-logo-color'; import { NavItem, NavItemType } from './types'; import PageHeader from './index'; @@ -48,9 +46,9 @@ const mockSubNavItems: NavItem[] = [ } ]; -const mockLinkProperties: LinkProperties = { +const mockLinkProperties = { pathAttributeKeyName: 'to', - LinkElement: NavLink + LinkElement: 'a' as unknown as ComponentType }; describe('PageHeader', () => { @@ -80,10 +78,7 @@ describe('PageHeader', () => { expect(primaryNav.childElementCount).toEqual(mockMainNavItems.length); expect(secondaryNav.childElementCount).toEqual(mockSubNavItems.length); - - // @TODO: can't find the text content! - expect(getByText(primaryNav, 'Data Catalog')).toBeInTheDocument(); - expect(within(primaryNav).getByText(/Data Catalog/)).toBeInTheDocument(); + expect(within(primaryNav).getByText('Data Catalog')).toBeInTheDocument(); expect(within(primaryNav).getByText('Exploration')).toBeInTheDocument(); expect(within(primaryNav).getByText('Stories')).toBeInTheDocument(); From 4b79efcfdf1d84bf45cb267d206d414f18ed7f7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 20 Nov 2024 13:00:27 +0100 Subject: [PATCH 37/87] Test user clicks on dropdown Not sure if we want to test the UI library in such detail though --- .../common/page-header/page-header.test.tsx | 33 +++++++++++++++++++ package.json | 1 + yarn.lock | 5 +++ 3 files changed, 39 insertions(+) diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 2b0f968ee..58bc12afb 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -1,5 +1,6 @@ import React, { ComponentType } from 'react'; import { render, screen, within } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import '@testing-library/jest-dom/extend-expect'; import NasaLogoColor from '../nasa-logo-color'; @@ -11,6 +12,25 @@ import PageHeader from './index'; // config & create dynamic nav menu list fn - different scenerios, happy vs unhappy path const mockMainNavItems: NavItem[] = [ + { + id: 'dropdown', + title: 'Dropdown', + type: NavItemType.DROPDOWN, + children: [ + { + id: 'submenu-1', + title: 'Submenu 1', + to: '/submenu-1', + type: NavItemType.INTERNAL_LINK + }, + { + id: 'submenu-2', + title: 'Submenu 2', + to: '/submenu-2', + type: NavItemType.INTERNAL_LINK + } + ] + }, { id: 'data-catalog', title: 'Data Catalog', @@ -78,6 +98,7 @@ describe('PageHeader', () => { expect(primaryNav.childElementCount).toEqual(mockMainNavItems.length); expect(secondaryNav.childElementCount).toEqual(mockSubNavItems.length); + expect(within(primaryNav).getByText('Dropdown')).toBeInTheDocument(); expect(within(primaryNav).getByText('Data Catalog')).toBeInTheDocument(); expect(within(primaryNav).getByText('Exploration')).toBeInTheDocument(); expect(within(primaryNav).getByText('Stories')).toBeInTheDocument(); @@ -85,4 +106,16 @@ describe('PageHeader', () => { expect(within(secondaryNav).getByText('About')).toBeInTheDocument(); expect(within(secondaryNav).getByText('Contact')).toBeInTheDocument(); }); + + test('the nav items are clickable and open the drop down', async () => { + const user = userEvent.setup(); + const navElement = screen.getByRole('navigation'); + expect(navElement).toBeInTheDocument(); + + const primaryNav = within(navElement).getAllByRole('list')[0]; + const navItem = screen.getByText('Dropdown'); + expect(within(primaryNav).getByText('Submenu 1')).not.toBeVisible(); + await user.click(navItem); + expect(within(primaryNav).getByText('Submenu 1')).toBeVisible(); + }); }); diff --git a/package.json b/package.json index 98aa6404d..f6d770ea5 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "@playwright/test": "^1.46.1", "@testing-library/jest-dom": "^5.16.2", "@testing-library/react": "^12.1.2", + "@testing-library/user-event": "^14.5.2", "@types/d3": "^7.4.0", "@types/mapbox-gl": "^2.7.5", "@types/node": "^22.5.0", diff --git a/yarn.lock b/yarn.lock index 659ec8722..a0eb56490 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3862,6 +3862,11 @@ "@testing-library/dom" "^8.0.0" "@types/react-dom" "<18.0.0" +"@testing-library/user-event@^14.5.2": + version "14.5.2" + resolved "http://verdaccio.ds.io:4873/@testing-library%2fuser-event/-/user-event-14.5.2.tgz#db7257d727c891905947bd1c1a99da20e03c2ebd" + integrity sha512-YAh82Wh4TIrxYLmfGcixwD18oIjyC1pFQC2Y01F2lzV2HTMiYrI0nze0FD0ocB//CKS/7jIUgae+adPqxK5yCQ== + "@tippyjs/react@^4.2.6": version "4.2.6" resolved "http://verdaccio.ds.io:4873/@tippyjs%2freact/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71" From 9650683e9a08964e8a2e72d5034ba7e703be3be9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Thu, 21 Nov 2024 09:57:31 +0100 Subject: [PATCH 38/87] Add test for header theme mode --- .../common/page-header/page-header.test.tsx | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 58bc12afb..7eb459eb6 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -8,7 +8,6 @@ import { NavItem, NavItemType } from './types'; import PageHeader from './index'; // @NOTE: Possible Test cases -// light vs dark mode // config & create dynamic nav menu list fn - different scenerios, happy vs unhappy path const mockMainNavItems: NavItem[] = [ @@ -119,3 +118,36 @@ describe('PageHeader', () => { expect(within(primaryNav).getByText('Submenu 1')).toBeVisible(); }); }); + +describe('PageHeader light and dark mode', () => { + // @NOTE: We do not test css here, only attributes accessible via DOM + test('the header is in light mode by default', () => { + render( + } + linkProperties={mockLinkProperties} + // no mode specified + /> + ); + const header = screen.getByTestId('header'); + + expect(header.id).toEqual('mode-light'); + }); + + test('the header can be changed to dark mode using the prop', () => { + render( + } + linkProperties={mockLinkProperties} + mode='dark' + /> + ); + const header = screen.getByTestId('header'); + + expect(header.id).toEqual('mode-dark'); + }); +}); From 0d0d464fc0543fe92fb09ebce860dceef76b3072 Mon Sep 17 00:00:00 2001 From: Gjore Milevski Date: Thu, 21 Nov 2024 10:26:28 +0100 Subject: [PATCH 39/87] Add extension to test Netlify build --- .../components/common/page-header/logo-container/styles.scss | 4 ++-- app/scripts/components/common/page-header/styles.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index 02a855646..204f46ebb 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -1,4 +1,4 @@ -@use '$styles/veda-ui-theme-vars' as themeVars; +@use '$styles/veda-ui-theme-vars.scss' as themeVars; #logo-container { display: flex; @@ -9,7 +9,7 @@ display: flex; align-items: center; } - + span { color: themeVars.$veda-uswds-color-base-darkest !important; } diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index 1802a063a..a36b2abcd 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -1,4 +1,4 @@ -@use '$styles/veda-ui-theme-vars' as themeVars; +@use '$styles/veda-ui-theme-vars.scss' as themeVars; #mode-light { .usa-nav__link { From c263635eefa7a8aeb0a9ed80b54638b172807d05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Thu, 21 Nov 2024 11:44:27 +0100 Subject: [PATCH 40/87] Remove TODO, moved to PR comment --- app/scripts/components/common/page-header/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 7a4081271..9dc14d2d1 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -28,9 +28,6 @@ const PageHeader: React.FC = ({ linkProperties, mode }) => { - //@TODO: toggle expanded on window resize! Or on click anywhere? - // weird, should be implemented on the library side of things, see https://vscode.dev/github/NASA-IMPACT/veda-ui/blob/1137-implement-new-ds-page-header/node_modules/%40uswds/uswds/packages/usa-header/src/index.js#L155-L156 - const [expanded, setExpanded] = useState(false); const [isOpen, setIsOpen] = useState( mainNavItems.map(() => false) @@ -42,7 +39,6 @@ const PageHeader: React.FC = ({ }); }; - // @TODO: we should close the menu when the user clicks on a link (internal or other cta) const themeMode = mode ? `mode-${mode}` : 'mode-light'; const primaryItems = useMemo( From f448915a23f1a8986f547776296d0ad0c00e0b65 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Thu, 21 Nov 2024 20:10:54 -0500 Subject: [PATCH 41/87] remove theme mode and custom headernav styles --- .../components/common/page-header/index.tsx | 9 +---- .../page-header/logo-container/index.tsx | 4 +- .../components/common/page-header/styles.scss | 40 ------------------- 3 files changed, 3 insertions(+), 50 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 9dc14d2d1..701c42cfb 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -18,15 +18,13 @@ interface PageHeaderProps { subNavItems: NavItem[]; logo?: ReactElement; linkProperties: LinkProperties; - mode?: 'dark' | 'light'; } const PageHeader: React.FC = ({ mainNavItems, subNavItems, logo: Logo, - linkProperties, - mode + linkProperties }) => { const [expanded, setExpanded] = useState(false); const [isOpen, setIsOpen] = useState( @@ -39,8 +37,6 @@ const PageHeader: React.FC = ({ }); }; - const themeMode = mode ? `mode-${mode}` : 'mode-light'; - const primaryItems = useMemo( () => createDynamicNavMenuList(mainNavItems, linkProperties, isOpen, setIsOpen), @@ -54,7 +50,7 @@ const PageHeader: React.FC = ({ return ( <> - +
    = ({ title='Earthdata VEDA Dashboard' subTitle={appTitle} version={appVersion} - themeMode={themeMode} /> diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index 62d989368..2c0eb23b3 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -15,20 +15,18 @@ export default function LogoContainer({ Logo, title, version, - themeMode = 'mode-light', }: { linkProperties: LinkProperties; Logo?: JSX.Element; title: string; subTitle?: string; version?: string; - themeMode?: string; }) { const LinkElement: ComponentType = linkProperties.LinkElement as ComponentType; return ( -
    +
    {Logo} {title} diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index a36b2abcd..078ebd6b9 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -1,43 +1,3 @@ -@use '$styles/veda-ui-theme-vars.scss' as themeVars; - -#mode-light { - .usa-nav__link { - span { - color: themeVars.$veda-uswds-color-base-ink; - font-weight: themeVars.$veda-uswds-fontweight-regular; - } - } -} - -.usa-nav__link { - &[aria-current="page"] { - span { - font-weight: themeVars.$veda-uswds-fontweight-bold !important; - } - } -} - -.usa-nav__primary-item { - button { - &[aria-expanded="true"] { - span { - font-weight: themeVars.$veda-uswds-fontweight-bold !important; - color: themeVars.$veda-uswds-color-base-white !important; - } - } - } - - .usa-nav__submenu { - span { - color: themeVars.$veda-uswds-color-base-white !important; - } - } -} - -#mode-dark { - background-color: themeVars.$veda-uswds-color-primary-darker; -} - .usa-logo { max-width: none !important; } From 1410620159c005bfd51dbe8e0f63a02249c0957c Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Thu, 21 Nov 2024 23:59:36 -0500 Subject: [PATCH 42/87] overrwrite default ui role-based token --- .../common/page-header/logo-container/styles.scss | 6 ------ app/scripts/styles/_uswds-theme.scss | 8 +++++++- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index 204f46ebb..d76cd6c47 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -49,10 +49,4 @@ font-weight: regular; letter-spacing: -0.025em; } -} - -.mode-dark { - span { - color: themeVars.$veda-uswds-color-base-white !important; - } } \ No newline at end of file diff --git a/app/scripts/styles/_uswds-theme.scss b/app/scripts/styles/_uswds-theme.scss index c66cd98f9..ff1b04f09 100644 --- a/app/scripts/styles/_uswds-theme.scss +++ b/app/scripts/styles/_uswds-theme.scss @@ -16,6 +16,12 @@ "mobile-lg": false, "desktop": false ), - $theme-font-type-sans: baseFontFamily, $theme-font-type-serif: baseFontFamily, + $theme-font-type-sans: 'public-sans', ); + + +// @NOTE: 'ui' & 'body' (role-based tokens) seems to be the default font-family setting token ($theme-font-role-ui) across components https://designsystem.digital.gov/documentation/settings/#typography-settings, +// for example footer, header, form, button, banner, etc. Could we just ovewrite those to look at public-sans which is what we want our default? +// $theme-font-role-ui role-based token maps to 'sans' type-based token +// $theme-font-role-body maps to 'sans' type-based token \ No newline at end of file From f0bfae2cc36dce8b65ade8c415e020300d7d6677 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 11:59:37 +0100 Subject: [PATCH 43/87] Remove test case for dark mode After it was removed from the code, we don't need to test it anymore --- .../common/page-header/page-header.test.tsx | 33 ------------------- 1 file changed, 33 deletions(-) diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 7eb459eb6..605d77e4f 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -118,36 +118,3 @@ describe('PageHeader', () => { expect(within(primaryNav).getByText('Submenu 1')).toBeVisible(); }); }); - -describe('PageHeader light and dark mode', () => { - // @NOTE: We do not test css here, only attributes accessible via DOM - test('the header is in light mode by default', () => { - render( - } - linkProperties={mockLinkProperties} - // no mode specified - /> - ); - const header = screen.getByTestId('header'); - - expect(header.id).toEqual('mode-light'); - }); - - test('the header can be changed to dark mode using the prop', () => { - render( - } - linkProperties={mockLinkProperties} - mode='dark' - /> - ); - const header = screen.getByTestId('header'); - - expect(header.id).toEqual('mode-dark'); - }); -}); From 7c0d0315834526f02bbfb0b26a999f575f9891e7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:05:25 +0100 Subject: [PATCH 44/87] Use mock/veda.config.js for header test --- .../common/page-header/page-header.test.tsx | 70 +++---------------- 1 file changed, 10 insertions(+), 60 deletions(-) diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 605d77e4f..852a8c014 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -3,67 +3,16 @@ import { render, screen, within } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import '@testing-library/jest-dom/extend-expect'; +import { navItems } from '../../../../../mock/veda.config.js'; import NasaLogoColor from '../nasa-logo-color'; -import { NavItem, NavItemType } from './types'; +import { NavItem } from './types'; import PageHeader from './index'; // @NOTE: Possible Test cases // config & create dynamic nav menu list fn - different scenerios, happy vs unhappy path -const mockMainNavItems: NavItem[] = [ - { - id: 'dropdown', - title: 'Dropdown', - type: NavItemType.DROPDOWN, - children: [ - { - id: 'submenu-1', - title: 'Submenu 1', - to: '/submenu-1', - type: NavItemType.INTERNAL_LINK - }, - { - id: 'submenu-2', - title: 'Submenu 2', - to: '/submenu-2', - type: NavItemType.INTERNAL_LINK - } - ] - }, - { - id: 'data-catalog', - title: 'Data Catalog', - to: '/data-catalog', - type: NavItemType.INTERNAL_LINK - }, - { - id: 'exploration', - title: 'Exploration', - to: '/exploration', - type: NavItemType.INTERNAL_LINK - }, - { - id: 'stories', - title: 'Stories', - to: '/stories', - type: NavItemType.INTERNAL_LINK - } -]; - -const mockSubNavItems: NavItem[] = [ - { - id: 'about', - title: 'About', - to: '/about', - type: NavItemType.INTERNAL_LINK - }, - { - id: 'contact', - title: 'Contact', - to: '/contact', - type: NavItemType.INTERNAL_LINK - } -]; +const mockMainNavItems: NavItem[] = navItems.mainNavItems; +const mockSubNavItems: NavItem[] = navItems.subNavItems; const mockLinkProperties = { pathAttributeKeyName: 'to', @@ -97,13 +46,12 @@ describe('PageHeader', () => { expect(primaryNav.childElementCount).toEqual(mockMainNavItems.length); expect(secondaryNav.childElementCount).toEqual(mockSubNavItems.length); - expect(within(primaryNav).getByText('Dropdown')).toBeInTheDocument(); + expect(within(primaryNav).getByText('Test')).toBeInTheDocument(); expect(within(primaryNav).getByText('Data Catalog')).toBeInTheDocument(); expect(within(primaryNav).getByText('Exploration')).toBeInTheDocument(); expect(within(primaryNav).getByText('Stories')).toBeInTheDocument(); expect(within(secondaryNav).getByText('About')).toBeInTheDocument(); - expect(within(secondaryNav).getByText('Contact')).toBeInTheDocument(); }); test('the nav items are clickable and open the drop down', async () => { @@ -112,9 +60,11 @@ describe('PageHeader', () => { expect(navElement).toBeInTheDocument(); const primaryNav = within(navElement).getAllByRole('list')[0]; - const navItem = screen.getByText('Dropdown'); - expect(within(primaryNav).getByText('Submenu 1')).not.toBeVisible(); + const navItem = screen.getByText('Test'); + expect( + within(primaryNav).getByText('dropdown menu item 1') + ).not.toBeVisible(); await user.click(navItem); - expect(within(primaryNav).getByText('Submenu 1')).toBeVisible(); + expect(within(primaryNav).getByText('dropdown menu item 1')).toBeVisible(); }); }); From aebb4635da9a75a95935bf08bd94bcd843f7460b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:09:33 +0100 Subject: [PATCH 45/87] Format file, no changes --- app/scripts/styles/_uswds-theme.scss | 40 ++++++++++++++-------------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/app/scripts/styles/_uswds-theme.scss b/app/scripts/styles/_uswds-theme.scss index ff1b04f09..7e6e0ab88 100644 --- a/app/scripts/styles/_uswds-theme.scss +++ b/app/scripts/styles/_uswds-theme.scss @@ -1,27 +1,27 @@ // @QUESTION: Move to under uswds dir? @use 'uswds-core' as * with ( - $utilities-use-important: true, - $theme-show-notifications: false, - $theme-font-weight-semibold: '600', - // To add more custom fonts, see 'Adding fonts to USWDS': - // https://designsystem.digital.gov/design-tokens/typesetting/font-family/ - $theme-typeface-tokens: ( - baseFontFamily: ( - "display-name": var(--base-font-family), - "cap-height": 364px, - ), + $utilities-use-important: true, + $theme-show-notifications: false, + $theme-font-weight-semibold: '600', + // To add more custom fonts, see 'Adding fonts to USWDS': + // https://designsystem.digital.gov/design-tokens/typesetting/font-family/ + $theme-typeface-tokens: + ( + baseFontFamily: ( + 'display-name': var(--base-font-family), + 'cap-height': 364px + ) ), - $theme-type-scale-md: 8, - $theme-utility-breakpoints: ( - "mobile-lg": false, - "desktop": false - ), - $theme-font-type-serif: baseFontFamily, - $theme-font-type-sans: 'public-sans', + $theme-type-scale-md: 8, + $theme-utility-breakpoints: ( + 'mobile-lg': false, + 'desktop': false + ), + $theme-font-type-serif: baseFontFamily, + $theme-font-type-sans: 'public-sans' ); - -// @NOTE: 'ui' & 'body' (role-based tokens) seems to be the default font-family setting token ($theme-font-role-ui) across components https://designsystem.digital.gov/documentation/settings/#typography-settings, +// @NOTE: 'ui' & 'body' (role-based tokens) seems to be the default font-family setting token ($theme-font-role-ui) across components https://designsystem.digital.gov/documentation/settings/#typography-settings, // for example footer, header, form, button, banner, etc. Could we just ovewrite those to look at public-sans which is what we want our default? // $theme-font-role-ui role-based token maps to 'sans' type-based token -// $theme-font-role-body maps to 'sans' type-based token \ No newline at end of file +// $theme-font-role-body maps to 'sans' type-based token From 1db702ca2c0dd8e2b60d89ae5d8b8ffc433eafcf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:10:27 +0100 Subject: [PATCH 46/87] Use theme variable to set fontC --- app/scripts/styles/_uswds-theme.scss | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app/scripts/styles/_uswds-theme.scss b/app/scripts/styles/_uswds-theme.scss index 7e6e0ab88..c9a410dd8 100644 --- a/app/scripts/styles/_uswds-theme.scss +++ b/app/scripts/styles/_uswds-theme.scss @@ -18,10 +18,5 @@ 'desktop': false ), $theme-font-type-serif: baseFontFamily, - $theme-font-type-sans: 'public-sans' + $theme-font-type-sans: baseFontFamily ); - -// @NOTE: 'ui' & 'body' (role-based tokens) seems to be the default font-family setting token ($theme-font-role-ui) across components https://designsystem.digital.gov/documentation/settings/#typography-settings, -// for example footer, header, form, button, banner, etc. Could we just ovewrite those to look at public-sans which is what we want our default? -// $theme-font-role-ui role-based token maps to 'sans' type-based token -// $theme-font-role-body maps to 'sans' type-based token From bc529ba3b79ac6410e24751edb6e70bc3eb9b89a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:16:04 +0100 Subject: [PATCH 47/87] Update font in the theme to public sans --- app/scripts/styles/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/styles/theme.ts b/app/scripts/styles/theme.ts index 767553398..fa0fe80e8 100644 --- a/app/scripts/styles/theme.ts +++ b/app/scripts/styles/theme.ts @@ -31,7 +31,7 @@ export const VEDA_OVERRIDE_THEME = { }, type: { base: { - family: '"Open Sans",sans-serif', + family: '"Public Sans",sans-serif', leadSize: '1.25rem', extrabold: '800', // Increments to the type.base.size for each media breakpoint. From 9f12bede347360672c5f695b6190b6ab1c489462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:19:39 +0100 Subject: [PATCH 48/87] Format /nav files, no actual changes --- .../nav/create-dynamic-nav-menu-list.tsx | 6 ++++-- .../common/page-header/nav/nav-dropdown-button.tsx | 9 +++------ .../common/page-header/nav/nav-item-links.tsx | 13 +++++++++---- 3 files changed, 16 insertions(+), 12 deletions(-) diff --git a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx index dcb7501a9..206a9f782 100644 --- a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx @@ -1,15 +1,17 @@ import React from 'react'; -import { LinkProperties } from '$types/veda'; import { NavItem, NavItemType } from '../types'; import { NavDropDownButton } from './nav-dropdown-button'; import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; import { NavItemCTA } from './nav-item-cta'; +import { LinkProperties } from '$types/veda'; export const createDynamicNavMenuList = ( navItems: NavItem[], linkProperties: LinkProperties, isOpen: boolean[] | undefined = undefined, - setIsOpen: React.Dispatch> | undefined = undefined + setIsOpen: + | React.Dispatch> + | undefined = undefined ): JSX.Element[] => { return navItems.map((item, index) => { switch (item.type) { diff --git a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx index 39420091a..d0be1aef6 100644 --- a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx @@ -1,9 +1,9 @@ import React from 'react'; -import { LinkProperties } from '$types/veda'; import { USWDSNavDropDownButton } from '../../uswds/header/nav-drop-down-button'; import { USWDSMenu } from '../../uswds/header/menu'; -import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list'; import { DropdownNavLink } from '../types'; +import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list'; +import { LinkProperties } from '$types/veda'; interface NavDropDownButtonProps { item: DropdownNavLink; @@ -35,10 +35,7 @@ export const NavDropDownButton: React.FC = ({ }); }; - const submenuItems = createDynamicNavMenuList( - item.children, - linkProperties - ); + const submenuItems = createDynamicNavMenuList(item.children, linkProperties); return ( diff --git a/app/scripts/components/common/page-header/nav/nav-item-links.tsx b/app/scripts/components/common/page-header/nav/nav-item-links.tsx index ef0834ec0..76537c885 100644 --- a/app/scripts/components/common/page-header/nav/nav-item-links.tsx +++ b/app/scripts/components/common/page-header/nav/nav-item-links.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { LinkProperties } from '$types/veda'; import { ExternalNavLink, InternalNavLink } from '../types'; +import { LinkProperties } from '$types/veda'; interface NavItemExternalLinkProps { item: ExternalNavLink; @@ -12,7 +12,7 @@ interface NavItemInternalLinkProps { } export const NavItemExternalLink: React.FC = ({ - item, + item }): JSX.Element => { return ( = ({ export const NavItemInternalLink: React.FC = ({ item, - linkProperties, + linkProperties }): JSX.Element | null => { if (linkProperties.LinkElement) { const path = { @@ -38,7 +38,12 @@ export const NavItemInternalLink: React.FC = ({ }; const LinkElement = linkProperties.LinkElement; return ( - + {item.title} ); From 5178ab3a321682c0c362a8d9dc4dfc39917b53eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:56:38 +0100 Subject: [PATCH 49/87] Update how stylelint is processing styled components --- .stylelintrc.json | 4 +--- package.json | 2 +- yarn.lock | 46 ++++++++++++++++++++++++---------------------- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 9add5794f..bef3e806f 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,12 +1,10 @@ { - "processors": [ - "stylelint-processor-styled-components" - ], "extends": [ "stylelint-config-recommended", "stylelint-config-styled-components", "stylelint-config-prettier-scss" ], + "customSyntax": "postcss-styled-syntax", "rules": { "font-family-no-missing-generic-family-keyword": null, "no-descending-specificity": [ diff --git a/package.json b/package.json index f6d770ea5..849473274 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ "parcel-transformer-mdx": "link:./parcel-transformer-mdx", "parcel-transformer-mdx-frontmatter": "link:./parcel-transformer-mdx-frontmatter", "portscanner": "^2.2.0", + "postcss-styled-syntax": "^0.7.0", "posthtml-expressions": "^1.9.0", "prettier": "^2.4.1", "process": "^0.11.10", @@ -109,7 +110,6 @@ "stylelint-config-recommended": "^3.0.0", "stylelint-config-standard-scss": "^13.1.0", "stylelint-config-styled-components": "^0.1.1", - "stylelint-processor-styled-components": "^1.10.0", "ts-jest": "^28.0.7", "typescript": "^4.5.5" }, diff --git a/yarn.lock b/yarn.lock index a0eb56490..e1c9dd484 100644 --- a/yarn.lock +++ b/yarn.lock @@ -402,7 +402,7 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@^7.1.0", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.18.6", "@babel/parser@^7.18.8", "@babel/parser@^7.8.3": +"@babel/parser@^7.1.0", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.18.6", "@babel/parser@^7.18.8": version "7.18.8" resolved "http://verdaccio.ds.io:4873/@babel%2fparser/-/parser-7.18.8.tgz#822146080ac9c62dac0823bb3489622e0bc1cbdf" integrity sha512-RSKRfYX20dyH+elbJK2uqAkVyucL+xXzhqlMD5/ZXx+dAAwpyB7HsvnHe/ZUGOF+xLr5Wx9/JoXVTj6BQE2/oA== @@ -1157,7 +1157,7 @@ "@babel/parser" "^7.18.10" "@babel/types" "^7.18.10" -"@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.6", "@babel/traverse@^7.18.8", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2", "@babel/traverse@^7.8.3": +"@babel/traverse@^7.12.9", "@babel/traverse@^7.13.0", "@babel/traverse@^7.18.6", "@babel/traverse@^7.18.8", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.2": version "7.18.8" resolved "http://verdaccio.ds.io:4873/@babel%2ftraverse/-/traverse-7.18.8.tgz#f095e62ab46abf1da35e5a2011f43aee72d8d5b0" integrity sha512-UNg/AcSySJYR/+mIcJQDCv00T+AqRO7j/ZEJLzpaYtgM48rMg5MnkJgyNqkzo88+p4tfRvZJCEiwwfG6h4jkRg== @@ -7844,9 +7844,9 @@ flatted@^3.1.0: integrity sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ== flatted@^3.3.1: - version "3.3.1" - resolved "http://verdaccio.ds.io:4873/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a" - integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw== + version "3.3.2" + resolved "http://verdaccio.ds.io:4873/flatted/-/flatted-3.3.2.tgz#adba1448a9841bec72b42c532ea23dbbedef1a27" + integrity sha512-AiwGJM8YcNOaobumgtng+6NHuOqC3A7MixFeDafM3X9cIUM+xUXoS5Vfgf+OihAYe20fxqNM9yPBXJzRtZ/4eA== flush-write-stream@^1.0.2: version "1.1.1" @@ -11122,7 +11122,7 @@ micromark@^3.0.0: micromark-util-types "^1.0.1" uvu "^0.5.0" -micromatch@4.0.5, micromatch@^4.0.2, micromatch@^4.0.4: +micromatch@4.0.5, micromatch@^4.0.4: version "4.0.5" resolved "http://verdaccio.ds.io:4873/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6" integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA== @@ -11991,7 +11991,7 @@ picocolors@^1.0.1: resolved "http://verdaccio.ds.io:4873/picocolors/-/picocolors-1.0.1.tgz#a8ad579b571952f0e5d25892de5445bcfe25aaa1" integrity sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew== -picocolors@^1.1.0: +picocolors@^1.1.1: version "1.1.1" resolved "http://verdaccio.ds.io:4873/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b" integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA== @@ -12165,6 +12165,13 @@ postcss-selector-parser@^6.1.2: cssesc "^3.0.0" util-deprecate "^1.0.2" +postcss-styled-syntax@^0.7.0: + version "0.7.0" + resolved "http://verdaccio.ds.io:4873/postcss-styled-syntax/-/postcss-styled-syntax-0.7.0.tgz#7ae2f5e9af36af3e81fc96f0e92c98d27b21be9d" + integrity sha512-OeStzPkHJ1/WDGRKm/JuVK8UdJbjt3U7AFC+zUc9omJ79SaXSxWoy+PXxJz7t8vOO8HcUgCLndNEQfLvZ74TuQ== + dependencies: + typescript "^5.6.3" + postcss-value-parser@^3.3.0: version "3.3.1" resolved "http://verdaccio.ds.io:4873/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" @@ -12184,7 +12191,7 @@ postcss@8.4.31: picocolors "^1.0.0" source-map-js "^1.0.2" -postcss@^7.0.16, postcss@^7.0.26: +postcss@^7.0.16: version "7.0.39" resolved "http://verdaccio.ds.io:4873/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309" integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA== @@ -12211,12 +12218,12 @@ postcss@^8.4.39: source-map-js "^1.2.0" postcss@^8.4.47: - version "8.4.47" - resolved "http://verdaccio.ds.io:4873/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365" - integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ== + version "8.4.49" + resolved "http://verdaccio.ds.io:4873/postcss/-/postcss-8.4.49.tgz#4ea479048ab059ab3ae61d082190fabfd994fe19" + integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA== dependencies: nanoid "^3.3.7" - picocolors "^1.1.0" + picocolors "^1.1.1" source-map-js "^1.2.1" posthtml-expressions@^1.9.0: @@ -14012,16 +14019,6 @@ stylelint-config-styled-components@^0.1.1: resolved "http://verdaccio.ds.io:4873/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede" integrity sha512-z5Xz/9GmvxO6e/DLzBMwkB85zHxEEjN6K7Cj80Bi+o/9vR9eS3GX3E9VuMnX9WLFYulqbqLtTapGGY28JBiy9Q== -stylelint-processor-styled-components@^1.10.0: - version "1.10.0" - resolved "http://verdaccio.ds.io:4873/stylelint-processor-styled-components/-/stylelint-processor-styled-components-1.10.0.tgz#8082fc68779476aac411d3afffac0bc833d77a29" - integrity sha512-g4HpN9rm0JD0LoHuIOcd/FIjTZCJ0ErQ+dC3VTxp+dSvnkV+MklKCCmCQEdz5K5WxF4vPuzfVgdbSDuPYGZhoA== - dependencies: - "@babel/parser" "^7.8.3" - "@babel/traverse" "^7.8.3" - micromatch "^4.0.2" - postcss "^7.0.26" - stylelint-scss@^6.4.0: version "6.8.1" resolved "http://verdaccio.ds.io:4873/stylelint-scss/-/stylelint-scss-6.8.1.tgz#b6554d93f2ea0bf37ffdcae571bbfaa35d79ba8a" @@ -14533,6 +14530,11 @@ typescript@^4.5.5: resolved "http://verdaccio.ds.io:4873/typescript/-/typescript-4.7.4.tgz#1a88596d1cf47d59507a1bcdfb5b9dfe4d488235" integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ== +typescript@^5.6.3: + version "5.7.2" + resolved "http://verdaccio.ds.io:4873/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6" + integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg== + typewise-core@^1.2, typewise-core@^1.2.0: version "1.2.0" resolved "http://verdaccio.ds.io:4873/typewise-core/-/typewise-core-1.2.0.tgz#97eb91805c7f55d2f941748fa50d315d991ef195" From 0eaad3e08dbd15595abcf4e0bb88ab8e6f13e754 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:58:22 +0100 Subject: [PATCH 50/87] Remove stylelint-config-prettier-scss --- .stylelintrc.json | 3 +-- package.json | 1 - yarn.lock | 5 ----- 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index bef3e806f..12e9d01e9 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,8 +1,7 @@ { "extends": [ "stylelint-config-recommended", - "stylelint-config-styled-components", - "stylelint-config-prettier-scss" + "stylelint-config-styled-components" ], "customSyntax": "postcss-styled-syntax", "rules": { diff --git a/package.json b/package.json index 849473274..6bd0df838 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,6 @@ "stream-browserify": "^3.0.0", "string_decoder": "^1.3.0", "stylelint": "^16.10.0", - "stylelint-config-prettier-scss": "^1.0.0", "stylelint-config-recommended": "^3.0.0", "stylelint-config-standard-scss": "^13.1.0", "stylelint-config-styled-components": "^0.1.1", diff --git a/yarn.lock b/yarn.lock index e1c9dd484..9240b89c9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13975,11 +13975,6 @@ styled-components@^5.3.3: shallowequal "^1.1.0" supports-color "^5.5.0" -stylelint-config-prettier-scss@^1.0.0: - version "1.0.0" - resolved "http://verdaccio.ds.io:4873/stylelint-config-prettier-scss/-/stylelint-config-prettier-scss-1.0.0.tgz#4125152ce9ee39ec233ce14436fc0818fa866aee" - integrity sha512-Gr2qLiyvJGKeDk0E/+awNTrZB/UtNVPLqCDOr07na/sLekZwm26Br6yYIeBYz3ulsEcQgs5j+2IIMXCC+wsaQA== - stylelint-config-recommended-scss@^14.0.0: version "14.1.0" resolved "http://verdaccio.ds.io:4873/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-14.1.0.tgz#1a5855655cddcb5f77c10f38c76567adf2bb9aa3" From 31a281f8296c4abd6a81b04f7dfc6ee89c90cf89 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 12:59:52 +0100 Subject: [PATCH 51/87] Remove stylelint-config-styled-components --- .stylelintrc.json | 3 +-- package.json | 1 - yarn.lock | 5 ----- 3 files changed, 1 insertion(+), 8 deletions(-) diff --git a/.stylelintrc.json b/.stylelintrc.json index 12e9d01e9..e75e13932 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,7 +1,6 @@ { "extends": [ - "stylelint-config-recommended", - "stylelint-config-styled-components" + "stylelint-config-recommended" ], "customSyntax": "postcss-styled-syntax", "rules": { diff --git a/package.json b/package.json index 6bd0df838..ac013c4bc 100644 --- a/package.json +++ b/package.json @@ -108,7 +108,6 @@ "stylelint": "^16.10.0", "stylelint-config-recommended": "^3.0.0", "stylelint-config-standard-scss": "^13.1.0", - "stylelint-config-styled-components": "^0.1.1", "ts-jest": "^28.0.7", "typescript": "^4.5.5" }, diff --git a/yarn.lock b/yarn.lock index 9240b89c9..eb701e793 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14009,11 +14009,6 @@ stylelint-config-standard@^36.0.0: dependencies: stylelint-config-recommended "^14.0.1" -stylelint-config-styled-components@^0.1.1: - version "0.1.1" - resolved "http://verdaccio.ds.io:4873/stylelint-config-styled-components/-/stylelint-config-styled-components-0.1.1.tgz#b408388d7c687833ab4be4c4e6522d97d2827ede" - integrity sha512-z5Xz/9GmvxO6e/DLzBMwkB85zHxEEjN6K7Cj80Bi+o/9vR9eS3GX3E9VuMnX9WLFYulqbqLtTapGGY28JBiy9Q== - stylelint-scss@^6.4.0: version "6.8.1" resolved "http://verdaccio.ds.io:4873/stylelint-scss/-/stylelint-scss-6.8.1.tgz#b6554d93f2ea0bf37ffdcae571bbfaa35d79ba8a" From 9f381d118c9a02bd65ba1fdfa98635cc7b46fc05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 13:02:18 +0100 Subject: [PATCH 52/87] Upgrade stylelint-config-recommended --- package.json | 2 +- yarn.lock | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/package.json b/package.json index ac013c4bc..c566a6f14 100644 --- a/package.json +++ b/package.json @@ -106,7 +106,7 @@ "stream-browserify": "^3.0.0", "string_decoder": "^1.3.0", "stylelint": "^16.10.0", - "stylelint-config-recommended": "^3.0.0", + "stylelint-config-recommended": "^14.0.1", "stylelint-config-standard-scss": "^13.1.0", "ts-jest": "^28.0.7", "typescript": "^4.5.5" diff --git a/yarn.lock b/yarn.lock index eb701e793..ef905f230 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13989,11 +13989,6 @@ stylelint-config-recommended@^14.0.1: resolved "http://verdaccio.ds.io:4873/stylelint-config-recommended/-/stylelint-config-recommended-14.0.1.tgz#d25e86409aaf79ee6c6085c2c14b33c7e23c90c6" integrity sha512-bLvc1WOz/14aPImu/cufKAZYfXs/A/owZfSMZ4N+16WGXLoX5lOir53M6odBxvhgmgdxCVnNySJmZKx73T93cg== -stylelint-config-recommended@^3.0.0: - version "3.0.0" - resolved "http://verdaccio.ds.io:4873/stylelint-config-recommended/-/stylelint-config-recommended-3.0.0.tgz#e0e547434016c5539fe2650afd58049a2fd1d657" - integrity sha512-F6yTRuc06xr1h5Qw/ykb2LuFynJ2IxkKfCMf+1xqPffkxh0S09Zc902XCffcsw/XMFq/OzQ1w54fLIDtmRNHnQ== - stylelint-config-standard-scss@^13.1.0: version "13.1.0" resolved "http://verdaccio.ds.io:4873/stylelint-config-standard-scss/-/stylelint-config-standard-scss-13.1.0.tgz#2be36ca13087325a42c1f26df8267808667cc886" From 9b3cad7524fc0f89c994b3f1d61d52b880c0764d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 25 Nov 2024 16:17:43 +0100 Subject: [PATCH 53/87] Fix stylelint no-empty-source https://stylelint.io/user-guide/rules/no-empty-source/ --- app/scripts/components/home/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/home/index.tsx b/app/scripts/components/home/index.tsx index 891aeadcf..a79767758 100644 --- a/app/scripts/components/home/index.tsx +++ b/app/scripts/components/home/index.tsx @@ -68,7 +68,9 @@ const ConnectionsBlock = styled.div` const ConnectionsBlockTitle = styled(Heading).attrs({ as: 'h2', size: 'medium' -})``; +})` + /* no style, only attrs */ +`; const ConnectionsList = styled.ul` ${listReset()}; From 42197b94ffc879db20baecff67ae836493097e4f Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 10:43:58 -0500 Subject: [PATCH 54/87] Fix linking / remove react-router-dom dep, works in nextJs now --- app/scripts/components/common/page-header/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 701c42cfb..5ac0478e6 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,6 +1,4 @@ import React, { ReactElement, useState, useMemo } from 'react'; -import { Link } from 'react-router-dom'; - import { NavItem } from './types'; import LogoContainer from './logo-container'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; @@ -54,10 +52,7 @@ const PageHeader: React.FC = ({
    Date: Mon, 25 Nov 2024 15:05:57 -0500 Subject: [PATCH 55/87] change forward to use for styling --- app/scripts/styles/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index 6415183d9..ab14de179 100644 --- a/app/scripts/styles/styles.scss +++ b/app/scripts/styles/styles.scss @@ -1,5 +1,4 @@ @forward 'uswds-theme'; -@forward 'usa-header'; @use 'uswds-utilities'; @use 'usa-layout-grid'; @@ -10,3 +9,4 @@ @use 'usa-button-group'; @use 'usa-icon'; @use 'usa-modal'; +@use 'usa-header'; From d8f7052357a35833f37966a947a771b2008df2f8 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 21:34:20 -0500 Subject: [PATCH 56/87] clean up ternary logic around GoogleForm & other cleanup --- app/scripts/components/common/nav-wrapper.js | 32 ++++++++++--------- .../common/page-header/default-config.ts | 31 ++++++------------ .../components/common/page-header/types.ts | 1 - mock/veda.config.js | 30 ++++++----------- 4 files changed, 35 insertions(+), 59 deletions(-) diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 52c8908a8..1f6394c6b 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -34,24 +34,26 @@ const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_HEADER); function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); - return isUSWDSEnabled ? ( - } // Override the composition from old page-header with simple svg - linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} - /> - ) : ( - - } linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} /> - - ); + ) : ( + + + + ) + ) } export default NavWrapper; diff --git a/app/scripts/components/common/page-header/default-config.ts b/app/scripts/components/common/page-header/default-config.ts index a54584436..00040cd2a 100644 --- a/app/scripts/components/common/page-header/default-config.ts +++ b/app/scripts/components/common/page-header/default-config.ts @@ -65,28 +65,15 @@ let defaultSubNavItems: ( ]; if (process.env.GOOGLE_FORM !== undefined) { - if (process.env.ENABLE_USWDS_PAGE_HEADER) { - defaultSubNavItems = [ - ...defaultSubNavItems, - { - id: 'contact-us', - title: 'Contact us', - actionId: 'open-google-form', - type: NavItemType.ACTION - } - ]; - } else { - defaultSubNavItems = [ - ...defaultSubNavItems, - { - id: 'contact-us', - title: 'Contact us', - actionId: 'open-google-form', - src: process.env.GOOGLE_FORM, - type: NavItemType.ACTION - } - ]; - } + defaultSubNavItems = [ + ...defaultSubNavItems, + { + id: 'contact-us', + title: 'Contact us', + actionId: 'open-google-form', + type: NavItemType.ACTION + } + ]; } const mainNavItems = diff --git a/app/scripts/components/common/page-header/types.ts b/app/scripts/components/common/page-header/types.ts index 5ac37406b..d3ec29774 100644 --- a/app/scripts/components/common/page-header/types.ts +++ b/app/scripts/components/common/page-header/types.ts @@ -5,7 +5,6 @@ export enum NavItemType { EXTERNAL_LINK = 'externalLink', DROPDOWN = 'dropdown', ACTION = 'action', // styled as the link but performs some type of action instead of re-routing - BUTTON = 'button' // @NOTE: Change this to a button type and button should provide callback on action => aka whether it should open a modal or not or do another action } export type ActionId = 'open-google-form' | undefined; // @NOTE: ActionIds are nav items that perform some type of action but without it being a button diff --git a/mock/veda.config.js b/mock/veda.config.js index 68c011ca6..d2f974b09 100644 --- a/mock/veda.config.js +++ b/mock/veda.config.js @@ -72,27 +72,15 @@ let subNavItems = [ ]; if (config.GOOGLE_FORM) { - if (config.ENABLE_USWDS_PAGE_HEADER) { - subNavItems = [ - ...subNavItems, - { - id: 'contact-us', - title: 'Contact us', - actionId: 'open-google-form', - type: 'action' - } - ]; - } else { - subNavItems = [ - ...subNavItems, - { - id: 'contact-us', - title: 'Contact us', - actionId: 'open-google-form', - type: 'button' - } - ]; - } + subNavItems = [ + ...subNavItems, + { + id: 'contact-us', + title: 'Contact us', + actionId: 'open-google-form', + type: 'action' + } + ]; } module.exports = { From 4b1d19f7b56bf3bdc733687719118d760026370b Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 21:56:38 -0500 Subject: [PATCH 57/87] move title&version to be props passed in to pageheader, fix logocontainer version condition, port pageheader to fn comp and optimize --- app/scripts/components/common/nav-wrapper.js | 2 ++ .../components/common/page-header/index.tsx | 25 +++++++++---------- .../page-header/logo-container/index.tsx | 24 ++++++++---------- 3 files changed, 25 insertions(+), 26 deletions(-) diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 1f6394c6b..4ba42202d 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -30,6 +30,7 @@ const NavWrapperContainer = styled.div` `; // Hiding configurable map for now until Instances are ready to adapt it const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_HEADER); +const appTitle = process.env.APP_TITLE; function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); @@ -40,6 +41,7 @@ function NavWrapper(props) { {...props} logo={} linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} + title={appTitle} /> ) : ( = ({ +export default function PageHeader ({ mainNavItems, subNavItems, logo: Logo, - linkProperties -}) => { + linkProperties, + title, + version +}: PageHeaderProps) { const [expanded, setExpanded] = useState(false); const [isOpen, setIsOpen] = useState( mainNavItems.map(() => false) ); - const toggleExpansion = (): void => { + const toggleExpansion: () => void = useCallback(() => { setExpanded((prvExpanded) => { return !prvExpanded; }); - }; + }, [expanded]); const primaryItems = useMemo( () => @@ -55,8 +56,8 @@ const PageHeader: React.FC = ({ linkProperties={linkProperties} Logo={Logo} title='Earthdata VEDA Dashboard' - subTitle={appTitle} - version={appVersion} + subTitle={title} + version={version} /> @@ -71,5 +72,3 @@ const PageHeader: React.FC = ({ ); }; - -export default PageHeader; diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index 2c0eb23b3..fbfa9c793 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -31,19 +31,17 @@ export default function LogoContainer({ {Logo} {title} - {version && ( - -
    , - [linkProperties.pathAttributeKeyName]: '/development' - }} - > - BETA -
    -     - )} + +
    , + [linkProperties.pathAttributeKeyName]: '/development' + }} + > + {version || 'BETA'} +
    +
    ); } \ No newline at end of file From f531e13c6f101d664a1ebf88a8070ce26537b14d Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 22:12:13 -0500 Subject: [PATCH 58/87] clean up title logic more --- app/scripts/components/common/nav-wrapper.js | 2 +- app/scripts/components/common/page-header/index.tsx | 3 +-- .../components/common/page-header/logo-container/index.tsx | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 4ba42202d..165a4e13a 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -30,7 +30,7 @@ const NavWrapperContainer = styled.div` `; // Hiding configurable map for now until Instances are ready to adapt it const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_HEADER); -const appTitle = process.env.APP_TITLE; +const appTitle = isUSWDSEnabled ? 'Earthdata VEDA Dashboard' : process.env.APP_TITLE; function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 629ee4ee8..be9e968b3 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -55,8 +55,7 @@ export default function PageHeader ({ diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index fbfa9c793..c1666af5c 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -19,7 +19,6 @@ export default function LogoContainer({ linkProperties: LinkProperties; Logo?: JSX.Element; title: string; - subTitle?: string; version?: string; }) { const LinkElement: ComponentType = From ae764cc5f177af1c6c334804a284c56a2f831045 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 22:24:39 -0500 Subject: [PATCH 59/87] rename logo prop and correct type, no overrided needed --- app/scripts/components/common/nav-wrapper.js | 2 +- app/scripts/components/common/page-header/index.tsx | 6 +++--- .../components/common/page-header/logo-container/index.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 165a4e13a..e97348406 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -39,7 +39,7 @@ function NavWrapper(props) { isUSWDSEnabled ? ( } + logoSvg={} linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} title={appTitle} /> diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index be9e968b3..0a52d2bd2 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -11,7 +11,7 @@ import './styles.scss'; interface PageHeaderProps { mainNavItems: NavItem[]; subNavItems: NavItem[]; - logo?: ReactElement; + logoSvg?: SVGElement; linkProperties: LinkProperties; title: string; version?: string; @@ -20,7 +20,7 @@ interface PageHeaderProps { export default function PageHeader ({ mainNavItems, subNavItems, - logo: Logo, + logoSvg: Logo, linkProperties, title, version @@ -54,7 +54,7 @@ export default function PageHeader ({ diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index c1666af5c..90c23332e 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -12,12 +12,12 @@ import './styles.scss'; export default function LogoContainer({ linkProperties, - Logo, + LogoSvg, title, version, }: { linkProperties: LinkProperties; - Logo?: JSX.Element; + LogoSvg?: SVGElement; title: string; version?: string; }) { @@ -27,7 +27,7 @@ export default function LogoContainer({ return (
    - {Logo} + {LogoSvg} {title} From 0a63c46b8a7e5f94a2622c804ed5d91d46853385 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 22:39:35 -0500 Subject: [PATCH 60/87] update pageheader test --- app/scripts/components/common/page-header/index.tsx | 2 +- .../components/common/page-header/logo-container/index.tsx | 2 +- .../components/common/page-header/page-header.test.tsx | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 0a52d2bd2..800522b9a 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -11,7 +11,7 @@ import './styles.scss'; interface PageHeaderProps { mainNavItems: NavItem[]; subNavItems: NavItem[]; - logoSvg?: SVGElement; + logoSvg?: SVGElement | JSX.Element; linkProperties: LinkProperties; title: string; version?: string; diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index 90c23332e..513150ca3 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -17,7 +17,7 @@ export default function LogoContainer({ version, }: { linkProperties: LinkProperties; - LogoSvg?: SVGElement; + LogoSvg?: SVGElement | JSX.Element; title: string; version?: string; }) { diff --git a/app/scripts/components/common/page-header/page-header.test.tsx b/app/scripts/components/common/page-header/page-header.test.tsx index 852a8c014..65a7e7c99 100644 --- a/app/scripts/components/common/page-header/page-header.test.tsx +++ b/app/scripts/components/common/page-header/page-header.test.tsx @@ -18,6 +18,7 @@ const mockLinkProperties = { pathAttributeKeyName: 'to', LinkElement: 'a' as unknown as ComponentType }; +const testTitle= 'Test Title'; describe('PageHeader', () => { beforeEach(() => { @@ -25,7 +26,8 @@ describe('PageHeader', () => { } + logoSvg={} + title={testTitle} linkProperties={mockLinkProperties} /> ); @@ -33,7 +35,7 @@ describe('PageHeader', () => { test('renders the PageHeader component title', () => { expect(screen.getByTestId('header')).toHaveTextContent( - 'Earthdata VEDA Dashboard' + testTitle ); }); From 326f1898a02ac533a44c3fb8032d1cffe5bd16e0 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 22:44:43 -0500 Subject: [PATCH 61/87] remove classname from smart-link component --- app/scripts/components/common/smart-link.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/scripts/components/common/smart-link.tsx b/app/scripts/components/common/smart-link.tsx index 4f4a4d031..7b0a369b0 100644 --- a/app/scripts/components/common/smart-link.tsx +++ b/app/scripts/components/common/smart-link.tsx @@ -6,7 +6,6 @@ import { getLinkProps } from '$utils/url'; interface SmartLinkProps { to: string; children?: ReactNode; - className?: string; } /** From d3ecb6962d0f51db7f1ea308b99aceb1fc0a74bb Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 22:46:39 -0500 Subject: [PATCH 62/87] remove unused uswds logo --- app/scripts/components/common/uswds/logo.tsx | 6 ------ 1 file changed, 6 deletions(-) delete mode 100644 app/scripts/components/common/uswds/logo.tsx diff --git a/app/scripts/components/common/uswds/logo.tsx b/app/scripts/components/common/uswds/logo.tsx deleted file mode 100644 index 5b7f8f348..000000000 --- a/app/scripts/components/common/uswds/logo.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import { Logo } from '@trussworks/react-uswds'; - -export function USWDSLogo(props, children) { - return {children}; -} From cf2137fb569f72d35b80e94c993c7c150ef9e0e0 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 25 Nov 2024 23:00:04 -0500 Subject: [PATCH 63/87] update uswds forwards and update font-weight setting --- app/scripts/styles/_veda-ui-theme-vars.scss | 4 ++-- app/scripts/styles/styles.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss index 04645a50f..77ecf252a 100644 --- a/app/scripts/styles/_veda-ui-theme-vars.scss +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -1,3 +1,4 @@ +@forward 'uswds-theme'; @use "uswds-core/src/styles/functions/utilities" as utils; @use "uswds-core/src/styles/functions/units" as spacing; @use "uswds-core/src/styles/mixins/utilities" as mixins; @@ -14,13 +15,12 @@ $veda-uswds-basefont-sans: utils.family('sans'); $veda-uswds-fontweight-light: utils.font-weight('light'); $veda-uswds-fontweight-regular: utils.font-weight('normal'); $veda-uswds-fontweight-bold: utils.font-weight('bold'); -$veda-uswds-fontweight-semibold: 600; // @TODO: needs to map to uswds token +$veda-uswds-fontweight-semibold: utils.font-weight('semibold'); // COLORS $veda-uswds-color-primary-darker: utils.color('primary-darker'); $veda-uswds-color-secondary: utils.color('secondary'); $veda-uswds-color-base-darkest: utils.color('base-darkest'); -$veda-uswds-color-base-white: #FFFFFF; // @TODO: wasn't able to find this token $veda-uswds-color-base-light: utils.color('base-light'); $veda-uswds-color-base-ink: utils.color('ink'); diff --git a/app/scripts/styles/styles.scss b/app/scripts/styles/styles.scss index ab14de179..646f6c989 100644 --- a/app/scripts/styles/styles.scss +++ b/app/scripts/styles/styles.scss @@ -1,4 +1,4 @@ -@forward 'uswds-theme'; +@forward 'veda-ui-theme-vars'; @use 'uswds-utilities'; @use 'usa-layout-grid'; From 382835f4da03c6dd0ec078dc347795a9e41aa7a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 26 Nov 2024 11:09:57 +0100 Subject: [PATCH 64/87] Fix dependendy arrays and format --- app/scripts/components/common/page-header/index.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 800522b9a..ca26e391a 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useCallback, useState, useMemo } from 'react'; +import React, { useCallback, useEffect, useState, useMemo } from 'react'; import { NavItem } from './types'; import LogoContainer from './logo-container'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; @@ -17,7 +17,7 @@ interface PageHeaderProps { version?: string; } -export default function PageHeader ({ +export default function PageHeader({ mainNavItems, subNavItems, logoSvg: Logo, @@ -34,17 +34,17 @@ export default function PageHeader ({ setExpanded((prvExpanded) => { return !prvExpanded; }); - }, [expanded]); + }, []); const primaryItems = useMemo( () => createDynamicNavMenuList(mainNavItems, linkProperties, isOpen, setIsOpen), - [mainNavItems, isOpen] + [mainNavItems, linkProperties, isOpen] ); const secondaryItems = useMemo( () => createDynamicNavMenuList(subNavItems, linkProperties), - [subNavItems] + [subNavItems, linkProperties] ); return ( @@ -70,4 +70,4 @@ export default function PageHeader ({ ); -}; +} From 756c13fb6e8fdc87f7394be883d3c59741d9be81 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 26 Nov 2024 11:49:49 +0100 Subject: [PATCH 65/87] Add custom hook to fix nav on resize --- .../components/common/page-header/index.tsx | 5 ++- .../common/page-header/use-mobile-menu-fix.ts | 42 +++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 app/scripts/components/common/page-header/use-mobile-menu-fix.ts diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index ca26e391a..5dcccb735 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,6 +1,7 @@ -import React, { useCallback, useEffect, useState, useMemo } from 'react'; +import React, { useCallback, useState, useMemo } from 'react'; import { NavItem } from './types'; import LogoContainer from './logo-container'; +import useMobileMenuFix from './use-mobile-menu-fix'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; import { LinkProperties } from '$types/veda'; import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; @@ -26,6 +27,8 @@ export default function PageHeader({ version }: PageHeaderProps) { const [expanded, setExpanded] = useState(false); + useMobileMenuFix(expanded, setExpanded); + const [isOpen, setIsOpen] = useState( mainNavItems.map(() => false) ); diff --git a/app/scripts/components/common/page-header/use-mobile-menu-fix.ts b/app/scripts/components/common/page-header/use-mobile-menu-fix.ts new file mode 100644 index 000000000..21cd13b4b --- /dev/null +++ b/app/scripts/components/common/page-header/use-mobile-menu-fix.ts @@ -0,0 +1,42 @@ +import { useEffect } from 'react'; + +/** + * Would be better to have this fixed on the react-uswds side! + * + * Subscribe to https://github.com/trussworks/react-uswds/issues/2586 + * for updates + * */ + +const USWDS_DESKTOP_BREAKPOINT = 1024; +// no magic numbers! Use value from theme? + +function useMobileMenuFix(expanded, setExpanded) { + const handleClickOutside = (event: MouseEvent) => { + // When the mobile nav is active, clicking outside of the nav should close it + if ( + event.target instanceof Element && + event.target.closest('.usa-overlay') + ) { + setExpanded(false); + } + }; + + const handleResize = () => { + if (window.innerWidth > USWDS_DESKTOP_BREAKPOINT && expanded) { + setExpanded(false); + } + }; + + useEffect(() => { + document.addEventListener('click', handleClickOutside); + window.addEventListener('resize', handleResize); + + return () => { + document.removeEventListener('click', handleClickOutside); + window.removeEventListener('resize', handleResize); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); // We want to register the event listeners only once, when the component mounts +} + +export default useMobileMenuFix; From 25e6a141b2c629309e237ef1789f1db8d57f2bee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Tue, 26 Nov 2024 12:19:05 +0100 Subject: [PATCH 66/87] Add expanded to the deps array --- .../components/common/page-header/use-mobile-menu-fix.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/components/common/page-header/use-mobile-menu-fix.ts b/app/scripts/components/common/page-header/use-mobile-menu-fix.ts index 21cd13b4b..d155d7d07 100644 --- a/app/scripts/components/common/page-header/use-mobile-menu-fix.ts +++ b/app/scripts/components/common/page-header/use-mobile-menu-fix.ts @@ -36,7 +36,7 @@ function useMobileMenuFix(expanded, setExpanded) { window.removeEventListener('resize', handleResize); }; // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); // We want to register the event listeners only once, when the component mounts + }, [expanded]); // We want to register the event listeners only once, when the component mounts, and when the expanded state changes } export default useMobileMenuFix; From 066f7fc6820a4db7cdacbbe7018a2421bff50f93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 27 Nov 2024 11:15:01 +0100 Subject: [PATCH 67/87] Fix formatting and also noting that we should really fix those pre-commit hooks :D --- app/scripts/components/common/nav-wrapper.js | 38 ++++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index e97348406..906624635 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -30,32 +30,32 @@ const NavWrapperContainer = styled.div` `; // Hiding configurable map for now until Instances are ready to adapt it const isUSWDSEnabled = checkEnvFlag(process.env.ENABLE_USWDS_PAGE_HEADER); -const appTitle = isUSWDSEnabled ? 'Earthdata VEDA Dashboard' : process.env.APP_TITLE; +const appTitle = isUSWDSEnabled + ? 'Earthdata VEDA Dashboard' + : process.env.APP_TITLE; function NavWrapper(props) { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); - return ( - isUSWDSEnabled ? ( - } + linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} + title={appTitle} + /> + ) : ( + + } linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }} - title={appTitle} /> - ) : ( - - - - ) - ) + + ); } export default NavWrapper; From 6a05249bac564fd4110bd9d6bd318cbd406e403a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 27 Nov 2024 11:44:43 +0100 Subject: [PATCH 68/87] Remove router mock, cookie test was relying on the actual implementation --- jest.setup.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/jest.setup.js b/jest.setup.js index ad5ce62e1..d402fb974 100644 --- a/jest.setup.js +++ b/jest.setup.js @@ -1,10 +1,6 @@ jest.mock('@mdx-js/react', () => ({ MDXProvider: () => null })); -jest.mock('react-router-dom', () => ({ - Link: ({ children }) => children, - useHref: () => null -})); jest.mock('veda', () => ({ getString: (variable) => ({ one: variable, From b9a264cbad71868a98641e24ec8963aa2df4ea4a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 27 Nov 2024 12:08:46 +0100 Subject: [PATCH 69/87] Use SetState from /aliases --- .../common/page-header/nav/nav-dropdown-button.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx index d0be1aef6..f76d5f9b9 100644 --- a/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx +++ b/app/scripts/components/common/page-header/nav/nav-dropdown-button.tsx @@ -3,27 +3,25 @@ import { USWDSNavDropDownButton } from '../../uswds/header/nav-drop-down-button' import { USWDSMenu } from '../../uswds/header/menu'; import { DropdownNavLink } from '../types'; import { createDynamicNavMenuList } from './create-dynamic-nav-menu-list'; +import { SetState } from '$types/aliases'; import { LinkProperties } from '$types/veda'; interface NavDropDownButtonProps { item: DropdownNavLink; isOpen: boolean[]; - setIsOpen: React.Dispatch>; + setIsOpen: SetState; index: number; linkProperties: LinkProperties; } -export const NavDropDownButton: React.FC = ({ +export const NavDropDownButton = ({ item, isOpen, setIsOpen, index, linkProperties -}) => { - const onToggle = ( - index: number, - setIsOpen: React.Dispatch> - ): void => { +}: NavDropDownButtonProps) => { + const onToggle = (index: number, setIsOpen: SetState): void => { setIsOpen((prevIsOpen) => { const newIsOpen = prevIsOpen.map( (prev, i) => From e4cd0f38e24fefefbe30db850f813e242d546a0d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 27 Nov 2024 12:18:08 +0100 Subject: [PATCH 70/87] Mark optional, use SetState from /aliases --- .../page-header/nav/create-dynamic-nav-menu-list.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx index 206a9f782..764853687 100644 --- a/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx +++ b/app/scripts/components/common/page-header/nav/create-dynamic-nav-menu-list.tsx @@ -4,14 +4,13 @@ import { NavDropDownButton } from './nav-dropdown-button'; import { NavItemExternalLink, NavItemInternalLink } from './nav-item-links'; import { NavItemCTA } from './nav-item-cta'; import { LinkProperties } from '$types/veda'; +import { SetState } from '$types/aliases'; export const createDynamicNavMenuList = ( navItems: NavItem[], linkProperties: LinkProperties, - isOpen: boolean[] | undefined = undefined, - setIsOpen: - | React.Dispatch> - | undefined = undefined + isOpen?: boolean[], + setIsOpen?: SetState ): JSX.Element[] => { return navItems.map((item, index) => { switch (item.type) { From 16e1e179a19353bef1f2bcb442efd7833113d8a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 2 Dec 2024 12:26:14 +0100 Subject: [PATCH 71/87] Clean up styles: remove unspecific selectors --- .../page-header/logo-container/styles.scss | 36 ++++++------------- 1 file changed, 10 insertions(+), 26 deletions(-) diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index d76cd6c47..2ec216c28 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -10,19 +10,17 @@ align-items: center; } - span { - color: themeVars.$veda-uswds-color-base-darkest !important; + #nasa-logo-pos { + opacity: 1; + transform: translate(0, -100%); + /* TODO: Fix the svg to not require any styles! + * - set opacity to 1 in svg and fix translation + */ } - a { - #nasa-logo-pos { - opacity: 1; - transform: translate(0, -100%); - } - svg { - height: 2.5rem; - width: auto; - } + svg { + height: 2.5rem; + width: auto; } #logo-container-beta-tag { @@ -35,18 +33,4 @@ border-radius: 2px; background-color: themeVars.$veda-uswds-color-secondary; } - - - span:first-of-type { - font-size: 0.875rem; - line-height: 1rem; - font-weight: extrabold; - } - - span:last-of-type { - font-size: 1.25rem; - line-height: 1.5rem; - font-weight: regular; - letter-spacing: -0.025em; - } -} \ No newline at end of file +} From 908edf9d3fae6aa03edbccf1d2c952149ec0b304 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 2 Dec 2024 12:42:34 +0100 Subject: [PATCH 72/87] Make styles match the designs --- .../page-header/logo-container/styles.scss | 11 ++++++---- app/scripts/styles/_veda-ui-theme-vars.scss | 22 ++++++++++++------- 2 files changed, 21 insertions(+), 12 deletions(-) diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index 2ec216c28..f4f40850e 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -8,6 +8,9 @@ #logo-container-link { display: flex; align-items: center; + gap: themeVars.$veda-uswds-spacing-105; + font-weight: themeVars.$veda-uswds-fontweight-bold; + font-size: themeVars.$veda-uswds-fontsize-lg; } #nasa-logo-pos { @@ -26,10 +29,10 @@ #logo-container-beta-tag { color: white; align-self: center; - font-size: 0.75rem; - font-weight: themeVars.$veda-uswds-fontweight-semibold; - line-height: 1rem; - padding: 0 themeVars.$veda-uswds-spacing-5; + font-size: themeVars.$veda-uswds-fontsize-3xs; + font-weight: themeVars.$veda-uswds-fontweight-regular; + padding-left: themeVars.$veda-uswds-spacing-5; + padding-right: themeVars.$veda-uswds-spacing-5; border-radius: 2px; background-color: themeVars.$veda-uswds-color-secondary; } diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss index 77ecf252a..c78cc8c5f 100644 --- a/app/scripts/styles/_veda-ui-theme-vars.scss +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -1,20 +1,26 @@ @forward 'uswds-theme'; -@use "uswds-core/src/styles/functions/utilities" as utils; -@use "uswds-core/src/styles/functions/units" as spacing; -@use "uswds-core/src/styles/mixins/utilities" as mixins; -@use "uswds-core/src/styles/mixins/typography" as typography; +@use 'uswds-core/src/styles/functions/utilities' as utils; +@use 'uswds-core/src/styles/functions/units' as spacing; +@use 'uswds-core/src/styles/mixins/utilities' as mixins; +@use 'uswds-core/src/styles/mixins/typography' as typography; /*********** VEDAUI THEME PALETTE ***********/ -// These map to the veda defined styles between https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=139-14&node-type=canvas&t=7Qa02mMKUgBy5Qho-0 +// These map to the veda defined styles between https://www.figma.com/design/5mclPTReHcRIzKbJm8YA6a/VEDA---USWDS?node-id=139-14&node-type=canvas&t=7Qa02mMKUgBy5Qho-0 // and uswds found at https://designsystem.digital.gov/design-tokens/ // TYPOGRAPHY $veda-uswds-basefont-sans: utils.family('sans'); +// FONT-SIZE +$veda-uswds-fontsize-3xs: 12px; +$veda-uswds-fontsize-lg: 22px; +// $veda-uswds-fontsize-3xs: utils.font-size('3xs'); +// TODO: How to access font scales? + // FONT-WEIGHT $veda-uswds-fontweight-light: utils.font-weight('light'); -$veda-uswds-fontweight-regular: utils.font-weight('normal'); -$veda-uswds-fontweight-bold: utils.font-weight('bold'); +$veda-uswds-fontweight-regular: utils.font-weight('normal'); +$veda-uswds-fontweight-bold: utils.font-weight('bold'); $veda-uswds-fontweight-semibold: utils.font-weight('semibold'); // COLORS @@ -26,4 +32,4 @@ $veda-uswds-color-base-ink: utils.color('ink'); // SPACING $veda-uswds-spacing-5: spacing.units(0.5); -$veda-uswds-spacing-105: spacing.units(1.5); \ No newline at end of file +$veda-uswds-spacing-105: spacing.units(1.5); From 9bb3de7df85ad1cf259f8ae6b0fafaddfd84f49f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Mon, 2 Dec 2024 12:43:13 +0100 Subject: [PATCH 73/87] Fix version tag to show 'beta version' instead of 'vundefined' --- .../common/page-header/logo-container/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/page-header/logo-container/index.tsx b/app/scripts/components/common/page-header/logo-container/index.tsx index 513150ca3..9aabf892a 100644 --- a/app/scripts/components/common/page-header/logo-container/index.tsx +++ b/app/scripts/components/common/page-header/logo-container/index.tsx @@ -14,7 +14,7 @@ export default function LogoContainer({ linkProperties, LogoSvg, title, - version, + version }: { linkProperties: LinkProperties; LogoSvg?: SVGElement | JSX.Element; @@ -26,11 +26,14 @@ export default function LogoContainer({ return (
    - + {LogoSvg} {title} - +
    ); -} \ No newline at end of file +} From 1dadbb304c3f5a212200398bb170f28e9c325eae Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 2 Dec 2024 22:58:26 -0500 Subject: [PATCH 74/87] add skip to main content a11y shortcut --- .../components/common/page-header/index.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 5dcccb735..0608a2ae1 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useState, useMemo } from 'react'; +import React, { ComponentType, useCallback, useState, useMemo } from 'react'; import { NavItem } from './types'; import LogoContainer from './logo-container'; import useMobileMenuFix from './use-mobile-menu-fix'; @@ -16,6 +16,7 @@ interface PageHeaderProps { linkProperties: LinkProperties; title: string; version?: string; + accessibilityHomeShortCutText?: string; } export default function PageHeader({ @@ -24,7 +25,8 @@ export default function PageHeader({ logoSvg: Logo, linkProperties, title, - version + version, + accessibilityHomeShortCutText }: PageHeaderProps) { const [expanded, setExpanded] = useState(false); useMobileMenuFix(expanded, setExpanded); @@ -50,8 +52,17 @@ export default function PageHeader({ [subNavItems, linkProperties] ); + const LinkElement: ComponentType = + linkProperties.LinkElement as ComponentType; + return ( <> + + {accessibilityHomeShortCutText || 'Skip to main content'} +
    From 36a989256c2006bf713883be8b8383b7207696d4 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 2 Dec 2024 23:07:34 -0500 Subject: [PATCH 75/87] update font-weight of secondary link items --- app/scripts/components/common/page-header/styles.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index 078ebd6b9..2b7e6aa5c 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -1,3 +1,9 @@ +@use '$styles/veda-ui-theme-vars.scss' as themeVars; + .usa-logo { max-width: none !important; } + +.usa-nav__secondary-item { + font-weight: themeVars.$veda-uswds-fontweight-regular; +} From 258dc821b265f8d54f24d644443fe2d47c2402bc Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 2 Dec 2024 23:37:45 -0500 Subject: [PATCH 76/87] Update secondary items divider height and text color --- .../components/common/page-header/styles.scss | 12 ++++++++++++ app/scripts/styles/_veda-ui-theme-vars.scss | 1 + 2 files changed, 13 insertions(+) diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index 2b7e6aa5c..0c54e22e5 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -7,3 +7,15 @@ .usa-nav__secondary-item { font-weight: themeVars.$veda-uswds-fontweight-regular; } + +@media (width >= 64em) { + .usa-nav__secondary-links { + margin-bottom: 1.5rem; + } + + .usa-nav__secondary-item .usa-nav__link { + padding: 0; + color: themeVars.$veda-uswds-color-base-dark; + } +} + diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss index c78cc8c5f..38b4f14a4 100644 --- a/app/scripts/styles/_veda-ui-theme-vars.scss +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -26,6 +26,7 @@ $veda-uswds-fontweight-semibold: utils.font-weight('semibold'); // COLORS $veda-uswds-color-primary-darker: utils.color('primary-darker'); $veda-uswds-color-secondary: utils.color('secondary'); +$veda-uswds-color-base-dark: utils.color('base-dark'); $veda-uswds-color-base-darkest: utils.color('base-darkest'); $veda-uswds-color-base-light: utils.color('base-light'); $veda-uswds-color-base-ink: utils.color('ink'); From f72ed4172f79900a41c22ad2ac982649fb3a442d Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Mon, 2 Dec 2024 23:52:34 -0500 Subject: [PATCH 77/87] update customized chevron color request --- app/scripts/components/common/page-header/styles.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index 0c54e22e5..711543728 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -17,5 +17,9 @@ padding: 0; color: themeVars.$veda-uswds-color-base-dark; } + + .usa-nav__primary button[aria-expanded="false"] span:after { + background-color: themeVars.$veda-uswds-color-base-dark; + } } From 7917fab1ca013448ef44c0f30fa06edad43f1836 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Tue, 3 Dec 2024 00:17:30 -0500 Subject: [PATCH 78/87] fix lint complaint of double quotes --- app/scripts/components/common/page-header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 0608a2ae1..2129c50fd 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -58,7 +58,7 @@ export default function PageHeader({ return ( <> {accessibilityHomeShortCutText || 'Skip to main content'} From 204fa752e6e86638510b800ef15b9ca8af2a232a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 4 Dec 2024 08:33:53 +0100 Subject: [PATCH 79/87] Add new USWDS components to the roll up file and update imports --- app/scripts/components/common/page-header/index.tsx | 12 ++++++++---- app/scripts/components/common/uswds/index.tsx | 3 +++ 2 files changed, 11 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 2129c50fd..521688933 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,12 +1,16 @@ import React, { ComponentType, useCallback, useState, useMemo } from 'react'; + import { NavItem } from './types'; import LogoContainer from './logo-container'; import useMobileMenuFix from './use-mobile-menu-fix'; import { createDynamicNavMenuList } from './nav/create-dynamic-nav-menu-list'; +import { + USWDSHeader, + USWDSHeaderTitle, + USWDSNavMenuButton, + USWDSExtendedNav +} from '$components/common/uswds'; import { LinkProperties } from '$types/veda'; -import { USWDSHeader, USWDSHeaderTitle } from '$components/common/uswds/header'; -import { USWDSNavMenuButton } from '$components/common/uswds/header/nav-menu-button'; -import { USWDSExtendedNav } from '$components/common/uswds/header/extended-nav'; import './styles.scss'; interface PageHeaderProps { @@ -53,7 +57,7 @@ export default function PageHeader({ ); const LinkElement: ComponentType = - linkProperties.LinkElement as ComponentType; + linkProperties.LinkElement as ComponentType; return ( <> diff --git a/app/scripts/components/common/uswds/index.tsx b/app/scripts/components/common/uswds/index.tsx index e5410b060..403cd64a1 100644 --- a/app/scripts/components/common/uswds/index.tsx +++ b/app/scripts/components/common/uswds/index.tsx @@ -2,3 +2,6 @@ export { USWDSAlert } from './alert'; export { USWDSButtonGroup, USWDSButton } from './button'; export { USWDSLink } from './link'; export { USWDSBanner, USWDSBannerContent } from './banner'; +export { USWDSHeader, USWDSHeaderTitle } from './header'; +export { USWDSNavMenuButton } from './header/nav-menu-button'; +export { USWDSExtendedNav } from './header/extended-nav'; From 7ebd2415a1a8bf97ceeaba6384565d3fdcf87b0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alice=20R=C3=BChl?= Date: Wed, 4 Dec 2024 09:06:17 +0100 Subject: [PATCH 80/87] Hide logo on small screen widths --- .../common/page-header/logo-container/styles.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/app/scripts/components/common/page-header/logo-container/styles.scss b/app/scripts/components/common/page-header/logo-container/styles.scss index f4f40850e..29b91bd6c 100644 --- a/app/scripts/components/common/page-header/logo-container/styles.scss +++ b/app/scripts/components/common/page-header/logo-container/styles.scss @@ -21,6 +21,12 @@ */ } + @media (width <= 64em) { + #nasa-logo-pos { + display: none; + } + } + svg { height: 2.5rem; width: auto; From 7652f0b129c7e6e7b7521d66ac491d35e8624342 Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Wed, 4 Dec 2024 14:55:21 -0500 Subject: [PATCH 81/87] change cta nav item a tag to button --- .../common/page-header/nav/nav-item-cta.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx index e3c999901..838cb6114 100644 --- a/app/scripts/components/common/page-header/nav/nav-item-cta.tsx +++ b/app/scripts/components/common/page-header/nav/nav-item-cta.tsx @@ -15,9 +15,16 @@ export const NavItemCTA: React.FC = ({ {item.actionId === 'open-google-form' && ( <> - - {item.title} - + Date: Wed, 4 Dec 2024 15:34:00 -0500 Subject: [PATCH 82/87] add desktop uswds unit --- app/scripts/components/common/page-header/styles.scss | 2 +- app/scripts/styles/_veda-ui-theme-vars.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/app/scripts/components/common/page-header/styles.scss b/app/scripts/components/common/page-header/styles.scss index 711543728..f7a211807 100644 --- a/app/scripts/components/common/page-header/styles.scss +++ b/app/scripts/components/common/page-header/styles.scss @@ -8,7 +8,7 @@ font-weight: themeVars.$veda-uswds-fontweight-regular; } -@media (width >= 64em) { +@media (width >= themeVars.$veda-uswds-spacing-desktop) { .usa-nav__secondary-links { margin-bottom: 1.5rem; } diff --git a/app/scripts/styles/_veda-ui-theme-vars.scss b/app/scripts/styles/_veda-ui-theme-vars.scss index 38b4f14a4..31e716fc6 100644 --- a/app/scripts/styles/_veda-ui-theme-vars.scss +++ b/app/scripts/styles/_veda-ui-theme-vars.scss @@ -34,3 +34,4 @@ $veda-uswds-color-base-ink: utils.color('ink'); // SPACING $veda-uswds-spacing-5: spacing.units(0.5); $veda-uswds-spacing-105: spacing.units(1.5); +$veda-uswds-spacing-desktop: spacing.units('desktop'); From f5510ebf366b0f49eacc4ad74927adc996bc755c Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Wed, 4 Dec 2024 15:41:29 -0500 Subject: [PATCH 83/87] fix accessibility shortcut to main content to be button and direct to pagebody --- .../components/common/page-header/index.tsx | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 521688933..433e75769 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -1,4 +1,4 @@ -import React, { ComponentType, useCallback, useState, useMemo } from 'react'; +import React, { useCallback, useState, useMemo } from 'react'; import { NavItem } from './types'; import LogoContainer from './logo-container'; @@ -56,17 +56,22 @@ export default function PageHeader({ [subNavItems, linkProperties] ); - const LinkElement: ComponentType = - linkProperties.LinkElement as ComponentType; + const skipNav = (e) => { + e.preventDefault(); + const pageBody = document.getElementById('pagebody'); + if (pageBody) { + pageBody.focus(); + } + } return ( <> - {accessibilityHomeShortCutText || 'Skip to main content'} - +
    From 0ce081aaee99627061d1e4dfcb0e6d8ad53fa59b Mon Sep 17 00:00:00 2001 From: Sandra Hoang Date: Wed, 4 Dec 2024 15:49:28 -0500 Subject: [PATCH 84/87] fix lint errors --- app/scripts/components/common/page-header/index.tsx | 3 ++- .../components/common/page-header/nav/nav-item-cta.tsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx index 433e75769..40340dfd3 100644 --- a/app/scripts/components/common/page-header/index.tsx +++ b/app/scripts/components/common/page-header/index.tsx @@ -62,11 +62,12 @@ export default function PageHeader({ if (pageBody) { pageBody.focus(); } - } + }; return ( <>