hashicorp · zamoore · May 19, 2025 · May 19, 2025 · May 14, 2025 · May 14, 2025
@@ -0,0 +1,31 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+- Added `ember-intl` as a dependency
+- Added `hdsIntl` service for translations with default fallback values
+- Added `hds-t` helper which uses the `hds-intl` service to provide translations in templates
+
+`AdvancedTable` - Translated template strings. Removed extraneous screen-reader-only text.
+
+`AppFooter` - Translated template strings
+
+`AppSideNav` - Translated template strings
+
+`ApplicationState` - Translated template strings
+
+`CodeEditor` - Translated template strings
+
+`DismissButton` - Translated template strings
+
+`MaskedInput` - Translated template strings
+
+`SuperSelect` - Translated template strings
+
+`Pagination` - Translated template strings
+
+`SideNav` - Translated template strings
+
+`Table` - Translated template strings
+
+`Time` - Translated template strings
@@ -13,5 +13,6 @@ module.exports = {
     'no-unnecessary-curly-strings': false,
     'no-redundant-role': false,
     'no-builtin-form-components': false,
+    'no-bare-strings': true,
   },
 };
@@ -0,0 +1,95 @@
+'use strict';
+
+module.exports = function (/* environment */) {
+  return {
+    /**
+     * Cause a build error if missing translations are detected.
+     *
+     * See https://ember-intl.github.io/ember-intl/docs/guide/missing-translations#throwing-a-build-error-on-missing-when-required-translations
+     *
+     * @property errorOnMissingTranslations
+     * @type {Boolean}
+     * @default "false"
+     */
+    errorOnMissingTranslations: false,
+
+    /**
+     * Cause a build error if ICU argument mismatches are detected between translations
+     * with the same key across all locales.
+     *
+     * @property errorOnNamedArgumentMismatch
+     * @type {Boolean}
+     * @default "false"
+     */
+    errorOnNamedArgumentMismatch: false,
+
+    /**
+     * Merges the fallback locale's translations into all other locales as a
+     * build-time fallback strategy.
+     *
+     * This will **not** prevent missing translation warnings or errors from occurring.
+     * It's meant as safety net when warnings are enabled.
+     * When enabled along with `errorOnMissingTranslations` any fallback attempts will result in an error.
+     *
+     * @property fallbackLocale
+     * @type {String?}
+     * @default "null"
+     */
+    fallbackLocale: null,
+
+    /**
+     * Path where translations are stored.  This is relative to the project root.
+     * For example, if your translations are an npm dependency, set this to:
+     *`'./node_modules/path/to/translations'`
+     *
+     * @property inputPath
+     * @type {String}
+     * @default "'translations'"
+     */
+    inputPath: 'translations',
+
+    /**
+     * Prevents the translations from being bundled with the application code.
+     * This enables asynchronously loading the translations for the active locale
+     * by fetching them from the asset folder of the build.
+     *
+     * See: https://ember-intl.github.io/ember-intl/docs/guide/asynchronously-loading-translations
+     *
+     * @property publicOnly
+     * @type {Boolean}
+     * @default "false"
+     */
+    publicOnly: false,
+
+    /**
+     * A function that is called whenever any translation key, from any locale, is missing at build time.
+     *
+     * See https://ember-intl.github.io/ember-intl/docs/guide/missing-translations#requiring-translations
+     *
+     * @property requiresTranslation
+     * @type {Function}
+     * @default "function(key,locale) { return true }"
+     */
+    requiresTranslation(/* key, locale */) {
+      return true;
+    },
+
+    /**
+     * Removes empty translations from the build output.
+     *
+     * @property stripEmptyTranslations
+     * @type {Boolean}
+     * @default "false"
+     */
+    stripEmptyTranslations: false,
+
+    /**
+     * Add the subdirectories of the translations as a namespace for all keys.
+     *
+     * @property wrapTranslationsWithNamespace
+     * @type {Boolean}
+     * @default "false"
+     */
+    wrapTranslationsWithNamespace: true,
+  };
+};
@@ -96,6 +96,7 @@
     "babel-plugin-ember-template-compilation": "^2.4.1",
     "concurrently": "^9.1.2",
     "ember-basic-dropdown": "^8.6.1",
+    "ember-intl": "^7.3.0",
     "ember-source": "^6.4.0",
     "ember-template-lint": "^7.0.2",
     "ember-template-lint-plugin-prettier": "^5.0.0",
