feat(stepper, stepper-item): add numberingSystem property (#5467)

* feat(stepper, stepper-item): add numberingSystem property * use setter for NumberStringFormat's options instead of setOptions * change formatter options in effectiveLocale watcher * cleanup Co-authored-by: Ben Elan <benelan@users.noreply.github.com>
Esri · Oct 17, 2022 · 9ca3117 · 9ca3117
1 parent 5e3d7ab
commit 9ca3117
Show file tree

Hide file tree

Showing 4 changed files with 155 additions and 12 deletions.
diff --git a/src/components/stepper-item/stepper-item.tsx b/src/components/stepper-item/stepper-item.tsx
@@ -8,6 +8,7 @@ import {
   Listen,
   Method,
   Prop,
+  State,
   VNode,
   Watch
 } from "@stencil/core";
@@ -19,6 +20,12 @@ import {
   StepperItemEventDetail,
   StepperItemKeyEventDetail
 } from "../stepper/interfaces";
+import {
+  numberStringFormatter,
+  LocalizedComponent,
+  disconnectLocalized,
+  connectLocalized
+} from "../../utils/locale";
 
 /**
  * @slot - A slot for adding custom content.
@@ -28,7 +35,7 @@ import {
   styleUrl: "stepper-item.scss",
   shadow: true
 })
-export class StepperItem implements InteractiveComponent {
+export class StepperItem implements InteractiveComponent, LocalizedComponent {
   //--------------------------------------------------------------------------
   //
   //  Element
@@ -127,6 +134,17 @@ export class StepperItem implements InteractiveComponent {
   //
   //--------------------------------------------------------------------------
 
+  @State() effectiveLocale = "";
+
+  @Watch("effectiveLocale")
+  effectiveLocaleWatcher(locale: string): void {
+    numberStringFormatter.numberFormatOptions = {
+      locale,
+      numberingSystem: this.parentStepperEl?.numberingSystem,
+      useGrouping: false
+    };
+  }
+
   headerEl: HTMLDivElement;
 
   //--------------------------------------------------------------------------
@@ -166,6 +184,7 @@ export class StepperItem implements InteractiveComponent {
   //--------------------------------------------------------------------------
 
   connectedCallback(): void {
+    connectLocalized(this);
     const { selected, active } = this;
 
     if (selected) {
@@ -193,6 +212,10 @@ export class StepperItem implements InteractiveComponent {
     updateHostInteraction(this, true);
   }
 
+  disconnectedCallback(): void {
+    disconnectLocalized(this);
+  }
+
   render(): VNode {
     return (
       <Host
@@ -210,7 +233,11 @@ export class StepperItem implements InteractiveComponent {
             }
           >
             {this.icon ? this.renderIcon() : null}
-            {this.numbered ? <div class="stepper-item-number">{this.itemPosition + 1}.</div> : null}
+            {this.numbered ? (
+              <div class="stepper-item-number">
+                {numberStringFormatter.numberFormatter.format(this.itemPosition + 1)}.
+              </div>
+            ) : null}
             <div class="stepper-item-header-text">
               <span class="stepper-item-heading">{this.heading || this.itemTitle}</span>
               <span class="stepper-item-description">{this.description || this.itemSubtitle}</span>

diff --git a/src/components/stepper/stepper.stories.ts b/src/components/stepper/stepper.stories.ts
@@ -1,5 +1,5 @@
 import { select, text } from "@storybook/addon-knobs";
-import { boolean, createSteps, stepStory, storyFilters } from "../../../.storybook/helpers";
+import { boolean, storyFilters } from "../../../.storybook/helpers";
 import { themesDarkDefault } from "../../../.storybook/utils";
 import readme1 from "./readme.md";
 import readme2 from "../stepper-item/readme.md";
@@ -133,15 +133,6 @@ export const darkThemeRTL_TestOnly = (): string => html`
 
 darkThemeRTL_TestOnly.parameters = { themes: themesDarkDefault };
 
-export const minHeight_TestOnly = stepStory(
-  (): string => html`<calcite-stepper style="min-height: 500px;">
-    <calcite-stepper-item item-title="Title one" id="one"> Step one </calcite-stepper-item>
-    <calcite-stepper-item item-title="Title two"> Step two </calcite-stepper-item>
-    <calcite-stepper-item item-title="Title three"> Step three </calcite-stepper-item>
-  </calcite-stepper>`,
-  createSteps("calcite-stepper").click("#one").snapshot("stepper with min-height")
-);
-
 export const overriddenWidth_TestOnly = (): string => html` <calcite-stepper numbered style="width: 50vw">
   <calcite-stepper-item item-title="Choose method" item-subtitle="Add members without sending invitations" complete>
     <calcite-notice active width="full">
@@ -171,3 +162,32 @@ export const disabled_TestOnly = (): string => html`<calcite-stepper>
   <calcite-stepper-item item-title="item3" active>3</calcite-stepper-item>
   <calcite-stepper-item item-title="item4" disabled>4</calcite-stepper-item>
 </calcite-stepper>`;
+
+export const arabicNumberingSystem_TestOnly = (): string => html` <calcite-stepper
+  numbered
+  numbering-system="arab"
+  lang="ar"
+  dir="rtl"
+  scale="s"
+>
+  <calcite-stepper-item item-title="الخطوةالاولى" complete>
+    <calcite-notice active width="full">
+      <div slot="message">الخطوة الأولى للمحتوى هنا</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+  <calcite-stepper-item item-title="الخطوة الثانية" complete>
+    <calcite-notice active width="full">
+      <div slot="message">الخطوة الثانية للمحتوى هنا</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+  <calcite-stepper-item item-title="الخطوة الثالثة" item-subtitle="بعض النصوص الفرعية" active>
+    <calcite-notice active width="full">
+      <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+  <calcite-stepper-item item-title="الخطوة الرابعة">
+    <calcite-notice active width="full">
+      <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
+    </calcite-notice>
+  </calcite-stepper-item>
+</calcite-stepper>`;
diff --git a/src/components/stepper/stepper.tsx b/src/components/stepper/stepper.tsx
@@ -13,6 +13,7 @@ import {
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
 import { focusElement } from "../../utils/dom";
+import { NumberingSystem } from "../../utils/locale";
 
 /**
  * @slot - A slot for adding `calcite-stepper-item`s.
@@ -46,6 +47,11 @@ export class Stepper {
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
 
+  /**
+   * Specifies the Unicode numeral system used by the component for localization.
+   */
+  @Prop({ reflect: true }) numberingSystem?: NumberingSystem;
+
   /** Specifies the size of the component. */
   @Prop({ reflect: true }) scale: Scale = "m";
 

diff --git a/src/demos/stepper.html b/src/demos/stepper.html
@@ -126,6 +126,36 @@
         </div>
       </div>
 
+      <!-- Arabic numberingSystem -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Arabic numbering system</div>
+
+        <div class="child-flex">
+          <calcite-stepper numbered numbering-system="arab" lang="ar" dir="rtl" scale="s">
+            <calcite-stepper-item item-title="الخطوةالاولى" complete>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الأولى للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الثانية" complete>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الثانية للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الثالثة" item-subtitle="بعض النصوص الفرعية" active>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الرابعة">
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
       <!-- disabled -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">disabled</div>
@@ -243,6 +273,36 @@
         </div>
       </div>
 
+      <!-- Arabic numberingSystem -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Arabic numbering system</div>
+
+        <div class="child-flex">
+          <calcite-stepper numbered numbering-system="arab" lang="ar" dir="rtl" scale="m">
+            <calcite-stepper-item item-title="الخطوةالاولى" complete>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الأولى للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الثانية" complete>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الثانية للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الثالثة" item-subtitle="بعض النصوص الفرعية" active>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الرابعة">
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
       <!-- disabled -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">disabled</div>
@@ -360,6 +420,36 @@
         </div>
       </div>
 
+      <!-- Arabic numberingSystem -->
+      <div class="parent-flex">
+        <div class="child-flex right-aligned-text">Arabic numbering system</div>
+
+        <div class="child-flex">
+          <calcite-stepper numbered numbering-system="arab" lang="ar" dir="rtl" scale="l">
+            <calcite-stepper-item item-title="الخطوةالاولى" complete>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الأولى للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الثانية" complete>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الثانية للمحتوى هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الثالثة" item-subtitle="بعض النصوص الفرعية" active>
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الثالثة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+            <calcite-stepper-item item-title="الخطوة الرابعة">
+              <calcite-notice active width="full">
+                <div slot="message">الخطوة الرابعة المحتوى يذهب هنا</div>
+              </calcite-notice>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        </div>
+      </div>
+
       <!-- disabled -->
       <div class="parent-flex">
         <div class="child-flex right-aligned-text">disabled</div>