gov-gui
Version:
Gov UI Component Library Typscript Build
143 lines (142 loc) • 6.32 kB
JavaScript
import { html } from "lit-html";
import "../../global/animate.min.css";
/**
* Tables display data in a structured format of rows and columns, making it easy
* to compare and analyze information. They are commonly used for displaying
* datasets, lists, or structured content.
*/
export default {
title: 'Components/Table',
tags: ['autodocs'],
parameters: {
actions: {
handles: ['pageChanged'],
},
},
argTypes: {
headings: {
control: 'array',
description: 'The headings for the columns in the table.',
table: {
type: { summary: 'array' },
category: 'Attributes',
defaultValue: { summary: '[]' },
},
},
data: {
control: 'array',
description: 'The data to display in the table.',
table: {
type: { summary: 'array' },
category: 'Attributes',
defaultValue: { summary: '[]' },
},
},
rowActions: {
control: 'object',
description: 'Actions to perform on each row (e.g., Edit, Delete).',
table: {
type: { summary: 'object' },
category: 'Attributes',
defaultValue: { summary: '[]' },
},
},
animation: {
control: 'select',
options: ["",
"bounce", "flash", "pulse", "rubberBand", "shakeX", "shakeY", "headShake", "swing", "tada", "wobble", "jello", "heartBeat",
"backInDown", "backInLeft", "backInRight", "backInUp",
"backOutDown", "backOutLeft", "backOutRight", "backOutUp",
"bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp",
"bounceOut", "bounceOutDown", "bounceOutLeft", "bounceOutRight", "bounceOutUp",
"fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "fadeInTopLeft", "fadeInTopRight", "fadeInBottomLeft", "fadeInBottomRight",
"fadeOut", "fadeOutDown", "fadeOutDownBig", "fadeOutLeft", "fadeOutLeftBig", "fadeOutRight", "fadeOutRightBig", "fadeOutUp", "fadeOutUpBig", "fadeOutTopLeft", "fadeOutTopRight", "fadeOutBottomRight", "fadeOutBottomLeft",
"flip", "flipInX", "flipInY", "flipOutX", "flipOutY",
"lightSpeedInRight", "lightSpeedInLeft", "lightSpeedOutRight", "lightSpeedOutLeft",
"rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight",
"rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight",
"hinge", "jackInTheBox", "rollIn", "rollOut",
"zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp",
"zoomOut", "zoomOutDown", "zoomOutLeft", "zoomOutRight", "zoomOutUp",
"slideInDown", "slideInLeft", "slideInRight", "slideInUp",
"slideOutDown", "slideOutLeft", "slideOutRight", "slideOutUp"
],
description: 'Selects the animation effect to apply to the component.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
animationDelay: {
control: 'select',
options: ["2s", "3s", "4s", "5s"],
description: 'Sets the delay before the animation begins (in seconds).',
table: {
type: { summary: 'string' },
defaultValue: { summary: '2s' },
category: 'Animations',
},
},
animationSpeed: {
control: 'select',
options: ["slow", "slower", "fast", "faster"],
description: 'Controls how quickly the animation plays.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Animations',
},
},
},
};
const Template = (args) => html `
<gov-table
headings='${JSON.stringify(args.headings)}'
data='${JSON.stringify(args.data)}'
row-actions='${JSON.stringify(args.rowActions)}'
animation-delay="${args.animationDelay}"
animation="${args.animation}"
animation-speed="${args.animationSpeed}"
></gov-table>
`;
export const Table = Template.bind({});
Table.args = {
headings: ['Header 1', 'Header 2', 'Header 3', 'Header 4', 'Header 5', 'Header 6'],
data: [
['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6'],
['Data A', 'Data B', 'Data C', 'Data D', 'Data E', 'Data F'],
['Data X', 'Data Y', 'Data Z', 'Data W', 'Data V', 'Data U'],
['Data Q', 'Data R', 'Data S', 'Data T', 'Data P', 'Data O'],
['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6'],
['Data A', 'Data B', 'Data C', 'Data D', 'Data E', 'Data F'],
['Data X', 'Data Y', 'Data Z', 'Data W', 'Data V', 'Data U'],
['Data Q', 'Data R', 'Data S', 'Data T', 'Data P', 'Data O'],
['Data A', 'Data B', 'Data C', 'Data D', 'Data E', 'Data F'],
['Data X', 'Data Y', 'Data Z', 'Data W', 'Data V', 'Data U'],
['Data Q', 'Data R', 'Data S', 'Data T', 'Data P', 'Data O'],
['Data Q', 'Data R', 'Data S', 'Data T', 'Data P', 'Data O'],
['Data A', 'Data B', 'Data C', 'Data D', 'Data E', 'Data F'],
['Data X', 'Data Y', 'Data Z', 'Data W', 'Data V', 'Data U'],
['Data Q', 'Data R', 'Data S', 'Data T', 'Data P', 'Data O'],
],
rowActions: [{ label: "Edit", action: "edit" }, { label: "Delete", action: "delete" }],
animation: '',
animationDelay: '',
animationSpeed: ''
};
Table.parameters = {
docs: {
source: {
code: `<gov-table
headings="${JSON.stringify(Table.args.headings)} "
data="${JSON.stringify(Table.args.data)} "
rowActions="${JSON.stringify(Table.args.rowActions)}"
animation-delay="${Table.args.animationDelay}"
animation="${Table.args.animation}"
animation-speed="${Table.args.animationSpeed}">
</gov-table>`,
},
},
};
//# sourceMappingURL=gov-table.stories.js.map