Feat: Update range selector labels

Author: dchyun

packages/components/src/components/hds/filter-bar/range.hbs

@@ -14,7 +14,7 @@
             default="Pick a selector"
           }}</option>
         {{#each this._selectorValues as |selectorValue|}}
-          <option value={{selectorValue}} selected={{eq selectorValue this._selector}}>{{this.selectorText
+          <option value={{selectorValue}} selected={{eq selectorValue this._selector}}>{{this._selectorText
               selectorValue
             }}</option>
         {{/each}}

packages/components/src/components/hds/filter-bar/range.ts

@@ -8,7 +8,9 @@ import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import type Owner from '@ember/owner';
 import { guidFor } from '@ember/object/internals';
+import { service } from '@ember/service';
 
+import type HdsIntlService from '../../../services/hds-intl';
 import type {
   HdsFilterBarData,
   HdsFilterBarRangeFilterSelector,
@@ -23,23 +25,23 @@ export const SELECTORS_DISPLAY_TEXT: Record<
   HdsFilterBarRangeFilterSelector,
   string
 > = {
-  [HdsFilterBarRangeFilterSelectorValues.lessThan]: 'Less than',
+  [HdsFilterBarRangeFilterSelectorValues.lessThan]: 'Less than (<)',
   [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]:
-    'Less than or equal to',
-  [HdsFilterBarRangeFilterSelectorValues.equalTo]: 'Equal to',
+    'Less than or equal to (≤)',
+  [HdsFilterBarRangeFilterSelectorValues.equalTo]: 'Equal to (=)',
   [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]:
-    'Greater than or equal to',
-  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than',
+    'Greater than or equal to (≥)',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThan]: 'Greater than (>)',
 };
 
 export const SELECTORS_DISPLAY_SYMBOL: Record<
   HdsFilterBarRangeFilterSelector,
   string
 > = {
   [HdsFilterBarRangeFilterSelectorValues.lessThan]: '<',
-  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: '<=',
+  [HdsFilterBarRangeFilterSelectorValues.lessThanOrEqualTo]: '≤',
   [HdsFilterBarRangeFilterSelectorValues.equalTo]: '=',
-  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '>=',
+  [HdsFilterBarRangeFilterSelectorValues.greaterThanOrEqualTo]: '≥',
   [HdsFilterBarRangeFilterSelectorValues.greaterThan]: '>',
 };
 
@@ -58,6 +60,8 @@ export interface HdsFilterBarRangeSignature {
 }
 
 export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignature> {
+  @service hdsIntl!: HdsIntlService;
+
   @tracked private _selector: HdsFilterBarRangeFilterSelector | undefined;
   @tracked private _value: number | undefined;
 
@@ -79,9 +83,16 @@ export default class HdsFilterBarRange extends Component<HdsFilterBarRangeSignat
     return this._value !== undefined ? this._value.toString() : undefined;
   }
 
-  selectorText(selector: HdsFilterBarRangeFilterSelector): string {
-    return SELECTORS_DISPLAY_TEXT[selector];
-  }
+  private _selectorText = (
+    selector: HdsFilterBarRangeFilterSelector
+  ): string => {
+    return this.hdsIntl.t(
+      `hds.components.filter-bar.range.selector-input.${selector}`,
+      {
+        default: 'test',
+      }
+    );
+  };
 
   @action
   onSelectorChange(event: Event): void {

packages/components/translations/hds/components/filter-bar/range/en-us.yaml

@@ -1,3 +1,8 @@
 label: Number is
 selector-input:
   default-value: Pick a selector
+  less-than: Less than (<)
+  less-than-or-equal-to: Less than or equal to (≤)
+  equal-to: Equal to (=)
+  greater-than-or-equal-to: Greater than or equal to (≥)
+  greater-than: Greater than (>)