[Storybook] Add stories for more components (letters M - O) - Part 1 (#…

…7596)

src/components/modal/confirm_modal.stories.tsx

@@ -0,0 +1,61 @@
+/*
+ * 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 { action } from '@storybook/addon-actions';
+
+import { moveStorybookControlsToCategory } from '../../../.storybook/utils';
+import { BUTTON_COLORS } from '../../themes/amsterdam/global_styling/mixins';
+import {
+  CANCEL_BUTTON,
+  CONFIRM_BUTTON,
+  EuiConfirmModal,
+  EuiConfirmModalProps,
+} from './confirm_modal';
+
+const meta: Meta<EuiConfirmModalProps> = {
+  title: 'Layout/EuiConfirmModal',
+  component: EuiConfirmModal,
+  argTypes: {
+    // TODO: the `maxWidth` prop takes many different types (bool, string, number)
+    title: { control: { type: 'text' } },
+    confirmButtonText: { control: { type: 'text' } },
+    cancelButtonText: { control: { type: 'text' } },
+    defaultFocusedButton: {
+      control: { type: 'radio' },
+      options: [undefined, CONFIRM_BUTTON, CANCEL_BUTTON],
+    },
+    buttonColor: { control: { type: 'select' }, options: BUTTON_COLORS },
+    ...moveStorybookControlsToCategory(
+      ['role', 'maxWidth', 'initialFocus'],
+      'EuiModal props'
+    ),
+  },
+  args: {
+    buttonColor: 'primary',
+    role: 'alertdialog',
+    maxWidth: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiConfirmModalProps>;
+
+const onCancel = action('onCancel');
+const onConfirm = action('onConfirm');
+
+export const Playground: Story = {
+  args: {
+    title: 'Confirm modal title',
+    children: 'Confirm modal content',
+    confirmButtonText: 'Confirm',
+    cancelButtonText: 'Cancel',
+    onCancel,
+    onConfirm,
+  },
+};

src/components/modal/modal.stories.tsx

@@ -0,0 +1,142 @@
+/*
+ * 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 React, { MouseEvent, useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { EuiButton, EuiButtonEmpty } from '../button';
+import { EuiFieldText, EuiForm, EuiFormRow } from '../form';
+
+import { EuiModalHeader } from './modal_header';
+import { EuiModalHeaderTitle } from './modal_header_title';
+import { EuiModalBody } from './modal_body';
+import { EuiModalFooter } from './modal_footer';
+import { EuiModal, EuiModalProps } from './modal';
+
+const meta: Meta<EuiModalProps> = {
+  title: 'Layout/EuiModal/EuiModal',
+  component: EuiModal,
+  argTypes: {
+    // TODO: the `maxWidth` prop takes many different types (bool, string, number)
+  },
+  // Component defaults
+  args: {
+    role: 'dialog',
+    maxWidth: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiModalProps>;
+
+const onClose = action('onClose');
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>Modal body</EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton fill>Modal footer</EuiButton>
+        </EuiModalFooter>
+      </>
+    ),
+  },
+};
+
+export const ToggleExample: Story = {
+  args: {
+    children: (
+      <>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>Modal body</EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={onClose} fill>
+            Modal footer
+          </EuiButton>
+        </EuiModalFooter>
+      </>
+    ),
+  },
+  render: (args) => <StatefulModal {...args} />,
+};
+
+export const InitialFocus: Story = {
+  args: {
+    initialFocus: '[name=popfirst]',
+  },
+  render: (args) => {
+    const handleOnSubmit = (e: MouseEvent<HTMLButtonElement>) => {
+      e.preventDefault();
+      action('onSubmit')();
+    };
+    return (
+      <StatefulModal aria-labelledby="modalTitleId" {...args}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle id="modalTitleId">
+            Modal title
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiForm id="modalFormId" component="form">
+            <EuiFormRow label="A text field">
+              <EuiFieldText name="popfirst" />
+            </EuiFormRow>
+          </EuiForm>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButtonEmpty onClick={action('onCancel')}>Cancel</EuiButtonEmpty>
+
+          <EuiButton
+            type="submit"
+            form="modalFormId"
+            fill
+            onClick={handleOnSubmit}
+          >
+            Save
+          </EuiButton>
+        </EuiModalFooter>
+      </StatefulModal>
+    );
+  },
+};
+
+/* Story content components */
+
+const StatefulModal = (props: EuiModalProps) => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  return (
+    <>
+      <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
+        Toggle Modal
+      </EuiButton>
+      {isOpen && (
+        <EuiModal
+          {...props}
+          onClose={(...args) => {
+            setIsOpen(false);
+            onClose(...args);
+          }}
+        />
+      )}
+    </>
+  );
+};

src/components/modal/modal_body.stories.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { EuiModal } from './modal';
+import { EuiModalBody, EuiModalBodyProps } from './modal_body';
+
+const meta: Meta<EuiModalBodyProps> = {
+  title: 'Layout/EuiModal/EuiModalBody',
+  component: EuiModalBody,
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <Story />
+      </EuiModal>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<EuiModalBodyProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Modal body',
+  },
+};

src/components/modal/modal_footer.stories.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { EuiModal } from './modal';
+import { EuiModalFooter, EuiModalFooterProps } from './modal_footer';
+
+const meta: Meta<EuiModalFooterProps> = {
+  title: 'Layout/EuiModal/EuiModalFooter',
+  component: EuiModalFooter,
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <Story />
+      </EuiModal>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<EuiModalFooterProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Modal footer',
+  },
+};

src/components/modal/modal_header.stories.tsx

@@ -0,0 +1,35 @@
+/*
+ * 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 React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { EuiModal } from './modal';
+import { EuiModalHeader, EuiModalHeaderProps } from './modal_header';
+
+const meta: Meta<EuiModalHeaderProps> = {
+  title: 'Layout/EuiModal/EuiModalHeader',
+  component: EuiModalHeader,
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <Story />
+      </EuiModal>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<EuiModalHeaderProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Modal header',
+  },
+};

src/components/modal/modal_header_title.stories.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { EuiModal } from './modal';
+import { EuiModalHeader } from './modal_header';
+import {
+  EuiModalHeaderTitle,
+  EuiModalHeaderTitleProps,
+} from './modal_header_title';
+
+const meta: Meta<EuiModalHeaderTitleProps> = {
+  title: 'Layout/EuiModal/EuiModalHeaderTitle',
+  component: EuiModalHeaderTitle,
+  argTypes: {
+    component: { control: { type: 'text' } },
+  },
+  // Component defaults
+  args: {
+    component: 'h1',
+  },
+  decorators: [
+    (Story) => (
+      <EuiModal onClose={action('onClose')}>
+        <EuiModalHeader>
+          <Story />
+        </EuiModalHeader>
+      </EuiModal>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<EuiModalHeaderTitleProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Modal header title',
+  },
+};