From 3fe24cff3a93fc6662e1993110e0235be73cd7c4 Mon Sep 17 00:00:00 2001
From: Yangshun Tay <tay.yang.shun@gmail.com>
Date: Wed, 12 Oct 2022 18:53:00 +0800
Subject: [PATCH] [portal][ui] allow customization of MonthYearPicker

---
 .../src/components/shared/MonthYearPicker.tsx | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/apps/portal/src/components/shared/MonthYearPicker.tsx b/apps/portal/src/components/shared/MonthYearPicker.tsx
index bf000501..b4657e6d 100644
--- a/apps/portal/src/components/shared/MonthYearPicker.tsx
+++ b/apps/portal/src/components/shared/MonthYearPicker.tsx
@@ -1,3 +1,4 @@
+import { useId } from 'react';
 import { Select } from '@tih/ui';
 
 export type Month = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
@@ -8,8 +9,11 @@ export type MonthYear = Readonly<{
 }>;
 
 type Props = Readonly<{
+  errorMessage?: string;
+  monthLabel?: string;
   onChange: (value: MonthYear) => void;
   value: MonthYear;
+  yearLabel?: string;
 }>;
 
 const MONTH_OPTIONS = [
@@ -72,11 +76,22 @@ const YEAR_OPTIONS = Array.from({ length: NUM_YEARS }, (_, i) => {
   };
 });
 
-export default function MonthYearPicker({ value, onChange }: Props) {
+export default function MonthYearPicker({
+  errorMessage,
+  monthLabel = 'Month',
+  value,
+  onChange,
+  yearLabel = 'Year',
+}: Props) {
+  const hasError = errorMessage != null;
+  const errorId = useId();
+
   return (
-    <div className="flex space-x-4">
+    <div
+      aria-describedby={hasError ? errorId : undefined}
+      className="flex space-x-4">
       <Select
-        label="Month"
+        label={monthLabel}
         options={MONTH_OPTIONS}
         value={value.month}
         onChange={(newMonth) =>
@@ -84,13 +99,18 @@ export default function MonthYearPicker({ value, onChange }: Props) {
         }
       />
       <Select
-        label="Year"
+        label={yearLabel}
         options={YEAR_OPTIONS}
         value={value.year}
         onChange={(newYear) =>
           onChange({ month: value.month, year: Number(newYear) })
         }
       />
+      {errorMessage && (
+        <p className="text-danger-600 mt-2 text-sm" id={errorId}>
+          {errorMessage}
+        </p>
+      )}
     </div>
   );
 }