feat: fable test app homepage

fable-test-app/package.json

@@ -11,8 +11,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@cdssnc/gcds-components": "^0.25.1",
-    "@cdssnc/gcds-components-react": "^0.25.1",
+    "@cdssnc/gcds-components": "^0.26.0",
+    "@cdssnc/gcds-components-react": "^0.26.0",
     "@cdssnc/gcds-utility": "^1.4.0",
     "axios": "^1.7.5",
     "react": "^18.3.1",

fable-test-app/src/App.css

@@ -30,3 +30,21 @@ gcds-fieldset:has( > gcds-checkbox) {
     --gcds-fieldset-font-mobile: var(--gcds-label-font-mobile);
   }
 }
+
+/* Homepage */
+
+.img-federal {
+  background: url('/backgrounds/federal.png') top center no-repeat;
+  background-size: cover;
+}
+.img-nonfederal {
+  background: url('/backgrounds/non-federal.png') top center no-repeat;
+  background-size: cover;
+}
+
+.next-holiday-homepage {
+  color: var(--gcds-color-blue-800);
+}
+.next-holiday-homepage div {
+  max-width: 62ch;
+}

fable-test-app/src/components/NextHoliday.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
-import { Text } from '../components';
+import { Text, Heading } from '../components';
+
+import { Provinces } from '../utils/constants';
 
 interface NextHolidayProps {
-  display?: 'banner' | 'table';
+  display?: 'banner' | 'table' | 'homepage';
   isCurrentHoliday? : boolean;
   nextHoliday: {
     date: string;
     nameEn: string;
   } | null;
+  federal?: boolean;
+  observedIn?: Provinces[];
 }
 
 const NextHoliday: React.FC<NextHolidayProps> = ({
   display = 'banner',
   isCurrentHoliday = false,
-  nextHoliday
+  nextHoliday,
+  federal,
+  observedIn
 }) => {
   // Calculate days until the next holiday
   const calcNextHoliday = (dateString: string) => {
@@ -23,6 +29,27 @@ const NextHoliday: React.FC<NextHolidayProps> = ({
     return Math.floor((holidayDate.getTime() - today.getTime()) / (1000 * 3600 * 24));
   };
 
+  // Get long version of date
+  const nextHolidayDate = (dateString: string) => {
+    const holidayDate = new Date(dateString);
+
+    return `${holidayDate.toLocaleString('default', { month: 'long' })} ${holidayDate.getDate()}`;
+  };
+
+  // Create formatted list of <abbr> elements for provinces
+  const formatObservedIn = () => {
+    if (observedIn) {
+      if (observedIn.length === 1) {
+        return <abbr title={observedIn[0].nameEn}>{observedIn[0].id}</abbr>;
+      } else {
+        return observedIn.map((value, i: number) => <span key={i}>
+          {i === observedIn.length - 1 && " and "}
+          <abbr title={value.nameEn}>{value.id}</abbr>{i != observedIn.length - 1 ? ", " : "."}
+        </span>);
+      }
+    }
+  };
+
   const daysToNextHoliday = nextHoliday ? calcNextHoliday(nextHoliday.date) : null;
 
   if (!nextHoliday) {
@@ -46,6 +73,43 @@ const NextHoliday: React.FC<NextHolidayProps> = ({
         src="/icons/icon-calendar.svg"
         alt="Calendar icon with a clock in the bottom right corner."
       />
+  ) : display ==='homepage' ? (
+    <section className={`pt-700 pb-700 mb-300 next-holiday-homepage ${federal ? `img-federal` : 'img-nonfederal'}`}>
+      <div className="bg-light md:px-450 px-250 d-block pt-100 pb-500">
+        <Heading tag="h2">
+          {federal ?
+            <span className="font-secondary">Next federal statutory holiday</span>
+          :
+            <span className="font-secondary">Next non-federal statutory holiday</span>
+          }
+        </Heading>
+        <strong className="d-block mb-100 font-h4">
+          {nextHoliday.nameEn}
+        </strong>
+        <div className="font-h5 font-medium">
+          <time>
+            {nextHolidayDate(nextHoliday.date)}
+          </time>
+          {!federal ? 
+            <p className="d-inline font-h5 font-medium">
+              &nbsp;- Observed in {formatObservedIn()}
+            </p>
+          :
+            null
+          }
+        </div>
+      </div>
+      <div className="d-flex bg-primary md:align-items-center align-items-center text-light md:px-450 px-250 py-200">
+        <Text textRole="light" marginBottom="0">
+          <strong>That's in {daysToNextHoliday} days!</strong>
+        </Text>
+        <img
+          className="d-inline-block ms-400"
+          src="/icons/icon-calendar.svg"
+          alt="Calendar icon with a clock in the bottom right corner."
+        />
+      </div>
+    </section>
   ) : null;
 };
 

fable-test-app/src/components/index.tsx

@@ -7,7 +7,6 @@ export { default as Footer } from './Footer';
 export { default as Grid } from './Grid';
 export { default as Header } from './Header';
 export { default as Heading } from './Heading';
-export { default as Details } from './Details';
 export { default as Button } from './Button';
 export { default as Input } from './Input';
 export { default as DateInput } from './DateInput';

fable-test-app/src/pages/About.tsx

@@ -15,6 +15,7 @@ const About: React.FC = () => {
       <Heading tag="h2">Learn more about the GC Design System</Heading>
 
       <Grid
+        columnsDesktop="1fr 1fr"
         columnsTablet="1fr 1fr"
       >
         <Card

fable-test-app/src/pages/Home.tsx

@@ -1,16 +1,74 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
 
 // Components (internal)
-import { DateModified, Heading, Text } from '../components';
+import { DateModified, Heading, NextHoliday, Text, Button } from '../components';
+import { holidayObject } from '../utils/constants';
 
 const Home: React.FC = () => {
+  const currentDate = new Date().getTime();
+  const [nextFederal, setNextFederal] = useState<holidayObject>();
+  const [nextNationwide, setNextNationwide] = useState<holidayObject>();
+
+  useEffect(() => {
+    axios.get('https://canada-holidays.ca/api/v1/holidays')
+    .then(({ data }) => {
+
+      // Assign next federal holiday
+      let fedAssigned = false;
+      data.holidays.map((holiday: holidayObject) => {
+        if (holiday.federal === 1) {
+          const holidayDate = new Date (holiday.date).getTime();
+          if (holidayDate > currentDate && !fedAssigned) {
+            fedAssigned = true;
+            setNextFederal(holiday);
+          }
+        }
+      });
+
+      // Assign next nationwide holiday
+      let nationwideAssigned = false;
+      data.holidays.map((holiday: holidayObject) => {
+        const holidayDate = new Date (holiday.date).getTime();
+        if (holidayDate > currentDate && !nationwideAssigned) {
+          nationwideAssigned = true;
+          setNextNationwide(holiday);
+        }
+      });
+    })
+    .catch(error => {
+      console.error("There was an error fetching the holidays!", error);
+    });
+  }, []);
+
   return (
     <section>
       <Heading tag="h1">Canada holidays</Heading>
       <Text>
         This app shows all Canadian holidays and uses GC Design System.
       </Text>
 
+      <Button
+        buttonRole="primary"
+        type="link"
+        href="/view-holidays/nationwide"
+        className="mb-500"
+      >
+        View all holidays
+      </Button>
+
+      <NextHoliday
+        display='homepage'
+        nextHoliday={{ date: nextFederal?.date as string, nameEn: nextFederal?.nameEn as string }}
+        federal
+      />
+
+      <NextHoliday
+        display="homepage"
+        nextHoliday={{ date: nextNationwide?.date as string, nameEn: nextNationwide?.nameEn as string }}
+        observedIn={nextNationwide?.provinces}
+      />
+
       <DateModified>2024-08-28</DateModified>
     </section>
   )

fable-test-app/src/utils/constants.tsx

@@ -15,3 +15,17 @@ export const provinces: any = {
 };
 
 export const API_BASE_URL = 'https://canada-holidays.ca/api/v1/';
+
+export type Provinces = {
+  id: string;
+  nameEn: string;
+};
+
+export type holidayObject = {
+  id: number;
+  date: string;
+  nameEn: string;
+  nameFr: string;
+  provinces: Provinces[];
+  federal: number;
+};