diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png new file mode 100644 index 00000000000..6e5fa0b6ed8 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png new file mode 100644 index 00000000000..4041436bd3f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png new file mode 100644 index 00000000000..393ada181bc Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png new file mode 100644 index 00000000000..93df543d706 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png new file mode 100644 index 00000000000..16417739982 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png new file mode 100644 index 00000000000..648cb8a095d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png new file mode 100644 index 00000000000..29ebf08218c Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png new file mode 100644 index 00000000000..d7707ab2083 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png new file mode 100644 index 00000000000..dfc99d84216 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png new file mode 100644 index 00000000000..1705ad3ae5c Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png new file mode 100644 index 00000000000..542ab18689f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png new file mode 100644 index 00000000000..c3696feaaec Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png new file mode 100644 index 00000000000..e9ba65fb06c Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png new file mode 100644 index 00000000000..d84b2d15ce4 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png new file mode 100644 index 00000000000..b3ec4d73d05 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png new file mode 100644 index 00000000000..9f7479a7b18 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableBody_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png new file mode 100644 index 00000000000..0da468e82fe Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooterCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png new file mode 100644 index 00000000000..df89652215f Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableFooter_EuiTableFooter_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png new file mode 100644 index 00000000000..926d6a3e5c0 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png new file mode 100644 index 00000000000..186eaefae5d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeaderCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png new file mode 100644 index 00000000000..750b1aef812 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableHeader_EuiTableHeader_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png new file mode 100644 index 00000000000..22543a828d3 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTablePagination_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png new file mode 100644 index 00000000000..05759b47044 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCellCheckbox_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png new file mode 100644 index 00000000000..f2558636808 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Actions.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png new file mode 100644 index 00000000000..32b8d8ab4e9 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Expander.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png new file mode 100644 index 00000000000..50367296d9d Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRowCell_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png new file mode 100644 index 00000000000..7696f88eb7e Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_EuiTableRow_EuiTableRow_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png new file mode 100644 index 00000000000..8951f05b4aa Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableHeaderMobile_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png new file mode 100644 index 00000000000..8639baa7879 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobileItem_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png new file mode 100644 index 00000000000..30b10ebd728 Binary files /dev/null and b/packages/eui/.loki/reference/chrome_mobile_Tabular_Content_EuiTable_Mobile_subcomponents_EuiTableSortMobile_Playground.png differ diff --git a/packages/eui/src/components/table/mobile/table_header_mobile.stories.tsx b/packages/eui/src/components/table/mobile/table_header_mobile.stories.tsx new file mode 100644 index 00000000000..fd93a3f1ea5 --- /dev/null +++ b/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 = { + title: 'Tabular Content/EuiTable/Mobile subcomponents/EuiTableHeaderMobile', + component: EuiTableHeaderMobile, + decorators: [ + (Story, { args }) => ( + + + + ), + ], + 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; + +export const Playground: Story = { + args: { + // show component always for testing and VRT + responsiveBreakpoint: true, + children: 'mobile header content', + }, +}; diff --git a/packages/eui/src/components/table/mobile/table_sort_mobile.stories.tsx b/packages/eui/src/components/table/mobile/table_sort_mobile.stories.tsx new file mode 100644 index 00000000000..173853d824e --- /dev/null +++ b/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 = { + title: 'Tabular Content/EuiTable/Mobile subcomponents/EuiTableSortMobile', + component: EuiTableSortMobile, + decorators: [ + (Story, { args }) => ( + + + + + + ), + ], + args: { + anchorPosition: 'downRight', + }, +}; + +export default meta; +type Story = StoryObj; + +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, + }, + ], + }, +}; diff --git a/packages/eui/src/components/table/mobile/table_sort_mobile_item.stories.tsx b/packages/eui/src/components/table/mobile/table_sort_mobile_item.stories.tsx new file mode 100644 index 00000000000..19fee319b86 --- /dev/null +++ b/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 = { + title: 'Tabular Content/EuiTable/Mobile subcomponents/EuiTableSortMobileItem', + component: EuiTableSortMobileItem, + decorators: [ + (Story, { args }) => ( + + + + + + ), + ], + 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; + +export const Playground: Story = { + args: { + children: 'sort item', + }, +}; diff --git a/packages/eui/src/components/table/table_body.stories.tsx b/packages/eui/src/components/table/table_body.stories.tsx new file mode 100644 index 00000000000..0e1e2b3a38c --- /dev/null +++ b/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 = { + title: 'Tabular Content/EuiTable/EuiTableBody', + component: EuiTableBody, + decorators: [ + (Story, { args }) => ( + + + + ), + ], +}; +disableStorybookControls(meta, ['bodyRef']); +hideStorybookControls(meta, ['aria-label']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: ( + <> + + Row 1, Cell 1 + Row 1, Cell 2 + Row 1, Cell 3 + + + ), + }, +}; diff --git a/packages/eui/src/components/table/table_footer.stories.tsx b/packages/eui/src/components/table/table_footer.stories.tsx new file mode 100644 index 00000000000..970c92bc926 --- /dev/null +++ b/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 = { + title: 'Tabular Content/EuiTable/EuiTableFooter/EuiTableFooter', + component: EuiTableFooter, + decorators: [ + (Story, { args }) => ( + + + + ), + ], +}; +hideStorybookControls(meta, ['aria-label']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: ( + <> + Cell 1 + Cell 2 + + Long text that will truncate, because footer cells default to that + + + ), + }, +}; diff --git a/packages/eui/src/components/table/table_footer_cell.stories.tsx b/packages/eui/src/components/table/table_footer_cell.stories.tsx new file mode 100644 index 00000000000..8cd45f25f93 --- /dev/null +++ b/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 = { + title: 'Tabular Content/EuiTable/EuiTableFooter/EuiTableFooterCell', + component: EuiTableFooterCell, + decorators: [ + (Story, { args }) => ( + + + + + + ), + ], + 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; + +export const Playground: Story = { + args: { + children: 'Footer cell content', + }, +}; diff --git a/packages/eui/src/components/table/table_header.stories.tsx b/packages/eui/src/components/table/table_header.stories.tsx new file mode 100644 index 00000000000..b2be105cb9b --- /dev/null +++ b/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 = { + title: 'Tabular Content/EuiTable/EuiTableHeader/EuiTableHeader', + component: EuiTableHeader, + decorators: [ + (Story, { args }) => ( + + + + ), + ], + args: { + wrapWithTableRow: true, + }, +}; +hideStorybookControls(meta, ['aria-label']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: ( + <> + Column 1 + Column 2 + + Long text that will truncate, because header cells default to that + + + ), + }, +}; diff --git a/packages/eui/src/components/table/table_header_cell.stories.tsx b/packages/eui/src/components/table/table_header_cell.stories.tsx new file mode 100644 index 00000000000..bf240ef7564 --- /dev/null +++ b/packages/eui/src/components/table/table_header_cell.stories.tsx @@ -0,0 +1,68 @@ +/* + * 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 { LEFT_ALIGNMENT } from '../../services'; +import { EuiTable, EuiTableHeader } from './index'; +import { HEADER_CELL_SCOPE } from './table_header_cell_shared'; +import { + EuiTableHeaderCell, + EuiTableHeaderCellProps, +} from './table_header_cell'; + +const meta: Meta = { + title: 'Tabular Content/EuiTable/EuiTableHeader/EuiTableHeaderCell', + component: EuiTableHeaderCell, + decorators: [ + (Story, { args }) => ( + + + + + + ), + ], + argTypes: { + scope: { + control: 'radio', + options: [undefined, ...HEADER_CELL_SCOPE], + }, + width: { control: 'text' }, + }, + args: { + align: LEFT_ALIGNMENT, + // set up for easier testing/QA + width: '', + isSortAscending: false, + isSorted: false, + mobileOptions: { + show: true, + only: false, + }, + description: '', + }, +}; +hideStorybookControls(meta, ['aria-label']); +enableFunctionToggleControls(meta, ['onSort']); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: 'Header cell content', + // @ts-ignore - overwrite meta default to align with base behavior + onSort: false, + }, +}; diff --git a/packages/eui/src/components/table/table_header_cell.tsx b/packages/eui/src/components/table/table_header_cell.tsx index fb216ef9c5f..b5d507c7c92 100644 --- a/packages/eui/src/components/table/table_header_cell.tsx +++ b/packages/eui/src/components/table/table_header_cell.tsx @@ -29,8 +29,9 @@ import { resolveWidthAsStyle } from './utils'; import { useEuiTableIsResponsive } from './mobile/responsive_context'; import { EuiTableCellContent } from './_table_cell_content'; import { euiTableHeaderFooterCellStyles } from './table_cells_shared.styles'; +import { HEADER_CELL_SCOPE } from './table_header_cell_shared'; -export type TableHeaderCellScope = 'col' | 'row' | 'colgroup' | 'rowgroup'; +export type TableHeaderCellScope = (typeof HEADER_CELL_SCOPE)[number]; export type EuiTableHeaderCellProps = CommonProps & Omit, 'align' | 'scope'> & { diff --git a/packages/eui/src/components/table/table_header_cell_checkbox.stories.tsx b/packages/eui/src/components/table/table_header_cell_checkbox.stories.tsx new file mode 100644 index 00000000000..c35dce9e1f4 --- /dev/null +++ b/packages/eui/src/components/table/table_header_cell_checkbox.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 { action } from '@storybook/addon-actions'; + +import { EuiTable, EuiTableHeader, EuiTableHeaderCell } from './index'; +import { EuiTableHeaderCellCheckbox } from './table_header_cell_checkbox'; +import { EuiCheckbox } from '../form'; + +type EuiTableHeaderCellCheckboxProps = typeof EuiTableHeaderCellCheckbox; + +const meta: Meta = { + title: 'Tabular Content/EuiTable/EuiTableHeader/EuiTableHeaderCellCheckbox', + component: EuiTableHeaderCellCheckbox, + decorators: [ + (Story, { args }) => ( + + + + Header Cell 1 + Header Cell 2 + Header Cell 3 + + + ), + ], + argTypes: { + width: { control: 'text' }, + }, + args: { + scope: 'col', + // set up for easier testing/QA + width: '', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: ( + action('onChange')(e)} + /> + ), + }, +}; diff --git a/packages/eui/src/components/table/table_header_cell_checkbox.tsx b/packages/eui/src/components/table/table_header_cell_checkbox.tsx index b43e957c32b..85ae9dcc6d4 100644 --- a/packages/eui/src/components/table/table_header_cell_checkbox.tsx +++ b/packages/eui/src/components/table/table_header_cell_checkbox.tsx @@ -14,12 +14,10 @@ import { CommonProps } from '../common'; import { resolveWidthAsStyle } from './utils'; import { euiTableCellCheckboxStyles } from './table_cells_shared.styles'; +import { HEADER_CELL_SCOPE } from './table_header_cell_shared'; export type EuiTableHeaderCellCheckboxScope = - | 'col' - | 'row' - | 'colgroup' - | 'rowgroup'; + (typeof HEADER_CELL_SCOPE)[number]; export interface EuiTableHeaderCellCheckboxProps { width?: string | number; @@ -35,6 +33,8 @@ export const EuiTableHeaderCellCheckbox: FunctionComponent< const styles = useEuiMemoizedStyles(euiTableCellCheckboxStyles); const inlineStyles = resolveWidthAsStyle(style, width); + console.log('inlineStyles', inlineStyles); + return ( = { + title: 'Tabular Content/EuiTable/EuiTablePagination', + component: EuiTablePagination, + argTypes: { + pageCount: { + type: 'number', + description: + 'The total number of pages. Pass `0` if total count is unknown.', + }, + activePage: { + type: 'number', + description: + 'The current page using a zero based index. So if you set the activePage to 1, it will activate the second page. Pass `-1` for forcing to last page.', + }, + compressed: { + description: + 'If true, will only show next/prev arrows and simplified number set.', + }, + responsive: { + // @ts-ignore - add non resolved type + type: 'false | EuiBreakpointSize[]', + description: + 'Automatically reduces to the `compressed` version on smaller screens. Remove completely with `false` or provide your own list of responsive breakpoints.', + }, + }, + args: { + itemsPerPage: euiTablePaginationDefaults.itemsPerPage, + itemsPerPageOptions: euiTablePaginationDefaults.itemsPerPageOptions, + showPerPageOptions: euiTablePaginationDefaults.showPerPageOptions, + // set up for easier testing/QA + pageCount: undefined, + activePage: undefined, + compressed: false, + responsive: false, + }, +}; +enableFunctionToggleControls(meta, ['onChangePage', 'onChangeItemsPerPage']); +moveStorybookControlsToCategory( + meta, + ['pageCount', 'activePage', 'compressed', 'responsive'], + 'EuiPagination props' +); + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + pageCount: 3, + responsive: ['xs', 's'], + }, +}; diff --git a/packages/eui/src/components/table/table_row.stories.tsx b/packages/eui/src/components/table/table_row.stories.tsx index 153bbb386a6..b7bd667087f 100644 --- a/packages/eui/src/components/table/table_row.stories.tsx +++ b/packages/eui/src/components/table/table_row.stories.tsx @@ -22,7 +22,7 @@ import { import { EuiTableRow, EuiTableRowProps } from './table_row'; const meta: Meta = { - title: 'Tabular Content/EuiTable/EuiTableRow', + title: 'Tabular Content/EuiTable/EuiTableRow/EuiTableRow', component: EuiTableRow, }; diff --git a/packages/eui/src/components/table/table_row_cell.stories.tsx b/packages/eui/src/components/table/table_row_cell.stories.tsx new file mode 100644 index 00000000000..a0717fb2e66 --- /dev/null +++ b/packages/eui/src/components/table/table_row_cell.stories.tsx @@ -0,0 +1,104 @@ +/* + * 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 { + LEFT_ALIGNMENT, + CENTER_ALIGNMENT, + RIGHT_ALIGNMENT, +} from '../../services'; +import { EuiButtonIcon } from '../button'; +import { EuiTable, EuiTableBody, EuiTableRow } from './index'; +import { EuiTableRowCell } from './table_row_cell'; + +type EuiTableRowCellProps = typeof EuiTableRowCell; + +const meta: Meta = { + title: 'Tabular Content/EuiTable/EuiTableRow/EuiTableRowCell', + component: EuiTableRowCell, + decorators: [ + (Story, { args }) => ( + + + + Cell 1 + + + + + ), + ], + argTypes: { + align: { + control: 'radio', + options: [LEFT_ALIGNMENT, CENTER_ALIGNMENT, RIGHT_ALIGNMENT], + }, + width: { + control: 'text', + }, + }, + args: { + align: LEFT_ALIGNMENT, + hasActions: false, + isExpander: false, + setScopeRow: false, + textOnly: true, + truncateText: false, + valign: 'middle', + // set up for easier testing/QA + mobileOptions: { + textOnly: true, + show: true, + only: false, + enlarge: false, + width: '50%', + render: null, + header: null, + }, + width: '', + }, +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: 'row cell content', + }, +}; + +export const Expander: Story = { + parameters: { + controls: { + include: ['isExpander', 'children', 'width', 'align'], + }, + }, + args: { + isExpander: true, + width: '32px', + align: 'center', + children: , + }, +}; + +export const Actions: Story = { + parameters: { + controls: { + include: ['hasActions', 'children', 'width', 'align'], + }, + }, + args: { + hasActions: true, + width: '32px', + align: 'center', + children: , + }, +}; diff --git a/packages/eui/src/components/table/table_row_cell_checkbox.stories.tsx b/packages/eui/src/components/table/table_row_cell_checkbox.stories.tsx new file mode 100644 index 00000000000..978079c7d45 --- /dev/null +++ b/packages/eui/src/components/table/table_row_cell_checkbox.stories.tsx @@ -0,0 +1,45 @@ +/* + * 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 { EuiCheckbox } from '../form'; +import { EuiTable, EuiTableBody, EuiTableRow, EuiTableRowCell } from './index'; +import { EuiTableRowCellCheckbox } from './table_row_cell_checkbox'; + +type EuiTableRowCellCheckboxProps = typeof EuiTableRowCellCheckbox; + +const meta: Meta = { + title: 'Tabular Content/EuiTable/EuiTableRow/EuiTableRowCellCheckbox', + component: EuiTableRowCellCheckbox, + decorators: [ + (Story, { args }) => ( + + + + + Cell 1 + + + + ), + ], +}; + +export default meta; +type Story = StoryObj; + +export const Playground: Story = { + args: { + children: ( + action('onChange')(e)} /> + ), + }, +};