diff --git a/fable-test-app/package-lock.json b/fable-test-app/package-lock.json index 8a2450e..a23b877 100644 --- a/fable-test-app/package-lock.json +++ b/fable-test-app/package-lock.json @@ -8,8 +8,8 @@ "name": "fable-test-app", "version": "0.0.0", "dependencies": { - "@cdssnc/gcds-components": "^0.25.1", - "@cdssnc/gcds-components-react": "^0.25.1", + "@cdssnc/gcds-components": "^0.26.1", + "@cdssnc/gcds-components-react": "^0.26.1", "@cdssnc/gcds-utility": "^1.4.0", "axios": "^1.7.5", "react": "^18.3.1", @@ -1869,9 +1869,9 @@ } }, "node_modules/@cdssnc/gcds-components": { - "version": "0.25.1", - "resolved": "https://registry.npmjs.org/@cdssnc/gcds-components/-/gcds-components-0.25.1.tgz", - "integrity": "sha512-7/1N1t2/BQCXUozLpT+gQHO+XEpCChT6lBvqFyok9vV7un5uzGnBknGvAFq+Yd/8LOyKjxjai4OLq0dhWpx6Wg==", + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-components/-/gcds-components-0.26.1.tgz", + "integrity": "sha512-27FrCaQ5hLKqXlMByr9wPottHU6nZ3xhD518/MLxZe+Aw8TlNVGdEjkAO6ixfHUcv9aM4GWFSy7yp4QAgeoGNQ==", "dependencies": { "@stencil/core": "4.11.0", "@stencil/react-output-target": "^0.5.3", @@ -1882,11 +1882,11 @@ } }, "node_modules/@cdssnc/gcds-components-react": { - "version": "0.25.1", - "resolved": "https://registry.npmjs.org/@cdssnc/gcds-components-react/-/gcds-components-react-0.25.1.tgz", - "integrity": "sha512-IfgwuJ+5rWFB001Yti5+gIdSU69jha/rogpy0p1NNmZjTkFZYRwg5zEcCejTXlkkYKSNMM6p2FbF4D0/TcRBNw==", + "version": "0.26.1", + "resolved": "https://registry.npmjs.org/@cdssnc/gcds-components-react/-/gcds-components-react-0.26.1.tgz", + "integrity": "sha512-XBVuUtXdbcE02+V1Rr0BWPoizdp/w2AtuNL+O+TDzAAI5YSEFZ6jbv1NOAJCj7a1ZCQcwMuhgQrEQowleOhkfw==", "dependencies": { - "@cdssnc/gcds-components": "^0.25.1" + "@cdssnc/gcds-components": "^0.26.1" } }, "node_modules/@cdssnc/gcds-utility": { diff --git a/fable-test-app/package.json b/fable-test-app/package.json index 3a8d069..87a0d35 100644 --- a/fable-test-app/package.json +++ b/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.1", + "@cdssnc/gcds-components-react": "^0.26.1", "@cdssnc/gcds-utility": "^1.4.0", "axios": "^1.7.5", "react": "^18.3.1", diff --git a/fable-test-app/public/backgrounds/federal.png b/fable-test-app/public/backgrounds/federal.png new file mode 100644 index 0000000..3d0d05d Binary files /dev/null and b/fable-test-app/public/backgrounds/federal.png differ diff --git a/fable-test-app/public/backgrounds/non-federal.png b/fable-test-app/public/backgrounds/non-federal.png new file mode 100644 index 0000000..313b35a Binary files /dev/null and b/fable-test-app/public/backgrounds/non-federal.png differ diff --git a/fable-test-app/src/App.css b/fable-test-app/src/App.css index 7481fc7..2302ece 100644 --- a/fable-test-app/src/App.css +++ b/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; +} diff --git a/fable-test-app/src/components/NextHoliday.tsx b/fable-test-app/src/components/NextHoliday.tsx index 11125fd..a69bfb4 100644 --- a/fable-test-app/src/components/NextHoliday.tsx +++ b/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; + provincesObservedIn?: Provinces[]; } const NextHoliday: React.FC = ({ display = 'banner', isCurrentHoliday = false, - nextHoliday + nextHoliday, + federal, + provincesObservedIn }) => { // Calculate days until the next holiday const calcNextHoliday = (dateString: string) => { @@ -23,6 +29,27 @@ const NextHoliday: React.FC = ({ return Math.floor((holidayDate.getTime() - today.getTime()) / (1000 * 3600 * 24)); }; + // Get long version of date + const formatDate = (dateString: string) => { + const holidayDate = new Date(dateString); + + return `${holidayDate.toLocaleString('default', { month: 'long' })} ${holidayDate.getDate()}`; + }; + + // Create formatted list of elements for provinces + const getObservedInProvinces = () => { + if (provincesObservedIn) { + if (provincesObservedIn.length === 1) { + return {provincesObservedIn[0].id}; + } else { + return provincesObservedIn.map((value, i: number) => + {i === provincesObservedIn.length - 1 && " and "} + {value.id}{i != provincesObservedIn.length - 1 ? ", " : "."} + ); + } + } + }; + const daysToNextHoliday = nextHoliday ? calcNextHoliday(nextHoliday.date) : null; if (!nextHoliday) { @@ -46,6 +73,43 @@ const NextHoliday: React.FC = ({ src="/icons/icon-calendar.svg" alt="Calendar icon with a clock in the bottom right corner." /> + ) : display ==='homepage' ? ( +
+
+ + {federal ? + Next federal statutory holiday + : + Next non-federal statutory holiday + } + + + {nextHoliday.nameEn} + +
+ + {!federal ? +

+  - Observed in {getObservedInProvinces()} +

+ : + null + } +
+
+
+ + That's in {daysToNextHoliday} days! + + Calendar icon with a clock in the bottom right corner. +
+
) : null; }; diff --git a/fable-test-app/src/pages/About.tsx b/fable-test-app/src/pages/About.tsx index df0993f..e5c13cc 100644 --- a/fable-test-app/src/pages/About.tsx +++ b/fable-test-app/src/pages/About.tsx @@ -15,6 +15,7 @@ const About: React.FC = () => { Learn more about the GC Design System { + const currentDate = new Date().getTime(); + const [nextFederal, setNextFederal] = useState(); + const [nextNationwide, setNextNationwide] = useState(); + + useEffect(() => { + axios.get('https://canada-holidays.ca/api/v1/holidays') + .then(({ data }) => { + + // Assign next federal holiday + let fedAssigned = false; + let nationwideAssigned = false; + data.holidays.map((holiday: holidayObject) => { + const holidayDate = new Date (holiday.date).getTime(); + + if (holiday.federal === 1) { + if (!fedAssigned && holidayDate > currentDate) { + fedAssigned = true; + setNextFederal(holiday); + } + } + + if (!nationwideAssigned && holidayDate > currentDate) { + nationwideAssigned = true; + setNextNationwide(holiday); + } + }); + }) + .catch(error => { + console.error("There was an error fetching the holidays!", error); + }); + }, []); + return (
Canada holidays @@ -11,6 +45,27 @@ const Home: React.FC = () => { This app shows all Canadian holidays and uses GC Design System. + + + + + + 2024-08-28
) diff --git a/fable-test-app/src/utils/constants.tsx b/fable-test-app/src/utils/constants.tsx index fe731a7..3b3edae 100644 --- a/fable-test-app/src/utils/constants.tsx +++ b/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; +};