[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" />,
+ },
+};