feat(stepper,stepper-item): adds support for built-in translations (#…

…8002) **Related Issue:** #7759 ## Summary Adds support for built-in translations in `calcite-stepper` and `calcite-stepper-item` components.
Esri · Oct 16, 2023 · bb91624 · bb91624
1 parent f5f551d
commit bb91624
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 15 deletions.
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts
@@ -1,4 +1,4 @@
-import { disabled, renders, hidden } from "../../tests/commonTests";
+import { disabled, renders, hidden, t9n } from "../../tests/commonTests";
 
 describe("calcite-stepper-item", () => {
   describe("renders", () => {
@@ -12,4 +12,8 @@ describe("calcite-stepper-item", () => {
   describe("disabled", () => {
     disabled("calcite-stepper-item");
   });
+
+  describe("translation support", () => {
+    t9n(`<calcite-stepper-item heading="Step 1" id="step-1"></calcite-stepper-item>`);
+  });
 });
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -38,6 +38,14 @@ import {
   componentFocusable,
 } from "../../utils/loadable";
 import { CSS } from "./resources";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  T9nComponent,
+  updateMessages,
+} from "../../utils/t9n";
+import { StepperItemMessages } from "./assets/stepper-item/t9n";
 
 /**
  * @slot - A slot for adding custom content.
@@ -46,8 +54,11 @@ import { CSS } from "./resources";
   tag: "calcite-stepper-item",
   styleUrl: "stepper-item.scss",
   shadow: true,
+  assetsDirs: ["assets"],
 })
-export class StepperItem implements InteractiveComponent, LocalizedComponent, LoadableComponent {
+export class StepperItem
+  implements InteractiveComponent, LocalizedComponent, LoadableComponent, T9nComponent
+{
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -109,6 +120,14 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
    */
   @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messages: StepperItemMessages;
+
   /**
    * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
    *
@@ -123,12 +142,25 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
    */
   @Prop({ reflect: true }) scale: Scale = "m";
 
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messageOverrides: Partial<StepperItemMessages>;
+
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    /* wired up by t9n util */
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Internal State/Props
   //
   //--------------------------------------------------------------------------
 
+  @State() defaultMessages: StepperItemMessages;
+
   @State() effectiveLocale = "";
 
   @Watch("effectiveLocale")
@@ -138,6 +170,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
       numberingSystem: this.numberingSystem,
       useGrouping: false,
     };
+    updateMessages(this, this.effectiveLocale);
   }
 
   headerEl: HTMLDivElement;
@@ -181,9 +214,10 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   connectedCallback(): void {
     connectInteractive(this);
     connectLocalized(this);
+    connectMessages(this);
   }
 
-  componentWillLoad(): void {
+  async componentWillLoad(): Promise<void> {
     setUpLoadableComponent(this);
     this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;
     this.itemPosition = this.getItemPosition();
@@ -192,6 +226,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
     if (this.selected) {
       this.emitRequestedItem();
     }
+    await setUpMessages(this);
   }
 
   componentDidLoad(): void {
@@ -205,6 +240,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   disconnectedCallback(): void {
     disconnectInteractive(this);
     disconnectLocalized(this);
+    disconnectMessages(this);
   }
 
   render(): VNode {
@@ -217,7 +253,7 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
         <div class={CSS.container}>
           {this.complete && (
             <span aria-live="polite" class={CSS.visuallyHidden}>
-              {"Completed step"}
+              {this.messages.complete}
             </span>
           )}
           <div

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -1,5 +1,5 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
+import { defaults, hidden, reflects, renders, t9n } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { NumberStringFormatOptions } from "../../utils/locale";
 
@@ -72,6 +72,10 @@ describe("calcite-stepper", () => {
     );
   });
 
+  describe("translation support", () => {
+    t9n("calcite-stepper");
+  });
+
   it("inheritable props: `icon`, `layout`, `numbered`, and `scale` get passed to items from parents", async () => {
     const page = await newE2EPage();
     await page.setContent(html`
@@ -453,7 +457,9 @@ describe("calcite-stepper", () => {
           const wrapper = document.querySelector(wrapperName);
 
           await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
-          wrapper.shadowRoot.querySelector<HTMLElement>("#item-2").click();
+          const item2 = wrapper.shadowRoot.querySelector<HTMLElement>("#item-2");
+          await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
+          item2.click();
           wrapper.shadowRoot.querySelector<HTMLElement>("#next").click();
           await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()));
 

diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -8,15 +8,29 @@ import {
   Listen,
   Method,
   Prop,
+  State,
   VNode,
   Watch,
 } from "@stencil/core";
 
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
-import { NumberingSystem } from "../../utils/locale";
+import {
+  connectLocalized,
+  disconnectLocalized,
+  LocalizedComponent,
+  NumberingSystem,
+} from "../../utils/locale";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
 import { createObserver } from "../../utils/observers";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  T9nComponent,
+  updateMessages,
+} from "../../utils/t9n";
+import { StepperMessages } from "./assets/stepper/t9n";
 
 /**
  * @slot - A slot for adding `calcite-stepper-item` elements.
@@ -25,8 +39,9 @@ import { createObserver } from "../../utils/observers";
   tag: "calcite-stepper",
   styleUrl: "stepper.scss",
   shadow: true,
+  assetsDirs: ["assets"],
 })
-export class Stepper {
+export class Stepper implements LocalizedComponent, T9nComponent {
   //--------------------------------------------------------------------------
   //
   //  Public Properties
@@ -53,6 +68,14 @@ export class Stepper {
     this.updateItems();
   }
 
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messages: StepperMessages;
+
   /**
    * Specifies the Unicode numeral system used by the component for localization.
    */
@@ -70,6 +93,17 @@ export class Stepper {
    */
   @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;
 
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  // eslint-disable-next-line @stencil-community/strict-mutable -- updated by t9n module
+  @Prop({ mutable: true }) messageOverrides: Partial<StepperMessages>;
+
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    /* wired up by t9n util */
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -100,6 +134,12 @@ export class Stepper {
   connectedCallback(): void {
     this.mutationObserver?.observe(this.el, { childList: true });
     this.updateItems();
+    connectMessages(this);
+    connectLocalized(this);
+  }
+
+  async componentWillLoad(): Promise<void> {
+    await setUpMessages(this);
   }
 
   componentDidLoad(): void {
@@ -111,9 +151,14 @@ export class Stepper {
     }
   }
 
+  disconnectedCallback(): void {
+    disconnectMessages(this);
+    disconnectLocalized(this);
+  }
+
   render(): VNode {
     return (
-      <Host aria-label={"Progress steps"} role="region">
+      <Host aria-label={this.messages.label} role="region">
         <slot onSlotchange={this.handleDefaultSlotChange} />
       </Host>
     );
@@ -255,6 +300,15 @@ export class Stepper {
 
   @Element() el: HTMLCalciteStepperElement;
 
+  @State() defaultMessages: StepperMessages;
+
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  effectiveLocaleChange(): void {
+    updateMessages(this, this.effectiveLocale);
+  }
+
   private itemMap = new Map<HTMLCalciteStepperItemElement, { position: number; content: Node[] }>();
 
   /** list of sorted Stepper items */
@@ -268,6 +322,12 @@ export class Stepper {
 
   private mutationObserver = createObserver("mutation", () => this.updateItems());
 
+  //--------------------------------------------------------------------------
+  //
+  //  Private Methods
+  //
+  //--------------------------------------------------------------------------
+
   private updateItems(): void {
     this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
       item.icon = this.icon;
@@ -277,12 +337,6 @@ export class Stepper {
     });
   }
 
-  //--------------------------------------------------------------------------
-  //
-  //  Private Methods
-  //
-  //--------------------------------------------------------------------------
-
   private getEnabledStepIndex(
     startIndex: number,
     direction: "next" | "previous" = "next"