[Storybook] Add stories for more components (EuiTable components) (#7755

)

packages/eui/src/components/table/mobile/table_header_mobile.stories.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { EuiTable } from '../index';
+import { EuiTableHeaderMobile } from './table_header_mobile';
+
+type EuiTableHeaderMobileProps = typeof EuiTableHeaderMobile;
+
+const meta: Meta<EuiTableHeaderMobileProps> = {
+  title: 'Tabular Content/EuiTable/Mobile subcomponents/EuiTableHeaderMobile',
+  component: EuiTableHeaderMobile,
+  decorators: [
+    (Story, { args }) => (
+      <EuiTable>
+        <Story {...args} />
+      </EuiTable>
+    ),
+  ],
+  argTypes: {
+    responsiveBreakpoint: {
+      // @ts-ignore - adding not resolved type
+      type: 'boolean | EuiBreakpointSize',
+      description:
+        'Named breakpoint. Above this size, the header will not be rendered. Pass `false` to never render or inversely, `true` to always render the header',
+      control: 'object',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTableHeaderMobileProps>;
+
+export const Playground: Story = {
+  args: {
+    // show component always for testing and VRT
+    responsiveBreakpoint: true,
+    children: 'mobile header content',
+  },
+};

packages/eui/src/components/table/mobile/table_sort_mobile.stories.tsx

@@ -0,0 +1,57 @@
+/*
+ * 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 { EuiTable } from '../index';
+import { EuiTableHeaderMobile } from './table_header_mobile';
+import {
+  EuiTableSortMobile,
+  EuiTableSortMobileProps,
+} from './table_sort_mobile';
+
+const meta: Meta<EuiTableSortMobileProps> = {
+  title: 'Tabular Content/EuiTable/Mobile subcomponents/EuiTableSortMobile',
+  component: EuiTableSortMobile,
+  decorators: [
+    (Story, { args }) => (
+      <EuiTable>
+        <EuiTableHeaderMobile responsiveBreakpoint={true}>
+          <Story {...args} />
+        </EuiTableHeaderMobile>
+      </EuiTable>
+    ),
+  ],
+  args: {
+    anchorPosition: 'downRight',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTableSortMobileProps>;
+
+export const Playground: Story = {
+  args: {
+    items: [
+      {
+        name: 'sort item 1',
+        onSort: () => action('onSort')('sort item 1'),
+        isSorted: true,
+        isSortAscending: true,
+      },
+      {
+        name: 'sort item 2',
+        onSort: () => action('onSort')('sort item 2'),
+        isSorted: false,
+        isSortAscending: false,
+      },
+    ],
+  },
+};

packages/eui/src/components/table/mobile/table_sort_mobile_item.stories.tsx

@@ -0,0 +1,58 @@
+/*
+ * 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,
+  hideStorybookControls,
+} from '../../../../.storybook/utils';
+import { EuiTable } from '../index';
+import { EuiTableHeaderMobile } from './table_header_mobile';
+import {
+  EuiTableSortMobileItem,
+  EuiTableSortMobileItemProps,
+} from './table_sort_mobile_item';
+
+const meta: Meta<EuiTableSortMobileItemProps> = {
+  title: 'Tabular Content/EuiTable/Mobile subcomponents/EuiTableSortMobileItem',
+  component: EuiTableSortMobileItem,
+  decorators: [
+    (Story, { args }) => (
+      <EuiTable>
+        <EuiTableHeaderMobile responsiveBreakpoint={true}>
+          <Story {...args} />
+        </EuiTableHeaderMobile>
+      </EuiTable>
+    ),
+  ],
+  argTypes: {
+    children: {
+      // @ts-ignore - add not resolved type
+      type: 'ReactNode',
+      control: 'text',
+    },
+  },
+  args: {
+    // set up for easier testing/QA
+    isSorted: false,
+    isSortAscending: false,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+enableFunctionToggleControls(meta, ['onSort']);
+
+export default meta;
+type Story = StoryObj<EuiTableSortMobileItemProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'sort item',
+  },
+};

packages/eui/src/components/table/table_body.stories.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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,
+  hideStorybookControls,
+} from '../../../.storybook/utils';
+import { EuiTable, EuiTableRow, EuiTableRowCell } from './index';
+import { EuiTableBody, EuiTableBodyProps } from './table_body';
+
+const meta: Meta<EuiTableBodyProps> = {
+  title: 'Tabular Content/EuiTable/EuiTableBody',
+  component: EuiTableBody,
+  decorators: [
+    (Story, { args }) => (
+      <EuiTable>
+        <Story {...args} />
+      </EuiTable>
+    ),
+  ],
+};
+disableStorybookControls(meta, ['bodyRef']);
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiTableBodyProps>;
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <>
+        <EuiTableRow>
+          <EuiTableRowCell>Row 1, Cell 1</EuiTableRowCell>
+          <EuiTableRowCell>Row 1, Cell 2</EuiTableRowCell>
+          <EuiTableRowCell>Row 1, Cell 3</EuiTableRowCell>
+        </EuiTableRow>
+      </>
+    ),
+  },
+};

packages/eui/src/components/table/table_footer.stories.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiTable, EuiTableFooterCell } from './index';
+import { EuiTableFooter } from './table_footer';
+
+type EuiTableFooterProps = typeof EuiTableFooter;
+
+const meta: Meta<EuiTableFooterProps> = {
+  title: 'Tabular Content/EuiTable/EuiTableFooter/EuiTableFooter',
+  component: EuiTableFooter,
+  decorators: [
+    (Story, { args }) => (
+      <EuiTable responsiveBreakpoint={false}>
+        <Story {...args} />
+      </EuiTable>
+    ),
+  ],
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiTableFooterProps>;
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <>
+        <EuiTableFooterCell>Cell 1</EuiTableFooterCell>
+        <EuiTableFooterCell>Cell 2</EuiTableFooterCell>
+        <EuiTableFooterCell>
+          Long text that will truncate, because footer cells default to that
+        </EuiTableFooterCell>
+      </>
+    ),
+  },
+};

packages/eui/src/components/table/table_footer_cell.stories.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 { hideStorybookControls } from '../../../.storybook/utils';
+import {
+  LEFT_ALIGNMENT,
+  CENTER_ALIGNMENT,
+  RIGHT_ALIGNMENT,
+} from '../../services';
+import { EuiTable, EuiTableFooter } from './index';
+import {
+  EuiTableFooterCell,
+  EuiTableFooterCellProps,
+} from './table_footer_cell';
+
+const meta: Meta<EuiTableFooterCellProps> = {
+  title: 'Tabular Content/EuiTable/EuiTableFooter/EuiTableFooterCell',
+  component: EuiTableFooterCell,
+  decorators: [
+    (Story, { args }) => (
+      <EuiTable responsiveBreakpoint={false}>
+        <EuiTableFooter>
+          <Story {...args} />
+        </EuiTableFooter>
+      </EuiTable>
+    ),
+  ],
+  argTypes: {
+    align: {
+      control: 'radio',
+      options: [LEFT_ALIGNMENT, CENTER_ALIGNMENT, RIGHT_ALIGNMENT],
+    },
+  },
+  args: {
+    align: LEFT_ALIGNMENT,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiTableFooterCellProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Footer cell content',
+  },
+};

packages/eui/src/components/table/table_header.stories.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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 { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiTable, EuiTableHeaderCell } from './index';
+import { EuiTableHeader, EuiTableHeaderProps } from './table_header';
+
+const meta: Meta<EuiTableHeaderProps> = {
+  title: 'Tabular Content/EuiTable/EuiTableHeader/EuiTableHeader',
+  component: EuiTableHeader,
+  decorators: [
+    (Story, { args }) => (
+      <EuiTable responsiveBreakpoint={false}>
+        <Story {...args} />
+      </EuiTable>
+    ),
+  ],
+  args: {
+    wrapWithTableRow: true,
+  },
+};
+hideStorybookControls(meta, ['aria-label']);
+
+export default meta;
+type Story = StoryObj<EuiTableHeaderProps>;
+
+export const Playground: Story = {
+  args: {
+    children: (
+      <>
+        <EuiTableHeaderCell>Column 1</EuiTableHeaderCell>
+        <EuiTableHeaderCell>Column 2</EuiTableHeaderCell>
+        <EuiTableHeaderCell>
+          Long text that will truncate, because header cells default to that
+        </EuiTableHeaderCell>
+      </>
+    ),
+  },
+};