Skip to content

Commit

Permalink
chore: updates to language on anatomy etc
Browse files Browse the repository at this point in the history
  • Loading branch information
daine committed Sep 24, 2024
1 parent 4eaa1dc commit ed363a0
Show file tree
Hide file tree
Showing 10 changed files with 91 additions and 95 deletions.
2 changes: 1 addition & 1 deletion src/en/components/date-input/base.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@ A date input is a space to enter a known date.
{% enddocLinks %}

{% componentPreview "Date input component preview" %}
<gcds-date-input format="full" legend="Date input" name="example-default">
<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 %}
2 changes: 1 addition & 1 deletion src/en/components/date-input/code.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ date: "git Last Modified"

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 input
## 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>`:
Expand Down
18 changes: 9 additions & 9 deletions src/en/components/date-input/design.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,19 +9,19 @@ 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 would typically be 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> for the month select field.</li>
<li>The <strong>month select field</strong> provides a predefined, chronological list of months for a person to select from.</li>
<li>The <strong>day label</strong> for the day input.</li>
<li>The <strong>day input field</strong>. Input can be 1 or 2 digits.</li>
<li>The <strong>year label</strong> for the year input field.</li>
<li>The <strong>year input field</strong>. Input is 4 digits only.</li>
<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="An image of the date input anatomy." />
<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." />


## Accessibility and Design
## 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.
Expand Down
8 changes: 4 additions & 4 deletions src/en/components/date-input/use-case.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ permalink: /en/components/date-input/
date: "git Last Modified"
---

## Problems component solves
## 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.

Expand All @@ -32,10 +32,10 @@ Use a date input to gather a date from a person when you're expecting them to wr
<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.
<br/>
Date picker when you want someone to choose a not-yet-known date, like for appointment scheduling.

Date picker when you want someone to choose a not-yet-known date, like for appointment scheduling.
</article>

## Component types
Expand All @@ -45,5 +45,5 @@ Use a date input to gather a date from a person when you're expecting them to wr

### 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 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.
2 changes: 1 addition & 1 deletion src/fr/composants/champ-de-date/base.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,6 @@ Le champ de date est un espace permettant de saisir une date connue.
{% enddocLinks %}

{% componentPreview "Aperçu du composant de champ de date" %}
<gcds-date-input format="full" legend="Champ de date" name="example-default" lang="fr">
<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 %}
9 changes: 5 additions & 4 deletions src/fr/composants/champ-de-date/cas-dutilisation.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,11 @@ Utilisez un champ de date pour recueillir une date lorsque vous attendez d’une
<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.
<br/>
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.
<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>

Expand Down
2 changes: 1 addition & 1 deletion src/fr/composants/champ-de-date/code.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ 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.

## Accessibilité et codage des cases un champ de date
## 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>` :
Expand Down
16 changes: 8 additions & 8 deletions src/fr/composants/champ-de-date/design.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,16 @@ 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>Étiquette Mois associée au champ de sélection du mois.</li>
<li>Le champ de sélection du mois offre une liste prédéfinie et chronologique des mois, parmi lesquels une personne fait une sélection.</li>
<li>Étiquette Jour associée au champ de saisie du jour.</li>
<li>Champ de saisie du jour. Le jour peut comporter 1 ou 2 chiffres.</li>
<li>Étiquette Année associée au champ de saisie de l’année.</li>
<li>Champ de saisie de l’année. L’année comporte 4 chiffres.</li>
<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 de la champ de date." />
<img class="b-sm b-default p-400" src="/images/fr/components/anatomy/gcds-date-input-anatomy.svg" alt="Lanatomie 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

Expand Down
Loading

0 comments on commit ed363a0

Please sign in to comment.