+ {logoPath && (
+
+ );
+};
+
+export default HeaderLogo;
diff --git a/static/js/apps/base/components/header_bar/menu_desktop.tsx b/static/js/apps/base/components/header_bar/menu_desktop.tsx
new file mode 100644
index 0000000000..55d317fe98
--- /dev/null
+++ b/static/js/apps/base/components/header_bar/menu_desktop.tsx
@@ -0,0 +1,155 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* The content of the desktop version of the header */
+
+import React, { ReactElement, useEffect, useRef, useState } from "react";
+
+import { HeaderMenuV2, Labels, Routes } from "../../../../shared/types/base";
+import { resolveHref, slugify } from "../../utilities/utilities";
+import MenuDesktopRichMenu from "./menu_desktop_rich_menu";
+
+interface MenuDesktopProps {
+ //the data that will populate the header menu.
+ menu: HeaderMenuV2[];
+ //the labels dictionary - all labels will be passed through this before being rendered. If no value exists, the dictionary will return the key that was sent.
+ labels: Labels;
+ //the routes dictionary - this is used to convert routes to resolved urls
+ routes: Routes;
+}
+
+//TODO: verify the desired length of the timer
+const MENU_CLOSE_TIMER = 250;
+
+const MenuDesktop = ({
+ menu,
+ labels,
+ routes,
+}: MenuDesktopProps): ReactElement => {
+ const [openMenu, setOpenMenu] = useState
+
+ 
+
+
+ )}
+ {name}
+
+
+ );
+};
+
+export default MenuDesktop;
diff --git a/static/js/apps/base/components/header_bar/menu_desktop_rich_menu.tsx b/static/js/apps/base/components/header_bar/menu_desktop_rich_menu.tsx
new file mode 100644
index 0000000000..221e15b08d
--- /dev/null
+++ b/static/js/apps/base/components/header_bar/menu_desktop_rich_menu.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* A component to render the rich menu drop-down for the desktop menu */
+
+//TODO: Look into folding this into the same component as the mobile version, pending no changes to the structure.
+
+import React, { ReactElement } from "react";
+
+import { HeaderMenuV2, Routes } from "../../../../shared/types/base";
+import MenuRichSectionGroup from "./menu_rich_section_group";
+
+interface MenuDesktopRichMenuProps {
+ //the top level header item that will render in the open rich menu container
+ menuItem: HeaderMenuV2;
+ //the routes dictionary - this is used to convert routes to resolved urls
+ routes: Routes;
+ //a flag to indicate whether the menu is open.
+ open: boolean;
+}
+
+const MenuDesktopRichMenu = ({
+ menuItem,
+ routes,
+ open,
+}: MenuDesktopRichMenuProps): ReactElement => {
+ return (
+ -
+ {menu.map((menuItem, index) => (
+
- !menuItem.url && handleOpenMenu(index)}
+ onClick={(): void => !menuItem.url && toggleMenu(index)}
+ onTouchEnd={(e): void => {
+ if (!menuItem.url) itemMenuTouch(e, index);
+ }}
+ >
+ {menuItem.url ? (
+
+ {labels[menuItem.label]}
+
+ ) : (
+ <>
+ {labels[menuItem.label]}
+
+ keyboard_arrow_down
+
+ { + submenuRefs.current[index] = el; + }} + className="rich-menu-container" + aria-labelledby={slugify(`nav-${menuItem.label}-dropdown`)} + style={{ + maxHeight: openMenu === index ? `${panelHeight}px` : 0, + }} + > ++ + )} +
+
+ ))}
+
+
+ );
+};
+
+export default MenuDesktopRichMenu;
diff --git a/static/js/apps/base/components/header_bar/menu_desktop_section_group.tsx b/static/js/apps/base/components/header_bar/menu_desktop_section_group.tsx
new file mode 100644
index 0000000000..007bd82fbc
--- /dev/null
+++ b/static/js/apps/base/components/header_bar/menu_desktop_section_group.tsx
@@ -0,0 +1,89 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* A component to render a section group of the rich menu */
+
+import React, { ReactElement } from "react";
+
+import { HeaderMenuGroup, Routes } from "../../../../shared/types/base";
+import { resolveHref } from "../../utilities/utilities";
+
+interface MenuDesktopSectionGroupProps {
+ //the menu group to be rendered inside a particular location in the rich menu
+ menuGroup: HeaderMenuGroup;
+ //the routes dictionary - this is used to convert routes to resolved urls
+ routes: Routes;
+}
+
+const MenuDesktopSectionGroup = ({
+ menuGroup,
+ routes,
+}: MenuDesktopSectionGroupProps): ReactElement => {
+ return (
+
+
+ {menuItem.primarySectionGroups?.length > 0 && (
+ {menuItem.label}
+ {menuItem.introduction &&{menuItem.introduction}
} +
+ {menuItem.primarySectionGroups.map((primarySectionGroup, index) => (
+
+ )}
+ {menuItem.secondarySectionGroups?.length > 0 && (
+
+ {menuItem.secondarySectionGroups.map(
+ (secondarySectionGroup, index) => (
+
+ )}
+
+ {menuGroup.title &&
+ );
+};
+
+export default MenuDesktopSectionGroup;
diff --git a/static/js/apps/base/components/header_bar/menu_mobile.tsx b/static/js/apps/base/components/header_bar/menu_mobile.tsx
new file mode 100644
index 0000000000..1b2d5dbcc1
--- /dev/null
+++ b/static/js/apps/base/components/header_bar/menu_mobile.tsx
@@ -0,0 +1,179 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* The content of the mobile version of the header */
+
+import React, {
+ ReactElement,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from "react";
+
+import { HeaderMenuV2, Labels, Routes } from "../../../../shared/types/base";
+import { resolveHref } from "../../utilities/utilities";
+import MenuMobileRichMenu from "./menu_mobile_rich_menu";
+
+interface MenuMobileProps {
+ //the data that will populate the header menu.
+ menu: HeaderMenuV2[];
+ //the labels dictionary - all labels will be passed through this before being rendered. If no value exists, the dictionary will return the key that was sent.
+ labels: Labels;
+ //the routes dictionary - this is used to convert routes to resolved urls
+ routes: Routes;
+}
+
+const MenuMobile = ({
+ menu,
+ labels,
+ routes,
+}: MenuMobileProps): ReactElement => {
+ const [open, setOpen] = useState(false);
+ const [drawerWidth, setDrawerWidth] = useState(0);
+ const [selectedPrimaryItemIndex, setSelectedPrimaryItemIndex] = useState<
+ number | null
+ >(null);
+ const drawerRef = useRef{menuGroup.title}
} + {menuGroup.items.map((item, index) => ( +
+ {item.title && item.url ? (
+
+ ))}
+ + + {item.linkType === "external" && ( + arrow_outward + )} + {item.linkType === "rss" && rss_feed} + {item.title} + +
+ ) : ( +{item.title}
+ )} + + {item.description &&{item.description}
} + + {item.links?.length > 0 && ( +
+ {item.links.map((link, index) => (
+
+ )}
+
+ {link.linkType === "rss" ? (
+ <>
+
+ rss_feed
+ RSS Feed
+
+ {link.title &&
+ ))}
+ • {link.title}
} + + ) : ( + + {link.linkType === "external" && ( + arrow_outward + )} + {link.title} + + )} +
+
+ );
+};
+
+export default MenuMobile;
diff --git a/static/js/apps/base/components/header_bar/menu_mobile_rich_menu.tsx b/static/js/apps/base/components/header_bar/menu_mobile_rich_menu.tsx
new file mode 100644
index 0000000000..6b4a3bfc35
--- /dev/null
+++ b/static/js/apps/base/components/header_bar/menu_mobile_rich_menu.tsx
@@ -0,0 +1,74 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* A component to render the rich menu drop-down for the mobile menu */
+
+import React, { ReactElement } from "react";
+
+import { HeaderMenuV2, Labels, Routes } from "../../../../shared/types/base";
+import MenuRichSectionGroup from "./menu_rich_section_group";
+
+interface MenuMobileRichMenuProps {
+ //the menu item for which we are rendering the rich menu
+ menuItem: HeaderMenuV2 | null;
+ //the labels dictionary - all labels will be passed through this before being rendered. If no value exists, the dictionary will return the key that was sent.
+ labels: Labels;
+ //the routes dictionary - this is used to convert routes to resolved urls
+ routes: Routes;
+}
+
+const MenuMobileRichMenu = ({
+ menuItem,
+ labels,
+ routes,
+}: MenuMobileRichMenuProps): ReactElement => {
+ if (!menuItem) return null;
+
+ return (
+ <>
+
+ {headerLinks.map((menuItem) => (
+
+ {labels[menuItem.label]}
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {selectedPrimaryItemIndex !== null && (
+
+ )}
+
+
+
+
+
+
+
+ -
+ {menu.map((item, index) => (
+
- + {item.url ? ( + + {labels[item.label]} + + ) : ( + <> + + + )} + + ))} +
+
+
+
+ {menuItem.primarySectionGroups?.length > 0 && (
+ {labels[menuItem.label]}
+ {menuItem.introduction &&{menuItem.introduction}
} +
+ {menuItem.primarySectionGroups.map((primarySectionGroup, index) => (
+
+ )}
+ {menuItem.secondarySectionGroups?.length > 0 && (
+
+ {menuItem.secondarySectionGroups.map(
+ (secondarySectionGroup, index) => (
+
+ )}
+
+ );
+};
+
+export default MenuMobileRichMenu;
diff --git a/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx b/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx
new file mode 100644
index 0000000000..6e792e61f2
--- /dev/null
+++ b/static/js/apps/base/components/header_bar/menu_rich_section_group.tsx
@@ -0,0 +1,95 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* A component to render a section group of the rich menu (both mobile and desktop) */
+
+import React, { ReactElement } from "react";
+
+import { HeaderMenuGroup, Routes } from "../../../../shared/types/base";
+import { resolveHref } from "../../utilities/utilities";
+
+interface MenuRichSectionGroupProps {
+ //the menu group to be rendered inside a particular location in the rich menu
+ menuGroup: HeaderMenuGroup;
+ //the routes dictionary - this is used to convert routes to resolved urls
+ routes: Routes;
+}
+
+const MenuRichSectionGroup = ({
+ menuGroup,
+ routes,
+}: MenuRichSectionGroupProps): ReactElement => {
+ return (
+
+ {menuGroup.title &&
+ );
+};
+
+export default MenuRichSectionGroup;
diff --git a/static/js/apps/base/header_app.tsx b/static/js/apps/base/header_app.tsx
index 841f170d32..267192de18 100644
--- a/static/js/apps/base/header_app.tsx
+++ b/static/js/apps/base/header_app.tsx
@@ -20,8 +20,8 @@
import React, { ReactElement } from "react";
-import { HeaderMenu, Labels, Routes } from "../../shared/types/base";
-import HeaderBar from "./components/header_bar";
+import { HeaderMenuV2, Labels, Routes } from "../../shared/types/base";
+import HeaderBar from "./components/header_bar/header_bar";
interface HeaderAppProps {
//the name of the application (this may not be "Data Commons" in forked versions).
@@ -29,7 +29,7 @@ interface HeaderAppProps {
//a path to the logo to be displayed in the header
logoPath: string;
//the data that will populate the header menu.
- headerMenu: HeaderMenu[];
+ headerMenu: HeaderMenuV2[];
//the labels dictionary - all labels will be passed through this before being rendered. If no value exists, the dictionary will return the key that was sent.
labels: Labels;
//the routes dictionary - this is used to convert routes to resolved urls
diff --git a/static/js/apps/base/main.ts b/static/js/apps/base/main.ts
index c5d0298b04..d527167e17 100644
--- a/static/js/apps/base/main.ts
+++ b/static/js/apps/base/main.ts
@@ -22,7 +22,7 @@ import React from "react";
import ReactDOM from "react-dom";
import { loadLocaleData } from "../../i18n/i18n";
-import { FooterMenu, HeaderMenu } from "../../shared/types/base";
+import { FooterMenu, HeaderMenuV2 } from "../../shared/types/base";
import { FooterApp } from "./footer_app";
import { HeaderApp } from "./header_app";
import { extractLabels, extractRoutes } from "./utilities/utilities";
@@ -40,7 +40,7 @@ function renderPage(): void {
const headerMenu = JSON.parse(
metadataContainer.dataset.header
- ) as HeaderMenu[];
+ ) as HeaderMenuV2[];
const footerMenu = JSON.parse(
metadataContainer.dataset.footer
) as FooterMenu[];
diff --git a/static/js/apps/homepage/app_v2.tsx b/static/js/apps/homepage/app_v2.tsx
index 762ca97dac..ca6aff8f0d 100644
--- a/static/js/apps/homepage/app_v2.tsx
+++ b/static/js/apps/homepage/app_v2.tsx
@@ -22,14 +22,6 @@
import React, { ReactElement } from "react";
-import { NlSearchBar } from "../../components/nl_search_bar";
-import {
- GA_EVENT_NL_SEARCH,
- GA_PARAM_QUERY,
- GA_PARAM_SOURCE,
- GA_VALUE_SEARCH_SOURCE_HOMEPAGE,
- triggerGAEvent,
-} from "../../shared/ga_events";
import { Routes } from "../../shared/types/base";
import { Partner, Topic } from "../../shared/types/homepage";
import DataSize from "./components/data_size";
@@ -54,24 +46,6 @@ interface AppProps {
export function App({ topics, partners, routes }: AppProps): ReactElement {
return (
<>
- {menuGroup.title}
} + {menuGroup.items.map((item, index) => ( +
+ {item.title && item.url ? (
+
+ ))}
+ + + {item.linkType === "external" && ( + arrow_outward + )} + {item.linkType === "rss" && ( + rss_feed + )} + {item.title} + +
+ ) : ( +{item.title}
+ )} + + {item.description &&{item.description}
} + + {item.links?.length > 0 && ( +
+ {item.links.map((link, index) => (
+
+ )}
+
+ {link.linkType === "rss" ? (
+ <>
+
+
+ rss_feed
+
+ RSS Feed
+
+ {link.title &&
+ ))}
+ • {link.title}
} + + ) : ( + + {link.linkType === "external" && ( + + arrow_outward + + )} + {link.title} + + )} +
- {
- triggerGAEvent(GA_EVENT_NL_SEARCH, {
- [GA_PARAM_QUERY]: q,
- [GA_PARAM_SOURCE]: GA_VALUE_SEARCH_SOURCE_HOMEPAGE,
- });
- window.location.href = `/explore#q=${encodeURIComponent(q)}`;
- }}
- placeholder={"Enter a question to explore"}
- initialValue={""}
- shouldAutoFocus={false}
- />
-
-
-
-
- );
-
function handleSearch(): void {
if (!props.allowEmptySearch && !value) {
setInvalid(true);
@@ -86,4 +70,26 @@ export function NlSearchBar(props: NlSearchBarPropType): JSX.Element {
props.onSearch(value);
}
+
+ const commonProps: NlSearchBarImplementationProps = {
+ value,
+ invalid,
+ placeholder: props.placeholder,
+ inputId: props.inputId,
+ onChange: (e: React.ChangeEvent
-
-
-
- {
- setValue(e.target.value);
- setInvalid(false);
- }}
- onKeyDown={(e) => e.key === "Enter" && handleSearch()}
- className="pac-target-input search-input-text"
- autoFocus={props.shouldAutoFocus}
- autoComplete="off"
- >
-
-
-
-
+
+ );
+};
+
+export default NlSearchBarHeaderInline;
diff --git a/static/js/components/nl_search_bar/nl_search_bar_standard.tsx b/static/js/components/nl_search_bar/nl_search_bar_standard.tsx
new file mode 100644
index 0000000000..625caa52b8
--- /dev/null
+++ b/static/js/components/nl_search_bar/nl_search_bar_standard.tsx
@@ -0,0 +1,73 @@
+/**
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Standard version of the NL Search Component - used as a stand-alone component in the body of a page.
+ */
+
+import React, { ReactElement } from "react";
+import { Input, InputGroup } from "reactstrap";
+
+import { NlSearchBarImplementationProps } from "../nl_search_bar";
+
+const NlSearchBarStandard = ({
+ value,
+ invalid,
+ placeholder,
+ inputId,
+ onChange,
+ onSearch,
+ feedbackLink,
+ shouldAutoFocus,
+}: NlSearchBarImplementationProps): ReactElement => {
+ return (
+
+
+
+
+ search
+ e.key === "Enter" && onSearch()}
+ className="pac-target-input search-input-text"
+ autoFocus={shouldAutoFocus}
+ autoComplete="off"
+ >
+
+
+
+
+
+
+ );
+};
+
+export default NlSearchBarStandard;
diff --git a/static/js/shared/types/base.ts b/static/js/shared/types/base.ts
index b130a58c2c..9d6bb4acb4 100644
--- a/static/js/shared/types/base.ts
+++ b/static/js/shared/types/base.ts
@@ -56,6 +56,60 @@ interface FooterSubMenu {
hide?: boolean;
}
+// The top level of the header menu
+export interface HeaderMenuV2 {
+ //the label that displays in the top level menu item of the header
+ label: string;
+ //an optional url - if this is supplied, any subsequent information will be ignored as the rich menu cannot be clicked
+ url?: string;
+ //the aria-label attribute for that header
+ ariaLabel: string;
+ //text that displays in the introduction section of the desktop menu
+ introduction?: string;
+ //the content of the primary column (the column directly next to the introduction column;
+ primarySectionGroups?: HeaderMenuGroup[];
+ //the content of the secondary column (the smaller column to the right of the introduction column;
+ secondarySectionGroups?: HeaderMenuGroup[];
+ //if set to true, will be exposed outside the mobile toggle button and on the banner itself - this should be used with consideration for available space
+ exposeInMobileBanner?: boolean;
+}
+
+// a subsection of the header menu. These contain an optional title and a list of content items.
+export interface HeaderMenuGroup {
+ id: string;
+ //an optional title for the column group
+ title?: string;
+ //a list of the content items associated with each column
+ items: HeaderMenuItem[];
+}
+
+// a header group content item - each group is populated by these.
+export interface HeaderMenuItem {
+ //the title of the header menu item - this can be a link if a link is given, otherwise a regular header
+ title?: string;
+ //the url of the header menu item - giving one will make the title clickable
+ url?: string;
+ //the type of link: internal, external or rss - this determines how the link is decorated.
+ linkType?: LinkType;
+ //a description of the item. This will go below the link, and is optional.
+ description?: string;
+ //an optional list of links that appear below the description.
+ links?: HeaderMenuItemLink[];
+}
+
+// a header menu item link - these links will appear below the header item description if links are given.
+export interface HeaderMenuItemLink {
+ //the title of a header menu item link
+ title: string;
+ //the type of link: internal, external or rss - this determines how the link is decorated.
+ linkType: LinkType;
+ //the url of the link
+ url: string;
+}
+
+//a union of possible link types for determining how links are decorated.
+export type LinkType = "internal" | "external" | "rss";
+
//A dictionary of routes. These map route names, such as "tools.visualization" to the resolved route.
//These are implemented as a proxy object that will return the text of the key if the key is not found.
//This is to allow the flexibility using both urls and routes in source data such as JSON that will be passed through the object.
diff --git a/static/webpack.config.js b/static/webpack.config.js
index 6f6caac016..df6f47d89e 100644
--- a/static/webpack.config.js
+++ b/static/webpack.config.js
@@ -46,6 +46,7 @@ const config = {
mcf_playground: __dirname + "/js/mcf_playground.js",
base: [
__dirname + "/js/apps/base/main.ts",
+ __dirname + "/css/core.scss",
],
place: [
__dirname + "/js/place/place.ts",
+
+
+
+ e.key === "Enter" && onSearch()}
+ className="pac-target-input search-input-text"
+ autoFocus={shouldAutoFocus}
+ autoComplete="off"
+ >
+
+
+
+