import { Canvas, Controls, Meta } from '@storybook/blocks'
import { ResourceLinks, KAIOInstallation } from '~storybook/components'
import * as DatePickerStories from './DatePicker.stories'

<Meta of={DatePickerStories} />

# DatePicker

<ResourceLinks
  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/DatePicker"
  figma="https://www.figma.com/file/eZKEE5kXbEMY3lx84oz8iN/%F0%9F%92%9C-UI-Kit%3A-Heart?type=design&node-id=10458%3A45652&mode=design&t=4Mycc044XjC1WLin-1"
  designGuidelines="https://cultureamp.atlassian.net/wiki/spaces/DesignSystem/pages/3082061174/Date+Picker"

/>

<KAIOInstallation exportNames="DatePicker" />

## Overview

Date picker form field.

<Canvas of={DatePickerStories.Playground} />
<Controls of={DatePickerStories.Playground} />

## API

### Label text

Field label for the date picker.

<Canvas of={DatePickerStories.LabelText} />

### Controlled

DatePicker is a controlled component, where the consumer holds the selected value.
Pass the values to `selectedDay` (can be passed a pre-loaded value) and `onDayChange`.

<Canvas of={DatePickerStories.Controlled} />

### Locale

Change the locale of the date-related elements within the DatePicker.
This changes the input format and the contents in the calendar.

<Canvas of={DatePickerStories.Locale} />

### Description

Add a custom description below the input.

For accessibility, the date format will always be part of the description.

<Canvas of={DatePickerStories.Description} />

### Validation

Basic validation has been implemented to display when validation is not controlled.

To control validation, use `onValidate` (`(validationResponse: ValidationResponse) => void`)
in combination with `status` and `validationMessage`.
This allows you to either extend or override the internal validation.

<Canvas of={DatePickerStories.Validation} />

### Disabled days

There are multiple props to disable days within the Calendar.

<Canvas of={DatePickerStories.DisabledDays} />
<Controls of={DatePickerStories.DisabledDays} />

### Responsive behaviour

To ensure calendar content is accessible across multiple viewports and satisfy the [content reflow](https://www.w3.org/WAI/WCAG21/Understanding/reflow.html) spec in WCAG guidelines, the `DatePicker`'s popover will scroll when there is not enough space available. The main case for this is to assist users on 400% zoom and ensure content is not visually lost below the fold.

<Canvas of={DatePickerStories.LimitedViewportHeight} />

This is determined by the [size](https://floating-ui.com/docs/size) middleware from the `floatingUI` library, which calculates and sets the available height and width based on the viewport and available whitespace.

<Canvas of={DatePickerStories.FullViewportHeight} />

The `DatePicker`'s popover will also re-adjust its position to the top if there is not enough space available below.

<Canvas of={DatePickerStories.AboveIfAvailable} />