Merge branch 'main' into chr-historical-frontend

frontend/playwright-tests/internal_routes.ci.spec.ts

@@ -46,11 +46,21 @@ test('About Us Page Loads', async ({ page }) => {
   expect(accessibilityScanResults.violations).toEqual([])
 })
 
-test('Terms of Use Page Loads', async ({ page }) => {
+test('Terms of Use Page Loads and Renders Correctly', async ({ page }) => {
   await page.goto('/termsofuse', { waitUntil: 'commit' })
-  const mainSection = page.locator('main#main')
-  const mainHeading = mainSection.locator('h2#main')
+  const mainSection = page.locator('section#main-content')
+  await expect(mainSection).toBeVisible()
+  const mainHeading = mainSection.locator('h1#main')
   await expect(mainHeading).toHaveText('Terms of Use')
+  const termsList = mainSection.locator('ul')
+  await expect(termsList).toBeVisible()
+  const firstTerm = termsList.locator('li#tou-0')
+  const firstTermHeading = firstTerm.locator('h2')
+  await expect(firstTermHeading).toHaveText('Privacy Policy')
+  const firstTermParagraph = firstTerm.locator('p')
+  await expect(firstTermParagraph).toContainText(
+    'The Health Equity Tracker (HET)',
+  )
   const accessibilityScanResults = await new AxeBuilder({ page }).analyze()
   expect(accessibilityScanResults.violations).toEqual([])
 })

frontend/src/pages/Landing/LandingPage.tsx

@@ -116,8 +116,8 @@ function LandingPage() {
           alt='various charts from the health equity tracker'
           className='absolute top-0 right-0 bottom-0 z-0 float-right mx-24 max-w-4xl opacity-35 xs:opacity-15 sm:opacity-15 md:opacity-15'
         ></img>
-        <div className='relative m-0 p-0 text-left sm:w-full md:w-full lg:w-1/2'>
-          <h1 className='mt-4 mb-0 text-left font-medium font-serif text-bigHeader text-black xs:text-header leading-lhSomeSpace'>
+        <div className='relative m-0 p-0 text-left sm:w-full md:w-full lg:w-3/4'>
+          <h1 className='mt-4 mb-0 text-left font-medium font-serif text-black xs:text-header leading-lhSomeSpace sm:text-bigHeader lg:text-heroHeader'>
             Where will the <br />
             <span className='text-altGreen'>Health Equity Tracker</span>
             <br /> take you?

frontend/src/pages/Methodology/methodologySections/AgeAdjustmentLink.tsx

@@ -280,7 +280,7 @@ const AgeAdjustmentLink = () => {
 
             <h3
               id='age-adjustment-examples'
-              className='text-left font-light font-serif text-altBlack text-smallestHeader'
+              className='text-left font-medium font-sansTitle text-altGreen text-header leading-lhModalHeading '
             >
               Age-Adjustment Example: HIV Deaths
             </h3>

frontend/src/pages/News/AllPosts.tsx

@@ -1,24 +1,15 @@
 import { useEffect, useState } from 'react'
 import { Helmet } from 'react-helmet-async'
 import { useQuery } from 'react-query'
-import { Link } from 'react-router-dom'
 import HetPostsLoading from '../../styles/HetComponents/HetPostsLoading'
 import {
   ARTICLES_KEY,
   REACT_QUERY_OPTIONS,
   fetchNewsData,
 } from '../../utils/blogUtils'
-import {
-  NEWS_PAGE_LINK,
-  SHARE_YOUR_STORY_TAB_LINK,
-} from '../../utils/internalRoutes'
-import { LinkWithStickyParams, useUrlSearchParams } from '../../utils/urlutils'
-import SignupSection from '../ui/SignupSection'
-import ArticleFilters from './ArticleFilters'
+import { useUrlSearchParams } from '../../utils/urlutils'
 import type { Article } from './ArticleTypes'
 import NewsAndStoriesPreviewCardOutlined from './NewsAndStoriesPreviewCardOutlined'
-import NewsPreviewCard from './NewsPreviewCard'
-import PinnedArticles from './PinnedArticles'
 
 export const ARTICLES_TERM = 'Articles'
 
@@ -123,108 +114,60 @@ function AllPosts() {
 
     setCategories(Array.from(allCategoriesSet) as string[])
   }, [data?.data])
-
-  // featured "sticky" articles
-  const pinnedArticles = data?.data?.filter((post: Article) => post?.sticky)
-
   return (
     <div className='flex w-full flex-wrap justify-center'>
       <Helmet>
         <title>News - Health Equity Tracker</title>
       </Helmet>
-      <div className='flex flex-wrap border-0 border-altGrey border-b border-solid px-5 py-12 '>
-        <div className='hidden w-full flex-col flex-wrap md:block md:w-1/4 '>
-          <ArticleFilters filterType={'category'} filterOptions={categories} />
-          <ArticleFilters filterType={'author'} filterOptions={authors} />
-        </div>
 
-        <div className='w-full md:w-3/4'>
-          <div className='flex flex-wrap justify-center'>
-            <div className='m-10 flex w-full justify-start'>
-              {/* show featured card with "sticky" articles marked PIN TO TOP if any */}
-              {selectedAuthor?.length === 0 &&
-                selectedCategory?.length === 0 && (
-                  <PinnedArticles articles={pinnedArticles} />
-                )}
-
-              {/* if there is a filter in place, show breadcrumbs type menu */}
-              {(selectedAuthor || selectedCategory) && (
-                <>
-                  <Link
-                    to={NEWS_PAGE_LINK}
-                    className='inline px-4 py-1.5 font-medium font-sansText text-small normal-case tracking-wide no-underline '
-                  >
-                    {ARTICLES_TERM}
-                  </Link>
-                  <span className='inline px-4 py-1.5 font-medium font-sansText text-small normal-case tracking-wide no-underline '>
-                    ›
-                  </span>
-                </>
-              )}
-              <span className='inline px-4 py-1.5 font-medium font-sansText text-small normal-case tracking-wide no-underline '>
-                {selectedAuthor?.length > 0 && `Author: ${selectedAuthor}`}
-                {selectedCategory?.length > 0 &&
-                  `Category: ${selectedCategory}`}
-              </span>
-            </div>
-
-            {/* all posts matching client applied filters */}
-            <div className='flex flex-wrap items-start justify-between'>
-              {filteredArticles?.slice(5, -1).map((post: any) => {
-                return (
-                  <div
-                    className='w-full sm:w-1/2 lg:w-1/3 xl:w-1/4'
-                    key={post.id}
-                  >
-                    <div className='my-4'>
-                      <NewsAndStoriesPreviewCardOutlined article={post} />
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-
-            <div className='flex flex-wrap items-start justify-between'>
-              {isLoading && (
-                <>
-                  <HetPostsLoading
-                    doPulse={true}
-                    className='w-full sm:w-1/2 lg:w-1/3 xl:w-1/4'
-                  />
-                  <div className='m-10'>
-                    <i>Updating articles...</i>
-                  </div>
-                </>
-              )}
-              {error && !isLoading && (
-                <div className='w-full sm:w-1/2 lg:w-1/3 xl:w-1/4'>
-                  <div className='m-10'>
-                    <i>Problem updating articles.</i>
+      <div className='w-full md:w-3/4'>
+        <div className='flex flex-wrap justify-center'>
+          <div className='m-10 flex w-full justify-start'>
+            <span className='inline px-4 py-1.5 font-medium font-sansText text-small normal-case tracking-wide no-underline '>
+              {selectedAuthor?.length > 0 && `Author: ${selectedAuthor}`}
+              {selectedCategory?.length > 0 && `Category: ${selectedCategory}`}
+            </span>
+          </div>
+
+          {/* all posts matching client applied filters */}
+          <div className='flex flex-wrap items-start justify-between'>
+            {filteredArticles?.slice(5, -1).map((post: any) => {
+              return (
+                <div
+                  className='w-full sm:w-1/2 lg:w-1/3 xl:w-1/4'
+                  key={post.id}
+                >
+                  <div className='my-4'>
+                    <NewsAndStoriesPreviewCardOutlined article={post} />
                   </div>
-                  <HetPostsLoading doPulse={false} />
                 </div>
-              )}
-            </div>
+              )
+            })}
           </div>
-        </div>
 
-        <div className='flex w-full flex-wrap content-center justify-around md:hidden '>
-          <div className='w-full'>
-            <div className='mt-16 border-0 border-altGrey border-t border-solid p-4'></div>
-          </div>
-          <div className='flex w-full justify-center sm:w-1/2'>
-            <ArticleFilters
-              filterType={'category'}
-              filterOptions={categories}
-            />
-          </div>
-          <div className='flex w-full justify-center sm:w-1/2'>
-            <ArticleFilters filterType={'author'} filterOptions={authors} />
+          <div className='flex flex-wrap items-start justify-between'>
+            {isLoading && (
+              <>
+                <HetPostsLoading
+                  doPulse={true}
+                  className='w-full sm:w-1/2 lg:w-1/3 xl:w-1/4'
+                />
+                <div className='m-10'>
+                  <i>Updating articles...</i>
+                </div>
+              </>
+            )}
+            {error && !isLoading && (
+              <div className='w-full sm:w-1/2 lg:w-1/3 xl:w-1/4'>
+                <div className='m-10'>
+                  <i>Problem updating articles.</i>
+                </div>
+                <HetPostsLoading doPulse={false} />
+              </div>
+            )}
           </div>
         </div>
       </div>
-
-      <SignupSection />
     </div>
   )
 }