feat: Add gcds-notice documentation #442
Conversation
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
|
This pull request is automatically being deployed by Amplify Hosting (learn more). |
ethanWallace
requested review from
daine,
melaniebmn,
SmartMouthWords and
RavinaSamaroo
|
|
||
| ### Define the type of notice | ||
|
|
||
| Use the `type` attribute to categorize the notice as ‘Info’, ‘Warning’, ‘Danger’ or ‘Success’. This choice determines the visual styling of the notice and communicates the urgency or importance of the message to people. |
There was a problem hiding this comment.
Should we flag ‘Info’, ‘Warning’, ‘Danger’ or ‘Success’ as code and make it lowercase to match the values required to pass to the type prop?
There was a problem hiding this comment.
I like this idea.
@SmartMouthWords what do you think about this change?
There was a problem hiding this comment.
Here's what we've done especially when it involves getting the french translation for some items that are best left as code:
| Use the `type` attribute to categorize the notice as ‘Info’, ‘Warning’, ‘Danger’ or ‘Success’. This choice determines the visual styling of the notice and communicates the urgency or importance of the message to people. | |
| Use the `type` attribute to categorize the notice as `info` (Info), `warning` (Warning), `danger` (Danger) or `Success` (Success). This choice determines the visual styling of the notice and communicates the urgency or importance of the message to people. |
Here is a preview:
Use the
typeattribute to categorize the notice asinfo(Info),warning(Warning),danger(Danger) orSuccess(Success). This choice determines the visual styling of the notice and communicates the urgency or importance of the message to people.
There was a problem hiding this comment.
@daine can we also change Success to lowercase please to match the code?
There was a problem hiding this comment.
Looking at it again - can we skip the text in brackets for EN since it's the same word?
src/en/components/notice/code.md
Outdated
| ### Specify the notice title and heading level | ||
|
|
||
| - Use the `notice-title` attribute to create a clear and informative heading for the notice. Ensure the title conveys the message’s purpose. | ||
| - Set the `notice-title-tag` to define the correct heading level for the card title. Follow a correct and orderly heading hierarchy to make it equal for people who use assistive technologies. |
There was a problem hiding this comment.
Can we link correct heading level to this section on the heading component guidance page? Hopefully this will help users pick the correct level.
|
|
||
| ### Définir le type d’avis | ||
|
|
||
| Utilisez l’attribut `type` pour classer l’avis dans les catégories « Information », « Avertissement », « Danger » ou « Succès ». Ce choix détermine le style visuel de l’avis et communique l’urgence ou l’importance du message au public. |
There was a problem hiding this comment.
Similar comment about: « Information », « Avertissement », « Danger » ou « Succès ».
Can we flag them as code, have them in lowercase and keep them in English so they match the actual values users need to pass to the component?
There was a problem hiding this comment.
Does this work for the french text @SmartMouthWords ?
| Utilisez l’attribut `type` pour classer l’avis dans les catégories « Information », « Avertissement », « Danger » ou « Succès ». Ce choix détermine le style visuel de l’avis et communique l’urgence ou l’importance du message au public. | |
| Utilisez l’attribut `type` pour classer l’avis dans les catégories `info` (Information), `warning` (Avertissement), `danger` (Danger) ou `success` (Succès). Ce choix détermine le style visuel de l’avis et communique l’urgence ou l’importance du message au public. |
Here is an preview:
Utilisez l’attribut
typepour classer l’avis dans les catégoriesinfo(Information),warning(Avertissement),danger(Danger) ousuccess(Succès). Ce choix détermine le style visuel de l’avis et communique l’urgence ou l’importance du message au public.
src/fr/composants/avis/code.md
Outdated
| ### Précisez le titre et le niveau de l’en-tête de l’avis | ||
|
|
||
| Utilisez l’attribut `notice-title` pour créer un titre clair et informatif pour l’avis. Veillez à ce que le titre transmette l’objectif du message. | ||
| Utilisez `notice-title-tag` pour définir le bon niveau de titre pour la carte. Suivez une hiérarchie correcte et ordonnée pour fournir une expérience équitable aux personnes utilisant des technologies d’assistance. |
There was a problem hiding this comment.
Same comment about the heading level link.
src/fr/composants/avis/design.md
Outdated
| ## Structure de la Avis | ||
|
|
||
| <ol class="anatomy-list"> | ||
| <li><strong>list</strong></li> |
There was a problem hiding this comment.
Oops found one more - can we remove this list item?
There was a problem hiding this comment.
I found this behaviour, which might be from the component itself.
Changing the title tag
Changing the `notice-title-tag`, on the code, looks fine, but the rendered title does not look correct. Here's a video of me changing it and not seeing a visual change to the title.Screenshare.-.2024-12-12.2_25_07.PM.mp4
Summary | Résumé
Add documentation for the
gcds-noticecomponent.To-do
gcds-notice.