SpeechToText: add story and stop button animation (#31124)

Author: Zedwag

apps/react-storybook/stories/speech_to_text/SpeechToText.stories.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import dxSpeechToText from 'devextreme/ui/speech_to_text';
+import { wrapDxWithReact } from '../utils';
+
+
+const SpeechToText = wrapDxWithReact(dxSpeechToText);
+
+const meta: Meta<typeof SpeechToText> = {
+    title: 'Components/SpeechToText',
+    component: SpeechToText,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SpeechToText>;
+
+export const DefaultSpeechToText: Story = {
+    args: {
+        width: 'auto',
+        startIcon: 'micoutline',
+        stopIcon: 'stopfilled',
+        startText: '',
+        stopText: '',
+        stylingMode: 'contained',
+        type: 'normal',
+        visible: true,
+        rtlEnabled: false,
+        disabled: false,
+    },
+    argTypes: {
+        width: {
+            options: ['auto', '100%'],
+            control: { type: 'radio' }
+        },
+        startIcon: {
+            options: ['micoutline', 'video', 'isnotblank', undefined],
+            control: { type: 'select' }
+        },
+        stopIcon: {
+            options: ['stopfilled', 'square', 'indeterminatestate', undefined],
+            control: { type: 'select' }
+        },
+        startText: {
+            options: ['', 'start'],
+            control: { type: 'select' }
+        },
+        stopText: {
+            options: ['', 'stop'],
+            control: { type: 'select' }
+        },
+        stylingMode: {
+            options: ['contained', 'text', 'outlined'],
+            control: { type: 'select' }
+        },
+        type: {
+            options: ['normal', 'default', 'success', 'danger'],
+            control: { type: 'select' }
+        },
+        visible: {
+            control: 'boolean'
+        },
+        rtlEnabled: {
+            control: 'boolean'
+        },
+        disabled: {
+            control: 'boolean'
+        },
+    },
+    render: ({
+        width,
+        startIcon,
+        stopIcon,
+        startText,
+        stopText,
+        stylingMode,
+        type,
+        visible,
+        rtlEnabled,
+        disabled,
+    }) => {
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                <SpeechToText
+                    width={width}
+                    startIcon={startIcon}
+                    stopIcon={stopIcon}
+                    startText={startText}
+                    stopText={stopText}
+                    stylingMode={stylingMode}
+                    type={type}
+                    disabled={disabled}
+                    rtlEnabled={rtlEnabled}
+                    visible={visible}
+                />
+            </div>
+        );
+    }
+};

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

@@ -0,0 +1,17 @@
+.dx-speech-to-text-listening {
+  animation: dx-speech-to-text-listening-animation 1.5s ease-in-out 0.5s infinite;
+}
+
+@keyframes dx-speech-to-text-listening-animation {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

packages/devextreme/testing/tests/DevExpress.ui.widgets/speechToText.tests.js

@@ -186,6 +186,23 @@ QUnit.module('State Management', moduleConfig, () => {
 
         assert.ok(this.$element.hasClass(SPEECH_TO_TEXT_LISTENING_CLASS), 'custom engine works after enabling');
     });
+
+    QUnit.test('INITIAL state should not have animation by default', function(assert) {
+        const animation = this.$element.css('animation');
+
+        assert.strictEqual(animation, 'none 0s ease 0s 1 normal none running');
+    });
+
+    QUnit.test('LISTENING state should have animation by default', function(assert) {
+        const $button = this.getButton();
+
+        $button.trigger('dxclick');
+
+        const animation = this.$element.css('animation');
+        const easeInOutAnimationEnabled = animation.includes('1.5s ease-in-out 0.5s infinite normal none running');
+
+        assert.strictEqual(easeInOutAnimationEnabled, true);
+    });
 });
 
 QUnit.module('Events', moduleConfig, () => {