@@ -119,11 +120,15 @@
     "webpack": "^5.97.1"
   },
   "peerDependencies": {
-    "ember-engines": ">= 0.11.0"
+    "ember-engines": ">= 0.11.0",
+    "ember-intl": "^7.3.0"
   },
   "peerDependenciesMeta": {
     "ember-engines": {
       "optional": true
+    },
+    "ember-intl": {
+      "optional": true
     }
   },
   "ember": {
@@ -349,6 +354,7 @@
       "./helpers/hds-format-relative.js": "./dist/_app_/helpers/hds-format-relative.js",
       "./helpers/hds-link-to-models.js": "./dist/_app_/helpers/hds-link-to-models.js",
       "./helpers/hds-link-to-query.js": "./dist/_app_/helpers/hds-link-to-query.js",
+      "./helpers/hds-t.js": "./dist/_app_/helpers/hds-t.js",
       "./instance-initializers/load-sprite.js": "./dist/_app_/instance-initializers/load-sprite.js",
       "./modifiers/hds-advanced-table-cell.js": "./dist/_app_/modifiers/hds-advanced-table-cell.js",
       "./modifiers/hds-advanced-table-cell/dom-management.js": "./dist/_app_/modifiers/hds-advanced-table-cell/dom-management.js",
@@ -365,6 +371,7 @@
       "./modifiers/hds-code-editor/types.js": "./dist/_app_/modifiers/hds-code-editor/types.js",
       "./modifiers/hds-register-event.js": "./dist/_app_/modifiers/hds-register-event.js",
       "./modifiers/hds-tooltip.js": "./dist/_app_/modifiers/hds-tooltip.js",
+      "./services/hds-intl.js": "./dist/_app_/services/hds-intl.js",
       "./services/hds-time.js": "./dist/_app_/services/hds-time.js"
     }
   },
@@ -389,7 +396,8 @@
   "files": [
     "addon-main.cjs",
     "declarations",
-    "dist"
+    "dist",
+    "translations"
   ],
   "engines": {
     "node": ">= 18"

@@ -10,10 +10,15 @@
   {{on "click" this.onClick}}
   aria-labelledby="{{this._prefixLabelId}} {{@labelId}}"
   aria-expanded="{{this.isExpanded}}"
-  aria-description="Toggle the visibility of the related rows."
+  aria-description={{hds-t
+    "hds.components.advanced-table.th-button-expand.aria-description"
+    default="Toggle the visibility of the related rows."
+  }}
   ...attributes
 >
   {{! template-lint-enable no-unsupported-role-attributes}}
-  <span id={{this._prefixLabelId}} class="hds-advanced-table__th-button-aria-label-hidden-segment">Toggle</span>
+  <span id={{this._prefixLabelId}} class="hds-advanced-table__th-button-aria-label-hidden-segment">
+    {{hds-t "hds.components.common.toggle" default="Toggle"}}
+  </span>
   <Hds::Icon @name={{this.icon}} />
 </button>
@@ -9,7 +9,9 @@
   aria-labelledby="{{this._prefixLabelId}} {{@labelId}} {{this._suffixLabelId}}"
   ...attributes
 >
-  <span id={{this._prefixLabelId}} class="hds-advanced-table__th-button-aria-label-hidden-segment">Sort by</span>
+  <span id={{this._prefixLabelId}} class="hds-advanced-table__th-button-aria-label-hidden-segment">
+    {{hds-t "hds.components.common.sort-by" default="Sort by"}}
+  </span>
   <span
     id={{this._suffixLabelId}}
     class="hds-advanced-table__th-button-aria-label-hidden-segment"

@@ -10,6 +10,8 @@
   aria-labelledby="{{this._prefixLabelId}} {{@labelId}}"
   ...attributes
 >
-  <span id={{this._prefixLabelId}} class="hds-advanced-table__th-button-aria-label-hidden-segment">More information for</span>
+  <span id={{this._prefixLabelId}} class="hds-advanced-table__th-button-aria-label-hidden-segment">
+    {{hds-t "hds.components.common.tooltip-prefix" default="More information for"}}
+  </span>
   <Hds::Icon @name="info" />
 </button>
@@ -21,7 +21,6 @@
       {{on "change" this.onSelectionChange}}
     />
     {{#if this.isSortable}}
-      <span id={{this._labelId}} class="sr-only">selection state</span>
       <Hds::AdvancedTable::ThButtonSort
         @sortOrder={{@sortBySelectedOrder}}
         @onClick={{@onClickSortBySelected}}

@@ -5,5 +5,11 @@
 
 <div class="hds-app-footer__copyright" ...attributes>
   <Hds::Icon @name="hashicorp" />
-  <Hds::Text::Body @tag="span" @size="100">© {{this.year}} HashiCorp</Hds::Text::Body>
+  <Hds::Text::Body @tag="span" @size="100">
+    {{hds-t
+      "hds.components.app-footer.copyright.copyright-text"
+      default=(concat "© " this.year " HashiCorp")
+      year=this.year
+    }}
+  </Hds::Text::Body>
 </div>
@@ -5,10 +5,20 @@
 
 <Hds::AppFooter::Item>
   <ul class="hds-app-footer__legal-links" aria-label={{this.ariaLabel}} ...attributes>
-    <Hds::AppFooter::Link @href={{this.hrefForSupport}}>Support</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForTerms}}>Terms</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForPrivacy}}>Privacy</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForSecurity}}>Security</Hds::AppFooter::Link>
-    <Hds::AppFooter::Link @href={{this.hrefForAccessibility}}>Accessibility</Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForSupport}}>
+      {{hds-t "hds.components.app-footer.legal-links.support" default="Support"}}
+    </Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForTerms}}>
+      {{hds-t "hds.components.app-footer.legal-links.terms" default="Terms"}}
+    </Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForPrivacy}}>
+      {{hds-t "hds.components.app-footer.legal-links.privacy" default="Privacy"}}
+    </Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForSecurity}}>
+      {{hds-t "hds.components.app-footer.legal-links.security" default="Security"}}
+    </Hds::AppFooter::Link>
+    <Hds::AppFooter::Link @href={{this.hrefForAccessibility}}>
+      {{hds-t "hds.components.app-footer.legal-links.accessibility" default="Accessibility"}}
+    </Hds::AppFooter::Link>
   </ul>
 </Hds::AppFooter::Item>
