[Storybook] Add stories for more components (letter T) - Part 2 (#7744)

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Cee Chen <constance.chen@elastic.co>

src/components/timeline/timeline.stories.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 { EuiTimeline, EuiTimelineProps } from './timeline';
+
+const meta: Meta<EuiTimelineProps> = {
+  title: 'Display/EuiTimeline/EuiTimeline',
+  component: EuiTimeline,
+  args: {
+    gutterSize: 'xl',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTimelineProps>;
+
+export const Playground: Story = {
+  args: {
+    items: [
+      {
+        icon: 'pencil',
+        children: 'Project renamed to "Revenue Dashboard".',
+      },
+      {
+        icon: 'email',
+        children: (
+          <>
+            <strong>dev@elastic.co</strong> was invited to the project.
+          </>
+        ),
+      },
+      {
+        icon: 'folderClosed',
+        children: 'The project was archived.',
+      },
+    ],
+  },
+};

src/components/timeline/timeline_item.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 type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiTimelineItem, EuiTimelineItemProps } from './timeline_item';
+
+const meta: Meta<EuiTimelineItemProps> = {
+  title: 'Display/EuiTimeline/EuiTimelineItem/EuiTimelineItem',
+  component: EuiTimelineItem,
+  argTypes: {
+    // re-adding type descriptions that are not resolved (removed in Omit<> type)
+    children: {
+      description: 'Accepts any node. But preferably `EuiPanel`',
+      // @ts-ignore - overwritting to ensure correct expected type
+      type: 'ReactNode',
+    },
+    icon: {
+      description:
+        "Any `ReactNode`, but preferably `EuiAvatar`, or a string as an `EuiIcon['type']`.",
+      // @ts-ignore - overwritting to ensure correct expected type
+      type: 'ReactNode | IconType',
+    },
+    iconAriaLabel: {
+      description:
+        'Specify an `aria-label` for the icon when passed as an `IconType`. If no `aria-label` is passed we assume the icon is purely decorative.',
+    },
+  },
+  args: {
+    verticalAlign: 'center',
+    iconAriaLabel: '',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTimelineItemProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'timeline item',
+    icon: 'email',
+  },
+};

src/components/timeline/timeline_item_event.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 {
+  EuiTimelineItemEvent,
+  EuiTimelineItemEventProps,
+} from './timeline_item_event';
+
+const meta: Meta<EuiTimelineItemEventProps> = {
+  title: 'Display/EuiTimeline/EuiTimelineItem/EuiTimelineItemEvent',
+  component: EuiTimelineItemEvent,
+  decorators: [
+    (Story, { args }) => (
+      <div css={{ display: 'flex', width: '100%', height: '40px' }}>
+        <Story {...args} />
+      </div>
+    ),
+  ],
+  args: {
+    verticalAlign: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTimelineItemEventProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'timeline item event',
+  },
+};

src/components/timeline/timeline_item_icon.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 {
+  EuiTimelineItemIcon,
+  EuiTimelineItemIconProps,
+} from './timeline_item_icon';
+
+const meta: Meta<EuiTimelineItemIconProps> = {
+  title: 'Display/EuiTimeline/EuiTimelineItem/EuiTimelineItemIcon',
+  component: EuiTimelineItemIcon,
+  decorators: [
+    (Story, { args }) => (
+      <div css={{ display: 'flex', width: '100%', height: '40px' }}>
+        <Story {...args} />
+      </div>
+    ),
+  ],
+  args: {
+    verticalAlign: 'center',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTimelineItemIconProps>;
+
+export const Playground: Story = {
+  args: {
+    icon: 'email',
+  },
+};

src/components/toast/global_toast_list.stories.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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/EuiToast/EuiGlobalToastList/EuiGlobalToastList',
+  component: EuiGlobalToastList,
+  argTypes: {
+    role: { control: { type: 'select' }, options: ['log', 'alert'] },
+    showClearAllButtonAt: { control: { type: 'number', min: 0 } },
+  },
+  args: {
+    role: 'log',
+    side: 'right',
+    showClearAllButtonAt: 3,
+    // 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/EuiToast/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
+  },
+};