Skip to content

Commit

Permalink
add striped variation
Browse files Browse the repository at this point in the history
  • Loading branch information
jamigibbs committed Dec 16, 2024
1 parent 4275f99 commit 88d095a
Show file tree
Hide file tree
Showing 6 changed files with 83 additions and 104 deletions.
22 changes: 22 additions & 0 deletions packages/storybook/stories/va-table-uswds.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@ const Template = args => {
sortable,
columns,
scrollable,
striped,
} = args;

return (
Expand All @@ -56,6 +57,7 @@ const Template = args => {
stacked={args.stacked}
table-type={tableType}
sortable={!!sortable}
striped={striped}
>
<va-table-row>
{columns.map((col, i) => (
Expand Down Expand Up @@ -406,6 +408,15 @@ Sortable.args = {
'scrollable': true,
};

export const Striped = Template.bind(null);
Striped.args = {
'table-title': 'This is a striped table.',
'rows': data,
'columns': defaultColumns,
'striped': true,
'table-type': 'bordered',
};

export const Scrollable = Template.bind(null);
Scrollable.args = {
'table-title': 'This is a scrollable table.',
Expand All @@ -414,4 +425,15 @@ Scrollable.args = {
'scrollable': true,
'stacked': false,
};

export const ScrollableWithStripes = Template.bind(null);
ScrollableWithStripes.args = {
'table-title': 'This is a striped table.',
'rows': data,
'columns': defaultColumns,
'striped': true,
'table-type': 'bordered',
'scrollable': true,
};

Default.argTypes = propStructure(vaTableDocs);
16 changes: 16 additions & 0 deletions packages/web-components/src/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -1583,6 +1583,10 @@ export namespace Components {
* Convert to a stacked table when screen size is small True by default, must specify if false if this is unwanted
*/
"stacked"?: boolean;
/**
* When active, the table will display alternating row background colors.
*/
"striped": boolean;
/**
* The title of the table
*/
Expand Down Expand Up @@ -1615,6 +1619,10 @@ export namespace Components {
* If true convert to a stacked table when screen size is small
*/
"stacked"?: boolean;
/**
* When active, the table will display alternating row background colors.
*/
"striped": boolean;
/**
* The title of the table
*/
Expand Down Expand Up @@ -5012,6 +5020,10 @@ declare namespace LocalJSX {
* Convert to a stacked table when screen size is small True by default, must specify if false if this is unwanted
*/
"stacked"?: boolean;
/**
* When active, the table will display alternating row background colors.
*/
"striped"?: boolean;
/**
* The title of the table
*/
Expand Down Expand Up @@ -5048,6 +5060,10 @@ declare namespace LocalJSX {
* If true convert to a stacked table when screen size is small
*/
"stacked"?: boolean;
/**
* When active, the table will display alternating row background colors.
*/
"striped"?: boolean;
/**
* The title of the table
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { newE2EPage } from '@stencil/core/testing';

function getTableMarkup(): string {
return `<va-table
table-title="My table"
>
function getTableMarkup(props = {}): string {
const defaultProps = {...props, 'table-title': 'My table'};
return `<va-table ${Object.entries(defaultProps)
.map(([key, value]) => `${key}="${value}"`)
.join(' ')}>
<va-table-row slot="headers">
<span>
Document title
Expand Down Expand Up @@ -62,23 +63,18 @@ function getTableMarkup(): string {
</va-table>`;
}

describe('V1 table', () => {


it('renders a V1 va-table-inner with va-table-rows inside', async () => {
describe('renders header row', () => {
it('renders a va-table-inner with va-table-rows inside', async () => {
const page = await newE2EPage();
await page.setContent(getTableMarkup());

const headerRow = await page.find('va-table-inner >>> va-table-row');
expect(headerRow).toBeDefined();
});

});


describe('V3 table', () => {

it('renders a V3 va-table-inner with an HTML table inside', async () => {
describe('renders table element', () => {
it('renders a va-table-inner with an HTML table inside', async () => {
const page = await newE2EPage();
await page.setContent(getTableMarkup());
const element = await page.find('va-table-inner >>> table');
Expand All @@ -88,66 +84,7 @@ describe('V3 table', () => {

it('is not stacked by when attribute is set to false', async () => {
const page = await newE2EPage();
await page.setContent(`<va-table
table-title="My table"
stacked="false"
>
<va-table-row slot="headers">
<span>
Document title
</span>
<span>
Description
</span>
<span>
Year
</span>
</va-table-row>
<va-table-row>
<span>
Declaration of Independence
</span>
<span>
Statement adopted by the Continental Congress declaring independence from the British Empire
</span>
<span>
1776
</span>
</va-table-row>
<va-table-row>
<span>
Bill of Rights
</span>
<span>
The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms
</span>
<span>
1791
</span>
</va-table-row>
<va-table-row>
<span>
Declaration of Sentiments
</span>
<span>
A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.
</span>
<span>
1848
</span>
</va-table-row>
<va-table-row>
<span>
Emancipation Proclamation
</span>
<span>
An executive order granting freedom to slaves in designated southern states.
</span>
<span>
1863
</span>
</va-table-row>
</va-table>`);
await page.setContent(getTableMarkup({stacked: 'false'}));
const element = await page.find('va-table-inner >>> table');

expect(element).not.toHaveClass('usa-table--stacked');
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,11 @@ import { dateSort } from '../../sort/date';
import { _getCompareFunc } from '../../sort/utils';

describe('va-table', () => {
function makeTable() {
return `<va-table table-title="this is a caption">
function makeTable(props = {}) {
const defaultProps = {...props, 'table-title': 'this is a caption'};
return `<va-table ${Object.entries(defaultProps)
.map(([key, value]) => `${key}="${value}"`)
.join(' ')}>
<va-table-row>
<span>One</span>
<span>Two</span>
Expand All @@ -18,8 +21,7 @@ describe('va-table', () => {
<span>Dog</span>
<span>Cat</span>
<span>Mouse</span>
</va-table-row>
</va-table>`;
</va-table-row>`;
}

it('renders', async () => {
Expand Down Expand Up @@ -61,39 +63,15 @@ describe('va-table', () => {

it('is scrollable when attribute is set to true', async () => {
const page = await newE2EPage();
await page.setContent(`<va-table scrollable="true" table-title="this is a caption">
<va-table-row>
<span>One</span>
<span>Two</span>
<span>Three</span>
</va-table-row>
<va-table-row>
<span>Dog</span>
<span>Cat</span>
<span>Mouse</span>
</va-table-row>
</va-table>`);
await page.setContent(makeTable({scrollable: 'true'}));
const table = await page.find('va-table-inner >>> div');
expect(table.getAttribute('tabindex')).toEqual('0');
expect(table).toHaveClass('usa-table-container--scrollable');
});

it('is not stacked by when attribute is set to false', async () => {
const page = await newE2EPage();
await page.setContent(`<va-table stacked="false" table-title="this is a caption">
<va-table-row>
<span>One</span>
<span>Two</span>
<span>Three</span>
</va-table-row>
<va-table-row>
<span>Dog</span>
<span>Cat</span>
<span>Mouse</span>
</va-table-row>
</va-table>`);
await page.setContent(makeTable({stacked: 'false'}));
const table = await page.find('va-table-inner >>> table');
expect(table).not.toHaveClass('usa-table--stacked');
});
Expand Down Expand Up @@ -123,6 +101,20 @@ describe('va-table', () => {
expect(columnHeader.getAttribute('scope')).toEqual('col');
expect(rowHeader.getAttribute('scope')).toEqual('row');
});

it('is not striped by default', async () => {
const page = await newE2EPage();
await page.setContent(makeTable());
const table = await page.find('va-table-inner');
expect(table).not.toHaveClass('usa-table--striped');
});

it('has the USWDS striped class when striped is true', async () => {
const page = await newE2EPage();
await page.setContent(makeTable());
const table = await page.find('va-table-inner');
expect(table).not.toHaveClass('usa-table--striped');
});
});

describe('sorted va-table ', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,11 @@ export class VaTableInner {
*/
@Prop() scrollable?: boolean = false;

/**
* When active, the table will display alternating row background colors.
*/
@Prop() striped: boolean = false;

/**
* If sortable is true, the direction of next sort for the column that was just sorted
*/
Expand Down Expand Up @@ -325,11 +330,12 @@ export class VaTableInner {
}

render() {
const { tableTitle, tableType, stacked, scrollable } = this;
const { tableTitle, tableType, stacked, scrollable, striped } = this;
const classes = classnames({
'usa-table': true,
'usa-table--stacked': stacked,
'usa-table--borderless': tableType === 'borderless',
'usa-table usa-table--striped': striped,
});
return (
<div
Expand Down
6 changes: 6 additions & 0 deletions packages/web-components/src/components/va-table/va-table.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,11 @@ export class VaTable {
*/
@Prop() sortable: boolean = false;

/**
* When active, the table will display alternating row background colors.
*/
@Prop() striped: boolean = false;

// The number of va-table-rows
@State() rows: number;

Expand Down Expand Up @@ -133,6 +138,7 @@ export class VaTable {
);
vaTable.setAttribute('sortable', `${this.sortable}`);
vaTable.setAttribute('scrollable', this.scrollable ? 'true' : 'false');
vaTable.setAttribute('striped', this.striped ? 'true' : 'false');
// we rebuild the inner table after a sort
if (this.sortable && sortdir && sortindex) {
vaTable.dataset.sortdir = sortdir;
Expand Down

0 comments on commit 88d095a

Please sign in to comment.