Merge pull request #1819 from SpareBank1/develop_fix-system-message-t…

…ranslations fix(ffe-system-message-react): use locale for translations
SpareBank1 · Mar 5, 2024 · 91b7ee5 · 91b7ee5
2 parents ac1b38c + a2c2df6
commit 91b7ee5
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 19 deletions.
diff --git a/packages/ffe-system-message-react/src/SystemErrorMessage.js b/packages/ffe-system-message-react/src/SystemErrorMessage.js
@@ -1,21 +1,23 @@
 import React from 'react';
 import { func, string, number, node, oneOf, bool } from 'prop-types';
 import { Icon } from '@sb1/ffe-icons-react';
+import texts from './texts';
 
 import SystemMessage from './SystemMessage';
 
 export default function SystemErrorMessage(props) {
-    const { alert, ...rest } = props;
+    const { alert, locale, ...rest } = props;
 
     const priorityHighIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+';
     return (
         <SystemMessage
             modifier="error"
-            aria-label="Feilmelding"
+            aria-label={texts[locale].error.ariaLabel}
+            locale={locale}
             icon={
                 <Icon
-                    ariaLabel="Utropstegn"
+                    ariaLabel={texts[locale].error.icon}
                     fileUrl={priorityHighIconSmall}
                     size="sm"
                 />

diff --git a/packages/ffe-system-message-react/src/SystemInfoMessage.js b/packages/ffe-system-message-react/src/SystemInfoMessage.js
@@ -1,19 +1,34 @@
 import React from 'react';
 import { Icon } from '@sb1/ffe-icons-react';
-
+import texts from './texts';
 import SystemMessage from './SystemMessage';
+import { oneOf } from 'prop-types';
 
-export default function SystemInfoMessage(props) {
+export default function SystemInfoMessage({ locale, ...rest }) {
     const infoIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg==';
     return (
         <SystemMessage
             modifier="info"
-            aria-label="Infomelding"
+            aria-label={texts[locale].info.ariaLabel}
+            locale={locale}
             icon={
-                <Icon ariaLabel="Infotegn" size="sm" fileUrl={infoIconSmall} />
+                <Icon
+                    ariaLabel={texts[locale].info.icon}
+                    size="sm"
+                    fileUrl={infoIconSmall}
+                />
             }
-            {...props}
+            {...rest}
         />
     );
 }
+
+SystemInfoMessage.defaultProps = {
+    locale: 'nb',
+};
+
+SystemInfoMessage.propTypes = {
+    /** 'nb', 'nn', or 'en' */
+    locale: oneOf(['en', 'nb', 'nn']),
+};
diff --git a/packages/ffe-system-message-react/src/SystemMessage.js b/packages/ffe-system-message-react/src/SystemMessage.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { func, string, number, node, oneOf, bool } from 'prop-types';
 import classNames from 'classnames';
 import { Icon } from '@sb1/ffe-icons-react';
+import texts from './texts';
 
 class SystemMessage extends Component {
     constructor() {
@@ -69,7 +70,7 @@ class SystemMessage extends Component {
                     </span>
                     <p className="ffe-system-message__content">{children}</p>
                     <button
-                        aria-label={locale === 'en' ? 'Close' : 'Lukk'}
+                        aria-label={texts[locale].close}
                         className="ffe-system-message__close"
                         onClick={this.close}
                         type="button"

diff --git a/packages/ffe-system-message-react/src/SystemNewsMessage.js b/packages/ffe-system-message-react/src/SystemNewsMessage.js
@@ -1,19 +1,34 @@
 import React from 'react';
 import { Icon } from '@sb1/ffe-icons-react';
-
+import texts from './texts';
 import SystemMessage from './SystemMessage';
+import { oneOf } from 'prop-types';
 
-export default function SystemNewsMessage(props) {
+export default function SystemNewsMessage({ locale, ...rest }) {
     const infoIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg==';
     return (
         <SystemMessage
             modifier="news"
-            aria-label="Nyhetsmelding"
+            aria-label={texts[locale].news.ariaLabel}
+            locale={locale}
             icon={
-                <Icon ariaLabel="Infotegn" size="sm" fileUrl={infoIconSmall} />
+                <Icon
+                    ariaLabel={texts[locale].news.icon}
+                    size="sm"
+                    fileUrl={infoIconSmall}
+                />
             }
-            {...props}
+            {...rest}
         />
     );
 }
+
+SystemNewsMessage.defaultProps = {
+    locale: 'nb',
+};
+
+SystemNewsMessage.propTypes = {
+    /** 'nb', 'nn', or 'en' */
+    locale: oneOf(['en', 'nb', 'nn']),
+};
diff --git a/packages/ffe-system-message-react/src/SystemSuccessMessage.js b/packages/ffe-system-message-react/src/SystemSuccessMessage.js
@@ -1,17 +1,34 @@
 import React from 'react';
 import { Icon } from '@sb1/ffe-icons-react';
-
+import texts from './texts';
 import SystemMessage from './SystemMessage';
+import { oneOf } from 'prop-types';
 
-export default function SystemSuccessMessage(props) {
+export default function SystemSuccessMessage({ locale, ...rest }) {
     const checkIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+';
     return (
         <SystemMessage
             modifier="success"
-            aria-label="Suksessmelding"
-            icon={<Icon ariaLabel="Hake" size="sm" fileUrl={checkIconSmall} />}
-            {...props}
+            aria-label={texts[locale].success.ariaLabel}
+            locale={locale}
+            icon={
+                <Icon
+                    ariaLabel={texts[locale].success.icon}
+                    size="sm"
+                    fileUrl={checkIconSmall}
+                />
+            }
+            {...rest}
         />
     );
 }
+
+SystemSuccessMessage.defaultProps = {
+    locale: 'nb',
+};
+
+SystemSuccessMessage.propTypes = {
+    /** 'nb', 'nn', or 'en' */
+    locale: oneOf(['en', 'nb', 'nn']),
+};
diff --git a/packages/ffe-system-message-react/src/texts.js b/packages/ffe-system-message-react/src/texts.js
@@ -0,0 +1,59 @@
+const nb = {
+    close: 'Lukk',
+    error: {
+        ariaLabel: 'Feilmelding',
+        icon: 'Utropstegn',
+    },
+    info: {
+        ariaLabel: 'Infomelding',
+        icon: 'Infotegn',
+    },
+    success: {
+        ariaLabel: 'Suksessmelding',
+        icon: 'Hake',
+    },
+    news: {
+        ariaLabel: 'Nyhetsmelding',
+        icon: 'Infotegn',
+    },
+};
+const nn = {
+    close: 'Lukk',
+    error: {
+        ariaLabel: 'Feilmelding',
+        icon: 'Utropsteikn',
+    },
+    info: {
+        ariaLabel: 'Infomelding',
+        icon: 'Infoteikn',
+    },
+    success: {
+        ariaLabel: 'Suksessmelding',
+        icon: 'Hake',
+    },
+    news: {
+        ariaLabel: 'Nyheitsmelding',
+        icon: 'Infoteikn',
+    },
+};
+const en = {
+    close: 'Close',
+    error: {
+        ariaLabel: 'Error message',
+        icon: 'Exclamation mark',
+    },
+    info: {
+        ariaLabel: 'Info message',
+        icon: 'Info sign',
+    },
+    success: {
+        ariaLabel: 'Success message',
+        icon: 'Check mark',
+    },
+    news: {
+        ariaLabel: 'News message',
+        icon: 'Info sign',
+    },
+};
+
+export default { nb, nn, en };