@kadconsulting/dry
Version:
KAD Reusable Component Library
144 lines • 4.57 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { ThemeProvider } from '~components/ThemeProvider';
import { inferThemeType } from '~internal/index';
import darkTheme from '~themes/default/palette/dark';
import lightTheme from '~themes/default/palette/light';
import ExportCSVButton from './ExportCSVButton';
const meta = {
title: 'Components/ExportCSVButton',
component: ExportCSVButton,
tags: ['autodocs'],
argTypes: {
data: {
control: 'object',
description: 'Data to be exported as CSV',
},
headers: {
control: 'object',
description: 'Headers for the CSV file',
},
id: {
control: 'text',
description: 'ID for the button element',
},
className: {
control: 'text',
description: 'Additional CSS class names',
},
'data-testid': {
control: 'text',
description: 'Test ID for the component',
},
},
};
export default meta;
const defaultData = [
{
id: 1,
orderNumber: '123',
projectId: '456',
orderState: 'PurchaseOrder',
vendorId: '789',
poOwner: 'John',
dateCreated: '2021-01-01',
submittedBy: 'Jane',
},
];
const defaultHeaders = [
{ label: 'Order Number', key: 'orderNumber' },
{ label: 'Project ID', key: 'projectId' },
{ label: 'Order State', key: 'orderState' },
{ label: 'Vendor ID', key: 'vendorId' },
{ label: 'PO Owner', key: 'poOwner' },
{ label: 'Date Created', key: 'dateCreated' },
{ label: 'Submitted By', key: 'submittedBy' },
];
const ThemeAwareStory = (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx(ExportCSVButton, { ...args }) }));
};
export const Default = {
render: ThemeAwareStory,
args: {
data: defaultData,
headers: defaultHeaders,
'data-testid': 'export-csv-button',
},
};
export const WithCustomClassName = {
render: ThemeAwareStory,
args: {
...Default.args,
className: 'custom-export-button',
},
};
export const WithCustomId = {
render: ThemeAwareStory,
args: {
...Default.args,
id: 'custom-export-button-id',
},
};
export const LargeDataset = {
render: ThemeAwareStory,
args: {
...Default.args,
data: Array(100)
.fill(defaultData[0])
.map((item, index) => ({
...item,
id: index + 1,
orderNumber: `ORDER-${index + 1}`,
})),
},
};
export const CustomHeaders = {
render: ThemeAwareStory,
args: {
...Default.args,
headers: [
{ label: 'Custom Label 1', key: 'orderNumber' },
{ label: 'Custom Label 2', key: 'projectId' },
],
},
};
export const NoHeaders = {
render: ThemeAwareStory,
args: {
...Default.args,
headers: undefined,
},
};
export const EmptyData = {
render: ThemeAwareStory,
args: {
...Default.args,
data: [],
},
};
export const MultipleButtons = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsxs("div", { style: { display: 'flex', gap: '20px' }, children: [_jsx(ExportCSVButton, { ...args, data: defaultData.slice(0, 1) }), _jsx(ExportCSVButton, { ...args, data: defaultData.slice(0, 1) }), _jsx(ExportCSVButton, { ...args, data: defaultData.slice(0, 1) })] }) }));
},
args: {
...Default.args,
},
};
export const CustomStyling = {
render: (args, context) => {
const themeType = inferThemeType(context);
return (_jsx(ThemeProvider, { overrides: { themeType }, themes: { light: lightTheme, dark: darkTheme }, children: _jsx("div", { style: { padding: '20px', background: '#f0f0f0' }, children: _jsx(ExportCSVButton, { ...args, className: 'custom-styled-button' }) }) }));
},
args: {
...Default.args,
},
parameters: {
docs: {
description: {
story: 'This story demonstrates how to apply custom styling to the ExportCSVButton. You would need to define the .custom-styled-button class in your CSS.',
},
},
},
};
//# sourceMappingURL=ExportCSVButton.stories.js.map