diff --git a/src/en/components/notice/base.md b/src/en/components/notice/base.md new file mode 100644 index 000000000..f179feb4b --- /dev/null +++ b/src/en/components/notice/base.md @@ -0,0 +1,26 @@ +--- +layout: 'layouts/base.njk' +github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-notice +figma: https://www.figma.com/design/mh2maMG2NBtk41k1O1UGHV/GC-Design-System?node-id=23721-2461&node-type=canvas&t=IEaHSvrdWCzlv6iL-0 +permalink: false +tags: ['noticeEN', 'header'] +--- + +# Notice
`` + +_Also called: Contextual alert._ + +The notice is a short, prominent message that’s part of the page content. + +{% docLinks locale stage figma github %} +{% enddocLinks %} + +{% componentPreview "Notice component preview" %} + + This is a success message. + +{% endcomponentPreview %} diff --git a/src/en/components/notice/code.md b/src/en/components/notice/code.md new file mode 100644 index 000000000..78d12d5c7 --- /dev/null +++ b/src/en/components/notice/code.md @@ -0,0 +1,34 @@ +--- +title: Notice +layout: 'layouts/component-documentation.njk' +translationKey: 'noticeCode' +tags: ['noticeEN', 'code'] +date: "git Last Modified" +--- + +## Build a Notice + +Use the notice component to deliver important context-specific messages to people. The notice communicates varying levels of urgency and meaning using content and visual cues. + +## Accessibility and Code Guidance + +### 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. + +### 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](/en/components/heading/design/#order-heading-levels-hierarchically) for the card title. Follow a correct and orderly heading hierarchy to make it equal for people who use assistive technologies. + +{% include "partials/getcode.njk" %} + + diff --git a/src/en/components/notice/design.md b/src/en/components/notice/design.md new file mode 100644 index 000000000..3ebf4b150 --- /dev/null +++ b/src/en/components/notice/design.md @@ -0,0 +1,48 @@ +--- +title: Notice +layout: 'layouts/component-documentation.njk' +translationKey: 'noticeDesign' +tags: ['noticeEN', 'design'] +date: "git Last Modified" +--- + +## Notice anatomy + +
    +
  1. Guide line indicates visually the notice’s start and end.
    2. +
  2. Icon indicates the type of notice.
    3. +
  3. Title specifies the notice topic.
    4. +
  4. Message provides the notice details.
    5. +
+ +A notice anatomy containing the guide line and the icon on the left of the title in bold and the message. + +## Design and accessibility + +### Choose the appropriate notice type + +- Refer to the use case tab for guidelines on when to use each notice type. + +### Write concise and descriptive headings and messages + +- Write a meaningful heading that’s short and simple to highlight the goal of the notice. +- In the heading, use words like “warning” and “success” that match the meaning conveyed by the icon and colour of the notice type you selected. +- Craft the message (below the heading) to be brief and impactful, ideally within three sentences. +- Save the details for the main content area of a page. The notice is meant to attract attention and create an information trail for anyone who needs to know more. + +### Use links to guide people to additional details if necessary + +- Use links to connect to additional details for a person who wants to read more. +- Opt to create a dedicated page for more detailed content and use a short message in a notice to draw interested people to that page. +- Avoid long notices. They can be distracting and frustrating. + +### Use notices sparingly to avoid visual fatigue + +- Limit the number of notices on a page. People become less receptive to notices and warning messages the more often they encounter them. +- Make sure to remove notices once they’ve served their purpose. + +### Place notices where you’d place a paragraph + +- Add a notice where you’d add an important paragraph (or section) on the page. +- Consider placing the notice at the top of the page or content section to avoid it being overlooked. +- Avoid using a notice within a form component, like an input or a checkbox. diff --git a/src/en/components/notice/use-case.md b/src/en/components/notice/use-case.md new file mode 100644 index 000000000..f042c677d --- /dev/null +++ b/src/en/components/notice/use-case.md @@ -0,0 +1,102 @@ +--- +title: Notice +layout: "layouts/component-documentation.njk" +eleventyNavigation: + key: noticeEN + title: Notice + locale: en + parent: componentsEN + otherNames: Contextual alert + description: A short, prominent message that’s part of the page content. + thumbnail: /images/common/components/preview-notice.svg + alt: A blue vertical line truncated at the top by a blue circle, representing the guide line and icon, sits to the left of a stack of three thick grey lines. The top dark grey line represents the heading and the other two represent the lines of text. + state: published +translationKey: "notice" +tags: ['noticeEN', 'usage'] +permalink: /en/components/notice/ +date: "git Last Modified" +--- + +## Problems notice solves + +Use notice to: + +- Communicate updates, warnings, and confirmations about the tasks on a page or about an activity or event that could affect people using the service. +- Make key messages stand out within page content, through sparing use. +- Provide context or additional information on the page content for better understanding. + +
+

