From 4fc03e5f25d7bdd1f07558427c48228f3bb13ded Mon Sep 17 00:00:00 2001 From: Djordje Vlaisavljevic Date: Fri, 15 Sep 2023 13:09:19 +0100 Subject: [PATCH] Improved Table component and its storybook (#18169) refs https://github.com/TryGhost/Product/issues/3890 - Made Table and its children semantic - Updated Table and TableRow storybooks with new examples - Fixed smaller visual bugs --- .../src/admin-x-ds/global/Table.stories.tsx | 58 +++++++++++------ .../src/admin-x-ds/global/Table.tsx | 17 +++-- .../src/admin-x-ds/global/TableHead.tsx | 8 +-- .../admin-x-ds/global/TableRow.stories.tsx | 62 +++++++++++++++++++ .../src/admin-x-ds/global/TableRow.tsx | 2 +- 5 files changed, 118 insertions(+), 29 deletions(-) create mode 100644 apps/admin-x-settings/src/admin-x-ds/global/TableRow.stories.tsx diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Table.stories.tsx b/apps/admin-x-settings/src/admin-x-ds/global/Table.stories.tsx index ad94e8b97c..bbadc5d21a 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Table.stories.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/Table.stories.tsx @@ -1,6 +1,7 @@ import {ReactNode} from 'react'; import type {Meta, StoryObj} from '@storybook/react'; +import * as TableRowStories from './TableRow.stories'; import Table from './Table'; import TableCell from './TableCell'; import TableHead from './TableHead'; @@ -12,37 +13,34 @@ const meta = { tags: ['autodocs'] } satisfies Meta; +const {/*id,*/ ...tableRowProps} = TableRowStories.HiddenAction.args || {}; + +const tableHeader = ( + <> + Name + Email + +); + const tableRows = ( <> - - Name - Email - - + Jamie Larson jamie@example.com - + Jamie Larson jamie@example.com - + Jamie Larson jamie@example.com - + Jamie Larson jamie@example.com - - Jamie Larson - jamie@example.com - - - Jamie Larson - jamie@example.com - - + Jamie Larson jamie@example.com @@ -59,6 +57,13 @@ export const Default: Story = { decorators: [(_story: () => ReactNode) => (
{_story()}
)] }; +export const WithHeader: Story = { + args: { + header: tableHeader, + children: tableRows + } +}; + export const WithPageTitle: Story = { args: { pageTitle: 'This is a page title', @@ -66,11 +71,28 @@ export const WithPageTitle: Story = { } }; +export const WithRowAction: Story = { + args: { + header: tableHeader, + children: tableRows + } +}; + +export const WithHint: Story = { + args: { + header: tableHeader, + children: tableRows, + hint: 'This is a hint', + hintSeparator: true + } +}; + export const Loading: Story = { args: { + header: tableHeader, children: tableRows, isLoading: true, hint: 'This is a hint', hintSeparator: true } -}; +}; \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/global/Table.tsx b/apps/admin-x-settings/src/admin-x-ds/global/Table.tsx index 2cfe308cbb..0b4f8b7f9c 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/Table.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/Table.tsx @@ -3,6 +3,7 @@ import Hint from './Hint'; import Pagination from './Pagination'; import React from 'react'; import Separator from './Separator'; +import TableRow from './TableRow'; import clsx from 'clsx'; import {LoadingIndicator} from './LoadingIndicator'; import {PaginationData} from '../../hooks/usePagination'; @@ -12,6 +13,7 @@ interface TableProps { * If the table is the primary content on a page (e.g. Members table) then you can set a pagetitle to be consistent */ pageTitle?: string; + header?: React.ReactNode; children?: React.ReactNode; borderTop?: boolean; hint?: string; @@ -29,7 +31,7 @@ const OptionalPagination = ({pagination}: {pagination?: PaginationData}) => { return ; }; -const Table: React.FC = ({children, borderTop, hint, hintSeparator, pageTitle, className, pagination, isLoading}) => { +const Table: React.FC = ({header, children, borderTop, hint, hintSeparator, pageTitle, className, pagination, isLoading}) => { const tableClasses = clsx( (borderTop || pageTitle) && 'border-t border-grey-300', 'w-full', @@ -38,7 +40,7 @@ const Table: React.FC = ({children, borderTop, hint, hintSeparator, ); // We want to avoid layout jumps when we load a new page of the table, or when data is invalidated - const table = React.useRef(null); + const table = React.useRef(null); const [tableHeight, setTableHeight] = React.useState(undefined); React.useEffect(() => { @@ -72,11 +74,14 @@ const Table: React.FC = ({children, borderTop, hint, hintSeparator, {/* TODO: make this div have the same height across all pages */}
- {!isLoading && - +
+ {header && + {header} + } + {!isLoading && {children} - -
} + } +
{isLoading && } diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TableHead.tsx b/apps/admin-x-settings/src/admin-x-ds/global/TableHead.tsx index 5ba9e5ce86..2a0d20d4ba 100644 --- a/apps/admin-x-settings/src/admin-x-ds/global/TableHead.tsx +++ b/apps/admin-x-settings/src/admin-x-ds/global/TableHead.tsx @@ -4,16 +4,16 @@ import clsx from 'clsx'; const TableHead: React.FC> = ({className, children, ...props}) => { const tableCellClasses = clsx( - '!py-3 !pl-0 !pr-6 align-top', + '!py-2 !pl-0 !pr-6 text-left align-top', props.onClick && 'hover:cursor-pointer', className ); return ( - + {children} - + ); }; -export default TableHead; +export default TableHead; \ No newline at end of file diff --git a/apps/admin-x-settings/src/admin-x-ds/global/TableRow.stories.tsx b/apps/admin-x-settings/src/admin-x-ds/global/TableRow.stories.tsx new file mode 100644 index 0000000000..a27208518e --- /dev/null +++ b/apps/admin-x-settings/src/admin-x-ds/global/TableRow.stories.tsx @@ -0,0 +1,62 @@ +import {ReactNode} from 'react'; +import type {Meta, StoryObj} from '@storybook/react'; + +import Button from './Button'; +import TableCell from './TableCell'; +import TableHead from './TableHead'; +import TableRow from './TableRow'; + +const meta = { + title: 'Global / Table / Table Row', + component: TableRow, + tags: ['autodocs'] +} satisfies Meta; + +const tableHeaderCells = ( + <> + Name + Email + +); + +const tableCells = ( + <> + Jamie Larson + jamie@example.com + +); + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: tableCells, + action: