Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

va-table: add scrollable prop #1428

Merged
merged 12 commits into from
Dec 12, 2024
Merged

va-table: add scrollable prop #1428

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9da61cc
add focusable attribute to va table
janechodance Dec 6, 2024
b546eef
add tests
janechodance Dec 6, 2024
7994d6a
Merge branch 'main' into patch-bmt2-va-table-focusable-prop
janechodance Dec 6, 2024
23e054a
update prop to scrollable and use 'usa-table-container--scrollable' c…
janechodance Dec 10, 2024
9767769
update scrollable prop in storybook
janechodance Dec 10, 2024
b82fbfc
update tests
janechodance Dec 10, 2024
ae239e7
add scrollable to storybook
janechodance Dec 10, 2024
de72c65
update va-table-inner.scss
janechodance Dec 11, 2024
9f828a1
update according to comments
janechodance Dec 11, 2024
e4c4f57
Update va-table-uswds.stories.jsx
janechodance Dec 11, 2024
ff2ebf9
Update va-table-uswds.stories.jsx
janechodance Dec 12, 2024
ef8bdc6
Merge branch 'main' into patch-bmt2-va-table-focusable-prop
janechodance Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 111 additions & 107 deletions packages/storybook/stories/va-table-uswds.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { getWebComponentDocs, propStructure, StoryDocs } from './wc-helpers';
import { VaPagination } from "@department-of-veterans-affairs/component-library/dist/react-bindings";
import { VaPagination } from '@department-of-veterans-affairs/component-library/dist/react-bindings';

const vaTableDocs = getWebComponentDocs('va-table');

Expand All @@ -11,9 +11,9 @@ export default {
componentSubtitle: 'va-table web component',
docs: {
page: () => <StoryDocs storyDefault={Default} data={vaTableDocs} />,
}
}
}
},
},
};

const defaultColumns = ['Document title', 'Description', 'Year'];
const data = [
Expand All @@ -39,91 +39,87 @@ const data = [
],
];