Related components

+ +Error message or error summary for errors in a form field, on a page, or in a flow. + +Banner for a message that applies to part of or the entire site or product. + +
+ +## Notice types + +Set the notice type based on the message context and corresponding visual appearance. + +### Information + +Use the information type to: + +- Provide supplementary information to enhance the reader’s understanding of the surrounding content. +- To offer tips or additional context that’s helpful in completing the main tasks on the page. +- Communicate non-critical information that’s important for the job or task a person would want to do. + + + Thank you for your interest in Canada Summer Jobs. Applications are now closed. + + +### Success + +Use the success notice type to: + +- Communicate the successful completion of a task. +- Reinforce positive outcomes or confirmations within the content. + + + Processing your request may take up to four (4) weeks. We’ll contact you if we need more information. + + +### Warning + +Use the warning notice type to: + +- Caution people about issues or considerations when there’s no immediate need for action. +- Inform people about changes, alterations to services, or other impactful but non-critical updates. +- Draw attention to information about future changes or possible implications to health and safety, security, and laws. + + + New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada. + + +### Danger + +Use the danger notice type to: + +- Highlight content that people must be aware of due to its severity and that could have major negative impacts if ignored. +- Emphasize an issue or news that has serious implications to health and safety, security, and laws. Include a link to the most current information. +- Flag when a person needs to take action right away and provide a means to do so, like a link. + + + Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months. + diff --git a/src/en/en.json b/src/en/en.json index df654297d..68ed4212a 100644 --- a/src/en/en.json +++ b/src/en/en.json @@ -35,6 +35,7 @@ "input": "/en/components/input", "langToggle": "/en/components/language-toggle/", "link": "/en/components/link", + "notice": "/en/components/notice", "pagination": "/en/components/pagination", "radio": "/en/components/radio", "radioGroup": "/en/components/radio-group", diff --git a/src/fr/composants/avis/base.md b/src/fr/composants/avis/base.md new file mode 100644 index 000000000..3960d4b41 --- /dev/null +++ b/src/fr/composants/avis/base.md @@ -0,0 +1,26 @@ +--- +layout: 'layouts/base.njk' +github: https://github.com/cds-snc/gcds-components/tree/main/packages/web/src/components/gcds-notice +figma: https://www.figma.com/design/o4SguSZdar2CCFzSkWNrmB/Syst%C3%A8me-de-design-GC?node-id=2002-8&node-type=canvas&t=Noeefrm7sr1qAV8J-0 +permalink: false +tags: ['noticeFR', 'header'] +--- + +# Avis
`` + +_Autres noms : Alerte contextuelle._ + +L’avis est un message court et bien visible qui fait partie du contenu de la page. + +{% docLinks locale stage figma github %} +{% enddocLinks %} + +{% componentPreview "Aperçu du composant de Avis" %} + + Il s'agit d'un message de succès. + +{% endcomponentPreview %} diff --git a/src/fr/composants/avis/cas-dutilisation.md b/src/fr/composants/avis/cas-dutilisation.md new file mode 100644 index 000000000..4522804c4 --- /dev/null +++ b/src/fr/composants/avis/cas-dutilisation.md @@ -0,0 +1,102 @@ +--- +title: Avis +layout: "layouts/component-documentation.njk" +eleventyNavigation: + key: noticeFR + title: Avis + locale: fr + parent: componentsFR + otherNames: Alerte contextuelle + description: Un message court et bien visible qui fait partie du contenu de la page + thumbnail: /images/common/components/preview-notice.svg + alt: Une ligne bleue verticale tronquée par un cercle bleu, représentant la ligne guide et l’icône, se situe à gauche de deux épaisses lignes grises pâle alignées sous une ligne grise foncée représentant un titres et des lignes de texte. + state: published +translationKey: "notice" +tags: ['noticeFR', 'usage'] +permalink: /fr/composants/avis/ +date: "git Last Modified" +--- + +## Problèmes résolus par les avis + +Utilisez les avis pour : + +- Communiquer des mises à jour, des avertissements et des confirmations concernant les tâches d’une page ou concernant une activité ou un évènement pouvant affecter les personnes utilisant le service. +- Mettre en avant des messages clés au sein du contenu d’une page, grâce à une utilisation modérée. +- Fournir du contexte ou des renseignements supplémentaires concernant le contenu de la page pour une meilleure compréhension. + +
+

