feat(tip,tip-manager): add built-in translations (#6074)

**Related Issue:** #6066 ## Summary This PR will add built-in translations to `tip` & `tip-manager` BREAKING CHANGES: Removed `intl*` properties. - tip : * Removed the property `intlClose`, use `messageOverrides.close` instead. - tip-manager: * Removed the property `intlClose`, use `messageOverrides.close` instead. * Removed the property `intlNext`, use `messageOverrides.next` instead. * Removed the property `intlPaginationLabel`, use `messageOverrides.paginationLabel` instead. * Removed the property `intlPrevious`, use `messageOverrides.previous` instead.
Esri · Dec 16, 2022 · 683cf07 · 683cf07
1 parent b4d0a77
commit 683cf07
Show file tree

Hide file tree

Showing 7 changed files with 147 additions and 100 deletions.
diff --git a/src/components/tip-manager/tip-manager.e2e.ts b/src/components/tip-manager/tip-manager.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { CSS, TEXT } from "./resources";
-import { accessible, defaults, renders, hidden } from "../../tests/commonTests";
+import { accessible, defaults, renders, hidden, t9n } from "../../tests/commonTests";
 
 describe("calcite-tip-manager", () => {
   it("renders", async () => renders("calcite-tip-manager", { display: "block" }));
@@ -239,4 +239,6 @@ describe("calcite-tip-manager", () => {
 
     expect(heading.tagName).toEqual("H2");
   });
+
+  it("supports translations", () => t9n("calcite-tip-manager"));
 });
diff --git a/src/components/tip-manager/tip-manager.stories.ts b/src/components/tip-manager/tip-manager.stories.ts
@@ -1,4 +1,4 @@
-import { boolean, text } from "@storybook/addon-knobs";
+import { boolean } from "@storybook/addon-knobs";
 import {
   Attribute,
   filterComponentAttributes,
@@ -7,7 +7,6 @@ import {
   themesDarkDefault
 } from "../../../.storybook/utils";
 import readme from "./readme.md";
-import { TEXT } from "./resources";
 import { html } from "../../../support/formatting";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { storyFilters } from "../../../.storybook/helpers";
@@ -30,47 +29,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           delete this.build;
           return this;
         }
-      },
-
-      {
-        name: "intl-close",
-        commit(): Attribute {
-          this.value = text("intlClose", TEXT.close);
-          delete this.build;
-          return this;
-        }
-      },
-      {
-        name: "intl-default-title",
-        commit(): Attribute {
-          this.value = text("intlDefaultTitle", TEXT.defaultGroupTitle);
-          delete this.build;
-          return this;
-        }
-      },
-      {
-        name: "intl-pagination-label",
-        commit(): Attribute {
-          this.value = text("intlPaginationLabel", TEXT.defaultPaginationLabel);
-          delete this.build;
-          return this;
-        }
-      },
-      {
-        name: "intl-next",
-        commit(): Attribute {
-          this.value = text("intlNext", TEXT.next);
-          delete this.build;
-          return this;
-        }
-      },
-      {
-        name: "intl-previous",
-        commit(): Attribute {
-          this.value = text("intlPrevious", TEXT.previous);
-          delete this.build;
-          return this;
-        }
       }
     ],
     exceptions
@@ -133,3 +91,33 @@ export const darkThemeRTL_TestOnly = (): string =>
     tipContent
   );
 darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
