Merge branch 'main' into F36-805-text-input-documentation

packages/components/datepicker/README.mdx

@@ -64,17 +64,35 @@ You can use Datepicker with the [FormControl](/components/form-control) in order
 
 ```
 
+### Limiting the date range
+
+Use the `fromDate` and `toDate` properties to limit the available date range.
+
+```jsx file=./examples/Datepicker/WithMinMaxDate.tsx
+
+```
+
+### Multiple months
+
+If you need to show more than a month at once, use the `numberOfMonths` property.
+
+```jsx file=./examples/Datepicker/WithMultipleMonths.tsx
+
+```
+
 ### Open by default
 
-Open the dropdown and display the Calendar by default without user interaction
+Use the `defaultIsOpen` property to open the dropdown and display the Calendar by default without user interaction.
+
+**Note**: the Calendar closes by pressing the escape key or by clicking outside of the Datepicker.
 
 ```jsx file=./examples/Datepicker/DefaultOpen.tsx
 
 ```
 
 ### Custom
 
-If you need a custom solution, you can build it by leveraging our lower-level components, such as Calendar, Popover, and TextInput.
+If you need a custom solution, you can build it by leveraging our lower-level components, such as [Calendar](/components/calendar), [Popover](/components/popover), and [TextInput](/components/text-input).
 For example, Datepicker that uses text input as a trigger without a button.
 
 ```jsx file=./examples/Datepicker/Custom.tsx

packages/components/datepicker/examples/Datepicker/DefaultOpen.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Datepicker } from '@contentful/f36-components';
 
-export default function BasicExample() {
+export default function DefaultOpenExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());
 
   return (

packages/components/datepicker/examples/Datepicker/WithFormControl.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { Datepicker } from '@contentful/f36-components';
 import { FormControl } from '@contentful/f36-forms';
 
-export default function BasicExample() {
+export default function WithFormControlExample() {
   const [selectedDay, setSelectedDay] = useState(new Date());
 
   return (

packages/components/datepicker/examples/Datepicker/WithMinMaxDate.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { Datepicker } from '@contentful/f36-components';
+
+export default function WithMinMaxDateExample() {
+  const [selectedDay, setSelectedDay] = useState(new Date());
+  const fromDate = new Date();
+  const twoYearsFromNow = new Date(
+    new Date(fromDate).setFullYear(fromDate.getFullYear() + 2),
+  );
+
+  return (
+    <Datepicker
+      selected={selectedDay}
+      onSelect={setSelectedDay}
+      fromDate={fromDate}
+      toDate={twoYearsFromNow}
+    />
+  );
+}

packages/components/datepicker/examples/Datepicker/WithMultipleMonths.tsx

@@ -0,0 +1,14 @@
+import React, { useState } from 'react';
+import { Datepicker } from '@contentful/f36-components';
+
+export default function WithMultipleMonthsExample() {
+  const [selectedDay, setSelectedDay] = useState(new Date());
+
+  return (
+    <Datepicker
+      selected={selectedDay}
+      onSelect={setSelectedDay}
+      numberOfMonths={2}
+    />
+  );
+}

packages/components/datepicker/stories/Datepicker.stories.tsx

@@ -13,6 +13,18 @@ const testDate = new Date('2022-04-15');
 
 export default {
   component: Datepicker,
+  args: {
+    weekStartsOn: 1,
+  },
+  argTypes: {
+    weekStartsOn: {
+      control: {
+        type: 'number',
+        min: 0,
+        max: 6,
+      },
+    },
+  },
   parameters: {
     chromatic: { delay: 1000 },
   },