REVERT ME: testing story

Author: mgadewoll

packages/eui/src/components/button/button.stories.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -16,6 +16,7 @@ import {
 
 import { EuiButtonEmpty } from './button_empty';
 import { EuiButton, Props as EuiButtonProps } from './button';
+import { EuiFlexGroup } from '../flex';
 
 const meta: Meta<EuiButtonProps> = {
   title: 'Navigation/EuiButton',
@@ -53,6 +54,110 @@ export const Playground: Story = {
 };
 disableStorybookControls(Playground, ['buttonRef']);
 
+export const TESTING_EXAMPLE: Story = {
+  parameters: {
+    loki: {
+      skip: true,
+    },
+    controls: {
+      include: ['hasAriaDisabled'],
+    },
+  },
+  render: function Render({ hasAriaDisabled }: any) {
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [isDisabled, setIsDisabled] = React.useState(false);
+
+    useEffect(() => {
+      if (isLoading) {
+        const timer = setTimeout(() => {
+          setIsLoading(false);
+        }, 5000);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isLoading]);
+
+    useEffect(() => {
+      if (isDisabled) {
+        const timer = setTimeout(() => {
+          setIsDisabled(false);
+        }, 5000);
+
+        return () => clearTimeout(timer);
+      }
+    }, [isDisabled]);
+
+    useEffect(() => {
+      const button = buttonRef.current;
+
+      if (!button) return;
+
+      const onClickHandler = () => {
+        console.log('DOM event: click');
+      };
+
+      const onMouseDownHandler = () => {
+        console.log('DOM event: mousedown');
+      };
+
+      const onTouchStartHandler = () => {
+        console.log('DOM event: touchstart');
+      };
+
+      const onKeyDownHandler = () => {
+        console.log('DOM event: keydown');
+      };
+
+      const onFocusHandler = (e: FocusEvent) => {
+        console.log('DOM event: focus', e.target, e.relatedTarget);
+      };
+
+      const onBlurHandler = (e: FocusEvent) => {
+        console.log('DOM event: blur', e.target, e.relatedTarget);
+      };
+
+      button.addEventListener('click', onClickHandler, { capture: true });
+      button.addEventListener('mousedown', onMouseDownHandler);
+      button.addEventListener('touchstart', onTouchStartHandler);
+      button.addEventListener('keydown', onKeyDownHandler);
+      button.addEventListener('focus', onFocusHandler, { capture: true });
+      button.addEventListener('blur', onBlurHandler);
+
+      return () => {
+        button.removeEventListener('click', onClickHandler);
+        button.removeEventListener('mousedown', onMouseDownHandler);
+        button.removeEventListener('touchstart', onTouchStartHandler);
+        button.removeEventListener('keydown', onKeyDownHandler);
+        button.removeEventListener('focus', onFocusHandler);
+        button.removeEventListener('blur', onBlurHandler);
+      };
+    }, []);
+
+    return (
+      <EuiFlexGroup>
+        <EuiButton onClick={() => setIsLoading(true)}>Set loading</EuiButton>
+        <EuiButton onClick={() => setIsDisabled(true)}>Set disabled</EuiButton>
+        <EuiButton
+          buttonRef={buttonRef}
+          isLoading={isLoading}
+          isDisabled={isDisabled}
+          hasAriaDisabled={hasAriaDisabled}
+          onClick={() => console.log('EuiButton onClick')}
+          onKeyDown={() => console.log('EuiButton onKeyDown')}
+          onMouseDown={() => console.log('EuiButton onMouseDown')}
+          onPointerDown={() => console.log('EuiButton onPointerDown')}
+          onTouchStart={() => console.log('EuiButton onTouchStart')}
+          onFocus={() => console.log('EuiButton onFocus')}
+          onBlur={() => console.log('EuiButton onBlur')}
+        >
+          Button
+        </EuiButton>
+      </EuiFlexGroup>
+    );
+  },
+};
+
 export const HighContrast: Story = {
   tags: ['vrt-only'],
   globals: { highContrastMode: true },