docs(stroybook): add EuiToast and EuiGlobalToastList stories

src/components/toast/global_toast_list.stories.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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 { enableFunctionToggleControls } from '../../../.storybook/utils';
+import { EuiButton } from '../button';
+import {
+  EuiGlobalToastList,
+  EuiGlobalToastListProps,
+  Toast,
+} from './global_toast_list';
+
+const staticToasts: Toast[] = [
+  {
+    id: 'static-toast-1',
+    title: 'Hello from Toast!',
+    text: 'toast message',
+    color: 'success' as const,
+  },
+  {
+    id: 'static-toast-2',
+    title: 'Warning from Toast!',
+    text: 'toast message',
+    color: 'warning' as const,
+    iconType: 'warning',
+  },
+];
+
+const meta: Meta<EuiGlobalToastListProps> = {
+  title: 'Display/EuiGlobalToastList/EuiGlobalToastList',
+  component: EuiGlobalToastList,
+  args: {
+    side: 'right',
+    // stub for testing/QA
+    dismissToast: () => {},
+  },
+};
+enableFunctionToggleControls(meta, ['onClearAllToasts']);
+
+export default meta;
+type Story = StoryObj<EuiGlobalToastListProps>;
+
+export const Playground: Story = {
+  args: {
+    toasts: [staticToasts[0]],
+    toastLifeTimeMs: 15000,
+  },
+  render: (args) => <StatefulGlobalToastList {...args} />,
+};
+
+let toastId = 0;
+
+const StatefulGlobalToastList = ({
+  toasts,
+  dismissToast,
+  ...rest
+}: EuiGlobalToastListProps) => {
+  const [_toasts, setToasts] = useState<Toast[]>(toasts ?? []);
+
+  const handleAddToast = () => {
+    const randomToast = {
+      ...staticToasts[Math.floor(Math.random() * staticToasts.length)],
+      id: `toast-${toastId}`,
+    };
+
+    toastId += 1;
+    setToasts((prevToasts) => [...prevToasts, randomToast]);
+  };
+
+  const handleRemoveToast = (removedToast: Toast) => {
+    setToasts((prevToasts) =>
+      prevToasts.filter((toast) => toast.id !== removedToast.id)
+    );
+  };
+
+  return (
+    <>
+      <EuiButton onClick={handleAddToast}>Add toast</EuiButton>
+      <EuiGlobalToastList
+        toasts={_toasts}
+        dismissToast={handleRemoveToast}
+        {...rest}
+      />
+    </>
+  );
+};

src/components/toast/global_toast_list_item.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 { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiToast } from './toast';
+import {
+  EuiGlobalToastListItem,
+  EuiGlobalToastListItemProps,
+} from './global_toast_list_item';
+
+const meta: Meta<EuiGlobalToastListItemProps> = {
+  title: 'Display/EuiGlobalToastList/EuiGlobalToastListItem',
+  component: EuiGlobalToastListItem,
+  args: {
+    isDismissed: false,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiGlobalToastListItemProps>;
+
+export const Playground: Story = {
+  args: {
+    children: <EuiToast title="It's a Toast!">Lorem ipsum</EuiToast>,
+  },
+};

src/components/toast/global_toast_list_item.tsx

@@ -12,7 +12,7 @@ import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { CommonProps } from '../common';
 import { euiGlobalToastListItemStyles } from './global_toast_list.styles';
 
-export interface EuiGlobalToastListItemProps {
+export interface EuiGlobalToastListItemProps extends CommonProps {
   isDismissed?: boolean;
   /**
    * ReactElement to render as this component's content
@@ -21,7 +21,7 @@ export interface EuiGlobalToastListItemProps {
 }
 
 export const EuiGlobalToastListItem: FunctionComponent<
-  CommonProps & EuiGlobalToastListItemProps
+  EuiGlobalToastListItemProps
 > = ({ children, className, isDismissed }) => {
   const euiTheme = useEuiTheme();
   if (!children) {

src/components/toast/toast.stories.tsx

@@ -0,0 +1,49 @@
+/*
+ * 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 {
+  enableFunctionToggleControls,
+  hideStorybookControls,
+} from '../../../.storybook/utils';
+import { EuiToast, EuiToastProps, COLORS } from './toast';
+
+const meta: Meta<EuiToastProps> = {
+  title: 'Display/EuiToast',
+  component: EuiToast,
+  argTypes: {
+    children: {
+      control: 'text',
+      // @ts-ignore - overwritten to output proper type as inferred type is not correct
+      type: 'ReactNode',
+    },
+    color: { control: 'select', options: [undefined, ...COLORS] },
+    title: { control: 'text' },
+    iconType: { control: 'text' },
+  },
+  args: {
+    // set up for easier testing/QA
+    title: '',
+    iconType: '',
+  },
+};
+enableFunctionToggleControls(meta, ['onClose']);
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiToastProps>;
+
+export const Playground: Story = {
+  args: {
+    title: "It's a Toast!",
+    children: 'Toast content',
+    // @ts-ignore - using story specific types
+    onClose: false, // overwriting to false to mimick the default state without close button
+  },
+};