feat(rating): add built-in translations

src/components/rating/rating.e2e.ts

@@ -1,5 +1,14 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { renders, accessible, focusable, labelable, formAssociated, disabled, hidden } from "../../tests/commonTests";
+import {
+  renders,
+  accessible,
+  focusable,
+  labelable,
+  formAssociated,
+  disabled,
+  hidden,
+  t9n
+} from "../../tests/commonTests";
 
 describe("calcite-rating", () => {
   it("renders", async () => renders("<calcite-rating></calcite-rating>", { display: "flex" }));
@@ -12,6 +21,8 @@ describe("calcite-rating", () => {
 
   it("can be disabled", () => disabled("<calcite-rating value='3'></calcite-rating>"));
 
+  it("supports translations", () => t9n("calcite-rating"));
+
   it("renders outlined star when no value or average is set", async () => {
     const page = await newE2EPage();
     await page.setContent("<calcite-rating></calcite-rating>");

src/components/rating/rating.tsx

@@ -9,22 +9,39 @@ import {
   Method,
   Prop,
   State,
-  VNode
+  VNode,
+  Watch
 } from "@stencil/core";
 import { guid } from "../../utils/guid";
 import { Scale } from "../interfaces";
 import { LabelableComponent, connectLabel, disconnectLabel } from "../../utils/label";
 import { connectForm, disconnectForm, FormComponent, HiddenFormInputSlot } from "../../utils/form";
-import { TEXT } from "./resources";
 import { InteractiveComponent, updateHostInteraction } from "../../utils/interactive";
 import { isActivationKey } from "../../utils/key";
+import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  T9nComponent,
+  updateMessages
+} from "../../utils/t9n";
+import { Messages } from "./assets/rating/t9n";
 
 @Component({
   tag: "calcite-rating",
   styleUrl: "rating.scss",
-  shadow: true
+  shadow: true,
+  assetsDirs: ["assets"]
 })
-export class Rating implements LabelableComponent, FormComponent, InteractiveComponent {
+export class Rating
+  implements
+    LabelableComponent,
+    FormComponent,
+    InteractiveComponent,
+    LocalizedComponent,
+    T9nComponent
+{
   //--------------------------------------------------------------------------
   //
   //  Element
@@ -39,43 +56,54 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom
   //
   // --------------------------------------------------------------------------
 
-  /** Specifies the size of the component. */
-  @Prop({ reflect: true }) scale: Scale = "m";
-
-  /** The component's value. */
-  @Prop({ reflect: true, mutable: true }) value = 0;
-
-  /** When true, the component's value can be read, but cannot be modified. */
-  @Prop({ reflect: true }) readOnly = false;
-
-  /** When true, interaction is prevented and the component is displayed with lower opacity. */
-  @Prop({ reflect: true }) disabled = false;
-
-  /** When true, and if available, displays the "average" and/or "count" data summary in a `calcite-chip`. */
-  @Prop({ reflect: true }) showChip = false;
+  /** Specifies a cumulative average from previous ratings to display. */
+  @Prop({ reflect: true }) average?: number;
 
   /** Specifies the number of previous ratings to display. */
   @Prop({ reflect: true }) count?: number;
 
-  /** Specifies a cumulative average from previous ratings to display. */
-  @Prop({ reflect: true }) average?: number;
-
-  /** Specifies the name of the component on form submission. */
-  @Prop({ reflect: true }) name: string;
+  /** When true, interaction is prevented and the component is displayed with lower opacity. */
+  @Prop({ reflect: true }) disabled = false;
 
   /**
    * Accessible name for the component.
    *
-   * @default "Rating"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
    */
-  @Prop() intlRating?: string = TEXT.rating;
+  @Prop() intlRating: string;
 
   /**
    * Accessible name for each star. The `${num}` in the string will be replaced by the number.
    *
-   * @default "Stars: ${num}"
+   * @deprecated – translations are now built-in, if you need to override a string, please use `messageOverrides`
+   */
+  @Prop() intlStars: string;
+
+  /**
+   * Made into a prop for testing purposes only
+   *
+   * @internal
    */
-  @Prop() intlStars?: string = TEXT.stars;
+  @Prop({ mutable: true }) messages: Messages;
+
+  /**
+   * Use this property to override individual strings used by the component.
+   */
+  @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
+
+  @Watch("intlRating")
+  @Watch("intlStars")
+  @Watch("defaultMessages")
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    /* wired up by t9n util */
+  }
+
+  /** Specifies the name of the component on form submission. */
+  @Prop({ reflect: true }) name: string;
+
+  /** When true, the component's value can be read, but cannot be modified. */
+  @Prop({ reflect: true }) readOnly = false;
 
   /**
    * When true, the component must have a value in order for the form to submit.
@@ -84,18 +112,35 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom
    */
   @Prop({ reflect: true }) required = false;
 
+  /** Specifies the size of the component. */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
+  /** When true, and if available, displays the "average" and/or "count" data summary in a `calcite-chip`. */
+  @Prop({ reflect: true }) showChip = false;
+
+  /** The component's value. */
+  @Prop({ reflect: true, mutable: true }) value = 0;
+
   //--------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
+    connectLocalized(this);
+    connectMessages(this);
     connectLabel(this);
     connectForm(this);
   }
 
+  async componentWillLoad(): Promise<void> {
+    await setUpMessages(this);
+  }
+
   disconnectedCallback(): void {
+    disconnectLocalized(this);
+    disconnectMessages(this);
     disconnectLabel(this);
     disconnectForm(this);
   }
@@ -160,7 +205,7 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom
                 <calcite-icon icon="star-f" scale={this.scale} />
               </div>
             )}
-            <span class="visually-hidden">{this.intlStars.replace("${num}", `${i}`)}</span>
+            <span class="visually-hidden">{this.messages.stars.replace("${num}", `${i}`)}</span>
           </label>
           <input
             checked={i === this.value}
@@ -187,7 +232,7 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom
   }
 
   render() {
-    const { disabled, intlRating, showChip, scale, count, average } = this;
+    const { disabled, messages, showChip, scale, count, average } = this;
 
     return (
       <Fragment>
@@ -198,7 +243,7 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom
           onPointerLeave={() => (this.hoverValue = null)}
           onTouchEnd={() => (this.hoverValue = null)}
         >
-          <legend class="visually-hidden">{intlRating}</legend>
+          <legend class="visually-hidden">{messages.rating}</legend>
           {this.renderStars()}
         </fieldset>
         {(count || average) && showChip ? (
@@ -267,6 +312,15 @@ export class Rating implements LabelableComponent, FormComponent, InteractiveCom
 
   defaultValue: Rating["value"];
 
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  effectiveLocaleChange(): void {
+    updateMessages(this, this.effectiveLocale);
+  }
+
+  @State() defaultMessages: Messages;
+
   @State() hoverValue: number;
 
   @State() focusValue: number;

src/tests/commonTests.ts

@@ -974,25 +974,35 @@ export async function t9n(componentSetup: TagOrHTML | TagAndPage): Promise<void>
   }
 
   async function assertLangSwitch(): Promise<void> {
-    await page.evaluate(() => {
-      const orig = window.fetch;
-      window.fetch = async function (input, init) {
-        if (typeof input === "string" && input.endsWith("messages_es.json")) {
-          const dummyMessages = {};
-          window.fetch = orig;
-          return new Response(new Blob([JSON.stringify(dummyMessages, null, 2)], { type: "application/json" }));
-        }
+    const enMessages = await getCurrentMessages();
+    const fakeBundleIdentifier = "__fake__";
+    await page.evaluate(
+      (enMessages, fakeBundleIdentifier) => {
+        const orig = window.fetch;
+        window.fetch = async function (input, init) {
+          if (typeof input === "string" && input.endsWith("messages_es.json")) {
+            const fakeEsMessages = {
+              ...enMessages, // reuse real message bundle in case component rendering depends on strings
+
+              [fakeBundleIdentifier]: true // we inject a fake identifier for assertion-purposes
+            };
+            window.fetch = orig;
+            return new Response(new Blob([JSON.stringify(fakeEsMessages, null, 2)], { type: "application/json" }));
+          }
 
-        return orig.call(input, init);
-      };
-    });
+          return orig.call(input, init);
+        };
+      },
+      enMessages,
+      fakeBundleIdentifier
+    );
 
     component.setAttribute("lang", "es");
     await page.waitForChanges();
     await page.waitForTimeout(3000);
     const esMessages = await getCurrentMessages();
 
-    expect(esMessages).toEqual({});
+    expect(esMessages).toHaveProperty(fakeBundleIdentifier);
 
     // reset test changes
     component.removeAttribute("lang");