As a DS designer and developer, I want to have a new Date input component available, so users can query for dates in the Simple Query Builder.

ACs

• The Date input component is implemented according to the Figma specs and follows the behavior and accessibility principles defined in the component documentation.
• The Date input component uses the InputWithExtender (T275758). This component is made out of an input which behavior matches that of a text input component, and a preview menu which style matches the OptionsMenu.
• The Date input is documented in Storybook according to the specifications (see below)

States

• Same as input + an active state that displays the menu. The component itself can be:

• Default (a placeholder indicates users that they should input a date)
• Loading (while the date is being interpreted by the system, so a loading element (T267010)
• Response (the Extender menu displays a label "Will be interpreted as:" + The system interpretation of the date)

Storybook:

This component has its own pages in Storybook, included under a new section called "Wikibase Components" (see structure):

• A Basic page including controls: they allow users to enter custom text to replace the default label, and make the component disabled
• An //All/ page including also the disabled, the error and warning states

Notes:

• The "base" or core component that gives shape to the date input (and will be reused with other inputs for different data types) is an "input with extender" component (see T275758) that should be documented under the "Input" section in Storybook.

Implementation notes:
We probably want the following props/slots:

• a named slot prompt for the initial content of the extender if there is no input
• prop parsedValue (the parsed and formatted and localized value from the API or the localized error message from the API. If this is null and some text has been entered, then we're showing the loading component)
  • this will be plain text -> we have to still show it in bold
• prop resultsIntroText (i18n string to be shown as soon as something is entered, i.e. "Will be interpreted as")
• prop calendarNotice (i18n string about everything being Gregorian dates)
  • either the component itself or the application has to control when to show this notice. It could be done by the application by providing/not providing this string