Fix unserializable json error in Scenario 2 (#374) and Strong tags sh…

…ould render Source Sans Pro bold (#379) Contains work from #374: - Change the `AppointmentContent.date` type from a `Date` object to a `string` representation of the date As well as work from #379: - Use Google fonts for Source Sans Pro: bold, italic, bolditalic - Remove local bold ttf file
cagov · Aug 19, 2021 · 9a9274d · 9a9274d
2 parents 012d125 + 00ae365
commit 9a9274d
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 22 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,2 +1,6 @@
-<link href="https://fonts.googleapis.com/css?family=Source Sans Pro" rel="stylesheet" />
-<link href="/claimstatus/source-sans-pro-bold.ttf" rel="stylesheet" type="text/css" />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+  rel="stylesheet"
+/>
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -68,8 +68,12 @@ export default function Home({
       <Head>
         <title>{t('title')}</title>
         <link rel="icon" href="/claimstatus/favicon.ico" />
-        <link href="https://fonts.googleapis.com/css?family=Source Sans Pro" rel="stylesheet" />
-        <link href="/claimstatus/source-sans-pro-bold.ttf" rel="stylesheet" type="text/css" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+          rel="stylesheet"
+        />
       </Head>
       <Header userArrivedFromUioMobile={userArrivedFromUioMobile} />
       {mainComponent}

diff --git a/public/source-sans-pro-bold.ttf b/public/source-sans-pro-bold.ttf
diff --git a/stories/Appointment.stories.tsx b/stories/Appointment.stories.tsx
@@ -47,7 +47,6 @@ export default {
 } as Meta
 
 interface StoryAppointmentProps extends AppointmentProps {
-  date: Date
   start?: number
   end?: number
 }
@@ -64,5 +63,5 @@ const Template: Story<StoryAppointmentProps> = ({ ...args }) => {
 
 export const Appointment = Template.bind({})
 Appointment.args = {
-  date: new Date(),
+  date: new Date().toJSON(),
 }
diff --git a/stories/ClaimSummary.stories.tsx b/stories/ClaimSummary.stories.tsx
@@ -20,6 +20,6 @@ ClaimSummary.args = {
     },
   ],
   appointment: {
-    date: new Date(),
+    date: new Date().toJSON(),
   },
 }
diff --git a/styles/globals.scss b/styles/globals.scss
@@ -10,8 +10,9 @@ body {
   color: #333333;
   line-height: 22.4px;
 
-  b, strong {
-    font-family: 'Source Sans Pro Bold', arial;
+  b,
+  strong {
+    font-weight: 700;
   }
 
   h3 {
@@ -109,7 +110,7 @@ body {
     }
 
     .claim-details-box {
-      padding: 0 1.5rem 1.0rem 1.5rem;
+      padding: 0 1.5rem 1rem 1.5rem;
       border: 4px solid #f0f0f0;
     }
 
@@ -134,21 +135,21 @@ body {
     padding-left: 1rem;
     margin-top: 0.5rem;
     margin-left: 0.5rem;
-    list-style: none
+    list-style: none;
   }
 
   //this styles our bullets into fancy small dots with a consistent color
   //pulled from https://www.w3.org/Style/Examples/007/color-bullets.en.html
   li::before {
-    content: "•";
+    content: '•';
     color: black;
     display: inline-block;
     width: 1em;
-    margin-left: -1em
+    margin-left: -1em;
   }
 
   li {
-    margin-bottom:0.5rem;
+    margin-bottom: 0.5rem;
   }
 
   .sub-bullets {
@@ -182,7 +183,6 @@ body {
       .claim-section {
         margin-top: 2rem;
       }
-
     }
   }
 
@@ -191,7 +191,6 @@ body {
     position: relative;
     margin-top: 10px !important;
 
-
     -webkit-animation-duration: 1.3s;
     -webkit-animation-fill-mode: forwards;
     -webkit-animation-iteration-count: infinite;

diff --git a/tests/utils/getClaimStatus.test.ts b/tests/utils/getClaimStatus.test.ts
@@ -25,7 +25,7 @@ describe('An appointment is', () => {
 
   it('returned with a time slot if there is a time slot value', () => {
     const pendingDetermination = getPendingDeterminationWithScheduleDate(0)
-    const expectedDate = parseApiGatewayDate(formatFromApiGateway(0))
+    const expectedDate = parseApiGatewayDate(formatFromApiGateway(0)).toJSON()
 
     pendingDetermination.timeSlotDesc = '10-12'
     const expectedTimeSlot = {
@@ -40,7 +40,7 @@ describe('An appointment is', () => {
 
   it('returned with no time slot if there is no time slot value', () => {
     const pendingDetermination = getPendingDeterminationWithScheduleDate(0)
-    const expectedDate = parseApiGatewayDate(formatFromApiGateway(0))
+    const expectedDate = parseApiGatewayDate(formatFromApiGateway(0)).toJSON()
     const appointment = buildAppointment(ScenarioType.Scenario2, pendingDetermination)
     expect(appointment.date).toStrictEqual(expectedDate)
     expect(appointment.timeSlot).toBe(undefined)

diff --git a/types/common.ts b/types/common.ts
@@ -54,7 +54,7 @@ export interface TimeSlot {
 }
 
 export interface AppointmentContent {
-  date: Date
+  date: string
   timeSlot?: TimeSlot
 }
 

diff --git a/utils/formatDate.ts b/utils/formatDate.ts
@@ -126,9 +126,9 @@ export function convertStringToLocale(localeString: string): Locale {
 /**
  * Format appointment.
  */
-export function formatAppointmentDate(date: Date, localeString: string): string {
+export function formatAppointmentDate(dateString: string, localeString: string): string {
   const dateFormat = 'EEEE, LLLL d, yyyy'
-  const convertedDate = utcToZonedTime(date, pacificTimeZone)
+  const convertedDate = utcToZonedTime(dateString, pacificTimeZone)
   const formattedDate = format(convertedDate, dateFormat, {
     locale: convertStringToLocale(localeString),
     timeZone: pacificTimeZone,

diff --git a/utils/getClaimStatus.ts b/utils/getClaimStatus.ts
@@ -83,7 +83,7 @@ export function buildAppointment(
   if (scenarioType === ScenarioType.Scenario2 && pendingDetermination) {
     const parsedDate = parseApiGatewayDate(pendingDetermination.scheduleDate)
     const appointment: AppointmentContent = {
-      date: parsedDate,
+      date: parsedDate.toJSON(),
     }
 
     const timeSlot = parseTimeSlot(pendingDetermination.timeSlotDesc)