feat(flow-item,panel): Add intl string properties. (#843)

* intl strings for calcite-flow-item and calcite-panel * put back TEXT resources * fix deprecation
Esri · Mar 12, 2020 · fed34b7 · fed34b7
1 parent b5b2a04
commit fed34b7
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 50 deletions.
diff --git a/src/components/calcite-flow-item/calcite-flow-item.e2e.ts b/src/components/calcite-flow-item/calcite-flow-item.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 
-import { CSS, SLOTS, TEXT } from "./resources";
+import { CSS, SLOTS } from "./resources";
 import { accessible, hidden, renders } from "../../tests/commonTests";
 
 describe("calcite-flow-item", () => {
@@ -102,24 +102,6 @@ describe("calcite-flow-item", () => {
     expect(element).toEqualText("test");
   });
 
-  it("text defaults should be present", async () => {
-    const page = await newE2EPage();
-
-    await page.setContent("<calcite-flow-item></calcite-flow-item>");
-
-    await page.waitForChanges();
-
-    const element = await page.find("calcite-flow-item");
-
-    const textBack = await element.getProperty("textBack");
-    const textOpen = await element.getProperty("textOpen");
-    const textClose = await element.getProperty("textClose");
-
-    expect(textBack).toEqual(TEXT.back);
-    expect(textOpen).toEqual(TEXT.open);
-    expect(textClose).toEqual(TEXT.close);
-  });
-
   it("menuOpen should show/hide when toggled", async () => {
     const page = await newE2EPage();
 

diff --git a/src/components/calcite-flow-item/calcite-flow-item.tsx b/src/components/calcite-flow-item/calcite-flow-item.tsx
@@ -70,17 +70,35 @@ export class CalciteFlowItem {
   /**
    * 'Back' text string.
    */
-  @Prop() textBack = TEXT.back;
+  @Prop() intlBack?: string;
+
+  /**
+   * 'Back' text string.
+   * @deprecated use "intlBack" instead.
+   */
+  @Prop() textBack?: string;
+
+  /**
+   * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
+   */
+  @Prop() intlClose?: string;
 
   /**
    * 'Close' text string for the menu.
+   * @deprecated use "intlClose" instead.
+   */
+  @Prop() textClose?: string;
+
+  /**
+   * 'Open' text string for the menu.
    */
-  @Prop() textClose = TEXT.close;
+  @Prop() intlOpen?: string;
 
   /**
    * 'Open' text string for the menu.
+   * @deprecated use "intlOpen" instead.
    */
-  @Prop() textOpen = TEXT.open;
+  @Prop() textOpen?: string;
 
   /**
    * Used to set the component's color scheme.
@@ -218,16 +236,16 @@ export class CalciteFlowItem {
   // --------------------------------------------------------------------------
 
   renderBackButton(rtl: boolean): VNode {
-    const { showBackButton, textBack, backButtonClick } = this;
-
+    const { showBackButton, intlBack, textBack, backButtonClick } = this;
+    const label = intlBack || textBack || TEXT.back;
     const icon = rtl ? ICONS.backRight : ICONS.backLeft;
 
     return showBackButton ? (
       <calcite-action
         slot={PANEL_SLOTS.headerLeadingContent}
         key="back-button"
-        aria-label={textBack}
-        text={textBack}
+        aria-label={label}
+        text={label}
         class={CSS.backButton}
         onClick={backButtonClick}
       >
@@ -237,9 +255,11 @@ export class CalciteFlowItem {
   }
 
   renderMenuButton(): VNode {
-    const { menuOpen, textOpen, textClose } = this;
+    const { menuOpen, textOpen, intlOpen, intlClose, textClose } = this;
+    const closeLabel = intlClose || textClose || TEXT.close;
+    const openLabel = intlOpen || textOpen || TEXT.open;
 
-    const menuLabel = menuOpen ? textClose : textOpen;
+    const menuLabel = menuOpen ? closeLabel : openLabel;
 
     return (
       <calcite-action

diff --git a/src/components/calcite-flow-item/resources.ts b/src/components/calcite-flow-item/resources.ts
@@ -15,12 +15,6 @@ export const CSS = {
   fabContainer: "fab-container"
 };
 
-export const TEXT = {
-  back: "Back",
-  open: "Open",
-  close: "Close"
-};
-
 export const SLOTS = {
   menuActions: "menu-actions",
   fab: "fab",
@@ -32,3 +26,9 @@ export const ICONS = {
   backLeft: "chevron-left",
   backRight: "chevron-right"
 };
+
+export const TEXT = {
+  back: "Back",
+  open: "Open",
+  close: "Close"
+};
diff --git a/src/components/calcite-flow/calcite-flow.stories.ts b/src/components/calcite-flow/calcite-flow.stories.ts
@@ -4,7 +4,7 @@ import { ATTRIBUTES } from "../../../.storybook/resources";
 const { dir, theme } = ATTRIBUTES;
 import readme from "./readme.md";
 import itemReadme from "../calcite-flow-item/readme.md";
-import { SLOTS } from "../calcite-flow-item/resources";
+import { SLOTS, TEXT } from "../calcite-flow-item/resources";
 import dedent from "dedent";
 
 export default {
@@ -57,12 +57,16 @@ const createFlowItemAttributes: (group: string) => Attributes = (group) => {
       value: text("summary", "Summary", group)
     },
     {
-      name: "text-back",
-      value: text("textBack", "Back", group)
+      name: "intl-back",
+      value: text("intlBack", TEXT.back, group)
     },
     {
-      name: "text-open",
-      value: text("textOpen", "Open", group)
+      name: "intl-open",
+      value: text("intlOpen", TEXT.open, group)
+    },
+    {
+      name: "intl-close",
+      value: text("intlClose", TEXT.close, group)
     }
   ];
 };

diff --git a/src/components/calcite-panel/calcite-panel.stories.ts b/src/components/calcite-panel/calcite-panel.stories.ts
@@ -3,7 +3,7 @@ import { Attributes, createComponentHTML as create, darkBackground, parseReadme
 import { ATTRIBUTES } from "../../../.storybook/resources";
 const { dir, theme, scale } = ATTRIBUTES;
 import readme from "./readme.md";
-import { SLOTS } from "./resources";
+import { SLOTS, TEXT } from "./resources";
 import dedent from "dedent";
 
 export default {
@@ -41,8 +41,8 @@ const createAttributes: () => Attributes = () => [
     value: boolean("loading", false)
   },
   {
-    name: "text-close",
-    value: text("textClose", "Close")
+    name: "intl-close",
+    value: text("intlClose", TEXT.close)
   },
   {
     name: "theme",

diff --git a/src/components/calcite-panel/calcite-panel.tsx b/src/components/calcite-panel/calcite-panel.tsx
@@ -72,7 +72,13 @@ export class CalcitePanel {
   /**
    * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
    */
-  @Prop() textClose = TEXT.close;
+  @Prop() intlClose?: string;
+
+  /**
+   * 'Close' text string for the close button. The close button will only be shown when 'dismissible' is true.
+   * @deprecated use "intlClose" instead.
+   */
+  @Prop() textClose?: string;
 
   /**
    * Used to set the component's color scheme.
@@ -169,13 +175,14 @@ export class CalcitePanel {
   }
 
   renderHeaderTrailingContent(): VNode {
-    const { dismiss, dismissible, textClose } = this;
+    const { dismiss, dismissible, intlClose, textClose } = this;
+    const text = intlClose || textClose || TEXT.close;
 
     const dismissibleNode = dismissible ? (
       <calcite-action
         ref={(dismissButtonEl) => (this.dismissButtonEl = dismissButtonEl)}
-        aria-label={textClose}
-        text={textClose}
+        aria-label={text}
+        text={text}
         onClick={dismiss}
       >
         <calcite-icon scale="s" icon={ICONS.close} />

diff --git a/src/components/calcite-panel/resources.ts b/src/components/calcite-panel/resources.ts
@@ -9,10 +9,6 @@ export const CSS = {
   footer: "footer"
 };
 
-export const TEXT = {
-  close: "Close"
-};
-
 export const ICONS = {
   close: "x"
 };
@@ -24,3 +20,7 @@ export const SLOTS = {
   fab: "fab",
   footer: "footer"
 };
+
+export const TEXT = {
+  close: "Close"
+};