Composants connexes

+ +Message d’erreur ou résumé des erreurs pour des erreurs au sein d’un champ de formulaire, d’une page ou d’un flux. + +Bannière pour un message s’appliquant à une partie ou à l’ensemble du site ou du produit. + +
+ +## Types d’avis + +Définissez le type d’avis selon le contexte du message et l’apparence visuelle correspondante. + +### Information + +Utilisez le type d’avis « Information » pour : + +- Fournir des renseignements supplémentaires pour mieux faire comprendre au lectorat le contenu environnant. +- Offrir des conseils ou davantage de contexte pour aider le lectorat à réaliser les principales tâches de la page. +- Communiquer des renseignements non essentiels importants pour la réalisation de la tâche qu’une personne pourrait chercher à accomplir. + + + Nous vous remercions de votre intérêt à l’égard du programme Emplois d’été Canada. L’appel de candidatures est maintenant fermé. + + +### Succès + +Utilisez le type d’avis « Succès » pour : + +- Indiquer la réussite d’une tâche. +- Renforcer les résultats positifs ou les confirmations au sein du contenu. + + + Le traitement de votre demande peut prendre jusqu’à quatre (4) semaines. Nous communiquerons avec vous si nous avons besoin de plus amples renseignements. + + +### Avertissement + +Utilisez les avis de type « Avertissement » pour : + +- Avertir les gens de problèmes ou de considérations dans des cas où il n’est pas nécessaire d’agir immédiatement. +- Informer les gens de changements, de modifications apportées aux services ou d’autres mises à jour importantes, mais non critiques. +- Attirer l’attention sur des renseignements concernant de futurs changements ou sur des répercussions possibles sur la santé, la sécurité et les lois. + + + Les nouvelles peines pour conduite avec facultés affaiblies et infractions liées au cannabis pourraient avoir une incidence sur votre statut d’immigrant au Canada. Si vous commettez l’un de ces crimes, vous ne pourrez peut-être pas venir au Canada ou y rester. + + +### Danger + +Utilisez le type d’avis « Danger » pour : + +- Mettre en évidence du contenu dont les gens doivent prendre connaissance compte tenu de sa gravité, sous peine de s’exposer à des incidences négatives majeures. +- Mettre l’accent sur une question ou des nouvelles ayant de graves répercussions dans les domaines de la santé, de la sécurité et de la loi. Inclure un lien vers les renseignements les plus récents. +- Signaler à une personne qu’elle doit agir immédiatement et lui donner les moyens de le faire, par exemple en lui fournissant un lien. + + + Évitez de voyager au Costa Rica si vous êtes enceinte ou prévoyez de concevoir un enfant au cours des trois prochains mois. + diff --git a/src/fr/composants/avis/code.md b/src/fr/composants/avis/code.md new file mode 100644 index 000000000..f00b3a6a5 --- /dev/null +++ b/src/fr/composants/avis/code.md @@ -0,0 +1,34 @@ +--- +title: Avis +layout: 'layouts/component-documentation.njk' +translationKey: 'noticeCode' +tags: ['noticeFR', 'code'] +date: "git Last Modified" +--- + +## Créer un avis + +Utilisez le composant d’avis pour transmettre aux gens des messages importants et propres au contexte. L’avis communique divers niveaux d’urgence et différents messages à l’aide de contenu et d’éléments visuels. + +## Accessibilité et lignes directrices relatives au code + +### 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. + +### 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](/fr/composants/titre/design/#classez-les-niveaux-de-titre-de-maniere-hierarchique) 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. + +{% include "partials/getcode.njk" %} + + diff --git a/src/fr/composants/avis/design.md b/src/fr/composants/avis/design.md new file mode 100644 index 000000000..ec911178d --- /dev/null +++ b/src/fr/composants/avis/design.md @@ -0,0 +1,48 @@ +--- +title: Avis +layout: 'layouts/component-documentation.njk' +translationKey: 'noticeDesign' +tags: ['noticeFR', 'design'] +date: "git Last Modified" +--- + +## Structure de la Avis + +
    +
  1. La ligne guide indique visuellement le début et la fin de l’avis.
    2. +
  2. L'icône indique le type d’avis.
    3. +
  3. Le titre précise le sujet de l’avis.
    4. +
  4. Le message fournit les détails de l’avis.
    5. +
