docs: adding DateField docs page (#3188)

Co-authored-by: sarahgm <[email protected]>

docs/content/components/datefield/date-field-basic.demo.tsx

@@ -0,0 +1,10 @@
+import { CalendarDate } from '@internationalized/date';
+import { DateField } from '@marigold/components';
+
+export default () => (
+  <DateField
+    label="Date field"
+    defaultValue={new CalendarDate(2020, 2, 3)}
+    description="This is description"
+  />
+);

docs/content/components/datefield/date-field-disabled.demo.tsx

@@ -0,0 +1,9 @@
+import { DateField } from '@marigold/components';
+
+export default () => (
+  <DateField
+    label="Field Disabled"
+    disabled
+    description="This field is disabled"
+  />
+);

docs/content/components/datefield/date-field-error.demo.tsx

@@ -0,0 +1,5 @@
+import { DateField } from '@marigold/components';
+
+export default () => (
+  <DateField label="Date field" error errorMessage="Something went wrong !" />
+);

docs/content/components/datefield/date-field-required.demo.tsx

@@ -0,0 +1,5 @@
+import { DateField } from '@marigold/components';
+
+export default () => (
+  <DateField label="Date" required description="required field" />
+);

docs/content/components/datefield/datefield.mdx

@@ -0,0 +1,121 @@
+---
+title: DateField
+group: Form
+caption: Component for input forms.
+# badge: 'new'
+---
+
+The `<DateField>` allows users to enter and edit date values using a keyboard. Each part of a date value is displayed in an individually editable segment.
+
+The `<DateField>` segments are individually focusable and editable by the user, by typing or using the arrow keys to increment and decrement the value. This approach allows values to be formatted and parsed correctly regardless of the locale or date format, and offers an easy and error-free way to edit dates using the keyboard.
+
+## Usage
+
+### Import
+
+To import the component you just have to use this code below.
+
+```tsx
+import { DateField } from '@marigold/components';
+```
+
+### Props
+
+<PropsTable
+  props={[
+    {
+      property: 'label',
+      type: 'ReactNode',
+      description: 'The label text. ',
+      default: 'none',
+    },
+    {
+      property: 'description',
+      type: 'ReactNode',
+      description: 'A helpful text.',
+      default: 'none',
+    },
+    {
+      property: 'errorMessage',
+      type: 'ReactNode',
+      description: 'An error message.',
+      default: 'none',
+    },
+    {
+      property: 'error',
+      type: 'boolean',
+      description:
+        'If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.',
+      default: 'false',
+    },
+    {
+      property: 'defaultValue',
+      type: 'DateValue',
+      description: 'The default value of the date field.',
+      default: 'none',
+    },
+    {
+      property: 'value',
+      type: 'DateValue',
+      description: 'The value of the date field.',
+      default: 'none',
+    },
+    {
+      property: 'disabled',
+      type: 'boolean',
+      description: 'If `true`, the date field is disabled.',
+      default: 'false',
+    },
+    {
+      property: 'required',
+      type: 'boolean',
+      description: 'If `true`, the date field is required.',
+      default: 'false',
+    },
+    {
+      property: 'readOnly',
+      type: 'boolean',
+      description: 'If `true`, the date field is readOnly.',
+      default: 'false',
+    },
+    {
+      property: 'onChange',
+      type: 'function',
+      description:
+        "A callback function that is called with the date field's current value changes.",
+      default: 'none',
+    },
+    {
+      property: 'width',
+      type: 'string',
+      description: 'Control the width of the field.',
+      default: '100%',
+    },
+  ]}
+/>
+
+## Examples
+
+### Simple DateField
+
+This example shows a regular `<DateField>` without any special props.
+
+<ComponentDemo file="./date-field-basic.demo.tsx" />
+
+### Disabled DateField
+
+You can disable the `<DateField>` so that the user can't interact with it anymore.
+
+<ComponentDemo file="./date-field-disabled.demo.tsx" />
+
+### Required DateField
+
+If you want a `<DateField>` to be required, you just have to add the property `required`. With that the small required icon appears next to the label.
+
+<ComponentDemo file="./date-field-required.demo.tsx" />
+
+### DateField With an Error
+
+This example shows how to use the `error` with the `errorMessage`.
+
+<ComponentDemo file="./date-field-error.demo.tsx" />