From 32b8dc09159318addb7070c80e08f2817b91786b Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Fri, 1 Sep 2023 17:35:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(react)=20make=20DatePicker=20place?=
 =?UTF-8?q?holders=20uppercase?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This was a feedback from the QA.
---
 .changeset/calm-steaks-agree.md                              | 5 +++++
 packages/react/src/components/Forms/DatePicker/DateField.tsx | 2 +-
 .../src/components/Forms/DatePicker/DatePicker.spec.tsx      | 2 +-
 .../src/components/Forms/DatePicker/DateRangePicker.spec.tsx | 4 ++--
 4 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/calm-steaks-agree.md

diff --git a/.changeset/calm-steaks-agree.md b/.changeset/calm-steaks-agree.md
new file mode 100644
index 0000000..6c69f06
--- /dev/null
+++ b/.changeset/calm-steaks-agree.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+make DatePicker placeholders uppercase
diff --git a/packages/react/src/components/Forms/DatePicker/DateField.tsx b/packages/react/src/components/Forms/DatePicker/DateField.tsx
index f6681ab..cab1016 100644
--- a/packages/react/src/components/Forms/DatePicker/DateField.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateField.tsx
@@ -37,7 +37,7 @@ const DateSegmentInput = ({
           (currentSegment.type === "literal" && previousSegment?.isPlaceholder),
       })}
     >
-      {currentSegment.text}
+      {currentSegment.text?.toUpperCase()}
     </div>
   );
 };
diff --git a/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx b/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
index 86f2787..25a983a 100644
--- a/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DatePicker.spec.tsx
@@ -420,7 +420,7 @@ describe("<DatePicker/>", () => {
 
     // Date field's value should be set to a placeholder value.
     const dateFieldContent = screen.getByRole("presentation").textContent;
-    expect(dateFieldContent).eq("mm/dd/yyyy");
+    expect(dateFieldContent).eq("MM/DD/YYYY");
 
     const isGridCellSelected = screen
       .getByRole("gridcell", { name: "24" })!
diff --git a/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx b/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
index a860d1b..026db58 100644
--- a/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
+++ b/packages/react/src/components/Forms/DatePicker/DateRangePicker.spec.tsx
@@ -743,8 +743,8 @@ describe("<DateRangePicker/>", () => {
 
     // Date field's value should be set to a placeholder value.
     const [startInput, endInput] = await screen.queryAllByRole("presentation");
-    expect(startInput.textContent).eq("mm/dd/yyyy");
-    expect(endInput.textContent).eq("mm/dd/yyyy");
+    expect(startInput.textContent).eq("MM/DD/YYYY");
+    expect(endInput.textContent).eq("MM/DD/YYYY");
 
     const startGridCell = screen.getByRole("gridcell", {
       name: "25",