+ +Une structure de l’avis contenant : la ligne guide et l’icône à gauche du titre en gras et du message. + +## Design et accessibilité + +### Choisir le type d’avis approprié + +- Référez-vous aux cas d’utilisation pour savoir quand utiliser chaque type d’avis. + +### Rédigez des titres et des messages concis et descriptifs + +- Rédigez un titre significatif, court et simple pour souligner l’objectif de l’avis. +- Dans le titre, utilisez des titres comme « Avertissement » et « Succès » correspondant au sens transmis par l’icône et la couleur du type d’avis sélectionné. +- Rédigez un message (en dessous du titre) bref et percutant. Idéalement, faites en sorte qu’il ne dépasse pas trois phrases. +- Enregistrez les détails pour la zone de contenu principale d’une page. L’avis doit attirer l’attention et créer une « piste d’information » pour toute personne ayant besoin d’en savoir plus. + +### Au besoin, utilisez des liens pour guider les gens vers des renseignements supplémentaires + +- Utilisez des liens pour guider les personnes souhaitant en savoir plus vers des renseignements supplémentaires. +- Choisissez de créer une page particulière destinée à du contenu plus détaillé et utilisez un message bref dans un avis pour attirer les personnes intéressées vers cette page. +- Évitez les longs avis. Ils peuvent distraire et frustrer les gens. + +### Utilisez les avis avec modération pour éviter de générer une fatigue visuelle + +- Limitez le nombre d’avis par page. Plus les gens rencontrent des avis et messages d’avertissement, moins ils y sont réceptifs. +- Veillez à retirer les avis une fois qu’ils ne servent plus. + +### Placez les avis à l’endroit où vous placeriez un paragraphe + +- Ajoutez un avis à l’endroit où vous ajouteriez un paragraphe important (ou une section importante) sur la page. +- Envisagez de placer un avis au haut de la page ou de la section de contenu pour éviter qu’il ne soit négligé. +- Évitez d’utiliser un avis dans un composant de formulaire, comme un champ de saisie ou une case à cocher. diff --git a/src/fr/fr.json b/src/fr/fr.json index a263585b3..893c5a242 100644 --- a/src/fr/fr.json +++ b/src/fr/fr.json @@ -35,6 +35,7 @@ "input": "/fr/composants/champ-de-saisie", "langToggle": "/fr/composants/bascule-de-langue/", "link": "/fr/composants/lien", + "notice": "/fr/composants/avis", "pagination": "/fr/composants/pagination", "radioGroup": "/fr/composants/groupe-de-boutons-radio", "radio": "/fr/composants/bouton-radio", diff --git a/src/images/common/components/preview-notice.svg b/src/images/common/components/preview-notice.svg new file mode 100644 index 000000000..bf15966d1 --- /dev/null +++ b/src/images/common/components/preview-notice.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/images/en/components/anatomy/gcds-notice-anatomy.svg b/src/images/en/components/anatomy/gcds-notice-anatomy.svg new file mode 100644 index 000000000..126625b05 --- /dev/null +++ b/src/images/en/components/anatomy/gcds-notice-anatomy.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/fr/components/anatomy/gcds-notice-anatomy.svg b/src/images/fr/components/anatomy/gcds-notice-anatomy.svg new file mode 100644 index 000000000..ccd914ced --- /dev/null +++ b/src/images/fr/components/anatomy/gcds-notice-anatomy.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +