feat(tip,tip-manager): Add intl string properties. (#844)

* tip, tip-manager intl

* put back text resources

* fix deprecation

src/components/calcite-tip-group/calcite-tip-group.tsx

@@ -1,5 +1,4 @@
 import { Component, Prop, h } from "@stencil/core";
-import { TEXT } from "../calcite-tip-manager/resources";
 
 @Component({
   tag: "calcite-tip-group",
@@ -16,7 +15,7 @@ export class CalciteTipGroup {
   /**
    * The title used for all nested tips.
    */
-  @Prop({ reflect: true }) textGroupTitle = TEXT.defaultGroupTitle;
+  @Prop() textGroupTitle?: string;
 
   render() {
     return <slot />;

src/components/calcite-tip-manager/calcite-tip-manager.stories.ts

@@ -25,24 +25,24 @@ const createAttributes: () => Attributes = () => [
     value: select("dir", dir.values, dir.defaultValue)
   },
   {
-    name: "text-close",
-    value: text("textClose", TEXT.close)
+    name: "intl-close",
+    value: text("intlClose", TEXT.close)
   },
   {
     name: "text-defalut-title",
     value: text("textDefaultTitle", TEXT.defaultGroupTitle)
   },
   {
-    name: "text-pagination-label",
-    value: text("textPaginationLabel", TEXT.defaultPaginationLabel)
+    name: "intl-pagination-label",
+    value: text("intlPaginationLabel", TEXT.defaultPaginationLabel)
   },
   {
-    name: "text-next",
-    value: text("textNext", TEXT.next)
+    name: "intl-next",
+    value: text("intlNext", TEXT.next)
   },
   {
-    name: "text-previous",
-    value: text("textPrevious", TEXT.previous)
+    name: "intl-previous",
+    value: text("intlPrevious", TEXT.previous)
   },
   {
     name: "theme",

src/components/calcite-tip-manager/calcite-tip-manager.tsx

@@ -41,29 +41,59 @@ export class CalciteTipManager {
   }
 
   /**
-   * Alternate text for closing the `calcite-tip-manager`.
+   * Alternate text for closing the tip.
+   */
+  @Prop() intlClose?: string;
+
+  /**
+   * Alternate text for closing the tip.
+   * @deprecated use "intlClose" instead.
    */
-  @Prop() textClose = TEXT.close;
+  @Prop() textClose?: string;
 
   /**
    * The default group title for the `calcite-tip-manager`.
    */
-  @Prop({ reflect: true }) textDefaultTitle = TEXT.defaultGroupTitle;
+  @Prop() intlDefaultTitle?: string;
+
+  /**
+   * The default group title for the `calcite-tip-manager`.
+   * @deprecated use "intlDefaultTitle" instead.
+   */
+  @Prop() textDefaultTitle?: string;
 
   /**
    * Alternate text for navigating to the next tip.
    */
-  @Prop() textNext = TEXT.next;
+  @Prop() intlNext?: string;
+
+  /**
+   * Alternate text for navigating to the next tip.
+   * @deprecated use "intlNext" instead.
+   */
+  @Prop() textNext?: string;
+
+  /**
+   * Label that appears on hover of pagination icon.
+   */
+  @Prop() intlPaginationLabel?: string;
 
   /**
    * Label that appears on hover of pagination icon.
+   * @deprecated use "intlPaginationLabel" instead.
    */
-  @Prop({ reflect: true }) textPaginationLabel = TEXT.defaultPaginationLabel;
+  @Prop() textPaginationLabel?: string;
 
   /**
    * Alternate text for navigating to the previous tip.
    */
-  @Prop() textPrevious = TEXT.previous;
+  @Prop() intlPrevious?: string;
+
+  /**
+   * Alternate text for navigating to the previous tip.
+   * @deprecated use "intlPrevious" instead.
+   */
+  @Prop() textPrevious?: string;
 
   /**
    * Used to set the component's color scheme.
@@ -92,7 +122,7 @@ export class CalciteTipManager {
 
   @State() direction: "advancing" | "retreating";
 
-  @State() groupTitle = this.textDefaultTitle;
+  @State() groupTitle: string;
 
   observer = new MutationObserver(() => this.setUpTips());
 
@@ -187,7 +217,11 @@ export class CalciteTipManager {
   updateGroupTitle() {
     const selectedTip = this.tips[this.selectedIndex];
     const tipParent = selectedTip.closest("calcite-tip-group");
-    this.groupTitle = tipParent?.textGroupTitle || this.textDefaultTitle;
+    this.groupTitle =
+      tipParent?.textGroupTitle ||
+      this.intlDefaultTitle ||
+      this.textDefaultTitle ||
+      TEXT.defaultGroupTitle;
   }
 
   previousClicked = (): void => {
@@ -235,29 +269,44 @@ export class CalciteTipManager {
 
   renderPagination() {
     const dir = getElementDir(this.el);
-    const { selectedIndex, tips, total } = this;
+    const {
+      selectedIndex,
+      tips,
+      total,
+      intlNext,
+      textNext,
+      intlPrevious,
+      textPrevious,
+      intlPaginationLabel,
+      textPaginationLabel
+    } = this;
+
+    const nextLabel = intlNext || textNext || TEXT.next;
+    const previousLabel = intlPrevious || textPrevious || TEXT.previous;
+    const paginationLabel =
+      intlPaginationLabel || textPaginationLabel || TEXT.defaultPaginationLabel;
 
     return tips.length > 1 ? (
       <footer class={CSS.pagination}>
         <calcite-action
-          text={this.textPrevious}
+          text={previousLabel}
           onClick={this.previousClicked}
           class={CSS.pagePrevious}
         >
           <calcite-icon scale="s" icon={dir === "ltr" ? ICONS.chevronLeft : ICONS.chevronRight} />
         </calcite-action>
-        <span class={CSS.pagePosition}>
-          {`${this.textPaginationLabel} ${selectedIndex + 1}/${total}`}
-        </span>
-        <calcite-action text={this.textNext} onClick={this.nextClicked} class={CSS.pageNext}>
+        <span class={CSS.pagePosition}>{`${paginationLabel} ${selectedIndex + 1}/${total}`}</span>
+        <calcite-action text={nextLabel} onClick={this.nextClicked} class={CSS.pageNext}>
           <calcite-icon scale="s" icon={dir === "ltr" ? ICONS.chevronRight : ICONS.chevronLeft} />
         </calcite-action>
       </footer>
     ) : null;
   }
 
   render() {
-    const { closed, direction, groupTitle, selectedIndex, textClose, total } = this;
+    const { closed, direction, groupTitle, selectedIndex, intlClose, textClose, total } = this;
+
+    const closeLabel = intlClose || textClose || TEXT.close;
 
     if (total === 0) {
       return <Host />;
@@ -276,7 +325,7 @@ export class CalciteTipManager {
             <h2 key={selectedIndex} class={CSS.heading}>
               {groupTitle}
             </h2>
-            <calcite-action text={textClose} onClick={this.hideTipManager} class={CSS.close}>
+            <calcite-action text={closeLabel} onClick={this.hideTipManager} class={CSS.close}>
               <calcite-icon scale="s" icon={ICONS.close} />
             </calcite-action>
           </header>

src/components/calcite-tip-manager/resources.ts

@@ -1,11 +1,3 @@
-export const TEXT = {
-  defaultGroupTitle: "Tips",
-  defaultPaginationLabel: "Tip",
-  close: "Close",
-  previous: "Previous",
-  next: "Next"
-};
-
 export const CSS = {
   header: "header",
   heading: "heading",
@@ -25,3 +17,11 @@ export const ICONS = {
   chevronRight: "chevron-right",
   close: "x"
 };
+
+export const TEXT = {
+  defaultGroupTitle: "Tips",
+  defaultPaginationLabel: "Tip",
+  close: "Close",
+  previous: "Previous",
+  next: "Next"
+};

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

@@ -33,8 +33,8 @@ const createAttributes: () => Attributes = () => [
     value: text("heading", "My Tip")
   },
   {
-    name: "text-close",
-    value: text("textClose", TEXT.close)
+    name: "intl-close",
+    value: text("intlClose", TEXT.close)
   },
   {
     name: "theme",

src/components/calcite-tip/calcite-tip.tsx

@@ -43,7 +43,13 @@ export class CalciteTip {
   /**
    * Alternate text for closing the tip.
    */
-  @Prop() textClose = TEXT.close;
+  @Prop() intlClose?: string;
+
+  /**
+   * Alternate text for closing the tip.
+   * @deprecated use "intlClose" instead.
+   */
+  @Prop() textClose?: string;
 
   /**
    * Used to set the component's color scheme.
@@ -88,10 +94,11 @@ export class CalciteTip {
   // --------------------------------------------------------------------------
 
   renderHeader(): VNode {
-    const { nonDismissible, hideTip, textClose, heading } = this;
+    const { nonDismissible, hideTip, intlClose, textClose, heading } = this;
+    const text = intlClose || textClose || TEXT.close;
 
     const dismissButtonNode = !nonDismissible ? (
-      <calcite-action text={textClose} onClick={hideTip} class={CSS.close}>
+      <calcite-action text={text} onClick={hideTip} class={CSS.close}>
         <calcite-icon scale="s" icon={ICONS.close} />
       </calcite-action>
     ) : null;

src/components/calcite-tip/resources.ts

@@ -8,14 +8,14 @@ export const CSS = {
   info: "info"
 };
 
-export const TEXT = {
-  close: "Close"
-};
-
 export const ICONS = {
   close: "x"
 };
 
 export const SLOTS = {
   thumbnail: "thumbnail"
 };
+
+export const TEXT = {
+  close: "Close"
+};