VAOS dynamically update heading 2 font-size based on screen width (#3…

…3937) * VAOS dynamically update heading 2 font-size based on screen width * Update new appointment flow headers
department-of-veterans-affairs · Jan 8, 2025 · 9ed926c · 9ed926c
1 parent 77b6961
commit 9ed926c
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 16 deletions.
diff --git a/src/applications/vaos/components/layout/DetailPageLayout.jsx b/src/applications/vaos/components/layout/DetailPageLayout.jsx
@@ -214,7 +214,7 @@ export default function DetailPageLayout({
     <>
       <BackLink appointment={appointment} />
       <AppointmentCard appointment={appointment}>
-        <h1 className="vads-u-font-size--h2">{heading}</h1>
+        <h1 className="vaos__dynamic-font-size--h2">{heading}</h1>
         {featureTravelPayViewClaimDetails && (
           <ErrorAlert appointment={appointment} />
         )}

diff --git a/src/applications/vaos/new-appointment/components/ClinicChoicePage/index.jsx b/src/applications/vaos/new-appointment/components/ClinicChoicePage/index.jsx
@@ -66,7 +66,7 @@ export default function ClinicChoicePage() {
     <div className="vaos-form__radio-field">
       {schema.properties.clinicId.enum.length === 2 && (
         <>
-          <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+          <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
           {usingPastClinics && (
             <>Your last {typeOfCareLabel} appointment was at </>
           )}

diff --git a/src/applications/vaos/new-appointment/components/CommunityCareLanguagePage.jsx b/src/applications/vaos/new-appointment/components/CommunityCareLanguagePage.jsx
@@ -56,7 +56,7 @@ function CommunityCareLanguagePage({
 
   return (
     <div>
-      <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
       {!!schema && (
         <SchemaForm
           name="ccLanguage"

diff --git a/...applications/vaos/new-appointment/components/CommunityCareProviderSelectionPage/index.jsx b/...applications/vaos/new-appointment/components/CommunityCareProviderSelectionPage/index.jsx
@@ -57,7 +57,7 @@ export default function CommunityCareProviderSelectionPage() {
 
   return (
     <div>
-      <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
       {!!schema && (
         <SchemaForm
           name="ccPreferences"

diff --git a/...ons/vaos/new-appointment/components/ConfirmationPage/ConfirmationDirectScheduleInfoV2.jsx b/...ons/vaos/new-appointment/components/ConfirmationPage/ConfirmationDirectScheduleInfoV2.jsx
@@ -46,7 +46,7 @@ export default function ConfirmationDirectScheduleInfoV2({
   const typeOfCareName = getTypeOfCareById(data.typeOfCareId)?.name;
   return (
     <>
-      <h1 className="vads-u-font-size--h2">
+      <h1 className="vaos__dynamic-font-size--h2">
         {momentDate.format('dddd, MMMM D, YYYY [at] h:mm a')}
         {` ${getTimezoneAbbrByFacilityId(data.vaFacility)}`}
       </h1>

diff --git a/src/applications/vaos/new-appointment/components/ContactInfoPage.jsx b/src/applications/vaos/new-appointment/components/ContactInfoPage.jsx
@@ -198,7 +198,7 @@ export default function ContactInfoPage() {
 
   return (
     <div>
-      <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
       {!!schema && (
         <SchemaForm
           name="Contact info"

diff --git a/src/applications/vaos/new-appointment/components/DateTimeRequestPage/CommunityCare.jsx b/src/applications/vaos/new-appointment/components/DateTimeRequestPage/CommunityCare.jsx
@@ -77,7 +77,7 @@ export default function CCRequest() {
 
   return (
     <div className="vaos-form__detailed-radio">
-      <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
       <p>
         You can select up to 3 preferred timeframes. We'll schedule your
         appointment or call to schedule with you.

diff --git a/src/applications/vaos/new-appointment/components/DateTimeRequestPage/VA.jsx b/src/applications/vaos/new-appointment/components/DateTimeRequestPage/VA.jsx
@@ -84,7 +84,7 @@ export default function VARequest({ changeCrumb }) {
 
   return (
     <div className="vaos-form__detailed-radio">
-      <h1 className="vads-u-font-size--h2">
+      <h1 className="vaos__dynamic-font-size--h2">
         {pageTitle}
         <span className="schemaform-required-span vaos-calendar__page_header vads-u-font-family--sans vads-u-font-weight--normal">
           (*Required)

diff --git a/src/applications/vaos/new-appointment/components/DateTimeRequestPage/index.jsx b/src/applications/vaos/new-appointment/components/DateTimeRequestPage/index.jsx
@@ -84,7 +84,7 @@ export default function DateTimeRequestPage({ changeCrumb }) {
 
   return (
     <div className="vaos-form__detailed-radio">
-      <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
       <p>
         Choose your preferred date and time for this appointment. You can
         request up to 3 dates. A scheduling coordinator will call you to

diff --git a/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.jsx b/src/applications/vaos/new-appointment/components/DateTimeSelectPage/index.jsx
@@ -178,7 +178,7 @@ export default function DateTimeSelectPage() {
 
   return (
     <div>
-      <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
       {!loadingSlots && (
         <WaitTimeAlert
           eligibleForRequests={eligibleForRequests}

diff --git a/src/applications/vaos/new-appointment/components/PreferredDatePage.jsx b/src/applications/vaos/new-appointment/components/PreferredDatePage.jsx
@@ -68,7 +68,7 @@ export default function PreferredDatePage() {
 
   return (
     <div>
-      <h1 className="vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
       {!!schema && (
         <SchemaForm
           name="Type of appointment"

diff --git a/src/applications/vaos/new-appointment/components/ReasonForAppointmentPage.jsx b/src/applications/vaos/new-appointment/components/ReasonForAppointmentPage.jsx
@@ -144,7 +144,9 @@ export default function ReasonForAppointmentPage({ changeCrumb }) {
         'vads-u-margin-top--neg3': !isCommunityCare,
       })}
     >
-      {isCommunityCare && <h1 className="vads-u-font-size--h2">{pageTitle}</h1>}
+      {isCommunityCare && (
+        <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
+      )}
       {!!schema && (
         <SchemaForm
           name="Reason for appointment"

diff --git a/...onents/ReviewPage/ReviewRequestInfo/ReviewDirectScheduleInfo/ReviewDirectScheduleInfo.jsx b/...onents/ReviewPage/ReviewRequestInfo/ReviewDirectScheduleInfo/ReviewDirectScheduleInfo.jsx
@@ -14,7 +14,9 @@ export default function ReviewDirectScheduleInfo({
 }) {
   return (
     <div>
-      <h1 className="vaos-review__header vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos-review__header vaos__dynamic-font-size--h2">
+        {pageTitle}
+      </h1>
       <TypeOfAppointmentSection data={data} />
       <hr aria-hidden="true" className="vads-u-margin-y--2" />
       <FacilitySection facility={facility} clinic={clinic} />

diff --git a/src/applications/vaos/new-appointment/components/ReviewPage/ReviewRequestInfo/index.jsx b/src/applications/vaos/new-appointment/components/ReviewPage/ReviewRequestInfo/index.jsx
@@ -16,7 +16,9 @@ export default function ReviewRequestInfo({
 
   return (
     <div>
-      <h1 className="vaos-review__header vads-u-font-size--h2">{pageTitle}</h1>
+      <h1 className="vaos-review__header vaos__dynamic-font-size--h2">
+        {pageTitle}
+      </h1>
       <TypeOfAppointmentSection data={data} />
       <hr aria-hidden="true" className="vads-u-margin-y--2" />
       {isCommunityCare && (

diff --git a/src/applications/vaos/new-appointment/components/TypeOfCarePage/index.jsx b/src/applications/vaos/new-appointment/components/TypeOfCarePage/index.jsx
@@ -105,7 +105,7 @@ export default function TypeOfCarePage() {
 
   return (
     <div className="vaos-form__radio-field">
-      <h1 className="vads-u-font-size--h2">
+      <h1 className="vaos__dynamic-font-size--h2">
         {pageTitle}
         <span className="schemaform-required-span vads-u-font-family--sans vads-u-font-weight--normal">
           (*Required)

diff --git a/src/applications/vaos/new-appointment/components/VAFacilityPage/VAFacilityPageV2.jsx b/src/applications/vaos/new-appointment/components/VAFacilityPage/VAFacilityPageV2.jsx
@@ -125,7 +125,9 @@ export default function VAFacilityPageV2() {
     [requestingLocation, requestLocationStatus, sortFocusEl],
   );
 
-  const pageHeader = <h1 className="vads-u-font-size--h2">{pageTitle}</h1>;
+  const pageHeader = (
+    <h1 className="vaos__dynamic-font-size--h2">{pageTitle}</h1>
+  );
 
   if (hasDataFetchingError) {
     return (

diff --git a/src/applications/vaos/sass/vaos.scss b/src/applications/vaos/sass/vaos.scss
@@ -95,4 +95,14 @@ va-radio::part(legend) {
 .schemaform-required-span,
 body {
   font-size: 1.06rem; // same as 16.96px
+}
+
+.vaos__dynamic-font-size--h2 {
+  font-size: var(--font-size-h2);
+}
+
+@media (max-width: 481px) {
+  .vaos__dynamic-font-size--h2 {
+    font-size: 24px;
+  }
 }