diff --git a/packages/web/src/components/gcds-notice/gcds-notice.tsx b/packages/web/src/components/gcds-notice/gcds-notice.tsx index 15e968503..374c16297 100644 --- a/packages/web/src/components/gcds-notice/gcds-notice.tsx +++ b/packages/web/src/components/gcds-notice/gcds-notice.tsx @@ -1,5 +1,6 @@ import { Component, Element, Host, Prop, State, h } from '@stencil/core'; import { assignLanguage, observerConfig, logError } from '../../utils/utils'; +import i18n from './i18n/i18n'; @Component({ tag: 'gcds-notice', @@ -139,6 +140,7 @@ export class GcdsNotice { margin-bottom="100" class="notice__heading" > + {i18n[this.lang][type]} {noticeTitle} diff --git a/packages/web/src/components/gcds-notice/i18n/i18n.js b/packages/web/src/components/gcds-notice/i18n/i18n.js new file mode 100644 index 000000000..71dc245bd --- /dev/null +++ b/packages/web/src/components/gcds-notice/i18n/i18n.js @@ -0,0 +1,16 @@ +const I18N = { + en: { + success: 'Success: ', + info: 'Information: ', + warning: 'Warning: ', + danger: 'Danger: ' + }, + fr: { + success: 'Succès : ', + info: 'Information : ', + warning: 'Avertissement : ', + danger: 'Danger : ' + }, +}; + +export default I18N; diff --git a/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx b/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx index e7d87c222..3da50e3b3 100644 --- a/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx +++ b/packages/web/src/components/gcds-notice/test/gcds-notice.spec.tsx @@ -16,6 +16,35 @@ describe('gcds-notice', () => {
+ Success: + GC Design System notice + + +
+ + + + Provide additonal information + + + `); + }); + + it('renders - success type - french', async () => { + const page = await newSpecPage({ + components: [GcdsNotice], + html: ` + Provide additonal information + `, + }); + expect(page.root) + .toEqualHtml(` + +
+ +
+ + Succès : GC Design System notice @@ -43,6 +72,35 @@ describe('gcds-notice', () => {
+ Danger: + GC Design System notice + + +
+
+ + + Provide additonal information + + + `); + }); + + it('renders - danger type - french', async () => { + const page = await newSpecPage({ + components: [GcdsNotice], + html: ` + Provide additonal information + `, + }); + expect(page.root) + .toEqualHtml(` + +
+ +
+ + Danger : GC Design System notice @@ -70,6 +128,35 @@ describe('gcds-notice', () => {
+ Information: + GC Design System notice + + +
+
+ + + Provide additonal information + + + `); + }); + + it('renders - info type - french', async () => { + const page = await newSpecPage({ + components: [GcdsNotice], + html: ` + Provide additonal information + `, + }); + expect(page.root) + .toEqualHtml(` + +
+ +
+ + Information : GC Design System notice @@ -97,6 +184,35 @@ describe('gcds-notice', () => {
+ Warning: + GC Design System notice + + +
+
+ + + Provide additonal information + + + `); + }); + + it('renders - warning type - french', async () => { + const page = await newSpecPage({ + components: [GcdsNotice], + html: ` + Provide additonal information + `, + }); + expect(page.root) + .toEqualHtml(` + +
+ +
+ + Avertissement : GC Design System notice @@ -124,6 +240,7 @@ describe('gcds-notice', () => {
+ Warning: GC Design System notice @@ -151,6 +268,7 @@ describe('gcds-notice', () => {
+ Warning: GC Design System notice @@ -178,6 +296,7 @@ describe('gcds-notice', () => {
+ Warning: GC Design System notice