From 5c614139497973f01bb0e03502354c532da8b47f Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Mon, 26 Jun 2023 14:28:17 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D(react)=20illustrate=20internationa?=
 =?UTF-8?q?l=20calendars=20of=20`DatePicker`=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Show international capabilities of the `DatePicker` component using the
`locale` props and the Cunningham provider. Dates would
be automatically displayed in the appropriate calendar system.
---
 .changeset/polite-mails-remain.md             |  5 +++++
 .../src/components/Forms/DatePicker/index.mdx | 10 ++++++++++
 .../Forms/DatePicker/index.stories.tsx        | 20 +++++++++++++++++++
 3 files changed, 35 insertions(+)
 create mode 100644 .changeset/polite-mails-remain.md

diff --git a/.changeset/polite-mails-remain.md b/.changeset/polite-mails-remain.md
new file mode 100644
index 0000000..2686ea7
--- /dev/null
+++ b/.changeset/polite-mails-remain.md
@@ -0,0 +1,5 @@
+---
+"@openfun/cunningham-react": minor
+---
+
+Add calendar system customization in `DatePicker` component
diff --git a/packages/react/src/components/Forms/DatePicker/index.mdx b/packages/react/src/components/Forms/DatePicker/index.mdx
index f6b4087..3984d22 100644
--- a/packages/react/src/components/Forms/DatePicker/index.mdx
+++ b/packages/react/src/components/Forms/DatePicker/index.mdx
@@ -122,6 +122,16 @@ When passing an invalid date, for example outside of the valid range, the DatePi
   <Story id="components-forms-datepicker--invalid-value"/>
 </Canvas>
 
+## International calendars
+
+When passing a locale value to the DatePicker components, dates would be automatically displayed in the appropriate calendar system.
+By default, the DatePicker component uses the CunninghamProvider locale.
+
+<Canvas sourceState="shown">
+  <Story id="components-forms-datepicker--custom-locale"/>
+  <Story id="components-forms-datepicker--cunningham-locale"/>
+</Canvas>
+
 ## Props
 
 You can see the list of props below.
diff --git a/packages/react/src/components/Forms/DatePicker/index.stories.tsx b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
index 7757545..c9957a1 100644
--- a/packages/react/src/components/Forms/DatePicker/index.stories.tsx
+++ b/packages/react/src/components/Forms/DatePicker/index.stories.tsx
@@ -95,6 +95,26 @@ export const Fullwidth = {
   },
 };
 
+export const CustomLocale = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider>
+      <DatePicker
+        label="Pick a date"
+        locale="hi-IN-u-ca-indian"
+        defaultValue="2023-06-25"
+      />
+    </CunninghamProvider>
+  </div>
+);
+
+export const CunninghamLocale = () => (
+  <div style={{ minHeight: "400px" }}>
+    <CunninghamProvider currentLocale="fr-FR">
+      <DatePicker label="Pick a date" defaultValue="2023-06-25" />
+    </CunninghamProvider>
+  </div>
+);
+
 export const Controlled = () => {
   const [value, setValue] = useState<StringOrDate | null>("2023-05-26");
   return (