[Storybook] Add stories for more components (letter T) - Part 3 (#7745)

packages/eui/src/components/token/token.stories.tsx

@@ -0,0 +1,36 @@
+/*
+ * 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 { EuiTokenProps } from './token_types';
+import { EuiToken } from './token';
+
+const meta: Meta<EuiTokenProps> = {
+  title: 'Display/EuiToken',
+  component: EuiToken,
+  argTypes: {
+    iconType: { control: 'text' },
+  },
+  args: {
+    size: 's',
+    fill: 'light',
+    shape: 'circle',
+    // set up for easier testing/QA
+    title: '',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTokenProps>;
+
+export const Playground: Story = {
+  args: {
+    iconType: 'tokenAlias',
+  },
+};

packages/eui/src/components/tool_tip/icon_tip.stories.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 {
+  enableFunctionToggleControls,
+  moveStorybookControlsToCategory,
+} from '../../../.storybook/utils';
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
+import { EuiFlexGroup } from '../flex';
+import { EuiIconTip, Props as EuiIconTipProps } from './icon_tip';
+
+const meta: Meta<EuiIconTipProps> = {
+  title: 'Display/EuiIconTip',
+  component: EuiIconTip,
+  parameters: {
+    layout: 'fullscreen',
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  decorators: [
+    (Story, { args }) => (
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="center"
+        css={{
+          blockSize: '100vh',
+        }}
+      >
+        <Story {...args} />
+      </EuiFlexGroup>
+    ),
+  ],
+  args: {
+    type: 'questionInCircle',
+    position: 'top',
+    delay: 'regular',
+    display: 'inlineBlock',
+    // set up for easier testing/QA
+    anchorClassName: '',
+    repositionOnScroll: false,
+    title: '',
+  },
+};
+enableFunctionToggleControls(meta, ['onMouseOut']);
+moveStorybookControlsToCategory(
+  meta,
+  [
+    'anchorClassName',
+    'anchorProps',
+    'content',
+    'children',
+    'display',
+    'onMouseOut',
+    'repositionOnScroll',
+    'title',
+  ],
+  'EuiToolTip props'
+);
+
+export default meta;
+type Story = StoryObj<EuiIconTipProps>;
+
+export const Playground: Story = {
+  args: {
+    content: 'tooltip content',
+    iconProps: {
+      // using autoFocus here as small trick to ensure showing the tooltip on load (e.g. for VRT)
+      // TODO: exchange for loki play() interactions once #7735 is merged
+      // @ts-ignore - temp. solution for storybook VRT testing
+      autofocus: 'true',
+    },
+  },
+};

packages/eui/src/components/tool_tip/icon_tip.tsx

@@ -44,7 +44,7 @@ export interface EuiIconTipProps {
   iconProps?: Omit<PropsOf<typeof EuiIcon>, 'type'> & { type?: never };
 }
 
-type Props = Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> &
+export type Props = Omit<EuiToolTipProps, 'children' | 'delay' | 'position'> &
   EuiIconTipProps & {
     // This are copied from EuiToolTipProps, but made optional. Defaults
     // are applied below.

packages/eui/src/components/tool_tip/tool_tip.stories.tsx

@@ -0,0 +1,74 @@
+/*
+ * 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 { enableFunctionToggleControls } from '../../../.storybook/utils';
+import { LOKI_SELECTORS } from '../../../.storybook/loki';
+import { EuiFlexGroup } from '../flex';
+import { EuiButton } from '../button';
+import { EuiToolTip, EuiToolTipProps } from './tool_tip';
+
+const meta: Meta<EuiToolTipProps> = {
+  title: 'Display/EuiToolTip',
+  component: EuiToolTip,
+  parameters: {
+    layout: 'fullscreen',
+    loki: {
+      chromeSelector: LOKI_SELECTORS.portal,
+    },
+  },
+  decorators: [
+    (Story, { args }) => (
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="center"
+        css={{
+          blockSize: '100vh',
+        }}
+      >
+        <Story {...args} />
+      </EuiFlexGroup>
+    ),
+  ],
+  args: {
+    position: 'top',
+    delay: 'regular',
+    display: 'inlineBlock',
+    // set up for easier testing/QA
+    anchorClassName: '',
+    repositionOnScroll: false,
+    title: '',
+  },
+};
+enableFunctionToggleControls(meta, ['onMouseOut']);
+
+export default meta;
+type Story = StoryObj<EuiToolTipProps>;
+
+export const Playground: Story = {
+  args: {
+    // using autoFocus here as small trick to ensure showing the tooltip on load (e.g. for VRT)
+    // TODO: uncomment loki play() interactions and remove autoFocus once #7747 is merged
+    children: <EuiButton autoFocus>Tooltip trigger</EuiButton>,
+    content: 'tooltip content',
+  },
+  // play: lokiPlayDecorator(async (context) => {
+  //   const { bodyElement, step } = context;
+
+  //   const canvas = within(bodyElement);
+
+  //   await step('show tooltip on click', async () => {
+  //     await userEvent.click(canvas.getByRole('button'));
+  //     await waitFor(() => {
+  //       expect(canvas.getByRole('tooltip')).toBeVisible();
+  //     });
+  //   });
+  // }),
+};

packages/eui/src/components/tour/tour.stories.tsx

@@ -0,0 +1,119 @@
+/*
+ * 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 { EuiFlexGroup } from '../flex';
+import { EuiButton, EuiButtonIcon } from '../button';
+import { EuiTour, EuiTourProps } from './tour';
+import { EuiTourStep } from './tour_step';
+
+const meta: Meta<EuiTourProps> = {
+  title: 'Display/EuiTour/EuiTour',
+  component: EuiTour,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story, { args }) => (
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="center"
+        css={{
+          blockSize: '100vh',
+        }}
+      >
+        <Story {...args} />
+      </EuiFlexGroup>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<EuiTourProps>;
+
+export const Playground: Story = {
+  args: {
+    initialState: {
+      currentTourStep: 1,
+      isTourActive: true,
+      tourPopoverWidth: 300,
+      tourSubtitle: '',
+    },
+    steps: [
+      {
+        title: 'Welcome!',
+        content: 'Tour step content',
+        step: 1,
+        stepsTotal: 2,
+        minWidth: 300,
+        maxWidth: 600,
+        decoration: 'beacon',
+        children: <EuiButtonIcon iconType="questionInCircle" />,
+        onFinish: () => {},
+        anchorPosition: 'downCenter',
+      },
+      {
+        title: 'Goodbye!',
+        content: 'Tour step content',
+        step: 2,
+        stepsTotal: 2,
+        minWidth: 300,
+        maxWidth: 600,
+        decoration: 'beacon',
+        children: <EuiButtonIcon iconType="cheer" />,
+        onFinish: () => {},
+        anchorPosition: 'rightCenter',
+      },
+    ],
+  },
+  render: (args) => <StatefulTour {...args} />,
+};
+
+const StatefulTour = (props: EuiTourProps) => {
+  return (
+    <EuiTour {...props}>
+      {(stepProps, actions, { currentTourStep, isTourActive }) => {
+        const showNext = isTourActive && currentTourStep < stepProps.length;
+
+        const handleIncrementStep = () => {
+          actions.incrementStep();
+          action('incrementStep')();
+        };
+
+        const handleFinishTour = () => {
+          actions.finishTour();
+          action('onFinish')();
+        };
+
+        return (
+          <>
+            {stepProps.map((props) => (
+              <EuiTourStep
+                {...props}
+                onFinish={handleFinishTour}
+                footerAction={
+                  <EuiFlexGroup>
+                    <EuiButton color="text" onClick={handleFinishTour}>
+                      Finish Tour
+                    </EuiButton>
+                    {showNext && (
+                      <EuiButton onClick={handleIncrementStep}>Next</EuiButton>
+                    )}
+                  </EuiFlexGroup>
+                }
+              />
+            ))}
+          </>
+        );
+      }}
+    </EuiTour>
+  );
+};

packages/eui/src/components/tour/tour_step.stories.tsx

@@ -0,0 +1,69 @@
+/*
+ * 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 {
+  disableStorybookControls,
+  enableFunctionToggleControls,
+} from '../../../.storybook/utils';
+import { EuiFlexGroup } from '../flex';
+import { EuiButtonIcon } from '../button';
+import { EuiTourStep, EuiTourStepProps } from './tour_step';
+
+const meta: Meta<EuiTourStepProps> = {
+  title: 'Display/EuiTour/EuiTourStep',
+  component: EuiTourStep,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  decorators: [
+    (Story, { args }) => (
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="center"
+        css={{
+          blockSize: '100vh',
+        }}
+      >
+        <Story {...args} />
+      </EuiFlexGroup>
+    ),
+  ],
+  argTypes: {
+    content: { control: 'text' },
+    title: { control: 'text' },
+    subtitle: { control: 'text' },
+  },
+  args: {
+    anchorPosition: 'leftUp',
+    isStepOpen: false,
+    minWidth: 300,
+    maxWidth: 600,
+    step: 1,
+    decoration: 'beacon',
+    // set up for easier testing/QA
+    subtitle: '',
+  },
+};
+enableFunctionToggleControls(meta, ['onFinish']);
+disableStorybookControls(meta, ['closePopover']);
+
+export default meta;
+type Story = StoryObj<EuiTourStepProps>;
+
+export const Playground: Story = {
+  args: {
+    title: 'Welcome!',
+    content: 'Tour step content',
+    isStepOpen: true,
+    stepsTotal: 3,
+    children: <EuiButtonIcon iconType="questionInCircle" />,
+  },
+};