[Storybook] Add stories for more components (letter D) - Part 1 (#7762)

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<EuiDelayHideProps> = {
+  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<EuiDelayHideProps>;
+
+export const Playground: Story = {
+  args: {
+    render: () => <EuiLoadingSpinner />,
+  },
+};

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<EuiDelayRenderProps> = {
+  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<EuiDelayRenderProps>;
+
+export const Playground: Story = {
+  args: {
+    children: <EuiLoadingSpinner />,
+  },
+  render: (args) => <StatefulPlayground {...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 ? <EuiDelayRender {...props} /> : null;
+};

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<EuiDescriptionListProps> = {
+  title: 'Display/EuiDescriptionList',
+  component: EuiDescriptionList,
+  args: {
+    align: 'left',
+    compressed: false,
+    textStyle: 'normal',
+    type: 'row',
+    rowGutterSize: 's',
+    columnGutterSize: 's',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiDescriptionListProps>;
+
+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',
+  },
+};

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<EuiDescriptionListDescriptionProps> = {
+  title:
+    'Display/EuiDescriptionList/Subcomponents/EuiDescriptionListDescription',
+  component: EuiDescriptionListDescription,
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiDescriptionListDescriptionProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Description list description',
+  },
+};

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<EuiDescriptionListTitleProps> = {
+  title: 'Display/EuiDescriptionList/Subcomponents/EuiDescriptionListTitle',
+  component: EuiDescriptionListTitle,
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiDescriptionListTitleProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Description list title',
+  },
+};