Development: Date input component

[adorayi]

Summary: Development of the date input component. Develop on component branch, push to staging and push to prod when approved.

Acceptance Criteria:

• [x] Component kickoff
• [x] Sync with Design
• [x] Requirements documentation
• [x] Requirements doc: Consider edge cases
• [x] Requirements doc: Describe component properties
• [x] Review of requirements doc
• [ ] Develop the component according to the requirements doc and design specs
• [ ] Add component to storybook
• [ ] Write draft of dev guidance
• [ ] Sync dev properties with Figma properties (design + dev)
• [ ] Handoff from draft dev guidance to documentation author/lead
• [ ] WCAG Goal can be completed using a screen reader.
• [ ] WCAG Visual elements observe color contrast requirements.
• [ ] WCAG Manual accessibility testing meets WCAG 2.1 AA requirements.
• [ ] Provides equal service in French and English.
• [ ] Comparison with official policy, documented reasons for deviation if any
• [ ] Final sync with Design
• [ ] Policy review
• [ ] Code review
• [ ] After PR approval, merge component to staging
• [ ] Review from Design
• [ ] Review from Policy
• [ ] Note: reviews could be done on Storybook staging
• [ ] Push to prod

[daine]

Requirements documentation:

• [x] Requirements doc: Consider edge cases #751
• [x] Requirements doc: Describe component properties #751
• [x] Review of requirements doc #751

Update: Requirements doc is now ready for implementation

[daine]

Proposed definition of done:

• [ ] Develop the component as required
• [ ] Validator for dates exists
• [ ] Error states for invalid month, day or year show up appropriately
• [ ] Event handlers exist to handle events for the 2 or 3 inputs (year month day)
• [ ] The component exists in storybook
• [ ] Tests are written for good code coverage and are passing
• [ ] The component works in HTML, React, React with SSR, Angular, and Vue (?)

Proposed acceptance criteria:

• [ ] When the language is set to french, the component displays the date input in the french format
• [ ] The component follows the design in figma
• [ ] The component works in both desktop and mobile screens
• [ ] The component can be used in two formats, full and compact

Must be done before:

• 699