@transferwise/components 46.76.0 → 46.78.0

package/src/avatar/Avatar.tsx

@@ -65,9 +65,7 @@ const Avatar: React.FC<AvatarProps> = ({
   const size = backwardsCompatibleSize(sizeFromProps);
 
   return (
-    <Circle
-      size={size}
-      fixedSize
+    <div
       className={clsx('tw-avatar', className, `tw-avatar--${size}`, `tw-avatar--${type}`, {
         'tw-avatar--outlined': outlined,
         'tw-avatar--branded': Boolean(backgroundColorFromSeed),
@@ -75,17 +73,15 @@ const Avatar: React.FC<AvatarProps> = ({
       })}
       aria-label={ariaLabel}
     >
-      <Circle
-        size={size}
-        fixedSize
+      <div
         className="tw-avatar__content"
         style={{
           backgroundColor: backgroundColor || backgroundColorFromSeed,
         }}
       >
         {children}
-      </Circle>
-    </Circle>
+      </div>
+    </div>
   );
 };
 

package/src/avatarWrapper/__snapshots__/AvatarWrapper.spec.tsx.snap

@@ -2,12 +2,10 @@
 
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType AND avatar url renders the image 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--thumbnail"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--thumbnail"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <img
       alt=""
@@ -19,12 +17,10 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as BUSINESS profile type with an icon 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <span
       class="tw-icon tw-icon-briefcase "
@@ -50,12 +46,10 @@ exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar w
 
 exports[`FlowNavigationAvatar with a name AND profileType FlowNavigationAvatar with a name AND profileType renders as PERSONAL profile type with an icon 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <span
       class="tw-icon tw-icon-person "
@@ -87,12 +81,10 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
     class="tw-badge__children"
   >
     <div
-      class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-      style="--circle-size: 48px;"
+      class="tw-avatar tw-avatar--48 tw-avatar--icon"
     >
       <div
-        class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-        style="--circle-size: 48px;"
+        class="tw-avatar__content"
       >
         <span
           class="tw-icon tw-icon-person "
@@ -116,8 +108,7 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
     </div>
   </div>
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-badge__content"
-    style="--circle-size: 24px;"
+    class="tw-badge__content"
   >
     <img
       alt="badge alt text"
@@ -129,12 +120,10 @@ exports[`FlowNavigationAvatar with a name AND profileType with a badge url passe
 
 exports[`FlowNavigationAvatar with a name AND profileType with nothing passed renders a personal icon 1`] = `
 <div
-  class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--icon"
-  style="--circle-size: 48px;"
+  class="tw-avatar tw-avatar--48 tw-avatar--icon"
 >
   <div
-    class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-    style="--circle-size: 48px;"
+    class="tw-avatar__content"
   >
     <span
       class="tw-icon tw-icon-person "

package/src/badge/Badge.css

@@ -23,10 +23,16 @@
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
+  width: var(--badge-size);
+  height: var(--badge-size);
   bottom: 0;
   right: 0;
   box-sizing: border-box;
+  border-radius: 50%;
   text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;

package/src/badge/Badge.less

@@ -52,11 +52,17 @@
 
   & > &__content {
     position: absolute;
+    width: var(--badge-size);
+    height: var(--badge-size);
     bottom: 0;
     .right(0);
 
     box-sizing: border-box;
+    border-radius: 50%;
     text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     overflow: hidden;
     user-select: none;
 

package/src/badge/Badge.tsx

@@ -11,7 +11,6 @@ import {
   ThemeLight,
   CommonProps,
 } from '../common';
-import Circle, { CircleProps } from '../common/circle';
 
 /**
  * @deprecated Use `SizeSmall` or `SizeLarge` instead.
@@ -29,13 +28,6 @@ export type BadgeProps = {
   'aria-label'?: string;
 } & CommonProps;
 
-const mapLegacySize = {
-  [String(Size.SMALL)]: 16,
-  // medium is deprecated, so we map it to small
-  [String(Size.MEDIUM)]: 16,
-  [String(Size.LARGE)]: 24,
-} satisfies Record<string, CircleProps['size']>;
-
 const Badge = ({
   badge,
   className = undefined,
@@ -58,9 +50,7 @@ const Badge = ({
   return (
     <div aria-label={ariaLabel} className={classes}>
       <div className="tw-badge__children">{children}</div>
-      <Circle size={mapLegacySize[size]} fixedSize className="tw-badge__content">
-        {badge}
-      </Circle>
+      <div className="tw-badge__content">{badge}</div>
     </div>
   );
 };

package/src/circularButton/CircularButton.css

@@ -23,8 +23,8 @@
 }
 @media (max-width: 320px) {
   .np-circular-btn .tw-icon {
-    top: 8px;
-    top: var(--size-8);
+    top: 12px;
+    top: var(--size-12);
   }
 }
 .np-circular-btn .tw-icon > svg {

package/src/circularButton/CircularButton.less

@@ -19,7 +19,7 @@
     .left(0);
 
     @media (--screen-400-zoom) {
-      top: var(--size-8);
+      top: var(--size-12);
     }
 
     > svg {

package/src/circularButton/CircularButton.story.tsx

@@ -4,6 +4,7 @@ import { ControlType, Priority } from '../common';
 
 import { Meta, StoryObj } from '@storybook/react';
 import CircularButton from './CircularButton';
+import { storyConfig } from '../test-utils';
 
 export default {
   component: CircularButton,
@@ -64,3 +65,5 @@ export const All: Story = {
     );
   },
 };
+
+export const All400Zoom: Story = storyConfig(All, { variants: ['400%'] });

package/src/circularButton/CircularButton.tsx

@@ -38,7 +38,7 @@ const CircularButton = ({
         as="input"
         // @ts-expect-error it's input[type=button] element
         type="button"
-        size={isTinyViewport ? 64 : 56}
+        size={isTinyViewport ? 72 : 56}
         aria-label={children}
         className={classes}
         disabled={disabled}

package/src/circularButton/__snapshots__/CircularButton.spec.tsx.snap

@@ -8,7 +8,7 @@ exports[`CircularButton defaults renders a button of type accent and priority pr
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -46,7 +46,7 @@ exports[`CircularButton priorities renders primary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -84,7 +84,7 @@ exports[`CircularButton priorities renders primary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -122,7 +122,7 @@ exports[`CircularButton priorities renders primary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -160,7 +160,7 @@ exports[`CircularButton priorities renders secondary buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -198,7 +198,7 @@ exports[`CircularButton priorities renders secondary buttons 2`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -236,7 +236,7 @@ exports[`CircularButton priorities renders secondary buttons 3`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-2"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -274,7 +274,7 @@ exports[`CircularButton types renders accent buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-accent btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -312,7 +312,7 @@ exports[`CircularButton types renders negative buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-negative btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span
@@ -350,7 +350,7 @@ exports[`CircularButton types renders positive buttons 1`] = `
     <input
       aria-label="Add money"
       class="np-circle d-flex align-items-center justify-content-center btn np-btn m-b-1 btn-positive btn-priority-1"
-      style="--circle-size: var(--size-56);"
+      style="--circle-size: var(--size-56); --circle-icon-size: 28px;"
       type="button"
     />
     <span

package/src/common/circle/Circle.css

@@ -5,3 +5,7 @@
   height: var(--circle-size);
   flex-shrink: 0;
 }
+.np-circle .tw-icon > svg {
+  height: var(--circle-icon-size);
+  width: var(--circle-icon-size);
+}

package/src/common/circle/Circle.less

@@ -3,4 +3,10 @@
   width: var(--circle-size);
   height: var(--circle-size);
   flex-shrink: 0;
+
+  // circle like components has custom icon sizes
+  .tw-icon > svg {
+    height: var(--circle-icon-size);
+    width: var(--circle-icon-size);
+  }
 }

package/src/common/circle/Circle.story.tsx

@@ -30,14 +30,14 @@ export const Sizes: Story = storyConfig(
   {
     render: () => {
       const content = <Profile size={16} />;
-      const sizes: CircleProps['size'][] = [32, 40, 48, 56, 72];
+      const sizes: CircleProps['size'][] = [16, 24, 32, 40, 48, 56, 72];
       return (
         <div
           style={{
             gap: '1em',
             display: 'grid',
             justifyContent: 'space-between',
-            gridTemplate: 'auto auto / repeat(5, min-content)',
+            gridTemplate: `auto auto / repeat(${sizes.length}, min-content)`,
           }}
         >
           {sizes.map((size) => (

package/src/common/circle/Circle.tsx

@@ -1,7 +1,9 @@
 import { HTMLAttributes, forwardRef } from 'react';
 import { clsx } from 'clsx';
+import { useMedia } from '../hooks/useMedia';
+import { Breakpoint } from '../propsValues/breakpoint';
 
-export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 64 | 72;
+export type ShapeSize = 16 | 24 | 32 | 40 | 48 | 56 | 72;
 
 export type Props = {
   /**
@@ -19,6 +21,19 @@ export type Props = {
   fixedSize?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
+/**
+ * circle like components has custom sizes for icons
+ */
+const MAP_ICON_SIZE = {
+  16: 12,
+  24: 16,
+  32: 18,
+  40: 20,
+  48: 24,
+  56: 28,
+  72: 36,
+};
+
 const Circle = forwardRef(function Circle(
   {
     as: Element = 'div',
@@ -31,11 +46,19 @@ const Circle = forwardRef(function Circle(
   }: Props,
   ref,
 ) {
+  const isTinyViewport = useMedia(`(max-width: ${Breakpoint.ZOOM_400}px)`);
   return (
     <Element
       {...props}
       ref={ref}
-      style={{ ...style, '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})` }}
+      style={{
+        '--circle-size': fixedSize ? `${size}px` : `var(--size-${size})`,
+        '--circle-icon-size':
+          isTinyViewport && !fixedSize
+            ? `${MAP_ICON_SIZE[size] / 2}px`
+            : `${MAP_ICON_SIZE[size]}px`,
+        ...style,
+      }}
       className={clsx('np-circle', 'd-flex align-items-center justify-content-center', className)}
     >
       {children}

package/src/flowNavigation/__snapshots__/FlowNavigation.spec.js.snap

@@ -21,12 +21,10 @@ exports[`FlowNavigation on mobile renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>
@@ -138,12 +136,10 @@ exports[`FlowNavigation renders as expected 1`] = `
         class="np-flow-header__right d-flex align-items-center justify-content-end order-2--lg"
       >
         <div
-          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
-          style="--circle-size: 48px;"
+          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
         >
           <div
-            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
-            style="--circle-size: 48px;"
+            class="tw-avatar__content"
           >
             TM
           </div>

package/src/i18n/de.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Keine Ergebnisse gefunden",
   "neptune.SelectOption.action.label": "Auswählen",
   "neptune.SelectOption.selected.action.label": "Ausgewählte Option ändern",
+  "neptune.StatusIcon.iconLabel.error": "Fehler:",
+  "neptune.StatusIcon.iconLabel.information": "Auskünfte:",
+  "neptune.StatusIcon.iconLabel.pending": "Ausstehend:",
+  "neptune.StatusIcon.iconLabel.success": "Erfolgreich:",
+  "neptune.StatusIcon.iconLabel.warning": "Warnung:",
   "neptune.Summary.statusDone": "Schritt erledigt",
   "neptune.Summary.statusNotDone": "Schritt noch zu erledigen",
   "neptune.Summary.statusPending": "Schritt ausstehend",

package/src/i18n/es.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "No se han encontrado resultados",
   "neptune.SelectOption.action.label": "Elegir",
   "neptune.SelectOption.selected.action.label": "Cambiar opción elegida",
+  "neptune.StatusIcon.iconLabel.error": "Error:",
+  "neptune.StatusIcon.iconLabel.information": "Información:",
+  "neptune.StatusIcon.iconLabel.pending": "Pendiente:",
+  "neptune.StatusIcon.iconLabel.success": "Éxito:",
+  "neptune.StatusIcon.iconLabel.warning": "Advertencia:",
   "neptune.Summary.statusDone": "Apartado listo",
   "neptune.Summary.statusNotDone": "Apartado a completar",
   "neptune.Summary.statusPending": "Apartado pendiente",

package/src/i18n/fr.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Aucun résultat trouvé",
   "neptune.SelectOption.action.label": "Sélectionner",
   "neptune.SelectOption.selected.action.label": "Modifier l'option choisie",
+  "neptune.StatusIcon.iconLabel.error": "Erreur:",
+  "neptune.StatusIcon.iconLabel.information": "Informations:",
+  "neptune.StatusIcon.iconLabel.pending": "En attente :",
+  "neptune.StatusIcon.iconLabel.success": "Terminé:",
+  "neptune.StatusIcon.iconLabel.warning": "Attention:",
   "neptune.Summary.statusDone": "Validé",
   "neptune.Summary.statusNotDone": "À compléter",
   "neptune.Summary.statusPending": "En attente",

package/src/i18n/hu.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nincs találat",
   "neptune.SelectOption.action.label": "Kiválasztás",
   "neptune.SelectOption.selected.action.label": "Kiválasztott opció módosítása",
+  "neptune.StatusIcon.iconLabel.error": "Hiba:",
+  "neptune.StatusIcon.iconLabel.information": "Információ:",
+  "neptune.StatusIcon.iconLabel.pending": "Függőben:",
+  "neptune.StatusIcon.iconLabel.success": "Siker:",
+  "neptune.StatusIcon.iconLabel.warning": "Figyelmeztetés:",
   "neptune.Summary.statusDone": "Kész",
   "neptune.Summary.statusNotDone": "Hátravan",
   "neptune.Summary.statusPending": "Függőben",

package/src/i18n/id.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Hasil tidak ditemukan",
   "neptune.SelectOption.action.label": "Pilih",
   "neptune.SelectOption.selected.action.label": "Ubah opsi yang dipilih",
+  "neptune.StatusIcon.iconLabel.error": "Kesalahan:",
+  "neptune.StatusIcon.iconLabel.information": "Informasi:",
+  "neptune.StatusIcon.iconLabel.pending": "Tertunda:",
+  "neptune.StatusIcon.iconLabel.success": "Berhasil:",
+  "neptune.StatusIcon.iconLabel.warning": "Peringatan:",
   "neptune.Summary.statusDone": "Item selesai",
   "neptune.Summary.statusNotDone": "Item yang harus dilakukan",
   "neptune.Summary.statusPending": "Item tertunda",

package/src/i18n/it.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nessun risultato trovato",
   "neptune.SelectOption.action.label": "Scegli",
   "neptune.SelectOption.selected.action.label": "Modifica l'opzione scelta",
+  "neptune.StatusIcon.iconLabel.error": "Errore:",
+  "neptune.StatusIcon.iconLabel.information": "Informazioni:",
+  "neptune.StatusIcon.iconLabel.pending": "In attesa:",
+  "neptune.StatusIcon.iconLabel.success": "Fatto:",
+  "neptune.StatusIcon.iconLabel.warning": "Attenzione:",
   "neptune.Summary.statusDone": "Completato",
   "neptune.Summary.statusNotDone": "Da completare",
   "neptune.Summary.statusPending": "In corso",

package/src/i18n/ja.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "結果が見つかりませんでした",
   "neptune.SelectOption.action.label": "選択してください",
   "neptune.SelectOption.selected.action.label": "選択したオプションを変更する",
+  "neptune.StatusIcon.iconLabel.error": "エラー：",
+  "neptune.StatusIcon.iconLabel.information": "情報：",
+  "neptune.StatusIcon.iconLabel.pending": "保留中：",
+  "neptune.StatusIcon.iconLabel.success": "完了：",
+  "neptune.StatusIcon.iconLabel.warning": "警告：",
   "neptune.Summary.statusDone": "完了",
   "neptune.Summary.statusNotDone": "未完了",
   "neptune.Summary.statusPending": "保留中",

package/src/i18n/pl.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nie znaleziono wyników",
   "neptune.SelectOption.action.label": "Wybierz",
   "neptune.SelectOption.selected.action.label": "Zmień wybraną opcję",
+  "neptune.StatusIcon.iconLabel.error": "Błąd:",
+  "neptune.StatusIcon.iconLabel.information": "Informacje:",
+  "neptune.StatusIcon.iconLabel.pending": "W toku:",
+  "neptune.StatusIcon.iconLabel.success": "Gotowe:",
+  "neptune.StatusIcon.iconLabel.warning": "Ostrzeżenie:",
   "neptune.Summary.statusDone": "Czynność wykonana",
   "neptune.Summary.statusNotDone": "Czynność do wykonania",
   "neptune.Summary.statusPending": "Czynność oczekująca",

package/src/i18n/pt.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nenhum resultado encontrado",
   "neptune.SelectOption.action.label": "Selecionar",
   "neptune.SelectOption.selected.action.label": "Altere a opção escolhida",
+  "neptune.StatusIcon.iconLabel.error": "Erro:",
+  "neptune.StatusIcon.iconLabel.information": "Informação:",
+  "neptune.StatusIcon.iconLabel.pending": "Pendente:",
+  "neptune.StatusIcon.iconLabel.success": "Concluído:",
+  "neptune.StatusIcon.iconLabel.warning": "Aviso:",
   "neptune.Summary.statusDone": "Pronto",
   "neptune.Summary.statusNotDone": "Não iniciado",
   "neptune.Summary.statusPending": "Pendente",

package/src/i18n/ro.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Nu s-a găsit niciun rezultat",
   "neptune.SelectOption.action.label": "Alege",
   "neptune.SelectOption.selected.action.label": "Schimbă opțiunea aleasă",
+  "neptune.StatusIcon.iconLabel.error": "Eroare:",
+  "neptune.StatusIcon.iconLabel.information": "Informații:",
+  "neptune.StatusIcon.iconLabel.pending": "În așteptare:",
+  "neptune.StatusIcon.iconLabel.success": "Gata:",
+  "neptune.StatusIcon.iconLabel.warning": "Avertisment:",
   "neptune.Summary.statusDone": "Finalizat",
   "neptune.Summary.statusNotDone": "De făcut",
   "neptune.Summary.statusPending": "În așteptare",

package/src/i18n/ru.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Ничего не найдено",
   "neptune.SelectOption.action.label": "Выбрать",
   "neptune.SelectOption.selected.action.label": "Изменить выбранный вариант",
+  "neptune.StatusIcon.iconLabel.error": "Ошибка:",
+  "neptune.StatusIcon.iconLabel.information": "Информация:",
+  "neptune.StatusIcon.iconLabel.pending": "В ожидании:",
+  "neptune.StatusIcon.iconLabel.success": "Готово:",
+  "neptune.StatusIcon.iconLabel.warning": "Внимание:",
   "neptune.Summary.statusDone": "Этап завершен",
   "neptune.Summary.statusNotDone": "Этап к выполнению",
   "neptune.Summary.statusPending": "Этап в процессе",

package/src/i18n/tr.json

@@ -27,6 +27,11 @@
   "neptune.SelectInput.noResultsFound": "Sonuç bulunamadı",
   "neptune.SelectOption.action.label": "Seç",
   "neptune.SelectOption.selected.action.label": "Seçilen opsiyonu değiştir",
+  "neptune.StatusIcon.iconLabel.error": "Hata:",
+  "neptune.StatusIcon.iconLabel.information": "Bilgi:",
+  "neptune.StatusIcon.iconLabel.pending": "Bekliyor:",
+  "neptune.StatusIcon.iconLabel.success": "Başarılı:",
+  "neptune.StatusIcon.iconLabel.warning": "Uyarı:",
   "neptune.Summary.statusDone": "Tamamlanan aşama",
   "neptune.Summary.statusNotDone": "Yapılacak",
   "neptune.Summary.statusPending": "Bekliyor",