+
+export const hebrewLocale_TestOnly = (): string => html`<calcite-tip-manager heading-level="1" lang="he">
+  <calcite-tip id="one" heading="test"><p>no pre-selected attribute</p></calcite-tip>
+</calcite-tip-manager>`;
+
+export const norwegianLocale_TestOnly = (): string =>
+  html`<calcite-tip-manager lang="nb"
+    ><calcite-tip><p>basic render</p></calcite-tip></calcite-tip-manager
+  >`;
+
+export const FrenchLocale_TestOnly = (): string =>
+  html`<calcite-tip-manager lang="fr"
+    ><calcite-tip><p>basic render</p></calcite-tip></calcite-tip-manager
+  >`;
+
+export const hongKongLocale_TestOnly = (): string =>
+  html`<calcite-tip-manager lang="zh-HK"
+    ><calcite-tip><p>basic render</p></calcite-tip></calcite-tip-manager
+  >`;
+
+export const ukranianLocaleWithTipGroup_TestOnly = (): string => html`<calcite-tip-manager>
+<calcite-tip-group group-title="Tip Manager heading">
+    <calcite-tip heading="Example tip title">
+    <calcite-tip><p>basic render</p></calcite-tip>
+</calcite-tip-group>
+</calcite-tip-manager>`;
+
+export const bosnianLocale_TestOnly = (): string => html`<calcite-tip-manager heading-level="1" lang="bs">
+  <calcite-tip id="one" heading="test"><p>no pre-selected attribute</p></calcite-tip>
+</calcite-tip-manager>`;
diff --git a/src/components/tip-manager/tip-manager.tsx b/src/components/tip-manager/tip-manager.tsx
@@ -10,18 +10,27 @@ import {
   h,
   VNode
 } from "@stencil/core";
-import { CSS, ICONS, TEXT } from "./resources";
+import { CSS, ICONS } from "./resources";
 import { getElementDir, toAriaBoolean } from "../../utils/dom";
 import { HeadingLevel, Heading } from "../functional/Heading";
 import { createObserver } from "../../utils/observers";
