pkp/pkp-lib#9744 Rename the "TableNext" component to "Table" and migrate native tables with class "pkpTable"

src/components/Container/StatsPage.stories.js

@@ -1,8 +1,8 @@
 import StatsPage from './StatsPage.vue';
 import StatsEditorialPage from '@/components/Container/StatsEditorialPage.vue';
 import StatsPublicationsPage from '@/components/Container/StatsPublicationsPage.vue';
-import ArticleStatsMock from '@/components/TableNext/mocks/articleStats.js';
-import ArticleStatsColumnsMock from '@/components/TableNext/mocks/articleStatsColumns.js';
+import ArticleStatsMock from '@/components/Table/mocks/articleStats.js';
+import ArticleStatsColumnsMock from '@/components/Table/mocks/articleStatsColumns.js';
 import debounce from 'debounce';
 
 export default {

src/components/Container/StatsPage.vue

@@ -4,12 +4,12 @@ import DateRange from '@/components/DateRange/DateRange.vue';
 import PkpFilter from '@/components/Filter/Filter.vue';
 import Pagination from '@/components/Pagination/Pagination.vue';
 import PkpHeader from '@/components/Header/Header.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import ajaxError from '@/mixins/ajaxError';
 
 export default {
@@ -486,7 +486,7 @@ export default {
 	}
 }
 
-.pkpStats__table .pkpTable.-isLoading tbody {
+.pkpStats__table .-isLoading tbody {
 	opacity: 0.5;
 }
 

src/components/Container/StatsPublicationsPage.vue

@@ -611,13 +611,6 @@ export default {
 	padding-top: 0;
 }
 
-.pkpStats__reportParams {
-	th {
-		font-weight: @bold;
-		border-right: @grid-border;
-	}
-}
-
 .pkpStats__reportAction {
 	margin: 2rem 0;
 }

src/components/Container/SubmissionWizardPage.vue

@@ -960,13 +960,6 @@ ul.submissionWizard__reviewPanel__item__value {
 	list-style: none;
 }
 
-// A table used for a review
-.submissionWizard__reviewPanel__body {
-	.pkpTable {
-		border: none;
-	}
-}
-
 .submissionWizard__reviewPanel__citation
 	+ .submissionWizard__reviewPanel__citation {
 	margin-top: 1rem;

src/components/ListPanel/contributors/ContributorsPreviewModal.vue

@@ -7,35 +7,47 @@
 			<p>
 				{{ t('contributor.listPanel.preview.description') }}
 			</p>
-			<table class="pkpTable">
-				<thead>
-					<tr>
-						<th>{{ t('contributor.listPanel.preview.format') }}</th>
-						<th>{{ t('contributor.listPanel.preview.display') }}</th>
-					</tr>
-				</thead>
-				<tbody>
-					<tr>
-						<td>{{ t('contributor.listPanel.preview.abbreviated') }}</td>
-						<td>{{ publication.authorsStringShort }}</td>
-					</tr>
-					<tr>
-						<td>
+			<PkpTable>
+				<TableHeader>
+					<TableColumn>
+						{{ t('contributor.listPanel.preview.format') }}
+					</TableColumn>
+					<TableColumn>
+						{{ t('contributor.listPanel.preview.display') }}
+					</TableColumn>
+				</TableHeader>
+				<TableBody>
+					<TableRow>
+						<TableCell>
+							{{ t('contributor.listPanel.preview.abbreviated') }}
+						</TableCell>
+						<TableCell>{{ publication.authorsStringShort }}</TableCell>
+					</TableRow>
+					<TableRow>
+						<TableCell>
 							{{ t('contributor.listPanel.preview.publicationLists') }}
-						</td>
-						<td>{{ publication.authorsStringIncludeInBrowse }}</td>
-					</tr>
-					<tr>
-						<td>{{ t('contributor.listPanel.preview.full') }}</td>
-						<td>{{ publication.authorsString }}</td>
-					</tr>
-				</tbody>
-			</table>
+						</TableCell>
+						<TableCell>
+							{{ publication.authorsStringIncludeInBrowse }}
+						</TableCell>
+					</TableRow>
+					<TableRow>
+						<TableCell>{{ t('contributor.listPanel.preview.full') }}</TableCell>
+						<TableCell>{{ publication.authorsString }}</TableCell>
+					</TableRow>
+				</TableBody>
+			</PkpTable>
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
 
 <script setup>
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';

src/components/ListPanel/doi/DoiItemVersionModal.vue

@@ -81,12 +81,12 @@
 <script setup>
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 

src/components/ListPanel/doi/DoiListItem.vue

@@ -65,7 +65,7 @@
 		<!-- Expanded view/identifiers -->
 		<div
 			v-if="isExpanded"
-			class="listPanel__itemExpanded listPanel__itemExpanded--doi"
+			class="listPanel__itemExpanded listPanel__itemExpanded--doi mt-2"
 		>
 			<PkpTable>
 				<TableHeader>
@@ -197,12 +197,12 @@ import Spinner from '@/components/Spinner/Spinner.vue';
 import PkpButton from '@/components/Button/Button.vue';
 
 import Expander from '@/components/Expander/Expander.vue';
-import PkpTable from '@/components/TableNext/Table.vue';
-import TableCell from '@/components/TableNext/TableCell.vue';
-import TableColumn from '@/components/TableNext/TableColumn.vue';
-import TableHeader from '@/components/TableNext/TableHeader.vue';
-import TableBody from '@/components/TableNext/TableBody.vue';
-import TableRow from '@/components/TableNext/TableRow.vue';
+import PkpTable from '@/components/Table/Table.vue';
+import TableCell from '@/components/Table/TableCell.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableBody from '@/components/Table/TableBody.vue';
+import TableRow from '@/components/Table/TableRow.vue';
 import DoiItemViewErrorDialogBody from './DoiItemViewErrorDialogBody.vue';
 import DoiItemViewRegisteredMessageDialogBody from './DoiItemViewRegisteredMessageDialogBody.vue';
 import DoiItemVersionModal from './DoiItemVersionModal.vue';
@@ -923,10 +923,6 @@ export default {
 	margin-left: 2.25rem;
 }
 
-.listPanel__item--doi .listPanel__itemExpanded .pkpTable {
-	margin-top: 0.5rem;
-}
-
 .doiListPanel__itemExpandedActions {
 	display: flex;
 	align-items: center;

src/components/ListPanel/doi/DoiStatusInfoModal.vue

@@ -4,42 +4,68 @@
 			{{ t('manager.dois.help.statuses.title') }}
 		</template>
 		<SideModalLayoutBasic>
-			<table class="pkpTable">
-				<thead>
-					<tr>
-						<th>{{ t('common.status') }}</th>
-						<th>{{ t('common.description') }}</th>
-					</tr>
-				</thead>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.needsDoi') }}</th>
-					<td>{{ t('manager.dois.status.needsDoi.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.filters.doiAssigned') }}</th>
-					<td>{{ t('manager.dois.filters.doiAssigned.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.unregistered') }}</th>
-					<td>{{ t('manager.dois.status.unregistered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.submitted') }}</th>
-					<td>{{ t('manager.dois.status.submitted.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.registered') }}</th>
-					<td>{{ t('manager.dois.status.registered.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.error.filterTitle') }}</th>
-					<td>{{ t('manager.dois.status.error.description') }}</td>
-				</tr>
-				<tr class="pkpTable__row">
-					<th>{{ t('manager.dois.status.stale') }}</th>
-					<td>{{ t('manager.dois.status.stale.description') }}</td>
-				</tr>
-			</table>
+			<PkpTable>
+				<TableHeader>
+					<TableColumn>{{ t('common.status') }}</TableColumn>
+					<TableColumn>{{ t('common.description') }}</TableColumn>
+				</TableHeader>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.needsDoi') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.needsDoi.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.filters.doiAssigned') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.filters.doiAssigned.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.unregistered') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.unregistered.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.submitted') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.submitted.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.registered') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.registered.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.error.filterTitle') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.error.description') }}
+					</TableCell>
+				</TableRow>
+				<TableRow>
+					<TableCell :is-row-header="true">
+						{{ t('manager.dois.status.stale') }}
+					</TableCell>
+					<TableCell>
+						{{ t('manager.dois.status.stale.description') }}
+					</TableCell>
+				</TableRow>
+			</PkpTable>
 		</SideModalLayoutBasic>
 	</SideModalBody>
 </template>
@@ -48,6 +74,11 @@
 import SideModalBody from '@/components/Modal/SideModalBody.vue';
 import SideModalLayoutBasic from '@/components/Modal/SideModalLayoutBasic.vue';
 import {useLocalize} from '@/composables/useLocalize';
+import PkpTable from '@/components/Table/Table.vue';
+import TableHeader from '@/components/Table/TableHeader.vue';
+import TableColumn from '@/components/Table/TableColumn.vue';
+import TableRow from '@/components/Table/TableRow.vue';
+import TableCell from '@/components/Table/TableCell.vue';
 
 const {t} = useLocalize();
 </script>

src/components/Table/Table.mdx

@@ -0,0 +1,62 @@
+import {Primary, Controls, Stories, Meta, ArgTypes} from '@storybook/blocks';
+
+import * as TableStories from './Table.stories.js';
+import TableColumn from './TableColumn.vue';
+import TableCell from './TableCell.vue';
+
+<Meta of={TableStories} />
+
+# Table
+
+## Usage
+
+Use the `Table` component to display tabular data when the user will sort, search, filter, or if interactive elements such as a button appear within the table.
+
+## Accessibility
+
+### General Guidelines
+
+To ensure the `Table` component is accessible:
+
+- The `aria-labelledby` and `aria-describedby` attributes are automatically linked when using the `label` and `description` slots, or they can be manually set with the `labelledBy` and `describedBy` props if using external labels and description for the table.
+- If neither `labelledBy`/`describedBy` props nor `label`/`description` slots are provided, use the `ariaLabel` prop to provide accessible information about the table.
+- One column should be [rowheader](https://www.w3.org/TR/wai-aria-1.1/#rowheader) to improve screen reader experience. It's a prop on TableCell, not on TableColumn as one would expect as it allows for significantly easier implementation.
+
+### Slots and ARIA Attributes
+
+If the table has a label or description, ensure that:
+
+- The `labelledBy` and `describedBy` props point to the correct element IDs, especially if the label or description is external to the component.
+- If you're using the `label` or `description` slots, the component will automatically assign IDs and link them to the table via `aria-labelledby` and `aria-describedby`.
+
+## Slots
+
+### `label`
+
+This slot is used to provide a custom label for the table.
+
+### `description`
+
+Use this slot to provide additional information or context about the table's content.
+
+### `top-controls`
+
+The `top-controls` slot is used to add buttons or other interactive elements that appear above the table.
+
+### `bottom-controls`
+
+The `bottom-controls` slot is used for adding controls below the table, such as pagination controls, summary information, or other actionable elements.
+
+## Table Props
+
+<ArgTypes />
+
+## TableColumn Props
+
+<ArgTypes of={TableColumn} />
+
+## TableCell Props
+
+<ArgTypes of={TableCell} />
+
+<Primary />

src/components/TableNext/Table.stories.js → src/components/Table/Table.stories.js

@@ -11,7 +11,7 @@ import TablePagination from './TablePagination.vue';
 import ButtonRow from '@/components/ButtonRow/ButtonRow.vue';
 import {http, HttpResponse} from 'msw';
 
-import articleStats from '@/components/TableNext/mocks/articleStats.js';
+import articleStats from '@/components/Table/mocks/articleStats.js';
 import {useSorting} from '@/composables/useSorting';
 
 import {useFetchPaginated} from '@/composables/useFetchPaginated';