feat(block, block-section, filter): add intl props (#852)

#818

src/components/calcite-block-section/calcite-block-section.e2e.ts

@@ -1,5 +1,5 @@
 import { CSS, TEXT } from "./resources";
-import { accessible, hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, reflects, renders } from "../../tests/commonTests";
 import { setUpPage } from "../../tests/utils";
 import { E2EPage } from "@stencil/core/testing";
 
@@ -16,6 +16,26 @@ describe("calcite-block-section", () => {
       }
     ]));
 
+  it("has property defaults", async () =>
+    defaults("calcite-block-section", [
+      {
+        propertyName: "intlCollapse",
+        defaultValue: TEXT.collapse
+      },
+      {
+        propertyName: "intlExpand",
+        defaultValue: TEXT.expand
+      },
+      {
+        propertyName: "open",
+        defaultValue: false
+      },
+      {
+        propertyName: "toggleDisplay",
+        defaultValue: "button"
+      }
+    ]));
+
   describe("toggle-display = 'switch'", () => {
     describe("accessibility", () => {
       it("when open", async () =>

src/components/calcite-block-section/calcite-block-section.tsx

@@ -21,6 +21,16 @@ export class CalciteBlockSection {
   //
   // --------------------------------------------------------------------------
 
+  /**
+   * Tooltip used for the toggle when expanded.
+   */
+  @Prop() intlCollapse = TEXT.collapse;
+
+  /**
+   * Tooltip used for the toggle when collapsed.
+   */
+  @Prop() intlExpand = TEXT.expand;
+
   /**
    * When true, the block's section content will be displayed.
    */
@@ -35,16 +45,20 @@ export class CalciteBlockSection {
   @Prop() text: string;
 
   /**
-   * Tooltip used for the toggle when collapsed.
+   * Tooltip used for the toggle when expanded.
+   *
+   * @deprecated since 5.4.0 - use "intlCollapse" instead.
    */
   @Prop()
-  textExpand = TEXT.expand;
+  textCollapse?: string;
 
   /**
-   * Tooltip used for the toggle when expanded.
+   * Tooltip used for the toggle when collapsed.
+   *
+   * @deprecated since 5.4.0 - use "intlExpand" instead.
    */
   @Prop()
-  textCollapse = TEXT.collapse;
+  textExpand?: string;
 
   /**
    * This property determines the look of the section toggle.
@@ -106,14 +120,25 @@ export class CalciteBlockSection {
   // --------------------------------------------------------------------------
 
   render() {
-    const { el, guid: id, open, text, textCollapse, textExpand, toggleDisplay } = this;
+    const {
+      el,
+      guid: id,
+      intlCollapse,
+      intlExpand,
+      open,
+      text,
+      textCollapse,
+      textExpand,
+      toggleDisplay
+    } = this;
     const dir = getElementDir(el);
     const arrowIcon = open
       ? ICONS.menuOpen
       : dir === "rtl"
       ? ICONS.menuClosedLeft
       : ICONS.menuClosedRight;
-    const toggleLabel = open ? textCollapse : textExpand;
+
+    const toggleLabel = open ? intlCollapse || textCollapse : intlExpand || textExpand;
     const labelId = `${id}__label`;
 
     const headerNode =

src/components/calcite-block/calcite-block.e2e.ts

@@ -14,6 +14,14 @@ describe("calcite-block", () => {
         propertyName: "collapsible",
         defaultValue: false
       },
+      {
+        propertyName: "intlCollapse",
+        defaultValue: TEXT.collapse
+      },
+      {
+        propertyName: "intlExpand",
+        defaultValue: TEXT.expand
+      },
       {
         propertyName: "open",
         defaultValue: false

src/components/calcite-block/calcite-block.stories.ts

@@ -98,17 +98,17 @@ const createBlockAttributes: (options?: { except: string[] }) => Attributes = ({
       }
     },
     {
-      name: "text-collapse",
+      name: "intl-collapse",
       commit() {
-        this.value = text("textCollapse", "Collapse", group);
+        this.value = text("intlCollapse", "Collapse", group);
         delete this.build;
         return this;
       }
     },
     {
-      name: "text-expand",
+      name: "intl-expand",
       commit() {
-        this.value = text("textExpand", "Expand", group);
+        this.value = text("intlExpand", "Expand", group);
         delete this.build;
         return this;
       }
@@ -136,12 +136,12 @@ const createSectionAttributes: () => Attributes = () => {
       value: select("toggleDisplay", toggleDisplayOptions, toggleDisplayOptions[0], group)
     },
     {
-      name: "text-collapse",
-      value: text("textCollapse", "Collapse", group)
+      name: "intl-collapse",
+      value: text("intlCollapse", "Collapse", group)
     },
     {
-      name: "text-expand",
-      value: text("textExpand", "Expand", group)
+      name: "intl-expand",
+      value: text("intlExpand", "Expand", group)
     }
   ];
 };

src/components/calcite-block/calcite-block.tsx

@@ -41,29 +41,43 @@ export class CalciteBlock {
   @Prop() heading: string;
 
   /**
-   * When true, the block's content will be displayed.
+   * Tooltip used for the toggle when expanded.
    */
-  @Prop({ reflect: true }) open = false;
+  @Prop() intlCollapse = TEXT.collapse;
+
+  /**
+   * Tooltip used for the toggle when collapsed.
+   */
+  @Prop() intlExpand = TEXT.expand;
 
   /**
    * When true, content is waiting to be loaded. This state shows a busy indicator.
    */
   @Prop({ reflect: true }) loading = false;
 
+  /**
+   * When true, the block's content will be displayed.
+   */
+  @Prop({ reflect: true }) open = false;
+
   /**
    * Block summary.
    */
   @Prop() summary: string;
 
   /**
-   * Tooltip used for the toggle when collapsed.
+   * Tooltip used for the toggle when expanded.
+   *
+   * @deprecated since 5.4.0 - use "intlCollapse" instead.
    */
-  @Prop() textExpand = TEXT.expand;
+  @Prop() textCollapse?: string;
 
   /**
-   * Tooltip used for the toggle when expanded.
+   * Tooltip used for the toggle when collapsed.
+   *
+   * @deprecated since 5.4.0 - use "intlExpand" instead.
    */
-  @Prop() textCollapse = TEXT.collapse;
+  @Prop() textExpand?: string;
 
   /**
    * Used to set the component's color scheme.
@@ -114,13 +128,16 @@ export class CalciteBlock {
       disabled,
       el,
       heading,
+      intlCollapse,
+      intlExpand,
       loading,
       open,
       summary,
       textCollapse,
       textExpand
     } = this;
-    const toggleLabel = open ? textCollapse : textExpand;
+
+    const toggleLabel = open ? intlCollapse || textCollapse : intlExpand || textExpand;
 
     const hasIcon = el.querySelector(`[slot=${SLOTS.icon}]`);
     const headerContent = (

src/components/calcite-filter/calcite-filter.e2e.ts

@@ -1,11 +1,25 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { accessible, hidden, renders } from "../../tests/commonTests";
+import { accessible, defaults, hidden, renders } from "../../tests/commonTests";
+import { TEXT } from "../calcite-filter/resources";
 
 describe("calcite-filter", () => {
   it("renders", async () => renders("calcite-filter"));
 
   it("honors hidden attribute", async () => hidden("calcite-filter"));
-  it("is accessible", async () => accessible(`<calcite-filter></calcite-filter>`));
+
+  it("is accessible", async () => accessible("calcite-filter"));
+
+  it("has property defaults", async () =>
+    defaults("calcite-filter", [
+      {
+        propertyName: "intlClear",
+        defaultValue: TEXT.clear
+      },
+      {
+        propertyName: "intlLabel",
+        defaultValue: TEXT.filterLabel
+      }
+    ]));
 
   describe("strings", () => {
     it("should update the filter placeholder when a string is provided", async () => {
@@ -20,6 +34,7 @@ describe("calcite-filter", () => {
 
   describe("clear button", () => {
     let page;
+
     beforeEach(async () => {
       page = await newE2EPage();
       await page.setContent("<calcite-filter></calcite-filter>");
@@ -28,6 +43,7 @@ describe("calcite-filter", () => {
         filter.data = [{ foo: "bar" }];
       });
     });
+
     it("should only display when the input has a value", async () => {
       let button = await page.find(`calcite-filter >>> button`);
 
@@ -46,6 +62,7 @@ describe("calcite-filter", () => {
 
       expect(button).not.toBeNull();
     });
+
     it("should clear the value in the input when pressed", async () => {
       await page.evaluate(() => {
         const filter = document.querySelector("calcite-filter");
@@ -72,6 +89,7 @@ describe("calcite-filter", () => {
 
   describe("filter behavior", () => {
     let page: E2EPage;
+
     beforeEach(async () => {
       page = await newE2EPage();
       await page.setContent("<calcite-filter></calcite-filter>");
@@ -111,6 +129,7 @@ describe("calcite-filter", () => {
         ];
       });
     });
+
     it("emits an event with filtered data after a search query is typed into the input", async () => {
       await page.evaluate(() => {
         const filter = document.querySelector("calcite-filter");
@@ -126,6 +145,7 @@ describe("calcite-filter", () => {
       expect(event.detail.find((element) => element.value === "jon")).toBeDefined();
       expect(event.detail.find((element) => element.value === "katy")).toBeUndefined();
     });
+
     it("searches recursively in data and works and matches on a partial string ignoring case", async () => {
       await page.evaluate(() => {
         const filter = document.querySelector("calcite-filter");

src/components/calcite-filter/calcite-filter.tsx

@@ -22,8 +22,20 @@ export class CalciteFilter {
    */
   @Prop() data: object[];
 
+  /**
+   * A text label that will appear on the clear button.
+   */
+  @Prop() intlClear: string = TEXT.clear;
+
+  /**
+   * A text label that will appear next to the input field.
+   */
+  @Prop() intlLabel: string = TEXT.filterLabel;
+
   /**
    * A text label that will appear next to the input field.
+   *
+   * @deprecated since 5.4.0 - use "intlLabel" instead.
    */
   @Prop() textLabel: string;
 
@@ -119,15 +131,15 @@ export class CalciteFilter {
             value=""
             placeholder={this.textPlaceholder}
             onInput={this.inputHandler}
-            aria-label={this.textLabel || TEXT.filterLabel}
+            aria-label={this.intlLabel || this.textLabel}
             ref={(el) => (this.textInput = el as HTMLInputElement)}
           />
           <div class={CSS.searchIcon}>
             <calcite-icon scale="s" icon={ICONS.search} />
           </div>
         </label>
         {!this.empty ? (
-          <button onClick={this.clear} class={CSS.clearButton} aria-label={TEXT.clear}>
+          <button onClick={this.clear} class={CSS.clearButton} aria-label={this.intlClear}>
             <calcite-icon icon={ICONS.close} />
           </button>
         ) : null}