Skip to content

Commit

Permalink
Cleaning up and renaming of various FAQ sections (#3729)
Browse files Browse the repository at this point in the history
# Description and Motivation
This PR provides consistent naming of the FAQ sections and organizes the
components in the appropriate directories. The Community Safety FAQ
styling has been updated for the demographic details question, and the
content for the instructional videos question has been updated to route
to our Data Visualization Guides video series. Also, a secondary button
was created for the app.

## Has this been tested? How?
tests passing 

## Screenshots (if appropriate)
> ### Old
> ![Desktop -
Old](https://github.com/user-attachments/assets/8409f43c-44fa-458e-9ba5-4642e3f5957b)

> ### New
> ![Desktop -
New](https://github.com/user-attachments/assets/888f8efb-a59a-468c-8d1c-6786081e6270)


![old-new](https://github.com/user-attachments/assets/119af45c-7068-420e-b395-d2a5453afff3)

## Types of changes
- New content or feature
- Refactor / chore

## New frontend preview link is below in the Netlify comment 😎
  • Loading branch information
kccrtv authored Oct 23, 2024
1 parent 92b3573 commit ad42636
Show file tree
Hide file tree
Showing 23 changed files with 446 additions and 348 deletions.
5 changes: 4 additions & 1 deletion frontend/playwright-tests/internal_routes.ci.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,10 @@ test('Policy Hub Loads', async ({ page }) => {
await expect(page.getByLabel('Policy Context Introduction')).toContainText(
'Understanding the Crisis of Gun Violence in Atlanta',
)
const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
const accessibilityScanResults = await new AxeBuilder({ page })
.exclude('.text-tinyTag')
.exclude('.shadow-raised-tighter')
.analyze()
expect(accessibilityScanResults.violations).toEqual([])
})

Expand Down
5 changes: 3 additions & 2 deletions frontend/playwright-tests/wihe.ci.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,10 @@ test('Default Guides tab is loaded on /whatishealthequity', async ({
})

test('WIHE Page Loads and Accessibility Scan', async ({ page }) => {
await page.goto('/whatishealthequity', { waitUntil: 'commit' })
await page.goto('/whatishealthequity', { waitUntil: 'networkidle' })
await page.waitForSelector('.text-tinyTag', { state: 'attached' })

const accessibilityScanResults = await new AxeBuilder({ page })
.disableRules(['landmark-one-main', 'page-has-heading-one'])
.exclude('.text-tinyTag')
.exclude('.shadow-raised-tighter')
.analyze()
Expand Down
Binary file removed frontend/public/img/graphics/NCRN.png
Binary file not shown.
4 changes: 2 additions & 2 deletions frontend/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ const ShareYourStory = React.lazy(
const SinglePost = React.lazy(
async () => await import('./pages/News/SinglePost'),
)
const FaqTab = React.lazy(async () => await import('./pages/FAQs/FaqTab'))
const FaqsPage = React.lazy(async () => await import('./pages/FAQs/FaqsPage'))

const ExploreDataPage = React.lazy(
async () => await import('./pages/ExploreData/ExploreDataPage'),
Expand Down Expand Up @@ -153,7 +153,7 @@ export default function App() {
</ErrorBoundaryDropParams>
}
/>
<Route path={FULL_FAQS_LINK} element={<FaqTab />} />
<Route path={FULL_FAQS_LINK} element={<FaqsPage />} />

{/* WHAT IS HEALTH EQUITY ROUTES */}
<Route
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { ABOUT_US_PAGE_LINK } from '../../utils/internalRoutes'
import { Helmet } from 'react-helmet-async'
import MoreHorizIcon from '@mui/icons-material/MoreHoriz'
import { selectFAQs } from './FaqData'
import { faqMappings } from './FaqsPageData'
import { CITATION_APA } from '../../cards/ui/SourcesHelpers'

function FaqTab() {
function FaqsPage() {
return (
<>
<Helmet>
Expand All @@ -26,26 +26,26 @@ function FaqTab() {
<div className='flex flex-wrap'>
<div className='w-full pb-5 text-left'>
<h3 className='font-sansTitle text-title font-medium'>
{selectFAQs[4].question}
{faqMappings[4].question}
</h3>
<div className='font-sansText font-normal'>
{selectFAQs[4].answer}
{faqMappings[4].answer}
</div>
</div>
<div className='w-full pb-5 text-left'>
<h3 className='font-sansTitle text-title font-medium'>
{selectFAQs[2].question}
{faqMappings[2].question}
</h3>
<div className='font-sansText font-normal'>
{selectFAQs[2].answer}
{faqMappings[2].answer}
</div>
</div>
<div className='w-full pb-5 text-left'>
<h3 className='font-sansTitle text-title font-medium'>
{selectFAQs[3].question}
{faqMappings[3].question}
</h3>
<div className='font-sansText font-normal'>
{selectFAQs[3].answer}
{faqMappings[3].answer}
</div>
<a href='/datacatalog'>See Data Sources</a>
</div>
Expand Down Expand Up @@ -144,18 +144,18 @@ function FaqTab() {
</div>
<div className='w-full pb-5 text-left'>
<h3 className='font-sansTitle text-title font-medium'>
{selectFAQs[0].question}
{faqMappings[0].question}
</h3>
<div className='font-sansText font-normal'>
{selectFAQs[0].answer}
{faqMappings[0].answer}
</div>
</div>
<div className='w-full pb-5 text-left'>
<h3 className='font-sansTitle text-title font-medium'>
{selectFAQs[1].question}
{faqMappings[1].question}
</h3>
<div className='font-sansText font-normal'>
{selectFAQs[1].answer}
{faqMappings[1].answer}
</div>
</div>
<div className='w-full pb-5 text-left'>
Expand Down Expand Up @@ -288,4 +288,4 @@ function FaqTab() {
)
}

export default FaqTab
export default FaqsPage
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ import {
DATA_CATALOG_PAGE_LINK,
} from '../../utils/internalRoutes'

export interface FAQ {
export interface FaqMapping {
question: string
answer: JSX.Element
}

export const selectFAQs: FAQ[] = [
export const faqMappings: FaqMapping[] = [
{
question: 'What is health equity? Why is it important?',
answer: <AnswerWhatIsHealthEquity />,
Expand Down
73 changes: 41 additions & 32 deletions frontend/src/pages/Policy/policyComponents/DatasetList.tsx
Original file line number Diff line number Diff line change
@@ -1,43 +1,52 @@
import type React from 'react'
import React from 'react'
import { CheckRounded, BlockRounded } from '@mui/icons-material'
import HetTerm from '../../../styles/HetComponents/HetTerm'

interface DatasetItem {
label: string
included: boolean
}

interface Dataset {
datasetName: string
datasetNameDetails?: string
items: DatasetItem[]
}

interface DatasetListProps {
datasets: Array<{
datasetName: string
items: Array<{
label: string
included: boolean
}>
}>
datasets: Dataset[]
}

const DatasetList: React.FC<DatasetListProps> = ({
datasets,
}) => {
export default function DatasetList({ datasets }: DatasetListProps) {
return (
<div className='grid grid-cols-2 md:grid-cols-3'>
{datasets.map((dataset) => (
<div key={dataset.datasetName} className='m-1'>
<p className='text-smallest mb-0'>
<HetTerm>{dataset.datasetName}</HetTerm>:
<div className='grid grid-cols-2 md:grid-cols-3'>
{datasets.map((dataset) => (
<div key={dataset.datasetName} className='m-1'>
<div className='flex flex-col justify-left my-2'>
<p className='text-text my-0'>
<HetTerm>{dataset.datasetName}</HetTerm>
</p>
<ul className='ml-2 list-none p-0 text-smallest'>
{dataset.items.map((item) => (
<li key={item.label} className='flex flex-row align-center'>
{item.included ? (
<CheckRounded className='text-text text-altGreen' />
) : (
<BlockRounded className='text-text text-redOrange' />
)}
<p className='my-0 ml-2'>{item.label}</p>
</li>
))}
</ul>
{dataset.datasetNameDetails && (
<p className='text-smallest my-0'>
<HetTerm>{dataset.datasetNameDetails}</HetTerm>
</p>
)}
</div>
))}
</div>

<ul className='ml-2 list-none p-0 text-smallest'>
{dataset.items.map((item) => (
<li key={item.label} className='flex flex-row align-center'>
{item.included ? (
<CheckRounded className='text-text text-altGreen' />
) : (
<BlockRounded className='text-text text-redOrange' />
)}
<p className='my-0 ml-2'>{item.label}</p>
</li>
))}
</ul>
</div>
))}
</div>
)
}

export default DatasetList
8 changes: 4 additions & 4 deletions frontend/src/pages/Policy/policyComponents/PolicyPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export default function PolicyPage() {
</div>

<section className='flex flex-col justify-end mx-8 md:mx-12 my-0'>
{activeRoute?.visible && !isMobileView && (
{activeRoute?.visible && isMobileView && (
<h1 className='font-sansTitle text-bigHeader font-bold my-0 leading-lhNormal'>
{activeRoute?.label}
</h1>
Expand All @@ -73,7 +73,7 @@ export default function PolicyPage() {
</section>
</div>
{/* ON THIS PAGE SUB-MENU - DESKTOP */}
<div className='hidden min-w-fit md:block'>
<div className='hidden min-w-fit md:block max-w-onThisPageMenuDesktop w-onThisPageMenuDesktop'>
{policyRouteConfigs.map((routeConfig) => {
const match = useMatch({
path: routeConfig.path,
Expand All @@ -83,10 +83,10 @@ export default function PolicyPage() {
routeConfig.subLinks && routeConfig.subLinks.length > 0
return match && hasSublinks ? (
<div
className='min-w-40 w-48 max-w-40 sticky top-24 z-almostTop hidden h-min max-w-menu smMd:flex flex-col'
className='min-w-40 max-w-menu w-full sticky top-24 z-almostTop hidden h-min smMd:flex flex-col'
key={routeConfig.path}
>
<HetOverline text='On this Page' />
<HetOverline className='mt-0' text='On this Page' />
<h4
id='on-this-page-policy-header'
className='mt-2 mb-4 font-sansTitle text-title leading-lhNormal mr-16 w-fit'
Expand Down
Loading

0 comments on commit ad42636

Please sign in to comment.