+import { Messages } from "./assets/tip-manager/t9n";
+import {
+  connectMessages,
+  disconnectMessages,
+  setUpMessages,
+  updateMessages
+} from "../../utils/t9n";
+import { connectLocalized, disconnectLocalized } from "../../utils/locale";
 
 /**
  * @slot - A slot for adding `calcite-tip`s.
  */
 @Component({
   tag: "calcite-tip-manager",
   styleUrl: "tip-manager.scss",
-  shadow: true
+  shadow: true,
+  assetsDirs: ["assets"]
 })
 export class TipManager {
   // --------------------------------------------------------------------------
@@ -45,29 +54,21 @@ export class TipManager {
   @Prop({ reflect: true }) headingLevel: HeadingLevel;
 
   /**
-   * Accessible name for the component's close button.
-   */
-  @Prop() intlClose: string;
-
-  /**
-   * Accessible name for the `calcite-tip-group` title.
-   */
-  @Prop() intlDefaultTitle: string;
-
-  /**
-   * Accessible name for navigating to the next tip.
+   * Made into a prop for testing purposes only
+   *
+   * @internal
    */
-  @Prop() intlNext: string;
+  @Prop({ mutable: true }) messages: Messages;
 
   /**
-   * Text that accompanies the component's pagination.
+   * Use this property to override individual strings used by the component.
    */
-  @Prop() intlPaginationLabel: string;
+  @Prop({ mutable: true }) messageOverrides: Partial<Messages>;
 
-  /**
-   * Accessible name for navigating to the previous tip.
-   */
-  @Prop() intlPrevious: string;
+  @Watch("messageOverrides")
+  onMessagesChange(): void {
+    /* wired up by t9n util */
+  }
 
   // --------------------------------------------------------------------------
   //
@@ -97,19 +98,38 @@ export class TipManager {
 
   container: HTMLDivElement;
 
+  @State() defaultMessages: Messages;
+
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  async effectiveLocaleChange(): Promise<void> {
+    await updateMessages(this, this.effectiveLocale);
+    this.updateGroupTitle();
+  }
+
   // --------------------------------------------------------------------------
   //
   //  Lifecycle
   //
   // --------------------------------------------------------------------------
 
   connectedCallback(): void {
+    connectLocalized(this);
+    connectMessages(this);
     this.setUpTips();
     this.mutationObserver?.observe(this.el, { childList: true, subtree: true });
   }
 
+  async componentWillLoad(): Promise<void> {
+    await setUpMessages(this);
+    this.updateGroupTitle();
+  }
+
   disconnectedCallback(): void {
     this.mutationObserver?.disconnect();
+    disconnectLocalized(this);
+    disconnectMessages(this);
   }
 
   // --------------------------------------------------------------------------
@@ -162,11 +182,10 @@ export class TipManager {
     this.tips = tips;
     this.selectedIndex = selectedTip ? tips.indexOf(selectedTip) : 0;
 
-    tips.forEach((tip) => {
+    tips.forEach((tip: HTMLCalciteTipElement) => {
       tip.closeDisabled = true;
     });
     this.showSelectedTip();
-    this.updateGroupTitle();
   }
 
   hideTipManager = (): void => {
@@ -183,9 +202,11 @@ export class TipManager {
   }
 
   updateGroupTitle(): void {
-    const selectedTip = this.tips[this.selectedIndex];
-    const tipParent = selectedTip.closest("calcite-tip-group");
-    this.groupTitle = tipParent?.groupTitle || this.intlDefaultTitle || TEXT.defaultGroupTitle;
+    if (this.tips) {
+      const selectedTip = this.tips[this.selectedIndex];
+      const tipParent = selectedTip.closest("calcite-tip-group");
+      this.groupTitle = tipParent?.groupTitle || this.messages?.defaultGroupTitle;
+    }
   }
 
   previousClicked = (): void => {
@@ -233,11 +254,11 @@ export class TipManager {
 
   renderPagination(): VNode {
     const dir = getElementDir(this.el);
-    const { selectedIndex, tips, total, intlNext, intlPrevious, intlPaginationLabel } = this;
+    const { selectedIndex, tips, total, messages } = this;
 
-    const nextLabel = intlNext || TEXT.next;
-    const previousLabel = intlPrevious || TEXT.previous;
-    const paginationLabel = intlPaginationLabel || TEXT.defaultPaginationLabel;
+    const nextLabel = messages.next;
+    const previousLabel = messages.previous;
+    const paginationLabel = messages.defaultPaginationLabel;
 
     return tips.length > 1 ? (
       <footer class={CSS.pagination}>
@@ -261,9 +282,9 @@ export class TipManager {
   }
 
   render(): VNode {
-    const { closed, direction, headingLevel, groupTitle, selectedIndex, intlClose, total } = this;
+    const { closed, direction, headingLevel, groupTitle, selectedIndex, messages, total } = this;
 
-    const closeLabel = intlClose || TEXT.close;
+    const closeLabel = messages.close;
 
     if (total === 0) {
       return null;

diff --git a/src/components/tip/resources.ts b/src/components/tip/resources.ts
@@ -15,7 +15,3 @@ export const ICONS = {
 export const SLOTS = {
   thumbnail: "thumbnail"
 };
-
-export const TEXT = {
-  close: "Close"
-};
diff --git a/src/components/tip/tip.e2e.ts b/src/components/tip/tip.e2e.ts
@@ -1,5 +1,5 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, hidden, renders, defaults, slots } from "../../tests/commonTests";
+import { accessible, hidden, renders, defaults, slots, t9n } from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-tip", () => {
@@ -64,4 +64,6 @@ describe("calcite-tip", () => {
 
     expect(header).not.toBeNull();
   });
+
+  it("supports translations", () => t9n("calcite-tip"));
 });
diff --git a/src/components/tip/tip.stories.ts b/src/components/tip/tip.stories.ts
@@ -8,7 +8,6 @@ import {
 } from "../../../.storybook/utils";
 import readme from "./readme.md";
 import groupReadme from "../tip-group/readme.md";
-import { TEXT } from "./resources";
 import { placeholderImage } from "../../../.storybook/placeholderImage";
 import { storyFilters } from "../../../.storybook/helpers";
 
@@ -46,14 +45,6 @@ const createAttributes: (options?: { exceptions: string[] }) => Attributes = ({
           delete this.build;
           return this;
         }
-      },
-      {
-        name: "intl-close",
-        commit(): Attribute {
-          this.value = text("intlClose", TEXT.close);
-          delete this.build;
-          return this;
-        }
       }
     ],
     exceptions