docs: add files for date input (#420)

* chore: add files for date input

* docs: add date input guidance and documentation

* chore: small changes

* fix: remove first line

* chore: updates to language on anatomy etc

* chore: add example for compact on preview

* chore: remove variant on preview

* chore: missing periods

src/en/components/date-input/base.md

@@ -0,0 +1,21 @@
+---
+layout: 'layouts/base.njk'
+github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-date-input
+figma: https://www.figma.com/design/mh2maMG2NBtk41k1O1UGHV/GC-Design-System?node-id=14220-878&node-type=canvas&t=TkjGZOzzUOp5XV3K-0
+permalink: false
+tags: ['dateinputEN', 'header']
+---
+
+# Date input <br>`<gcds-date-input>`
+
+_Also called: dates, dateinput, date, memorable date._
+
+A date input is a space to enter a known date.
+
+{% docLinks locale stage figma github %}
+{% enddocLinks %}
+
+{% componentPreview "Date input component preview" %}
+<gcds-date-input format="full" legend="Legend" name="example-default" hint="Day can be 1 or 2 digits. Year must be 4 digits.">
+</gcds-date-input>
+{% endcomponentPreview %}

src/en/components/date-input/code.md

@@ -0,0 +1,49 @@
+---
+title: Date input
+layout: 'layouts/component-documentation.njk'
+translationKey: 'dateinputCode'
+tags: ['dateinputEN', 'code']
+date: "git Last Modified"
+---
+
+## Build a date input
+
+Use a date input to collect a date from a person when you’re expecting them to enter a date they already know or can verify.
+
+## Coding and accessibility for date inputs
+
+### Apply required attributes
+For the date input to function properly, always use the following attributes with `<gcds-date-input>`:
+
+- `name`
+- `legend`
+- `format`
+
+### Format the date input
+- Choose the format of the date input by entering either `full` or `compact` in the `format` attribute of the date input.
+- The `full` value will render the date input with a year, month, and day form field in the order month, day, and year in English and the order of day, month, and year in French.
+- The `compact` value will render the date input with a year and month form field in the order of month and year in both English and French.
+- The `format` attribute also formats the value received and outputted by the date input. The value will be formatted `YYYY-MM-DD` while set as `full` and `YYYY-MM` while set as `compact`.
+
+### Entering and receiving the value from date input
+Date input can receive and output different value formats depending on the `format` attribute:
+- The `full` format will expect/output a value formatted `YYYY-MM-DD`.
+- The `compact` format will expect/output a value formatted `YYYY-MM`.
+
+{% include "partials/valid-props.njk" %}
+
+{% include "partials/error-message.njk" %}
+
+{% include "partials/hint.njk" %}
+
+{% include "partials/getcode.njk" %}
+
+<iframe
+  title="iframeTitle"
+  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-date-input--events-properties&lang=en"
+  width="1200"
+  height="1650"
+  style="display: block; margin: 0 auto;"
+  frameBorder="0"
+  allow="clipboard-write"
+></iframe>

src/en/components/date-input/design.md

@@ -0,0 +1,30 @@
+---
+title: Date input
+layout: 'layouts/component-documentation.njk'
+translationKey: 'dateinputDesign'
+tags: ['dateinputEN', 'design']
+date: "git Last Modified"
+---
+
+## Date input anatomy
+
+<ol class="anatomy-list">
+  <li>The <strong>fieldset legend</strong> states the information a person should enter in the date input field. Text is left-aligned and in sentence case (only the initial letter is capitalized). For the date input component, the fieldset is typically labelled as "date" or with the specific date type sought. The hint text shows the format of the date.</li>
+  <li>The <strong>month label</strong> identifies the month select field.</li>
+  <li>The <strong>month select field</strong> field provides a predefined, chronological list of months for a person to select from.</li>
+  <li>The <strong>day label</strong> identifies the day input.</li>
+  <li>The <strong>day input</strong> field can be 1 or 2 digits.</li>
+  <li>The <strong>year label</strong> identifies the year input field.</li>
+  <li>The <strong>year input</strong> field is limited to 4 digits.</li>
+</ol>
+
+<img class="b-sm b-default p-400" src="/images/en/components/anatomy/gcds-date-input-anatomy.svg" alt="A date input anatomy represented by 6 elements: the fieldset legend, the month label, the month select field, the day label, the day input field, the year label, and the year input field." />
+
+
+## Design and accessibility for date inputs
+
+### Support task success with hint text
+- Use the hint text in the fieldset legend to help a person understand the format they can use to enter the date. For example, showing a single digit number without a leading zero, like September 7, rather than September 07 shows that a leading zero is not needed. 
+
+### Write specific error messages
+- Write error messages for each field of the date input. Error messages must provide information on what is missing or on incorrect formatting. For example, if the year was input using 2 digits, state that the year should be 4 digits.

src/en/components/date-input/use-case.md

@@ -0,0 +1,49 @@
+---
+title: Date input
+layout: "layouts/component-documentation.njk"
+eleventyNavigation:
+  key: dateinputEN
+  title: Date input
+  locale: en
+  parent: componentsEN
+  otherNames: dates, dateinput, date, memorable date.
+  description: A date input is a space to enter a known date.
+  thumbnail: /images/en/components/preview/preview-date-input.svg
+  alt: Thick grey lines at the top represent the legend and hint text. A white box with a thin grey border and a grey line and grey arrow inside of it represents the select input for the month. Beside this are two smaller white boxes with thin grey outlines representing the text inputs for the day and year.
+  state: published
+translationKey: "dateinput"
+tags: ['dateinputEN', 'usage']
+permalink: /en/components/date-input/
+date: "git Last Modified"
+---
+
+## Problems date inputs solves
+
+Take a look at what date inputs do to see if they fit the problem you're solving for. Then select the best date input type for the use case you need to meet.
+
+Use a date input to gather a date from a person when you're expecting them to write:
+- A date they already know, like their date of birth.
+- A date they can easily find, like a health card expiry date.
+- A specific date, like the date they moved to a new home.
+- A date that doesn’t include the specific day of the week.
+- Avoid using a date input for the selection of an unknown date. Use a date picker instead.
+
+<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
+  <h2 class="mt-0 mb-400">Related components</h2>
+
+  <a href="{{ links.input }}" class="link-light">Input</a> when you want someone to input only a year or only a day of the month.
+
+  <a href="{{ links.select }}" class="link-light">Select</a> when you want someone to input only a month.
+
+  Date picker when you want someone to choose a not-yet-known date, like for appointment scheduling.
+</article>
+
+## Component types
+
+### Day, month, year format
+- For a specific date the person will know or can easily find.
+
+### Month, year format
+- For a date that does not have a day, like a driver’s licence expiry date.
+- For an approximate date, like the date they lost their ID card  (month and year).
+- For a date the person may not know the exact day of.

src/en/en.json

@@ -20,6 +20,7 @@
     "container": "/en/components/container",
     "dataTable": "/en/coming-soon",
     "dateModified": "/en/components/date-modified",
+    "dateInput": "/en/components/date-input",
     "details": "/en/components/details",
     "errorMessage": "/en/components/error-message",
     "errorSummary": "/en/components/error-summary",

src/fr/composants/champ-de-date/base.md

@@ -0,0 +1,21 @@
+---
+layout: 'layouts/base.njk'
+github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-date-input
+figma: https://www.figma.com/design/o4SguSZdar2CCFzSkWNrmB/Syst%C3%A8me-de-design-GC?node-id=851-3247&node-type=canvas&t=Us7CENqCQWbKIk7H-0
+permalink: false
+tags: ['dateinputFR', 'header']
+---
+
+# Champ de date <br>`<gcds-date-input>`
+
+_Autres noms : date, zone de date, date connue._
+
+Le champ de date est un espace permettant de saisir une date connue.
+
+{% docLinks locale stage figma github %}
+{% enddocLinks %}
+
+{% componentPreview "Aperçu du composant de champ de date" %}
+<gcds-date-input format="full" legend="Légende" name="example-default" lang="fr" hint="Le jour peut être composé de 1 ou 2 chiffres. L’année doit inclure 4 chiffres.">
+</gcds-date-input>
+{% endcomponentPreview %}

src/fr/composants/champ-de-date/cas-dutilisation.md

@@ -0,0 +1,51 @@
+---
+title: Champ de date
+layout: "layouts/component-documentation.njk"
+eleventyNavigation:
+  key: dateinputFR
+  title: Champ de date
+  locale: fr
+  parent: componentsFR
+  otherNames: date, zone de date, date connue.
+  description: Le champ de date est un espace permettant de saisir une date connue.
+  thumbnail: /images/fr/components/preview/preview-date-input.svg
+  alt: "Des lignes grises épaisses représentent la légende et le texte explicatif. En dessous, trois cases blanches à fine bordure grise sont alignées horizontalement : une petite case représentant le champ de texte pour le jour, une case contenant une ligne grise et une flèche grise et représentant le champ de sélection du mois, puis une petite case représentant le champ de texte pour l’année."
+  state: published
+translationKey: "dateinput"
+tags: ['dateinputFR', 'usage']
+permalink: /fr/composants/champ-de-date/
+date: "git Last Modified"
+---
+
+## Problèmes résolus par les champs de date
+
+Examinez ce que font les champs de date pour déterminer s’ils permettent de résoudre votre problème. Sélectionnez ensuite le type de champ de date le plus approprié à votre cas de figure.
+
+Utilisez un champ de date pour recueillir une date lorsque vous attendez d’une personne :
+- Une date qu’elle connaît déjà, comme sa date de naissance.
+- Une date qu’elle peut facilement trouver, comme une date d’expiration de carte d’assurance maladie.
+- Une date précise, comme la date à laquelle elle a déménagé dans une nouvelle maison.
+- Une date qui n’inclut pas le jour précis de la semaine.
+- Évitez d’utiliser un champ de date si la date n’est pas connue de la personne. Utilisez alors un sélecteur de date.
+
+<article class="bg-full-width bg-primary text-light pt-500 pb-400 my-500">
+  <h2 class="mt-0 mb-400">Composants connexes</h2>
+
+  <a href="{{ links.input }}" class="link-light">Champs de saisie</a> : lorsque vous voulez que la personne saisisse seulement une année ou un jour du mois.
+
+  <a href="{{ links.select }}" class="link-light">Sélection</a> : lorsque vous voulez que la personne saisisse seulement un mois.
+
+  Sélecteur de date : lorsque vous voulez que la personne choisisse une date qui n’est pas encore connue, par exemple pour planifier un rendez-vous.
+
+</article>
+
+## Types du composant
+
+### Format Jour, Mois, Année
+- Pour une date précise que la personne connaît ou peut facilement trouver.
+
+### Format Mois, Année
+- Pour une date qui n’inclut pas de jour, comme la date d’expiration d’un permis de conduire.
+- Pour une date approximative, comme la date où une carte d’identité a été perdue (mois et année).
+- Pour une date dont la personne risque d’ignorer le jour exact.
+

src/fr/composants/champ-de-date/code.md

@@ -0,0 +1,48 @@
+---
+title: Champ de date
+layout: 'layouts/component-documentation.njk'
+translationKey: 'dateinputCode'
+tags: ['dateinputFR', 'code']
+date: "git Last Modified"
+---
+
+## Créer un champ de date
+Utilisez un champ de date pour recueillir une date lorsque vous attendez d’une personne une date qu’elle connaît déjà ou qu’elle peut vérifier.
+
+## Codage et accessibilité des champs de date
+
+### Appliquez les attributs requis
+- Pour que le champ de date fonctionne correctement, utilisez toujours les attributs suivants avec `<gcds-date-input>` :
+
+- `name`
+- `legend`
+- `format`
+
+### Appliquez un format au champ de date
+- Choisissez le format en indiquant soit `full` soit `compact` dans l’attribut `format` du champ de date.
+- La valeur `full` affichera un composant de champ de date avec des champs pour le jour, le mois et l’année dont l’ordre en français est Jour, Mois, Année et dont l’ordre en anglais est Mois, Jour, Année.
+- La valeur `compact` affichera un composant de champ de date avec des champs pour le mois et l’année dont l’ordre est Mois, Année aussi bien en français qu’en anglais.
+- L’attribut `format` applique également un format à la valeur reçue et rendue par le champ de date du côté système. Si la valeur définie est `full`, le format reçu et rendu sera `YYYY-MM-DD`. Si la valeur définie est `compact`, le format reçu et rendu sera  `YYYY-MM`.
+
+### Valeurs du champ de date reçues et rendues
+Le champ de date peut recevoir et rendre des valeurs d’un format différent que celui affiché côté utilisateur en fonction de l’attribut `format`.
+- Le format `full` produira une valeur dont le format est `YYYY-MM-DD`.
+- Le format `compact` produira une valeur dont le format est `YYYY-MM`.
+
+{% include "partials/valid-props.njk" %}
+
+{% include "partials/error-message.njk" %}
+
+{% include "partials/hint.njk" %}
+
+{% include "partials/getcode.njk" %}
+
+<iframe
+  title="iframeTitle"
+  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-date-input--events-properties&lang=fr"
+  width="1200"
+  height="1650"
+  style="display: block; margin: 0 auto;"
+  frameBorder="0"
+  allow="clipboard-write"
+></iframe>

src/fr/composants/champ-de-date/design.md

@@ -0,0 +1,29 @@
+---
+title: Champ de date
+layout: 'layouts/component-documentation.njk'
+translationKey: 'dateinputDesign'
+tags: ['dateinputFR', 'design']
+date: "git Last Modified"
+---
+
+## Structure de la champ de date
+
+<ol class="anatomy-list">
+  <li>La <strong>légende du jeu de champs</strong> indique l’information qu’une personne doit saisir dans le champ de date. Le texte est aligné à gauche et porte une majuscule initiale. Pour le champ de date, la légende sera généralement intitulée « Date » ou mentionnera le type de date précis recherché. Le texte explicatif indique le format de la date.</li>
+  <li>L’<strong>étiquette Jour</strong> identifie le champ de saisie du jour.</li>
+  <li>Le <strong>champ de saisie du jour</strong> peut comporter 1 ou 2 chiffres.</li>
+  <li>L’<strong>étiquette Mois</strong> identifie le champ de sélection du mois.</li>
+  <li>Le <strong>champ de sélection du mois</strong> offre une liste prédéfinie et chronologique des mois, parmi lesquels une personne fait une sélection.</li>
+  <li>L’<strong>étiquette Année</strong> identifie le champ de saisie de l’année.</li>
+  <li>Le <strong>champ de saisie</strong> de l’année comporte 4 chiffres.</li>
+</ol>
+
+<img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-date-input-anatomy.svg" alt="L’anatomie du champ de date représentée par 6 éléments: la légende du jeu de champs, l’étiquette Jour, le champ de saisir du jour, l’étiquette Mois, le champ de sélection du mois, l’étiquette année et le champ de saisie de l’année." />
+
+## Accessibilité et design des champ de date
+
+### Favorisez la réussite de la tâche à l’aide d’un texte explicatif
+- Utilisez un texte explicatif dans la légende du jeu de champs pour aider une personne à comprendre le format de date qu’elle peut utiliser. Par exemple, le texte explicatif « 7 septembre » plutôt que « 07 septembre » indique qu’un chiffre unique, non précédé d’un zéro, suffit. 
+
+### Rédigez des messages d’erreur précis
+- Rédigez des messages d’erreur pour chaque champ de la date. Ces messages doivent renseigner sur les informations manquantes ou les erreurs de format. Par exemple, si une personne a saisi une année de 2 chiffres, indiquez que l’année doit comporter 4 chiffres. 

src/fr/fr.json

@@ -20,6 +20,7 @@
     "container": "/fr/composants/boite",
     "dataTable": "/fr/developpement-en-cours",
     "dateModified": "/fr/composants/date-de-modification",
+    "dateInput": "/fr/composants/champ-de-date",
     "details": "/fr/composants/details",
     "errorMessage": "/fr/composants/message-derreur",
     "errorSummary": "/fr/composants/resume-de-erreurs",