Stepper: register component (#29163)

packages/devextreme-scss/scss/widgets/base/stepper/_index.scss

@@ -0,0 +1,4 @@
+@use "../mixins" as *;
+@use "layout/stepper" as *;
+
+// adduse

packages/devextreme-scss/scss/widgets/base/stepper/_mixins.scss

@@ -0,0 +1 @@
+@import 'layout/stepper/mixins';

packages/devextreme-scss/scss/widgets/base/stepper/layout/stepper/_index.scss

@@ -0,0 +1,11 @@
+.dx-stepper {
+  display: flex;
+  justify-content: space-between;
+}
+
+.dx-stepper-item {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #D6D6D6;
+  border-radius: 999em;
+}

packages/devextreme-scss/scss/widgets/base/stepper/layout/stepper/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin stepper() {
+  .dx-stepper {
+    border: 1px solid black;
+  }
+}

packages/devextreme-scss/scss/widgets/fluent/_index.scss

@@ -5,6 +5,7 @@
 @use "./button";
 @use "./buttonGroup";
 @use "./scrollView";
+@use "./stepper";
 @use "./splitter";
 @use "./checkBox";
 @use "./switch";

packages/devextreme-scss/scss/widgets/fluent/stepper/_colors.scss

@@ -0,0 +1,5 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse

packages/devextreme-scss/scss/widgets/fluent/stepper/_index.scss

@@ -0,0 +1,10 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/stepper/mixins" as *;
+
+// adduse
+
+@include stepper();

packages/devextreme-scss/scss/widgets/fluent/stepper/_sizes.scss

@@ -0,0 +1,6 @@
+@use "sass:math";
+@use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
+
+// adduse

packages/devextreme-scss/scss/widgets/generic/_index.scss

@@ -5,6 +5,7 @@
 @use "./button";
 @use "./buttonGroup";
 @use "./scrollView";
+@use "./stepper";
 @use "./splitter";
 @use "./checkBox";
 @use "./switch";

packages/devextreme-scss/scss/widgets/generic/stepper/_colors.scss

@@ -0,0 +1,5 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse

packages/devextreme-scss/scss/widgets/generic/stepper/_index.scss

@@ -0,0 +1,10 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/stepper/mixins" as *;
+
+// adduse
+
+@include stepper();

packages/devextreme-scss/scss/widgets/generic/stepper/_sizes.scss

@@ -0,0 +1,6 @@
+@use "sass:math";
+@use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
+
+// adduse

packages/devextreme-scss/scss/widgets/material/_index.scss

@@ -5,6 +5,7 @@
 @use "./button";
 @use "./buttonGroup";
 @use "./scrollView";
+@use "./stepper";
 @use "./splitter";
 @use "./checkBox";
 @use "./switch";

packages/devextreme-scss/scss/widgets/material/stepper/_colors.scss

@@ -0,0 +1,5 @@
+@use "sass:color";
+@use "../sizes" as *;
+@use "../colors" as *;
+
+// adduse

packages/devextreme-scss/scss/widgets/material/stepper/_index.scss

@@ -0,0 +1,10 @@
+@use "../../base/stepper";
+@use "colors" as *;
+@use "../colors" as *;
+@use "sizes" as *;
+@use "../sizes" as *;
+@use "../../base/stepper/mixins" as *;
+
+// adduse
+
+@include stepper();

packages/devextreme-scss/scss/widgets/material/stepper/_sizes.scss

@@ -0,0 +1,6 @@
+@use "sass:math";
+@use "colors" as *;
+@use "../colors" as *;
+@use "../sizes" as *;
+
+// adduse

packages/devextreme-themebuilder/tests/data/dependencies.ts

@@ -45,6 +45,7 @@ export const dependencies: FlatStylesDependencies = {
   slider: ['validation', 'button', 'popup', 'popover', 'tooltip'],
   rangeslider: ['validation', 'button', 'popup', 'popover', 'tooltip', 'slider'],
   speeddialaction: [],
+  stepper: [],
   splitter: [],
   switch: ['validation'],
   tagbox: ['validation', 'button', 'loadindicator', 'textbox', 'popup', 'loadpanel', 'scrollview', 'list', 'checkbox', 'selectbox'],

packages/devextreme/js/__internal/ui/stepper/stepper.ts

@@ -0,0 +1,92 @@
+import type { Orientation } from '@js/common';
+import registerComponent from '@js/core/component_registrator';
+import $ from '@js/core/renderer';
+import type { OptionChanged } from '@ts/core/widget/types';
+import CollectionWidgetAsync from '@ts/ui/collection/m_collection_widget.async';
+
+import type { CollectionWidgetEditProperties } from '../collection/m_collection_widget.edit';
+import type { StepperItemProperties } from './stepper_item';
+import StepperItem from './stepper_item';
+
+export const STEPPER_CLASS = 'dx-stepper';
+export const STEPPER_ITEM_CLASS = 'dx-stepper-item';
+export const STEPPER_HORIZONTAL_ORIENTATION_CLASS = 'dx-stepper-horizontal';
+export const STEPPER_VERTICAL_ORIENTATION_CLASS = 'dx-stepper-vertical';
+
+export const STEPPER_ITEM_DATA_KEY = 'dxStepperItemData';
+
+const ORIENTATION: Record<string, Orientation> = {
+  horizontal: 'horizontal',
+  vertical: 'vertical',
+};
+
+export interface StepperProperties extends CollectionWidgetEditProperties<Stepper> {
+  orientation?: Orientation;
+}
+
+class Stepper extends CollectionWidgetAsync<StepperProperties> {
+  static ItemClass = StepperItem;
+
+  _getDefaultOptions(): StepperProperties {
+    return {
+      ...super._getDefaultOptions(),
+      orientation: 'horizontal',
+    };
+  }
+
+  _itemClass(): string {
+    return STEPPER_ITEM_CLASS;
+  }
+
+  _itemDataKey(): string {
+    return STEPPER_ITEM_DATA_KEY;
+  }
+
+  _initMarkup(): void {
+    $(this.element()).addClass(STEPPER_CLASS);
+
+    this._toggleOrientationClass();
+
+    super._initMarkup();
+  }
+
+  _toggleOrientationClass(): void {
+    $(this.element())
+      .toggleClass(STEPPER_HORIZONTAL_ORIENTATION_CLASS, this._isHorizontalOrientation())
+      .toggleClass(STEPPER_VERTICAL_ORIENTATION_CLASS, !this._isHorizontalOrientation());
+  }
+
+  _isHorizontalOrientation(): boolean {
+    const { orientation } = this.option();
+
+    return orientation === ORIENTATION.horizontal;
+  }
+
+  _itemOptionChanged(
+    item: StepperItemProperties,
+    property: keyof StepperItemProperties,
+    value: unknown,
+    prevValue: unknown,
+  ): void {
+    switch (property) {
+      default:
+        super._itemOptionChanged(item, property, value, prevValue);
+    }
+  }
+
+  _optionChanged(args: OptionChanged<StepperProperties>): void {
+    const { name } = args;
+
+    switch (name) {
+      case 'orientation':
+        this._toggleOrientationClass();
+        break;
+      default:
+        super._optionChanged(args);
+    }
+  }
+}
+
+registerComponent('dxStepper', Stepper);
+
+export default Stepper;

packages/devextreme/js/__internal/ui/stepper/stepper_item.ts

@@ -0,0 +1,10 @@
+import type {
+  CollectionWidgetItem as CollectionWidgetItemProperties,
+} from '@js/ui/collection/ui.collection_widget.base';
+import CollectionWidgetItem from '@ts/ui/collection/m_item';
+
+export interface StepperItemProperties extends CollectionWidgetItemProperties {}
+
+class StepperItem extends CollectionWidgetItem {}
+
+export default StepperItem;

packages/devextreme/js/bundles/modules/parts/widgets-base.js

@@ -59,6 +59,7 @@ ui.dxScrollView = require('../../../ui/scroll_view');
 ui.dxSelectBox = require('../../../ui/select_box');
 ui.dxSlider = require('../../../ui/slider');
 ui.dxSpeedDialAction = require('../../../ui/speed_dial_action');
+ui.dxStepper = require('../../../ui/stepper');
 ui.dxSplitter = require('../../../ui/splitter');
 ui.dxSwitch = require('../../../ui/switch');
 ui.dxTabPanel = require('../../../ui/tab_panel');

packages/devextreme/js/ui/stepper.js

@@ -0,0 +1,5 @@
+import Stepper from '../__internal/ui/stepper/stepper';
+
+export default Stepper;
+
+// STYLE stepper

packages/devextreme/testing/tests/DevExpress.ui.widgets/stepper.markup.tests.js

@@ -0,0 +1,93 @@
+import $ from 'jquery';
+
+import 'ui/stepper';
+import {
+    STEPPER_CLASS,
+    STEPPER_ITEM_CLASS,
+    STEPPER_VERTICAL_ORIENTATION_CLASS,
+    STEPPER_HORIZONTAL_ORIENTATION_CLASS,
+} from '__internal/ui/stepper/stepper';
+
+QUnit.testStart(function() {
+    const markup = '<div id="stepper"></div>';
+
+    $('#qunit-fixture').html(markup);
+});
+
+const moduleConfig = {
+    beforeEach: function() {
+        const init = (options = {}) => {
+            this.$element = $('#stepper').dxStepper(options);
+            this.instance = this.$element.dxStepper('instance');
+        };
+
+        init();
+
+        this.reinit = (options) => {
+            this.instance.dispose();
+
+            init(options);
+        };
+
+        this.getItems = () => {
+            return this.$element.find(`.${STEPPER_ITEM_CLASS}`);
+        };
+    }
+};
+
+QUnit.module('Stepper markup', moduleConfig, () => {
+    QUnit.test(`Stepper root element should have ${STEPPER_CLASS} class`, function(assert) {
+        assert.strictEqual(this.$element.hasClass(STEPPER_CLASS), true);
+    });
+
+    QUnit.test('Stepper root element should have horizontal class by default', function(assert) {
+        assert.strictEqual(this.$element.hasClass(STEPPER_VERTICAL_ORIENTATION_CLASS), false);
+        assert.strictEqual(this.$element.hasClass(STEPPER_HORIZONTAL_ORIENTATION_CLASS), true);
+    });
+
+    QUnit.test('Stepper root element should have vertical class if orientation is vertical', function(assert) {
+        this.reinit({ orientation: 'vertical' });
+
+        assert.strictEqual(this.$element.hasClass(STEPPER_HORIZONTAL_ORIENTATION_CLASS), false);
+        assert.strictEqual(this.$element.hasClass(STEPPER_VERTICAL_ORIENTATION_CLASS), true);
+    });
+
+    QUnit.test('stepper root element should have correct orientation class if orientation option change at runtime', function(assert) {
+        this.instance.option('orientation', 'vertical');
+
+        assert.strictEqual(this.$element.hasClass(STEPPER_HORIZONTAL_ORIENTATION_CLASS), false);
+        assert.strictEqual(this.$element.hasClass(STEPPER_VERTICAL_ORIENTATION_CLASS), true);
+
+        this.instance.option('orientation', 'horizontal');
+
+        assert.strictEqual(this.$element.hasClass(STEPPER_HORIZONTAL_ORIENTATION_CLASS), true);
+        assert.strictEqual(this.$element.hasClass(STEPPER_VERTICAL_ORIENTATION_CLASS), false);
+    });
+});
+
+QUnit.module('Render', moduleConfig, () => {
+    QUnit.test('with steps declared using string values', function(assert) {
+        this.reinit({ dataSource: ['Pane_1', 'Pane_2', 'Pane_3'] });
+
+        assert.strictEqual(this.getItems().length, 3);
+    });
+
+    QUnit.test('with single step', function(assert) {
+        this.reinit({ dataSource: [{ template: () => $('<div>').text('Step_1') }] });
+
+        assert.strictEqual(this.getItems().length, 1);
+    });
+
+    QUnit.test('with two steps', function(assert) {
+        this.reinit({
+            items: [{ text: 'Step_1' }, { text: 'Step_2' }]
+        });
+
+        const $items = this.getItems();
+
+        assert.strictEqual(this.getItems().length, 2, 'stepper is rendered with two steps');
+
+        assert.strictEqual($items.eq(0).text(), 'Step_1', 'first pane was rendered');
+        assert.strictEqual($items.eq(1).text(), 'Step_2', 'second pane was rendered');
+    });
+});