@@ -5,7 +5,7 @@
 
 <Hds::Button
   class="hds-app-header__menu-button"
-  @text="Menu"
+  @text={{hds-t "hds.components.common.menu" default="Menu"}}
   @icon={{this.icon}}
   @iconPosition="trailing"
   {{on "click" this.onClick}}

@@ -12,7 +12,9 @@
   {{focus-trap isActive=this.shouldTrapFocus}}
   {{this._setUpBodyElement}}
 >
-  <h2 class="sr-only" id="hds-app-side-nav-header">Application local navigation</h2>
+  <h2 class="sr-only" id="hds-app-side-nav-header">
+    {{hds-t "hds.components.app-side-nav.heading" default="Application local navigation"}}
+  </h2>
 
   <div class="hds-app-side-nav__wrapper">
     {{#if this.showToggleButton}}

@@ -5,7 +5,7 @@
 <div class="hds-application-state__header" ...attributes>
   {{#if @errorCode}}
     <Hds::Text::Body class="hds-application-state__error-code" @tag="div" @size="100" @weight="medium" @color="faint">
-      ERROR
+      {{hds-t "hds.components.common.error" default="Error"}}
       {{@errorCode}}
     </Hds::Text::Body>
   {{/if}}

@@ -10,7 +10,7 @@
   @color="secondary"
   @size="small"
   @icon={{this.state}}
-  @text="Toggle full screen view"
+  @text={{hds-t "hds.components.code-editor.full-screen-button.text" default="Toggle full screen view"}}
   {{on "click" @onToggleFullScreen}}
   ...attributes
 />
@@ -71,7 +71,7 @@
   {{#unless this._isSetupComplete}}
     <div class="hds-code-editor__loader" aria-live="polite" role="status">
       <Hds::Icon @name="loading" @size="24" />
-      <span class="sr-only">Loading</span>
+      <span class="sr-only">{{hds-t "hds.components.common.loading" default="Loading"}}</span>
     </div>
   {{/unless}}
 </div>
@@ -4,6 +4,9 @@
  */
 
 import Component from '@glimmer/component';
+import { service } from '@ember/service';
+
+import type HdsIntlService from '../../../services/hds-intl';
 
 export interface HdsDismissButtonSignature {
   Args: {
@@ -13,12 +16,14 @@ export interface HdsDismissButtonSignature {
 }
 
 export default class HdsDismissButton extends Component<HdsDismissButtonSignature> {
-  /**
-   * @param ariaLabel
-   * @type {string}
-   * @default 'Dismiss'
-   */
+  @service hdsIntl!: HdsIntlService;
+
   get ariaLabel(): string {
-    return this.args.ariaLabel ?? 'Dismiss';
+    return (
+      this.args.ariaLabel ??
+      this.hdsIntl.t('hds.components.dismiss-button.aria-label', {
+        default: 'Dismiss',
+      })
+    );
   }
 }
@@ -3,8 +3,16 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 {{#if @isOptional}}
-  <Hds::Text::Body class={{this.classNames}} tag="span" @size="100" @weight="regular">(Optional)</Hds::Text::Body>
+  <Hds::Text::Body class={{this.classNames}} tag="span" @size="100" @weight="regular">
+    ({{hds-t "hds.components.form.common.optional_field_indicator" default="Optional"}})
+  </Hds::Text::Body>
 {{/if}}
 {{#if @isRequired}}
-  &nbsp;<Hds::Badge aria-hidden="true" class={{this.classNames}} @size="small" @color="neutral" @text="Required" />
+  &nbsp;<Hds::Badge
+    aria-hidden="true"
+    class={{this.classNames}}
+    @size="small"
+    @color="neutral"
+    @text={{hds-t "hds.components.form.common.required_field_indicator" default="Required"}}
+  />
 {{/if}}