@@ -57,7 +57,7 @@ const DesktopHeader = ({
wrapLabel
menuName="CMS Site Main Nav"
menuId="site"
- menuClasses="ds-u-display--flex dc-c-header--links ds-u-align-items--center"
+ menuClasses="ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-align-items--center"
linkClasses={linkClasses}
/>
diff --git a/src/components/MobileHeader/MobileHeader.jsx b/src/components/MobileHeader/MobileHeader.jsx
index aa7f9af2..bf8d2647 100644
--- a/src/components/MobileHeader/MobileHeader.jsx
+++ b/src/components/MobileHeader/MobileHeader.jsx
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from 'react';
import { useMediaQuery } from 'react-responsive';
import { Button } from '@cmsgov/design-system';
-import { Link } from 'react-router-dom';
+import { NavLink } from 'react-router-dom';
import SearchModal from '../SearchModal';
import NavBar from '../NavBar/Navbar';
import cmsLogo from '../../assets/images/CMSGovLogo-O.png';
@@ -104,7 +104,7 @@ const MobileHeader = ({
links={links.topnav}
menuName="CMS Main Header"
menuId="cmsheader"
- menuClasses="ds-u-display--flex dc-c-header--links ds-u-font-size--small"
+ menuClasses="ds-u-display--flex ds-u-flex-direction--row dc-c-header--links ds-u-font-size--sm ds-u-margin-bottom--2"
/>
@@ -176,7 +176,7 @@ const MobileHeader = ({
menuName="Main Nav"
menuId="site"
menuClasses="dc-c-header--links dc-c-header--mobile-links"
- linkClasses="ds-u-margin-left--1 ds-u-padding-bottom--2 ds-h5"
+ linkClasses="ds-u-margin-left--1 ds-u-padding-bottom--2 ds-text-heading--md"
/>
{mobile && (
@@ -186,7 +186,7 @@ const MobileHeader = ({
menuName="CMS Main Header"
menuId="cms-mobile-header"
linkClasses="ds-u-margin-left--1 ds-u-margin-bottom--2"
- menuClasses="dc-c-header--links ds-u-font-size--small"
+ menuClasses="dc-c-header--links ds-u-font-size--sm ds-u-margin-bottom--2"
/>
)}
diff --git a/src/components/NavLink/navlink.test.jsx b/src/components/NavLink/navlink.test.jsx
index 7612f1cf..9e75dfea 100644
--- a/src/components/NavLink/navlink.test.jsx
+++ b/src/components/NavLink/navlink.test.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
import { axe, toHaveNoViolations } from 'jest-axe';
import NavLink from './index';
import { MemoryRouter } from 'react-router-dom';
diff --git a/src/components/ResourceConditionField/ResourceConditionalField.test.jsx b/src/components/ResourceConditionField/ResourceConditionalField.test.jsx
index f073d128..4db36ce5 100644
--- a/src/components/ResourceConditionField/ResourceConditionalField.test.jsx
+++ b/src/components/ResourceConditionField/ResourceConditionalField.test.jsx
@@ -4,7 +4,7 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
import ResourceConditionalField from './index';
describe('
', () => {
diff --git a/src/components/ResourceFilter/resourcefilter.test.jsx b/src/components/ResourceFilter/resourcefilter.test.jsx
index 434371c7..7e874cd2 100644
--- a/src/components/ResourceFilter/resourcefilter.test.jsx
+++ b/src/components/ResourceFilter/resourcefilter.test.jsx
@@ -5,7 +5,7 @@
import React from 'react';
import userEvent from '@testing-library/user-event';
import { render, screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
import ResourceFilter from './index';
const columns = ['column_1', 'column_2', 'column_3'];
@@ -93,11 +93,11 @@ describe('Resource Filter Functions', () => {
});
test('renders an empty field on clean start', async () => {
render(BasicFilter);
- expect(screen.getByLabelText('Filter column')).toBeInTheDocument();
- expect(screen.getByLabelText('Filter operator')).toBeInTheDocument();
+ expect(screen.getByLabelText('Filter column', {selector: 'select'})).toBeInTheDocument();
+ expect(screen.getByLabelText('Filter operator', {selector: 'select'})).toBeInTheDocument();
expect(screen.getByLabelText('Filter value')).toBeInTheDocument();
- expect(screen.getByDisplayValue('Select column')).toBeInTheDocument();
- expect(screen.getByDisplayValue('--')).toBeInTheDocument();
+ expect(screen.getByRole('button', { name: 'Select column Filter column' })).toBeTruthy();
+ expect(screen.getByRole('button', { name: '-- Filter operator'})).toBeInTheDocument();
expect(screen.getByRole('button', { name: 'Remove filter' })).toBeInTheDocument();
expect(screen.getByRole('button', { name: '+ Add another filter' })).toBeInTheDocument();
});
@@ -132,8 +132,8 @@ describe('Resource Filter Functions', () => {
test('opens pre-filled', async () => {
render(PreFilledFilter);
expect(screen.getByDisplayValue('column_2')).toBeInTheDocument();
- expect(screen.getByRole('option', { name: 'column_2' }).selected).toBe(true);
- expect(screen.getByRole('option', { name: 'Contains' }).selected).toBe(true);
+ expect(screen.getByRole('button', { name: 'column_2 Filter column' })).toBeTruthy();
+ expect(screen.getByRole('button', { name: 'Contains Filter operator' })).toBeTruthy();
expect(screen.getByLabelText('Filter value')).not.toBeDisabled();
expect(screen.getByDisplayValue('dkan')).toBeInTheDocument();
});
diff --git a/src/components/ResourceHeader/index.jsx b/src/components/ResourceHeader/index.jsx
index 0b8e8be8..954152b7 100644
--- a/src/components/ResourceHeader/index.jsx
+++ b/src/components/ResourceHeader/index.jsx
@@ -17,6 +17,7 @@ import DataTableRowChanger from '../DataTableRowChanger';
import DownloadIcon from '../../assets/icons/download';
import CopyIcon from '../../assets/icons/copy';
import SettingsIcon from '../../assets/icons/settings';
+import './resource-header.scss';
const ResourceHeader = ({
setTablePadding,
@@ -80,7 +81,7 @@ const ResourceHeader = ({
onOpen={() => {
navigator.clipboard.writeText(window.location.href);
}}
- className="ds-c-button ds-c-button--small ds-u-text-align--left ds-u-margin-right--1"
+ className="ds-c-button ds-c-button--small ds-u-text-align--left ds-u-margin-right--1 display-settings-font"
placement="bottom"
dialog
ariaLabel="Copy link to filtered data"
@@ -96,7 +97,7 @@ const ResourceHeader = ({
)}
{
const { count, columns } = resource;
return (
-
About this Resource
+
About this Resource
diff --git a/src/components/SearchModal/index.jsx b/src/components/SearchModal/index.jsx
index a64d1648..8721323c 100644
--- a/src/components/SearchModal/index.jsx
+++ b/src/components/SearchModal/index.jsx
@@ -44,36 +44,32 @@ const SearchModal = ({
+ actions= {<>
+
+ }
+ />
)}
);
diff --git a/src/styles/scss/index.scss b/src/styles/scss/index.scss
deleted file mode 100644
index 8c2e8dc8..00000000
--- a/src/styles/scss/index.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@import './components';
-@import './templates';
-
-main {
- padding-bottom: 100px;
-}
-
-.dc-c-word-break--all {
- word-break: break-all;
-}
-
-html a:focus {
- background-color: transparent;
-}
diff --git a/src/styles/scss/templates/index.scss b/src/styles/scss/templates/index.scss
deleted file mode 100644
index 584695fe..00000000
--- a/src/styles/scss/templates/index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import './dataset-search.scss';
-@import './swagger.scss';
-@import './query-builder.scss';
diff --git a/src/styles/scss/templates/query-builder.scss b/src/styles/scss/templates/query-builder.scss
deleted file mode 100644
index 859679a5..00000000
--- a/src/styles/scss/templates/query-builder.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.dc-query-builder .ds-c-accordion__content {
- padding-bottom: 0 !important;
- max-height: 24rem;
-}
-.dc-query-builder form {
- position: relative;
-}
-
-.dc-query-bulder--form-buttons {
- position: sticky;
- position: -webkit-sticky;
- width: 100%;
- bottom: 0;
- background-color: white;
-}
-
-.dc-query-builder .ds-c-accordion__heading > .ds-c-accordion__button {
- align-items: center;
- display: flex;
- justify-content: space-between;
- padding: 16px 24px 16px 24px;
-}
diff --git a/src/styles/scss/templates/swagger.scss b/src/styles/scss/templates/swagger.scss
deleted file mode 100644
index 1da066e4..00000000
--- a/src/styles/scss/templates/swagger.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Swagger overrides
-.swagger-ui .opblock .opblock-summary-path {
- flex-shrink: 1 !important;
- max-width: calc(100% - 110px) !important;
-}
-.swagger-ui .opblock .opblock-summary-method {
- min-width: auto !important;
- @media (min-width: 765px) {
- min-width: 80px !important;
- }
-}
-
-.swagger-ui .opblock-tag-section {
- min-width: 460px;
-}
-
-@media (max-width: 544px) {
- .swagger-ui .opblock-tag small {
- flex: initial;
- }
-}
diff --git a/src/templates/APIPage/swagger-ui-overrides.scss b/src/templates/APIPage/swagger-ui-overrides.scss
index 9bdc4d63..05f264f2 100644
--- a/src/templates/APIPage/swagger-ui-overrides.scss
+++ b/src/templates/APIPage/swagger-ui-overrides.scss
@@ -85,3 +85,8 @@ This document provides overrides to Swagger UI, fixing accessibility issues.
}
}
}
+
+// Swagger overrides
+.swagger-ui h2, .swagger-ui h3, .swagger-ui h4 {
+ font-weight: bold !important;
+}
\ No newline at end of file
diff --git a/src/templates/Dataset/DatasetBody.jsx b/src/templates/Dataset/DatasetBody.jsx
index 1936e475..5089963f 100644
--- a/src/templates/Dataset/DatasetBody.jsx
+++ b/src/templates/Dataset/DatasetBody.jsx
@@ -68,7 +68,7 @@ const DatasetBody = ({
{dataset.title}
-
+
{dataset.theme ? {dataset.theme[0].data} : null}
{dataset.modified && (
@@ -80,7 +80,7 @@ const DatasetBody = ({
{resource.columns && Object.keys(resource.schema).length ? (
<>
-
Resource Preview
+
Resource Preview
{resource.columns ? (
- Try the API
+ Try the API
-
+
API
', () => {
expect(screen.getByRole('heading', { name: 'Datasets' }));
expect(screen.getByRole('textbox', { name: 'Search term' }));
- expect(screen.getByRole('combobox', { name: 'Sort by' }));
+ expect(screen.getByText('Sort by', {selector: 'span'}));
expect(screen.getByRole('button', { name: 'Search' }));
});
diff --git a/src/templates/FilteredResource/FilteredResourceBody.jsx b/src/templates/FilteredResource/FilteredResourceBody.jsx
index f6995722..432359b4 100644
--- a/src/templates/FilteredResource/FilteredResourceBody.jsx
+++ b/src/templates/FilteredResource/FilteredResourceBody.jsx
@@ -12,7 +12,6 @@ import {
Accordion,
AccordionItem,
} from '@cmsgov/design-system';
-import ResourceFilter from '../../components/ResourceFilter';
import ResourceHeader from '../../components/ResourceHeader';
import ResourcePreview from '../../components/ResourcePreview';
import ResourceFooter from '../../components/ResourceFooter';
@@ -132,7 +131,7 @@ const FilteredResourceBody = ({
)}
{dataset.identifier && (
-
Try the API
+
Try the API
{
- const md = useMediaQuery({ minWidth: 0, maxWidth: 768 });
+ const sm = useMediaQuery({ minWidth: 0, maxWidth: 544 });
const [operator, setOperator] = useState(condition.operator);
const [property, setProperty] = useState(condition.property);
const [value, setValue] = useState(condition.value);
@@ -58,24 +58,27 @@ const QueryRow = ({ id, condition, index, update, remove, propertyOptions, schem
}, [value]);
return (
-