feat: Add gcds-notice documentation

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 <br>`<gcds-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" %}
+<gcds-notice
+  type="success"
+  notice-title="Success notice title"
+  notice-title-tag="h2"
+>
+  <gcds-text margin-bottom="0">This is a success message.</gcds-text>
+</gcds-notice>
+{% endcomponentPreview %}

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 notice title. Follow a correct and orderly heading hierarchy to make it equal for people who use assistive technologies.
+
+{% include "partials/getcode.njk" %}
+
+<iframe
+  title="Overview of gcds-notice properties and events."
+  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-notice--events-properties&lang=en"
+  width="1200"
+  height="1100"
+  style="display: block; margin: 0 auto;"
+  frameBorder="0"
+  allow="clipboard-write"
+></iframe>

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
+
+<ol class="anatomy-list">
+  <li><strong>Guide line</strong> indicates visually the notice’s start and end.</li>
+  <li><strong>Icon</strong> indicates the type of notice.</li>
+  <li><strong>Title</strong> specifies the notice topic.</li>
+  <li><strong>Message</strong> provides the notice details. </li>
+</ol>
+
+<img class="b-sm b-default p-300" src="/images/en/components/anatomy/gcds-notice-anatomy.svg" alt="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.

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. 
+
+<article class="bg-full-width bg-primary text-light pt-600 pb-300 my-600">
+  <h2 class="mt-0 mb-300">Related components</h2>
+
+<a href="{{links.errorMessage}}" class="link-light">Error message</a> or <a href="{{links.errorSummary}}" class="link-light">error summary</a> 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.
+
+</article>
+
+## 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.
+
+<gcds-notice
+  notice-title="Current status of the call for applications: Closed"
+  notice-title-tag="h4"
+  type="info"
+>
+  <gcds-text margin-bottom="0">Thank you for your interest in Canada Summer Jobs. Applications are now closed.</gcds-text>
+</gcds-notice>
+
+### Success
+
+Use the success notice type to:
+
+- Communicate the successful completion of a task.
+- Reinforce positive outcomes or confirmations within the content.
+
+<gcds-notice
+  notice-title="Your request for publicly available data from the list of charities has been successful"
+  notice-title-tag="h4"
+  type="success"
+>
+  <gcds-text margin-bottom="0">Processing your request may take up to four (4) weeks. We’ll contact you if we need more information.</gcds-text>
+</gcds-notice>
+
+### 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.
+
+<gcds-notice
+  notice-title="Changes to impaired driving and cannabis-related crime laws"
+  notice-title-tag="h4"
+  type="warning"
+>
+  <gcds-text margin-bottom="0">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.</gcds-text>
+</gcds-notice>
+
+### 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.
+
+<gcds-notice
+  notice-title="If pregnant or considering pregnancy - Notice regarding both partners"
+  notice-title-tag="h4"
+  type="danger"
+>
+  <gcds-text margin-bottom="0">Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.</gcds-text>
+</gcds-notice>

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",

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 <br>`<gcds-notice>`
+
+_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" %}
+<gcds-notice
+  type="success"
+  notice-title="Titre de l'avis succès"
+  notice-title-tag="h2"
+>
+  <gcds-text margin-bottom="0">Il s'agit d'un message de succès.</gcds-text>
+</gcds-notice>
+{% endcomponentPreview %}

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.
+
+<article class="bg-full-width bg-primary text-light pt-600 pb-300 my-600">
+  <h2 class="mt-0 mb-300">Composants connexes</h2>
+
+<a href="{{ links.errorMessage }}" class="link-light">Message d’erreur</a> ou <a href="{{ links.errorSummary }}" class="link-light">résumé des erreurs</a> 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.  
+
+</article>
+
+## 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.
+
+<gcds-notice
+  notice-title="État actuel de l’appel de candidatures : Fermé"
+  notice-title-tag="h4"
+  type="info"
+>
+  <gcds-text margin-bottom="0">Nous vous remercions de votre intérêt à l’égard du programme Emplois d’été Canada. L’appel de candidatures est maintenant fermé.</gcds-text>
+</gcds-notice>
+
+### 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.
+
+<gcds-notice
+  notice-title="Votre demande de données accessibles au public à partir de la liste des organismes de bienfaisance a été acceptée."
+  notice-title-tag="h4"
+  type="success"
+>
+  <gcds-text margin-bottom="0">Le traitement de votre demande peut prendre jusqu’à quatre (4) semaines. Nous communiquerons avec vous si nous avons besoin de plus amples renseignements.</gcds-text>
+</gcds-notice>
+
+### 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.
+
+<gcds-notice
+  notice-title="Modifications aux lois sur la conduite avec facultés affaiblies et la criminalité liée au cannabis"
+  notice-title-tag="h4"
+  type="warning"
+>
+  <gcds-text margin-bottom="0">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.</gcds-text>
+</gcds-notice>
+
+### 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.
+
+<gcds-notice
+  notice-title="Si vous êtes enceinte ou envisagez de concevoir un enfant – Avis concernant les deux partenaires"
+  notice-title-tag="h4"
+  type="danger"
+>
+  <gcds-text margin-bottom="0">Évitez de voyager au Costa Rica si vous êtes enceinte ou prévoyez de concevoir un enfant au cours des trois prochains mois.</gcds-text>
+</gcds-notice>

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 `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.
+
+### 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 l'avis. 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" %}
+
+<iframe
+  title="Survol des propriétés et des évènements relatifs à gcds-notice."
+  src="https://cds-snc.github.io/gcds-components/iframe.html?viewMode=docs&demo=true&singleStory=true&id=components-notice--events-properties&lang=fr"
+  width="1200"
+  height="1100"
+  style="display: block; margin: 0 auto;"
+  frameBorder="0"
+  allow="clipboard-write"
+></iframe>