fix(meter,progress-bar): add i18n to progress delivery

adobe · May 8, 2023 · c7e4020 · c7e4020
1 parent ba75d94
commit c7e4020
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 2 deletions.
diff --git a/packages/meter/src/Meter.ts b/packages/meter/src/Meter.ts
@@ -21,6 +21,7 @@ import {
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
 import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import styles from './meter.css.js';
 
@@ -52,6 +53,8 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
     @property({ type: String, reflect: true })
     public label = '';
 
+    private languageResolver = new LanguageResolutionController(this);
+
     @property({ type: Boolean, reflect: true, attribute: 'side-label' })
     // called sideLabel
     public sideLabel = false;
@@ -66,7 +69,10 @@ export class Meter extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
                 <slot>${this.label}</slot>
             </sp-field-label>
             <sp-field-label size=${this.size} class="percentage">
-                ${this.progress}%
+                ${new Intl.NumberFormat(this.languageResolver.language, {
+                    style: 'percent',
+                    unitDisplay: 'narrow',
+                }).format(this.progress / 100)}
             </sp-field-label>
             <div class="track">
                 <div

diff --git a/packages/meter/test/meter.test.ts b/packages/meter/test/meter.test.ts
@@ -15,6 +15,7 @@ import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import '@spectrum-web-components/meter/sp-meter.js';
 import { Meter } from '@spectrum-web-components/meter';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
 
 describe('Meter', () => {
     testForLitDevWarnings(
@@ -87,4 +88,32 @@ describe('Meter', () => {
         expect(el.hasAttribute('aria-valuenow')).to.be.true;
         expect(el.getAttribute('aria-valuenow')).to.equal('100');
     });
+
+    it('resolves a language (en-US)', async () => {
+        const [languageContext] = createLanguageContext('en-US');
+        const test = await fixture(html`
+            <div @sp-language-context=${languageContext}>
+                <sp-meter label="Changing Value" progress="45"></sp-meter>
+            </div>
+        `);
+        const el = test.querySelector('sp-meter') as Meter;
+        const percentage = el.shadowRoot.querySelector(
+            '.percentage'
+        ) as HTMLElement;
+        expect(percentage.textContent?.search('%')).to.not.equal(-1);
+    });
+
+    it('resolves a language (ar-sa)', async () => {
+        const [languageContext] = createLanguageContext('ar-sa');
+        const test = await fixture(html`
+            <div @sp-language-context=${languageContext}>
+                <sp-meter label="Changing Value" progress="45"></sp-meter>
+            </div>
+        `);
+        const el = test.querySelector('sp-meter') as Meter;
+        const percentage = el.shadowRoot.querySelector(
+            '.percentage'
+        ) as HTMLElement;
+        expect(percentage.textContent?.search('٪')).to.not.equal(-1);
+    });
 });
diff --git a/packages/progress-bar/src/ProgressBar.ts b/packages/progress-bar/src/ProgressBar.ts
@@ -20,6 +20,7 @@ import {
 } from '@spectrum-web-components/base';
 import { property } from '@spectrum-web-components/base/src/decorators.js';
 
+import { LanguageResolutionController } from '@spectrum-web-components/reactive-controllers/src/LanguageResolution.js';
 import '@spectrum-web-components/field-label/sp-field-label.js';
 import styles from './progress-bar.css.js';
 
@@ -37,6 +38,8 @@ export class ProgressBar extends SizedMixin(SpectrumElement) {
     @property({ type: String })
     public label = '';
 
+    private languageResolver = new LanguageResolutionController(this);
+
     @property({ type: Boolean, reflect: true, attribute: 'over-background' })
     public overBackground = false;
 
@@ -63,7 +66,13 @@ export class ProgressBar extends SizedMixin(SpectrumElement) {
                                     size=${this.size}
                                     class="percentage"
                                 >
-                                    ${this.progress}%
+                                    ${new Intl.NumberFormat(
+                                        this.languageResolver.language,
+                                        {
+                                            style: 'percent',
+                                            unitDisplay: 'narrow',
+                                        }
+                                    ).format(this.progress / 100)}
                                 </sp-field-label>
                             `}
                   `

diff --git a/packages/progress-bar/test/progress-bar.test.ts b/packages/progress-bar/test/progress-bar.test.ts
@@ -16,6 +16,7 @@ import '@spectrum-web-components/progress-bar/sp-progress-bar.js';
 import { ProgressBar } from '@spectrum-web-components/progress-bar';
 import { stub } from 'sinon';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import { createLanguageContext } from '../../../tools/reactive-controllers/test/helpers.js';
 
 describe('ProgressBar', () => {
     testForLitDevWarnings(
@@ -127,4 +128,38 @@ describe('ProgressBar', () => {
         });
         consoleWarnStub.restore();
     });
+
+    it('resolves a language (en-US)', async () => {
+        const [languageContext] = createLanguageContext('en-US');
+        const test = await fixture(html`
+            <div @sp-language-context=${languageContext}>
+                <sp-progress-bar
+                    label="Changing Value"
+                    progress="45"
+                ></sp-progress-bar>
+            </div>
+        `);
+        const el = test.querySelector('sp-progress-bar') as ProgressBar;
+        const percentage = el.shadowRoot.querySelector(
+            '.percentage'
+        ) as HTMLElement;
+        expect(percentage.textContent?.search('%')).to.not.equal(-1);
+    });
+
+    it('resolves a language (ar-sa)', async () => {
+        const [languageContext] = createLanguageContext('ar-sa');
+        const test = await fixture(html`
+            <div @sp-language-context=${languageContext}>
+                <sp-progress-bar
+                    label="Changing Value"
+                    progress="45"
+                ></sp-progress-bar>
+            </div>
+        `);
+        const el = test.querySelector('sp-progress-bar') as ProgressBar;
+        const percentage = el.shadowRoot.querySelector(
+            '.percentage'
+        ) as HTMLElement;
+        expect(percentage.textContent?.search('٪')).to.not.equal(-1);
+    });
 });