WEB-2079 update Meter text tokens

Telefonica · Nov 19, 2024 · 7aae091 · 7aae091
1 parent d10a960
commit 7aae091
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/src/meter.tsx b/src/meter.tsx
@@ -7,7 +7,7 @@ import bezier from 'cubic-bezier';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {useThemeVariant} from './theme-variant-context';
 import {useElementDimensions, useTheme} from './hooks';
-import {meterPercentageLabel, meterSegmentLabel} from './text-tokens';
+import {meterTotalLabel, meterSectionLabel} from './text-tokens';
 import {isRunningAcceptanceTest} from './utils/platform';
 
 import type {DataAttributes} from './utils/types';
@@ -277,9 +277,9 @@ const MeterComponent = ({
     const totalPercent = Math.round((lastSegment?.end || 0) * 100);
 
     const valueText =
-        values.map((v, i) => `${t(meterSegmentLabel, i + 1, Math.round(v * 100))}`).join(', ') +
-        `, ${t(meterPercentageLabel, totalPercent)}`;
-
+        t(meterTotalLabel, totalPercent) +
+        ' ' +
+        values.map((v, i) => `${t(meterSectionLabel, i + 1, Math.round(v * 100))}`).join(', ');
     return (
         <div
             ref={containerRef}

diff --git a/src/text-tokens.tsx b/src/text-tokens.tsx
@@ -574,22 +574,23 @@ export const ratingQuantitativeLabel: TextToken = {
 };
 
 /**
- * 1$s: segment number
- * 2$s: segment percentage value
+ * 1$s: segments count
+ * 2$s: total percentage value
  */
-export const meterSegmentLabel: TextToken = {
-    es: 'Segmento 1$s 2$s%',
-    en: 'Segment 1$s 2$s%',
-    de: 'Segment 1$s 2$s%',
-    pt: 'Segmento 1$s 2$s%',
+export const meterTotalLabel: TextToken = {
+    es: 'Indicador de progreso con 1$s secciones, total 2$s% de 100%.',
+    en: 'Gauge chart 1$s segments, total 2$s% out of 100%.',
+    de: 'Fortschrittsanzeige mit 1$s Abschnitten, insgesamt 2$s% von 100%.',
+    pt: 'Indicador de progresso com 1$s seções, total 2$s% de 100%.',
 };
 
 /**
- * 1$s: percentage value
+ * 1$s: segment number
+ * 2$s: segment percentage value
  */
-export const meterPercentageLabel: TextToken = {
-    es: '1$s% de 0% a 100%',
-    en: '1$s% from 0% to 100%',
-    de: '1$s% von 0% bis 100%',
-    pt: '1$s% de 0% a 100%',
+export const meterSectionLabel: TextToken = {
+    es: 'Sección 1$s: 2$s%',
+    en: 'Segment 1$s: 2$s%',
+    de: 'Abschnitt 1$s: 2$s%',
+    pt: 'Seção 1$s: 2$s%',
 };