+
+
+ );
+}
+
+export default DatasetDescription;
diff --git a/src/components/DatasetTableTab/DataTableStateWrapper.tsx b/src/components/DatasetTableTab/DataTableStateWrapper.tsx
index a1e84aa7..b255853b 100644
--- a/src/components/DatasetTableTab/DataTableStateWrapper.tsx
+++ b/src/components/DatasetTableTab/DataTableStateWrapper.tsx
@@ -1,9 +1,8 @@
import React from "react";
import { createContext, useContext, useState } from "react";
import DatasetTable from ".";
-import { DataTableContext } from "../../templates/Dataset";
-
-export const ManageColumnsContext = createContext({})
+import DataTableContext from "../../templates/Dataset/DataTableContext";
+import ManageColumnsContext from '../ManageColumns/ManageColumnsContext';
const DataTableStateWrapper = () => {
const { id, datasetTableControls } = useContext(DataTableContext);
diff --git a/src/components/DatasetTableTab/DatasetTableTab.test.jsx b/src/components/DatasetTableTab/DatasetTableTab.test.jsx
index bae56e7f..55449682 100644
--- a/src/components/DatasetTableTab/DatasetTableTab.test.jsx
+++ b/src/components/DatasetTableTab/DatasetTableTab.test.jsx
@@ -4,7 +4,7 @@ import '@testing-library/jest-dom';
import DataTableStateWrapper from './DataTableStateWrapper';
import * as resource from "../../tests/fixtures/resource.json";
import * as distribution from "../../tests/fixtures/distribution.json";
-import { DataTableContext } from '../../templates/Dataset';
+import DataTableContext from "../../templates/Dataset/DataTableContext";
describe('
+
+
+ {faqItems.map((faq) => (
+ toggleAccordionItem(faq.id)}
+ >
+ {faq.body}
+
+ ))}
+
+
+ );
+};
+
+export default FAQAccordion;
diff --git a/src/components/HeaderNav/header-nav.scss b/src/components/HeaderNav/header-nav.scss
new file mode 100644
index 00000000..6a7fdae5
--- /dev/null
+++ b/src/components/HeaderNav/header-nav.scss
@@ -0,0 +1,117 @@
+.dkan-c-header--link-list {
+ list-style: none;
+}
+
+.dkan-c-header--wrapper {
+ flex-wrap: nowrap !important;
+}
+
+.dkan-c-header--link-list .dkan-c-header--link,
+.dkan-c-header--link-list .dkan-c-header--link + ul a {
+ span {
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ border-bottom-color: transparent;
+ }
+}
+
+
+
+.dkan-c-header--mobile {
+ .dkan-c-header--link-list .dkan-c-header--link,
+ .dkan-c-header--link-list .dkan-c-header--link + ul a {
+ text-decoration: none;
+ color: #{var(--header-nav-link--mobile-color)};
+ &:hover,
+ &:focus {
+ color: #{var(--header-nav-link--mobile-color)};
+ span {
+ border-bottom-color: #{var(--header-nav-link--mobile-color)};
+ }
+ }
+ }
+
+ .dkan-c-nav-menu ul {
+ padding-inline-start: 0;
+ }
+
+ .dkan-c-nav-menu--close {
+ display: none;
+ }
+
+ .dkan-c-nav-menu--open {
+ flex: none;
+ max-width: 100%;
+ display: block;
+ position: fixed;
+ background-color: #{var(--header-mobile-bg-color)};
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ padding: 50px 0;
+ z-index: 500;
+ // TODO: Need to rework, doesn't do anything with display none/block.
+ transition-property: left;
+ transition-duration: #{var(--mobile-nav-animation-time)};
+ }
+
+ .dkan-c-nav-menu .dkan-c-top-nav {
+ padding-top: 8px;
+ display: inherit;
+ &::before {
+ background: #{var(--color-primary-light)};
+ content: "";
+ width: 48px;
+ height: 2px;
+ margin-left: 24px;
+ display: block;
+ position: absolute;
+ }
+
+ ul {
+ padding-top: 16px;
+ }
+ }
+}
+
+.dkan-c-header--desktop {
+ ul.dkan-c-header--link-list .dkan-c-header--link,
+ ul.dkan-c-header--link-list .dkan-c-header--link + ul a {
+ text-decoration: none;
+ color: #{var(--header-nav-link--color)};
+ padding: #{var(--space, 8px 8px)};
+ &:hover {
+ span {
+ border-bottom-color: #{var(--header-nav-link--color)};
+ }
+ }
+ }
+
+ .dkan-c-header--link-list {
+ margin-block: 0;
+ }
+
+ .dkan-c-main-nav {
+ display: flex;
+ flex-direction: row;
+ justify-content: end;
+ }
+
+ .dkan-c-nav-menu--mobile-close-button {
+ display: none;
+ }
+
+ .dkan-c-header--link-list {
+ display: flex;
+ flex-direction: row;
+ }
+
+ .dkan-c-nav-menu .dkan-c-top-nav {
+ display: none;
+ }
+}
+
+
+
diff --git a/src/components/HeaderNav/index.tsx b/src/components/HeaderNav/index.tsx
new file mode 100644
index 00000000..4c4777b2
--- /dev/null
+++ b/src/components/HeaderNav/index.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { Button, CloseIconThin } from '@cmsgov/design-system';
+import HeaderContext from '../../templates/Header/HeaderContext';
+import SubMenu from '../SubMenu';
+import { NavLinkArray } from '../../templates/Header';
+import HeaderSearch from '../HeaderSearch';
+import './header-nav.scss';
+
+export type HeaderNavProps = {
+ links: NavLinkArray[];
+ topNavLinks?: NavLinkArray[];
+ searchInMobile?: boolean;
+ wrapperClasses?: string;
+}
+
+const HeaderNav = (props: HeaderNavProps) => {
+ const headerContext = React.useContext(HeaderContext);
+ const { links, topNavLinks, wrapperClasses, searchInMobile } = props;
+ const navMenuOpenClass = `dkan-c-nav-menu--${headerContext.mobileMenuOpen ? "open" : "close"}`;
+ const isMobileClass = `dkan-c-nav-menu--${headerContext.isMobile ? 'mobile' : 'desktop'}`;
+ const linkClasses = 'dkan-c-header--link ds-c-button ds-c-button--ghost';
+ const listClasses= 'dkan-c-header--link-list ';
+ return(
+
+
+
+ {topNavLinks &&
+
+ }
+ {searchInMobile &&
+
+ );
+}
+
+export default HeaderNav;
diff --git a/src/components/HeaderNavIconLink/header-nav-icon-link.scss b/src/components/HeaderNavIconLink/header-nav-icon-link.scss
new file mode 100644
index 00000000..fe5fd5bc
--- /dev/null
+++ b/src/components/HeaderNavIconLink/header-nav-icon-link.scss
@@ -0,0 +1,51 @@
+:root {
+ --header-nav-icon-link--desktop-width: 240px;
+ --header-nav-icon-link--mobile-width: 90px;
+}
+
+.dkan-c-header-nav-icon-link {
+ display: inline-flex;
+ align-items: center;
+ border-right: none;
+ a {
+ text-decoration: none;
+ border-bottom: none;
+ display: inline-block;
+ }
+ a:focus,
+ a:hover {
+ background-color: transparent;
+ }
+ &.show-back-arrow a::before {
+ font-family: 'Font Awesome 6 Pro';
+ content: '\f33e';
+ color: #323a45;
+ font-size: 18px;
+ padding-right: 10px;
+ display: inline-block;
+ line-height: 18px;
+ height: 18px;
+ width: 18px;
+ margin-left: 10px;
+ text-align: center;
+ vertical-align: middle;
+ font-weight: lighter;
+ }
+ img {
+ height: auto;
+ display: inline-block;
+ vertical-align: middle;
+ }
+}
+
+.dkan-c-header--mobile {
+ .dkan-c-header-nav-icon-link img {
+ width: #{var(--header-nav-icon-link--mobile-width)};
+ }
+}
+
+.dkan-c-header--desktop {
+ .dkan-c-header-nav-icon-link img {
+ width: #{var(--header-nav-icon-link--desktop-width)};
+ }
+}
diff --git a/src/components/HeaderNavIconLink/index.tsx b/src/components/HeaderNavIconLink/index.tsx
new file mode 100644
index 00000000..a314828b
--- /dev/null
+++ b/src/components/HeaderNavIconLink/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import "./header-nav-icon-link.scss";
+
+export type HeaderNavIconLinkProps = {
+ url: string;
+ urlTitle: string;
+ logoFilePath: string;
+ logoAltText: string;
+ backArrow?: boolean;
+}
+
+const HeaderNavIconLink = (props: HeaderNavIconLinkProps) => {
+ const { url, urlTitle, logoFilePath, logoAltText, backArrow } = props;
+ return(
+
+
+ 
+
+
+ );
+}
+
+export default HeaderNavIconLink;
diff --git a/src/components/HeaderSearch/header-search.scss b/src/components/HeaderSearch/header-search.scss
new file mode 100644
index 00000000..ee8f9d72
--- /dev/null
+++ b/src/components/HeaderSearch/header-search.scss
@@ -0,0 +1,66 @@
+.dkan-c-main-navigation--search .dkan-c-header-search--modal-button {
+ span {
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ border-bottom-color: transparent;
+ }
+}
+
+.dkan-c-header--mobile {
+ .dkan-c-nav-menu--mobile {
+ display: none;
+ }
+
+ .dkan-c-nav-menu--mobile .dkan-c-header-search--modal-button {
+ text-decoration: none;
+ color: #{var(--header-nav-link--mobile-color)};
+ &:hover,
+ &:focus {
+ color: #{var(--header-nav-link--mobile-color)};
+ span {
+ border-bottom-color: #{var(--header-nav-link--mobile-color)};
+ }
+ }
+ }
+}
+
+.dkan-c-header-search--modal-button {
+ &::before {
+ font-family: 'Font Awesome 6 Pro';
+ content: '\f002';
+ font-size: 18px;
+ padding-right: 10px;
+ display: inline-block;
+ line-height: 18px;
+ height: 18px;
+ width: 18px;
+ margin-left: 10px;
+ text-align: center;
+ vertical-align: middle;
+ font-weight: lighter;
+ box-sizing: content-box
+ }
+}
+
+.dkan-c-main-navigation--search .dkan-c-header-search--modal-button {
+ color: #{var(--header-nav-search--color)};
+ text-decoration: none;
+ &:focus,
+ &:hover {
+ color: #{var(--header-nav-search--color)};
+ span {
+ border-bottom-color: #{var(--header-nav-search--color)};
+ }
+ }
+}
+
+.dkan-c-header--desktop {
+ .dkan-c-main-navigation--search {
+ border-left: 2px solid #{var(--header-nav-search--color)};
+ }
+ .dkan-c-nav-menu--desktop .dkan-c-main-navigation--search {
+ display: none;
+ }
+
+}
+
diff --git a/src/components/HeaderSearch/index.tsx b/src/components/HeaderSearch/index.tsx
new file mode 100644
index 00000000..4f29c8a6
--- /dev/null
+++ b/src/components/HeaderSearch/index.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { Button, Dialog, TextField } from "@cmsgov/design-system";
+
+import "./header-search.scss";
+
+type HeaderSearchProps = {
+ headingText?: string
+};
+
+const HeaderSearch = (props: HeaderSearchProps) => {
+ const { headingText = "Dataset Search" } = props;
+ const navigate = useNavigate();
+ const [modalSearchTerm, setModalSearchTerm] = useState('');
+ const [modalSearch, setModalSearch] = useState(false);
+
+ function searchForDataset(e: React.SyntheticEvent) {
+ e.preventDefault();
+ if (window) {
+ if (window.location.pathname !== '/datasets') {
+ navigate(`/datasets?fulltext=${modalSearchTerm}`);
+ } else {
+ window.location.search = `fulltext=${modalSearchTerm}`;
+ setModalSearch(false);
+ }
+ }
+ }
+
+ return (
+
+
+ {modalSearch && (
+
+ );
+}
+
+export default HeaderSearch;
diff --git a/src/components/HeaderSiteTitle/index.tsx b/src/components/HeaderSiteTitle/index.tsx
new file mode 100644
index 00000000..365ec7c8
--- /dev/null
+++ b/src/components/HeaderSiteTitle/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { OrgType } from '../../types/misc';
+
+export type HeaderSiteTitleProps = {
+ inverse?: boolean
+ org: OrgType
+}
+
+const HeaderSiteTitle = (props: HeaderSiteTitleProps) => {
+ const inverse = props.inverse;
+ const { logoFilePath, logoAltText, urlTitle } = props.org;
+ const classList = "ds-u-padding-y--3 dc-c-site-title print-padding-top--0 print-padding-bottom--0 ds-u-text-align--center ds-u-md-text-align--left";
+ if(logoFilePath) {
+ return (
+
+
+
+
+
+
+ )
+ }
+ return(
+
+
+ {urlTitle}
+
+
+
+ )
+}
+
+export default HeaderSiteTitle;
diff --git a/src/components/HeaderTagline/header-tagline.scss b/src/components/HeaderTagline/header-tagline.scss
new file mode 100644
index 00000000..39abd531
--- /dev/null
+++ b/src/components/HeaderTagline/header-tagline.scss
@@ -0,0 +1,17 @@
+.dkan-c-cms-topnav--tagline {
+ color: #{var(--tag-line--color)};
+}
+
+.dkan-c-header--mobile {
+ .dkan-c-cms-topnav--tagline {
+ display: none;
+ }
+}
+
+.dkan-c-header--desktop {
+ .dkan-c-cms-topnav--tagline {
+ display: inline-flex;
+ align-items: center;
+ border-left: 1px solid #{var(--tag-line--border-color)};
+ }
+}
diff --git a/src/components/HeaderTagline/index.tsx b/src/components/HeaderTagline/index.tsx
new file mode 100644
index 00000000..80deb351
--- /dev/null
+++ b/src/components/HeaderTagline/index.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './header-tagline.scss';
+
+export type HeaderTaglineProps = {
+ tagline: string;
+
+}
+
+const HeaderTagline = (props: HeaderTaglineProps) => {
+ return (
+
+ {props.tagline}
+
+ );
+};
+
+export default HeaderTagline;
diff --git a/src/components/ManageColumns/ManageColumns.jsx b/src/components/ManageColumns/ManageColumns.jsx
index 6deadaa6..773d8f1e 100644
--- a/src/components/ManageColumns/ManageColumns.jsx
+++ b/src/components/ManageColumns/ManageColumns.jsx
@@ -4,7 +4,7 @@ import { SortableContext, verticalListSortingStrategy, sortableKeyboardCoordinat
import { restrictToVerticalAxis } from '@dnd-kit/modifiers'
import { Button, Choice, Dialog } from '@cmsgov/design-system'
import Card from './Card'
-import { ManageColumnsContext } from '../DatasetTableTab/DataTableStateWrapper'
+import ManageColumnsContext from './ManageColumnsContext';
import './ManageColumns.scss'
class ExcludeCheckboxKeyboardSensor extends KeyboardSensor {
diff --git a/src/components/ManageColumns/ManageColumns.test.js b/src/components/ManageColumns/ManageColumns.test.js
index 571bb0c3..a2472633 100644
--- a/src/components/ManageColumns/ManageColumns.test.js
+++ b/src/components/ManageColumns/ManageColumns.test.js
@@ -1,7 +1,7 @@
import React from 'react';
import { render, screen, within, act } from '@testing-library/react'
import ManageColumns from './ManageColumns'
-import { ManageColumnsContext } from '../DatasetTableTab/DataTableStateWrapper';
+import ManageColumnsContext from './ManageColumnsContext';
// Rationale
// We shouldn't need to rest dnd-kit functionality as that should be handled downstream in their library
diff --git a/src/components/ManageColumns/ManageColumnsContext.tsx b/src/components/ManageColumns/ManageColumnsContext.tsx
new file mode 100644
index 00000000..7ed23edb
--- /dev/null
+++ b/src/components/ManageColumns/ManageColumnsContext.tsx
@@ -0,0 +1,5 @@
+import { createContext } from "react";
+
+const ManageColumnsContext = createContext({})
+
+export default ManageColumnsContext;
diff --git a/src/components/MobileHeader/MobileHeader.test.jsx b/src/components/MobileHeader/MobileHeader.test.jsx
deleted file mode 100644
index 4dc8b333..00000000
--- a/src/components/MobileHeader/MobileHeader.test.jsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen, within } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import MobileHeader from './index';
-import { MemoryRouter } from 'react-router-dom';
-import mockLinks from '../../../__mocks__/mockLinks.js';
-
-describe('