diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Column.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Column.png new file mode 100644 index 00000000000..0da824b19ed Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Inline.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Inline.png new file mode 100644 index 00000000000..2575675b3ef Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Inline.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Playground.png new file mode 100644 index 00000000000..d344dd01814 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Row.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Row.png new file mode 100644 index 00000000000..d344dd01814 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png new file mode 100644 index 00000000000..1944b92c052 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png new file mode 100644 index 00000000000..0bb567530ae Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Column.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Column.png new file mode 100644 index 00000000000..47aa1d12d3a Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Column.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Inline.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Inline.png new file mode 100644 index 00000000000..5aea47e57b4 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Inline.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Playground.png new file mode 100644 index 00000000000..56add484aac Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Row.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Row.png new file mode 100644 index 00000000000..56add484aac Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Row.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png new file mode 100644 index 00000000000..1f4f4f98565 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListDescription_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png new file mode 100644 index 00000000000..d52e6529613 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiDescriptionList_Subcomponents_EuiDescriptionListTitle_Playground.png differ diff --git a/packages/eui/src/components/delay_hide/delay_hide.stories.tsx b/packages/eui/src/components/delay_hide/delay_hide.stories.tsx new file mode 100644 index 00000000000..09b544f9021 --- /dev/null +++ b/packages/eui/src/components/delay_hide/delay_hide.stories.tsx @@ -0,0 +1,37 @@ +/* + * 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 { EuiLoadingSpinner } from '../loading'; +import { EuiDelayHide, EuiDelayHideProps } from './delay_hide'; + +const meta: Meta = { + title: 'Utilities/EuiDelayHide', + component: EuiDelayHide, + parameters: { + loki: { + // VRT is not really useful here as the main functionality is the timeout + skip: true, + }, + }, + args: { + hide: false, + minimumDuration: 1000, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + render: () => , + }, +}; diff --git a/packages/eui/src/components/delay_render/delay_render.stories.tsx b/packages/eui/src/components/delay_render/delay_render.stories.tsx new file mode 100644 index 00000000000..6254abd9a78 --- /dev/null +++ b/packages/eui/src/components/delay_render/delay_render.stories.tsx @@ -0,0 +1,52 @@ +/* + * 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, { useEffect, useState } from 'react'; +import type { Meta, StoryObj } from '@storybook/react'; + +import { EuiLoadingSpinner } from '../loading'; +import { EuiDelayRender, EuiDelayRenderProps } from './delay_render'; + +const meta: Meta = { + title: 'Utilities/EuiDelayRender', + component: EuiDelayRender, + parameters: { + loki: { + // VRT is not really useful here as the main functionality is the delay + skip: true, + }, + }, + args: { + delay: 500, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: , + }, + render: (args) => , +}; + +// stateful wrapper to ensure changing args triggers a new mount of +// the component without having to refresh the page +const StatefulPlayground = (props: EuiDelayRenderProps) => { + const [render, setRender] = useState(true); + + useEffect(() => { + setRender(false); + setTimeout(() => { + setRender(true); + }, 0); + }, [props]); + + return render ? : null; +}; diff --git a/packages/eui/src/components/description_list/description_list.stories.tsx b/packages/eui/src/components/description_list/description_list.stories.tsx new file mode 100644 index 00000000000..18171e1e3f2 --- /dev/null +++ b/packages/eui/src/components/description_list/description_list.stories.tsx @@ -0,0 +1,101 @@ +/* + * 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 { faker } from '@faker-js/faker'; + +faker.seed(42); + +const listItems = Array.from({ length: 3 }, () => ({ + title: faker.lorem.sentence(), + description: faker.lorem.sentences(2), +})); +import { moveStorybookControlsToCategory } from '../../../.storybook/utils'; +import { EuiDescriptionListProps } from './description_list_types'; +import { EuiDescriptionList } from './description_list'; + +const meta: Meta = { + title: 'Display/EuiDescriptionList', + component: EuiDescriptionList, + args: { + align: 'left', + compressed: false, + textStyle: 'normal', + type: 'row', + rowGutterSize: 's', + columnGutterSize: 's', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + listItems, + }, +}; +moveStorybookControlsToCategory( + Playground, + ['columnGutterSize', 'columnWidths'], + 'Column layout' +); +moveStorybookControlsToCategory(Playground, ['rowGutterSize'], 'Row layout'); + +export const Column: Story = { + parameters: { + controls: { + include: [ + 'align', + 'columnGutterSize', + 'columnWidths', + 'compressed', + 'descriptionProps', + 'textStyle', + 'titleProps', + 'type', + ], + }, + }, + args: { + listItems, + type: 'column', + }, +}; + +export const Row: Story = { + parameters: { + controls: { + include: [ + 'align', + 'compressed', + 'descriptionProps', + 'rowGutterSize', + 'textStyle', + 'titleProps', + 'type', + ], + }, + }, + args: { + listItems, + type: 'row', + }, +}; + +export const Inline: Story = { + parameters: { + controls: { + include: ['align', 'compressed', 'descriptionProps', 'titleProps'], + }, + }, + args: { + listItems, + type: 'inline', + }, +}; diff --git a/packages/eui/src/components/description_list/description_list_description.stories.tsx b/packages/eui/src/components/description_list/description_list_description.stories.tsx new file mode 100644 index 00000000000..15bdc8331d7 --- /dev/null +++ b/packages/eui/src/components/description_list/description_list_description.stories.tsx @@ -0,0 +1,31 @@ +/* + * 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 } from '../../../.storybook/utils'; +import { + EuiDescriptionListDescription, + EuiDescriptionListDescriptionProps, +} from './description_list_description'; + +const meta: Meta = { + title: + 'Display/EuiDescriptionList/Subcomponents/EuiDescriptionListDescription', + component: EuiDescriptionListDescription, +}; +hideStorybookControls(meta, ['aria-label']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: 'Description list description', + }, +}; diff --git a/packages/eui/src/components/description_list/description_list_title.stories.tsx b/packages/eui/src/components/description_list/description_list_title.stories.tsx new file mode 100644 index 00000000000..59c48a62bed --- /dev/null +++ b/packages/eui/src/components/description_list/description_list_title.stories.tsx @@ -0,0 +1,30 @@ +/* + * 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 } from '../../../.storybook/utils'; +import { + EuiDescriptionListTitle, + EuiDescriptionListTitleProps, +} from './description_list_title'; + +const meta: Meta = { + title: 'Display/EuiDescriptionList/Subcomponents/EuiDescriptionListTitle', + component: EuiDescriptionListTitle, +}; +hideStorybookControls(meta, ['aria-label']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: 'Description list title', + }, +};