Publish Notice component

[adorayi]

📇 User story

Publish the pieces needed for the Notice component

✅ Definition of Done / Outcomes

Design

• Component in figma EN is merged
  • Figma file
• Component in figma FR is merged

Content

• Done when content for the documentation, design and code templates has been approved
• Done when the content badge status has been set to "Published"

Development

• Done when development has approved and merged the component PR in github
• Done when the component packages has been released on NPM

Documentation

• Done when designs (EN and FR) has been published, with the links (github, figma) updated on the documentation website
• Done when documentation has been published on the website (guidance - code, design, use case)

📜 Acceptance criteria

• Design ticket is finalized and ready for merge [Design changes: swap label for icons on the notice component #1135]
• Develop ticket is finalized and ready for merge [Development: Notice component #269]
  • feat: New gcds-notice component gcds-components#627
• Documentation and Content ticket is finalized and ready for publishing [Content: Notice component documentation #963]
• Documentation is finalized and ready for merge [Documentation: Notice component #1287]

📝 More info

⛔️ Blockers

[ethanWallace]

Awaiting translation of Notice documentation

[SmartMouthWords]

Translation expected by November 27

[daine]

Blocked by the content and guidance ticket

• Content: Notice component documentation #963

[SmartMouthWords]

Bilingual review complete. Ready to publish.
French version
English version

[SmartMouthWords]

Text for the notice on the component overview page
EN: "A short, prominent message that’s part of the page content."
FR: "Un message court et bien visible qui fait partie du contenu de la page."

[SmartMouthWords]

Alt text for components overview Notice thumbnail:
"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."
French:
"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."

[daine]

This is done, released and published