[REVERT ME] Flyout storybook for designer QA

.storybook/utils.ts

@@ -0,0 +1,33 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Completely hide props from Storybook's controls panel.
+ * Should be spread to `argTypes`
+ */
+export const hideStorybookControls = (propNames: string[]) => {
+  return propNames.reduce(
+    (obj, name) => ({ ...obj, [name]: HIDE_CONTROL }),
+    {}
+  );
+};
+const HIDE_CONTROL = { table: { disable: true } };
+
+/**
+ * Leave props visible in Storybook's controls panel, but disable them
+ * from being controllabe (renders a `-`).
+ *
+ * Should be spread to `argTypes`
+ */
+export const disableStorybookControls = (propNames: string[]) => {
+  return propNames.reduce(
+    (obj, name) => ({ ...obj, [name]: DISABLE_CONTROL }),
+    {}
+  );
+};
+const DISABLE_CONTROL = { control: false };

src/components/flyout/flyout.stories.tsx

@@ -0,0 +1,89 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { hideStorybookControls } from '../../../.storybook/utils';
+
+import { EuiButton, EuiText } from '../index';
+
+import { EuiFlyout, EuiFlyoutProps, EuiFlyoutBody } from './index';
+
+const meta: Meta<EuiFlyoutProps> = {
+  title: 'EuiFlyout',
+  component: EuiFlyout,
+};
+
+export default meta;
+type Story = StoryObj<EuiFlyoutProps>;
+
+const StatefulFlyout = (props: Partial<EuiFlyoutProps>) => {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <>
+      <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
+        Toggle focus trap
+      </EuiButton>
+      {isOpen && <EuiFlyout {...props} onClose={() => setIsOpen(false)} />}
+    </>
+  );
+};
+
+export const Playground: Story = {
+  render: ({ ...args }) => <StatefulFlyout {...args} />,
+};
+
+const dummyText = (
+  <EuiText>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu
+      condimentum ipsum, nec ornare metus. Sed egestas elit nec placerat
+      suscipit. Cras pulvinar nisi eget enim sodales fringilla. Aliquam lobortis
+      lorem at ornare aliquet. Mauris laoreet laoreet mollis. Pellentesque
+      aliquet tortor dui, non luctus turpis pulvinar vitae. Nunc ultrices
+      scelerisque erat eu rutrum. Nam at ligula enim. Ut nec nisl faucibus,
+      euismod neque ut, aliquam nisl. Donec eu ante ut arcu rutrum blandit nec
+      ac nisl. In elementum id enim vitae aliquam. In sagittis, neque vitae
+      ultricies interdum, sapien justo efficitur ligula, sit amet fermentum nisl
+      magna sit amet turpis. Nulla facilisi. Proin nec viverra mi. Morbi dolor
+      arcu, ornare non consequat et, viverra dapibus tellus.{' '}
+    </p>
+  </EuiText>
+);
+export const PushFlyouts: Story = {
+  render: ({ ...args }) => (
+    <>
+      <StatefulFlyout {...args}>
+        <EuiFlyoutBody>{dummyText}</EuiFlyoutBody>
+      </StatefulFlyout>
+      {dummyText}
+    </>
+  ),
+  args: {
+    type: 'push',
+    pushAnimation: true,
+    pushMinBreakpoint: 'l',
+    size: 'm',
+  },
+  argTypes: hideStorybookControls([
+    'onClose',
+    'aria-label',
+    'as',
+    'closeButtonPosition',
+    'closeButtonProps',
+    'focusTrapProps',
+    'hideCloseButton',
+    'includeFixedHeadersInFocusTrap',
+    'maskProps',
+    'maxWidth',
+    'outsideClickCloses',
+    'ownFocus',
+    'paddingSize',
+    'style',
+  ]),
+};