const Template = (args) => {
const Template = args => {
const {
'table-title': tableTitle,
'table-type': tableType,
rows = data,
sortable,
columns
columns,
scrollable,
} = args;

return (
<va-table table-title={tableTitle} stacked={args.stacked} table-type={tableType} sortable={!!sortable}>
<va-table
scrollable={scrollable}
table-title={tableTitle}
stacked={args.stacked}
table-type={tableType}
sortable={!!sortable}
>
<va-table-row>
{columns.map((col, i) => (
<span key={`header-default-${i}`}>{col}</span>
{columns.map((col, i) => (
<span key={`header-default-${i}`}>{col}</span>
))}
</va-table-row>

{rows.map((row, index) => (
<va-table-row key={`row-default-${index}`}>
{row.map((item, index2) => (
<span key={`cell-default-${index2}`}>{item}</span>
))}
</va-table-row>

{rows.map((row, index) => (
<va-table-row key={`row-default-${index}`}>
{row.map((item, index2) => (
<span key={`cell-default-${index2}`}>{item}</span>
))}
</va-table-row>
))}
))}
</va-table>
);
}
};

const CustomComponentsTemplate = (args) => {
const {
'table-title': tableTitle,
rows,
columns
} = args;
const CustomComponentsTemplate = args => {
const { 'table-title': tableTitle, rows, columns } = args;
return (
<va-table table-title={tableTitle}>
<va-table-row>
{columns.map((col, i) => (
<span key={`header-default-${i}`}>{col}</span>
{columns.map((col, i) => (
<span key={`header-default-${i}`}>{col}</span>
))}
</va-table-row>

{rows.map((row, index) => (
<va-table-row key={`row-default-${index}`}>
{row.map((item, index2) => (
<span key={`cell-default-${index2}`}>{item}</span>
))}
</va-table-row>
))}

{rows.map((row, index) => (
<va-table-row key={`row-default-${index}`}>
{row.map((item, index2) => (
<span key={`cell-default-${index2}`}>{item}</span>
))}
</va-table-row>
))}

<va-table-row>
<span><va-link text="Social Security" href="https://www.ssa.gov/history/35act.html"/></span>
<span>
<va-link
text="Social Security"
href="https://www.ssa.gov/history/35act.html"
/>
</span>
<span>
<div>
<div>
An act to provide for the general welfare by establishing a system of Federal old-age benefits. Enables provisions for:
An act to provide for the general welfare by establishing a system
of Federal old-age benefits. Enables provisions for:
</div>
<ul>
<li>
aged persons
</li>
<li>
blind persons
</li>
<li>
dependent and crippled children
</li>
<li>
maternal and child welfare
</li>
<li>
public health
</li>
<li>
unemployment compensation
</li>
<li>aged persons</li>
<li>blind persons</li>
<li>dependent and crippled children</li>
<li>maternal and child welfare</li>
<li>public health</li>
<li>unemployment compensation</li>
</ul>
</div>
</span>
<span>1935</span>
</va-table-row>
</va-table>
);
}

};

const paginationData = [
[
Expand Down Expand Up @@ -240,11 +236,8 @@ const paginationData = [
],
];

const Pagination = (args) => {
const {
'table-title': tableTitle,
rows,
} = args;
const Pagination = args => {
const { 'table-title': tableTitle, rows, scrollable } = args;

const columns = ['Date', 'Amount', 'Type', 'Method', 'Bank', 'Account'];

Expand All @@ -258,7 +251,6 @@ const Pagination = (args) => {
const [currentData, setCurrentData] = useState(paginate(rows, MAX_ROWS, 1));
const [currentPage, setCurrentPage] = useState(1);


function onPageChange(page) {
setCurrentData(paginate(rows, MAX_ROWS, page));
setCurrentPage(page);
Expand All @@ -268,7 +260,7 @@ const Pagination = (args) => {

return (
<main>
<va-table table-title={tableTitle} >
<va-table table-title={tableTitle} scrollable={scrollable}>
<va-table-row>
{columns.map((col, index) => (
<span key={`table-header-${index}`}>{col}</span>
Expand All @@ -284,7 +276,7 @@ const Pagination = (args) => {
))}
</va-table>
<VaPagination
onPageSelect={(e) => onPageChange(e.detail.page)}
onPageSelect={e => onPageChange(e.detail.page)}
page={currentPage}
pages={numPages}
maxPageListLength={MAX_PAGE_LIST_LENGTH}
Expand All @@ -305,50 +297,51 @@ const missingData = [

export const Default = Template.bind(null);
Default.args = {
'table-title': "This is a borderless table.",
rows: data,
columns: defaultColumns
}
'table-title': 'This is a borderless table.',
'rows': data,
'columns': defaultColumns,
};
Default.argTypes = propStructure(vaTableDocs);


export const Bordered = Template.bind(null);
Bordered.args = {
'table-title': "This is a stacked bordered table.",
'table-title': 'This is a stacked bordered table.',
'table-type': 'bordered',
rows: data,
columns: defaultColumns
}
'rows': data,
'columns': defaultColumns,
};
Bordered.argTypes = propStructure(vaTableDocs);

export const NonStacked = Template.bind(null);
NonStacked.args = {
'table-title': "This table is not stacked. It will not change on a mobile screen.",
stacked: false,
rows: data,
columns: defaultColumns
}
'table-title':
'This table is not stacked. It will not change on a mobile screen.',
'stacked': false,
'rows': data,
'columns': defaultColumns,
};
NonStacked.argTypes = propStructure(vaTableDocs);

export const WithCustomMarkup = CustomComponentsTemplate.bind(null);
WithCustomMarkup.args = {
'table-title': "This table has custom markup in some of its cells.",
rows: data,
columns: defaultColumns
}
'table-title': 'This table has custom markup in some of its cells.',
'rows': data,
'columns': defaultColumns,
};

export const WithPagination = Pagination.bind(null);
WithPagination.args = {
'table-title': "This table uses pagination.",
rows: paginationData
}
'table-title': 'This table uses pagination.',
'rows': paginationData,
'scrollable': true,
};

export const WithMissingData = Template.bind(null);
WithMissingData.args = {
'table-title': "This table has some cells without data",
rows: missingData,
columns: defaultColumns
}
'table-title': 'This table has some cells without data',
'rows': missingData,
'columns': defaultColumns,
};

const sortColumns = [
'Integer/Float',
Expand All @@ -358,8 +351,8 @@ const sortColumns = [
'Ordinal',
'Month only',
'Full date',
'Alphabetical'
]
'Alphabetical',
];

const sortData = [
[
Expand All @@ -370,44 +363,55 @@ const sortData = [
'Ninth',
'August',
'June 3, 1903',
"Lorem ipsum dolor sit,"
'Lorem ipsum dolor sit,',
],
[
'8.9',
'1%',
'$17,000',
'3rd',
'Second',
"February",
'February',
'October 25, 1415',
"amet consectetur adipisicing elit."
'amet consectetur adipisicing elit.',
],
[
'-5',
'60.01%',
'$100,000',
"8th",
'8th',
'Fifth',
"November",
'November',
'December 10, 1621',
"Alias nam eum minima",
'Alias nam eum minima',
],
[
'99',
'44%',
'$1,100',
"5th",
'5th',
'First',
"April",
'April',
'September 30, 1885',
"delectus explicabo"
]
]
'delectus explicabo',
],
];

export const Sortable = Template.bind(null);
Sortable.args = {
'table-title': "This is a sortable table",
rows: sortData,
columns: sortColumns,
sortable: true
}
'table-title': 'This is a sortable table',
'rows': sortData,
'columns': sortColumns,
'sortable': true,
'scrollable': true,
};

export const Scrollable = Template.bind(null);
Scrollable.args = {
'table-title': 'This is a scrollable table.',
'rows': data,
'columns': defaultColumns,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like the WithPagination Storybook variation needs the scrollable prop too because it contains more content. I'm unable to scroll it now on small screens (before it stacks). Can you add that prop to that story too?

Copy link
Contributor

@jamigibbs jamigibbs Dec 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@janechodance I noticed one more thing from the USWDS example; the default behavior for scrollable tables is to also have stacked set to false.

Originally we were thinking that we'd let it stack on small screens but I'm going to tag @rsmithadhoc to get his thoughts about if we should add the stacked: false prop to our scrollable Storybook example so that it matches USWDS? 🤔 I think I'm fine either way but just looking for a sanity check.

Screenshot 2024-12-11 at 11 34 10 AM

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@janechodance I noticed one more thing from the USWDS example; the default behavior for scrollable tables is to also have stacked set to false.

Originally we were thinking that we'd let it stack on small screens but I'm going to tag @rsmithadhoc to get his thoughts about if we should add the stacked: false prop to our scrollable Storybook example so that it matches USWDS? 🤔 I think I'm fine either way but just looking for a sanity check.

Screenshot 2024-12-11 at 11 34 10 AM

@jamigibbs I think I initially said make it stacked by default when we first did the table, just to eliminate any work from teams. However, I'm not too tied to that idea, so I could also go either way. I think the prop would give teams all the options at their disposal, so it might be the most flexible option.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@rsmithadhoc Thanks Ryan! Yes, I agree it would be good to see the flexibility with the options.

'scrollable': true,
'stacked': false,
};
Default.argTypes = propStructure(vaTableDocs);
Loading
Loading