[Storybook] Add stories for more components (letters M - O) - Part 2

src/components/mark/mark.stories.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 { EuiMark, EuiMarkProps } from './mark';
+
+const meta: Meta<EuiMarkProps> = {
+  title: 'Utilities/EuiMark',
+  component: EuiMark,
+  // Component defaults
+  args: {
+    hasScreenReaderHelpText: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiMarkProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Marked text',
+  },
+};

src/components/markdown_editor/markdown_editor.stories.tsx

@@ -0,0 +1,72 @@
+/*
+ * 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 { EuiMarkdownEditor, EuiMarkdownEditorProps } from './markdown_editor';
+import {
+  defaultParsingPlugins,
+  defaultProcessingPlugins,
+  defaultUiPlugins,
+} from './plugins/markdown_default_plugins';
+import { MODE_EDITING, MODE_VIEWING } from './markdown_modes';
+
+const initialContent = `## Hello world!
+
+Basic "GitHub flavored" markdown will work as you'd expect.
+
+The editor also ships with some built in plugins. For example it can handle checkboxes. Notice how they toggle state even in the preview mode.
+
+- [ ] Checkboxes
+- [x] Can be filled
+- [ ] Or empty
+
+It can also handle emojis! :smile:
+
+And it can render !{tooltip[tooltips like this](Look! I'm a very helpful tooltip content!)}
+`;
+
+const meta: Meta<EuiMarkdownEditorProps> = {
+  title: 'Editors & Syntax/EuiMarkdownEditor/EuiMarkdownEditor',
+  component: EuiMarkdownEditor,
+  // Component defaults
+  args: {
+    height: 250,
+    maxHeight: 500,
+    autoExpandPreview: true,
+    parsingPluginList: defaultParsingPlugins,
+    processingPluginList: defaultProcessingPlugins,
+    uiPlugins: defaultUiPlugins,
+    errors: [],
+    initialViewMode: MODE_EDITING,
+    dropHandlers: [],
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiMarkdownEditorProps>;
+
+export const Playground: Story = {
+  args: {
+    value: initialContent,
+  },
+};
+
+export const ViewMode: Story = {
+  args: {
+    value: initialContent,
+    initialViewMode: MODE_VIEWING,
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    value: initialContent,
+    errors: ['An error happened.', 'Woops, another error happened.'],
+  },
+};

src/components/markdown_editor/markdown_format.stories.tsx

@@ -0,0 +1,71 @@
+/*
+ * 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 {
+  hideStorybookControls,
+  moveStorybookControlsToCategory,
+} from '../../../.storybook/utils';
+import { EuiMarkdownFormat, EuiMarkdownFormatProps } from './markdown_format';
+import {
+  defaultParsingPlugins,
+  defaultProcessingPlugins,
+} from './plugins/markdown_default_plugins';
+import { ALIGNMENTS } from '../text/text_align';
+
+const initialContent = `## Hello world!
+
+Basic "GitHub flavored" markdown will work as you'd expect.
+
+The editor also ships with some built in plugins. For example it can handle checkboxes. Notice how they toggle state even in the preview mode.
+
+- [ ] Checkboxes
+- [x] Can be filled
+- [ ] Or empty
+
+It can also handle emojis! :smile:
+
+And it can render !{tooltip[tooltips like this](Look! I'm a very helpful tooltip content!)}
+`;
+
+const meta: Meta<EuiMarkdownFormatProps> = {
+  title: 'Editors & Syntax/EuiMarkdownEditor/EuiMarkdownFormat',
+  component: EuiMarkdownFormat,
+  argTypes: {
+    color: { control: { type: 'text' } },
+    grow: { control: { type: 'boolean' } },
+    textAlign: {
+      control: { type: 'radio' },
+      options: [undefined, ...ALIGNMENTS],
+    },
+  },
+  // Component defaults
+  args: {
+    textSize: 'm',
+    parsingPluginList: defaultParsingPlugins,
+    processingPluginList: defaultProcessingPlugins,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiMarkdownFormatProps>;
+
+export const Playground: Story = {
+  // TODO: move this to the component level once utils are updated to fully support merged configs (#7583)
+  argTypes: {
+    ...moveStorybookControlsToCategory(
+      ['textAlign', 'color', 'grow'],
+      'EuiText props'
+    ),
+    ...hideStorybookControls(['aria-label']),
+  },
+  args: {
+    children: initialContent,
+  },
+};

src/components/observer/mutation_observer/mutation_observer.stories.tsx

@@ -0,0 +1,96 @@
+/*
+ * 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, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { _EuiButtonColor } from '../../../themes/amsterdam/global_styling/mixins';
+import { EuiFlexGroup, EuiFlexItem } from '../../flex';
+import { EuiSpacer } from '../../spacer';
+import { EuiButton, EuiButtonEmpty } from '../../button';
+import { EuiPanel } from '../../panel';
+import {
+  EuiMutationObserver,
+  EuiMutationObserverProps,
+} from './mutation_observer';
+
+const meta: Meta<EuiMutationObserverProps> = {
+  title: 'Utilities/EuiMutationObserver',
+  component: EuiMutationObserver,
+};
+
+export default meta;
+type Story = StoryObj<EuiMutationObserverProps>;
+
+const StatefulPlayground = (
+  props: Omit<EuiMutationObserverProps, 'onMutation'>
+) => {
+  const [lastMutation, setLastMutation] = useState('no changes detected');
+  const [buttonColor, setButtonColor] = useState<_EuiButtonColor>('primary');
+  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
+
+  const toggleButtonColor = () => {
+    setButtonColor(buttonColor === 'primary' ? 'warning' : 'primary');
+  };
+
+  const addItem = () => {
+    setItems([...items, `Item ${items.length + 1}`]);
+  };
+
+  const handleOnMutation = ([{ type }]: MutationRecord[]) => {
+    setLastMutation(
+      type === 'attributes' ? 'button class name changed' : 'DOM tree changed'
+    );
+  };
+
+  return (
+    <>
+      <p>{lastMutation}</p>
+
+      <EuiSpacer />
+
+      <EuiMutationObserver
+        observerOptions={{ subtree: true, attributes: true, childList: true }}
+        onMutation={handleOnMutation}
+        {...props}
+      >
+        {(mutationRef) => (
+          <div ref={mutationRef}>
+            <EuiButton
+              color={buttonColor}
+              fill={true}
+              onClick={toggleButtonColor}
+            >
+              Toggle button color
+            </EuiButton>
+
+            <EuiSpacer />
+
+            <EuiFlexGroup>
+              <EuiFlexItem grow={false}>
+                <EuiPanel grow={false}>
+                  <ul>
+                    {items.map((item) => (
+                      <li key={item}>{item}</li>
+                    ))}
+                  </ul>
+                  <EuiSpacer size="s" />
+                  <EuiButtonEmpty onClick={addItem}>add item</EuiButtonEmpty>
+                </EuiPanel>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </div>
+        )}
+      </EuiMutationObserver>
+    </>
+  );
+};
+
+export const Playground: Story = {
+  render: (args) => <StatefulPlayground {...args} />,
+};

src/components/observer/resize_observer/resize_observer.stories.tsx

@@ -0,0 +1,94 @@
+/*
+ * 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, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiPaddingSize } from '../../../global_styling';
+import { EuiText } from '../../text';
+import { EuiCode } from '../../code';
+import { EuiSpacer } from '../../spacer';
+import { EuiButton, EuiButtonEmpty } from '../../button';
+import { EuiPanel } from '../../panel';
+import { EuiResizeObserver, EuiResizeObserverProps } from './resize_observer';
+
+const meta: Meta<EuiResizeObserverProps> = {
+  title: 'Utilities/EuiResizeObserver',
+  component: EuiResizeObserver,
+};
+
+export default meta;
+type Story = StoryObj<EuiResizeObserverProps>;
+
+const StatefulPlayground = (props: EuiResizeObserverProps) => {
+  const { onResize, ...rest } = props;
+  const [paddingSize, setPaddingSize] = useState<EuiPaddingSize>('s');
+  const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
+  const [height, setHeight] = useState(0);
+  const [width, setWidth] = useState(0);
+
+  const togglePaddingSize = () => {
+    setPaddingSize((paddingSize) => (paddingSize === 's' ? 'l' : 's'));
+  };
+
+  const addItem = () => {
+    setItems((items) => [...items, `Item ${items.length + 1}`]);
+  };
+
+  const handleOnResize = ({
+    height,
+    width,
+  }: {
+    height: number;
+    width: number;
+  }) => {
+    setHeight(height);
+    setWidth(width);
+    onResize({ height, width });
+  };
+
+  return (
+    <>
+      <EuiText>
+        <p>
+          <EuiCode>
+            height: {height}; width: {width}
+          </EuiCode>
+        </p>
+      </EuiText>
+
+      <EuiSpacer />
+
+      <EuiButton fill={true} onClick={togglePaddingSize}>
+        Toggle container padding
+      </EuiButton>
+
+      <EuiSpacer />
+
+      <EuiResizeObserver onResize={handleOnResize} {...rest}>
+        {(resizeRef) => (
+          <div className="eui-displayInlineBlock" ref={resizeRef}>
+            <EuiPanel paddingSize={paddingSize}>
+              <ul>
+                {items.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+              <EuiSpacer size="s" />
+              <EuiButtonEmpty onClick={addItem}>add item</EuiButtonEmpty>
+            </EuiPanel>
+          </div>
+        )}
+      </EuiResizeObserver>
+    </>
+  );
+};
+
+export const Playground: Story = {
+  render: (args) => <StatefulPlayground {...args} />,
+};