[Storybook] Add stories for more components (letter D) - Part 2 (#7779)

packages/eui/src/components/drag_and_drop/drag_drop_context.stories.tsx

@@ -0,0 +1,62 @@
+/*
+ * 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 type { DragDropContextProps } from '@hello-pangea/dnd';
+
+import { enableFunctionToggleControls } from '../../../.storybook/utils';
+import { EuiPanel } from '../panel';
+
+import { EuiDroppable } from './droppable';
+import { EuiDraggable } from './draggable';
+import { EuiDragDropContext } from './drag_drop_context';
+
+const meta: Meta<DragDropContextProps> = {
+  title: 'Display/EuiDragDropContext',
+  component: EuiDragDropContext,
+  parameters: {
+    loki: {
+      // EuiDragDropContext doesn't do anything visual, we're testing the
+      // visual parts with the Drag and Drop components separately
+      skip: true,
+    },
+  },
+};
+enableFunctionToggleControls(meta, [
+  'onBeforeDragStart',
+  'onDragStart',
+  'onDragUpdate',
+  'onDragEnd',
+]);
+
+export default meta;
+type Story = StoryObj<DragDropContextProps>;
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <EuiDroppable droppableId="droppableArea">
+        <EuiDraggable spacing="m" index={0} draggableId="draggable-item-1">
+          {(_, state) => (
+            <EuiPanel hasShadow={state.isDragging}>
+              Draggable item 1 {state.isDragging && '✨'}
+            </EuiPanel>
+          )}
+        </EuiDraggable>
+        <EuiDraggable spacing="m" index={1} draggableId="draggable-item-2">
+          {(_, state) => (
+            <EuiPanel hasShadow={state.isDragging}>
+              Draggable item 2 {state.isDragging && '✨'}
+            </EuiPanel>
+          )}
+        </EuiDraggable>
+      </EuiDroppable>
+    ),
+  },
+};

packages/eui/src/components/drag_and_drop/drag_drop_context.tsx

@@ -15,8 +15,6 @@ import {
   ResponderProvided,
 } from '@hello-pangea/dnd';
 
-// export interface EuiDragDropContextProps extends DragDropContextProps {}
-
 type EuiDraggingType = string | null;
 
 export interface EuiDragDropContextProps {

packages/eui/src/components/drag_and_drop/draggable.stories.tsx

@@ -0,0 +1,112 @@
+/*
+ * 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 { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiPanel } from '../panel';
+import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiIcon } from '../icon';
+import { EuiButton } from '../button';
+
+import { EuiDragDropContext } from './drag_drop_context';
+import { EuiDroppable } from './droppable';
+import { EuiDraggable, EuiDraggableProps } from './draggable';
+
+const meta: Meta<EuiDraggableProps> = {
+  title: 'Display/EuiDraggable',
+  component: EuiDraggable,
+  decorators: [
+    (Story, { args }) => (
+      <EuiDragDropContext onDragEnd={action('onDragEnd')}>
+        <EuiDroppable droppableId="droppableArea">
+          <Story {...args} />
+        </EuiDroppable>
+      </EuiDragDropContext>
+    ),
+  ],
+  argTypes: {
+    index: {
+      type: {
+        name: 'number',
+        required: true,
+      },
+    },
+    draggableId: {
+      type: {
+        name: 'string',
+        required: true,
+      },
+    },
+  },
+  args: {
+    customDragHandle: false,
+    isDragDisabled: false,
+    hasInteractiveChildren: false,
+    isRemovable: false,
+    spacing: 'none',
+  },
+};
+hideStorybookControls(meta, ['style']);
+
+export default meta;
+type Story = StoryObj<EuiDraggableProps>;
+
+export const Playground: Story = {
+  args: {
+    draggableId: 'draggable-item',
+    index: 0,
+    children: <EuiPanel>Draggable item</EuiPanel>,
+  },
+};
+
+export const Interactive: Story = {
+  parameters: {
+    controls: {
+      include: [
+        'hasInteractiveChildren',
+        'isDragDisabled',
+        'spacing',
+        'customDragHandle',
+      ],
+    },
+  },
+  args: {
+    draggableId: 'draggable-item',
+    index: 0,
+    hasInteractiveChildren: true,
+    customDragHandle: true,
+  },
+  render: (args) => (
+    <EuiDraggable {...args}>
+      {(provided) => (
+        <EuiPanel paddingSize="s">
+          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiPanel
+                color="transparent"
+                paddingSize="s"
+                {...provided.dragHandleProps}
+                aria-label="Drag Handle"
+              >
+                <EuiIcon type="grab" />
+              </EuiPanel>
+            </EuiFlexItem>
+            <EuiFlexItem grow={true}>
+              <EuiButton fullWidth onClick={action('onButtonClick')}>
+                Draggable item
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiPanel>
+      )}
+    </EuiDraggable>
+  ),
+};