Skip to content

Commit

Permalink
feat(table): update wc storybook stories
Browse files Browse the repository at this point in the history
  • Loading branch information
@brentswisher
brentswisher committed Jan 28, 2025
1 parent cfcc784 commit 6397366
Show file tree
Hide file tree
Showing 2 changed files with 135 additions and 122 deletions.
220 changes: 135 additions & 85 deletions packages/pharos/src/components/table/pharos-table.wc.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,28 +12,14 @@ export default {
},
};

const nonTextColumns = [
{
name: 'Title',
field: 'title',
},
{
name: 'Thumbnail',
field: 'thumbnail',
},
{
name: 'Description',
field: 'description',
},
{
name: 'Archived',
field: 'archived',
},
{
name: 'Actions',
field: 'actions',
},
];
const getSampleTextRow = (rowId) =>
html`<storybook-pharos-table-row>
<storybook-pharos-table-cell>${rowId}</storybook-pharos-table-cell>
<storybook-pharos-table-cell>123456.jpg</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2020-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2010-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>University of Michigan</storybook-pharos-table-cell>
</storybook-pharos-table-row>`;

const sampleNonTextRow = html` <storybook-pharos-table-row>
<storybook-pharos-table-cell> JSTOR </storybook-pharos-table-cell>
Expand Down Expand Up @@ -89,63 +75,53 @@ const sampleNonTextRow = html` <storybook-pharos-table-row>
</storybook-pharos-table-row>`;

export const Base = {
render: ({ columns, rowData, showPagination }) => html`
render: ({ columns, showPagination }) => html`
<storybook-pharos-table
.columns="${columns}"
.rowData="${rowData}"
.showPagination="${showPagination}"
caption="An example table"
/>
>
<storybook-pharos-table-body>
${Array.from({ length: 5 }, (_, index) => getSampleTextRow(index + 1))}
</storybook-pharos-table-body>
</storybook-pharos-table>
`,
args: {
...defaultArgs,
showPagination: false,
},
};

export const CSSGrid = {
render: ({ columns, rowData, showPagination }) => html`
export const HTMLContent = {
render: ({ showPagination }) => html`
<storybook-pharos-table
.columns="${columns}"
.columns="${[
{
name: 'Title',
field: 'title',
},
{
name: 'Thumbnail',
field: 'thumbnail',
},
{
name: 'Description',
field: 'description',
},
{
name: 'Archived',
field: 'archived',
},
{
name: 'Actions',
field: 'actions',
},
]}"
.showPagination="${showPagination}"
caption="An example table"
>
<storybook-pharos-table-body>
<storybook-pharos-table-row>
<storybook-pharos-table-cell>1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>12345.jpg</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2020-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2010-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>University of Michigan</storybook-pharos-table-cell>
</storybook-pharos-table-row>
<storybook-pharos-table-row>
<storybook-pharos-table-cell>2</storybook-pharos-table-cell>
<storybook-pharos-table-cell>123456.jpg</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2020-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2010-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>University of Michigan</storybook-pharos-table-cell>
</storybook-pharos-table-row>
<storybook-pharos-table-row>
<storybook-pharos-table-cell>3</storybook-pharos-table-cell>
<storybook-pharos-table-cell>123456.jpg</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2020-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2010-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>University of Michigan</storybook-pharos-table-cell>
</storybook-pharos-table-row>
<storybook-pharos-table-row>
<storybook-pharos-table-cell>4</storybook-pharos-table-cell>
<storybook-pharos-table-cell>123456.jpg</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2020-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2010-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>University of Michigan</storybook-pharos-table-cell>
</storybook-pharos-table-row>
<storybook-pharos-table-row>
<storybook-pharos-table-cell>5</storybook-pharos-table-cell>
<storybook-pharos-table-cell>123456.jpg</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2020-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>2010-1-1</storybook-pharos-table-cell>
<storybook-pharos-table-cell>University of Michigan</storybook-pharos-table-cell>
</storybook-pharos-table-row>
${Array.from({ length: 10 }, () => sampleNonTextRow)}
</storybook-pharos-table-body>
</storybook-pharos-table>
`,
Expand All @@ -155,16 +131,16 @@ export const CSSGrid = {
},
};

export const withNonTextContent = {
render: ({ showPagination }) => html`
export const HiddenCaption = {
render: ({ columns, showPagination }) => html`
<storybook-pharos-table
.columns="${nonTextColumns}"
.columns="${columns}"
.showPagination="${showPagination}"
.hasStickyHeader="${true}"
caption="An example table"
.hideCaption="${true}"
>
<storybook-pharos-table-body>
${Array.from({ length: 10 }, () => sampleNonTextRow)}
${Array.from({ length: 10 }, (_, index) => getSampleTextRow(index + 1))}
</storybook-pharos-table-body>
</storybook-pharos-table>
`,
Expand All @@ -174,31 +150,67 @@ export const withNonTextContent = {
},
};

export const WithPagination = {
render: ({ columns, rowData, showPagination }) => html`
export const StickyHeader = {
render: ({ columns }) => html`
<storybook-pharos-table
.columns="${columns}"
.rowData="${rowData}"
.showPagination="${showPagination}"
.totalResults="${5}"
.pageSizeOptions="${[2, 4]}"
caption="An example table"
/>
.hasStickyHeader="${true}"
caption="A sticky header example"
>
<storybook-pharos-table-body>
${Array.from({ length: 20 }, (_, index) => getSampleTextRow(index + 1))}
</storybook-pharos-table-body>
</storybook-pharos-table>
`,
args: {
...defaultArgs,
showPagination: true,
},
};

export const WithHiddenCaption = {
export const PassingRowData = {
render: ({ columns, rowData, showPagination }) => html`
<storybook-pharos-table
.columns="${columns}"
.rowData="${rowData}"
.rowData="${[
{
item: 1,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 2,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 3,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 4,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 5,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
]}"
.showPagination="${showPagination}"
caption="An example table"
.hideCaption="${true}"
caption="An example table using a data array"
/>
`,
args: {
Expand All @@ -207,13 +219,51 @@ export const WithHiddenCaption = {
},
};

export const WithStickyHeader = {
render: ({ columns, rowData }) => html`
export const PassingRowDataWithPagination = {
render: ({ columns, showPagination }) => html`
<storybook-pharos-table
.columns="${columns}"
.rowData="${[...rowData, ...rowData, ...rowData, ...rowData]}"
.hasStickyHeader="${true}"
caption="A sticky header example"
.rowData="${[
{
item: 1,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 2,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 3,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 4,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 5,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
]}"
.showPagination="${showPagination}"
.totalResults="${10}"
.pageSizeOptions="${[2, 4]}"
caption="An example table using a data array with pagination"
/>
`,
args: {
Expand Down
37 changes: 0 additions & 37 deletions packages/pharos/src/components/table/storyArgs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,41 +21,4 @@ export const defaultArgs = {
field: 'university',
},
],
rowData: [
{
item: 1,
filename: '12345.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 2,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 3,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 4,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
{
item: 5,
filename: '123456.jpg',
expired_date: '2020-1-1',
created_on: '2010-1-1',
university: 'University of Michigan',
},
],
};

0 comments on commit 6397366

Please sign in to comment.