@kadconsulting/dry
Version:
KAD Reusable Component Library
58 lines • 1.98 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import ProgressNavigation from './ProgressNavigation';
export default {
title: 'Components/Navigation/ProgressNavigation',
component: ProgressNavigation,
argTypes: {
'data-testid': {
control: 'text',
description: 'ID for testing purposes',
defaultValue: 'ProgressNavigation-test-id',
},
steps: {
control: 'object',
description: 'Array of steps for the navigation',
defaultValue: [
{ id: 1, title: 'Step 1', text: 'Description of step 1' },
{ id: 2, title: 'Step 2', text: 'Description of step 2' },
{ id: 3, title: 'Step 3', text: 'Description of step 3' },
],
},
orientation: {
control: 'select',
options: ['horizontal', 'vertical'],
description: 'Orientation of the navigation',
defaultValue: 'horizontal',
},
activeColor: {
control: 'color',
description: 'Color of the active step',
defaultValue: '#007bff',
},
onStepClick: {
action: 'Step clicked',
description: 'Callback when a step is clicked',
},
},
};
const Template = (args) => _jsx(ProgressNavigation, { ...args });
export const Default = Template.bind({});
Default.args = {
'data-testid': 'ProgressNavigation-test-id',
steps: [
{ id: 1, title: 'Step 1', text: 'Description of step 1' },
{ id: 2, title: 'Step 2', text: 'Description of step 2' },
{ id: 3, title: 'Step 3', text: 'Description of step 3' },
],
};
export const Vertical = Template.bind({});
Vertical.args = {
...Default.args,
orientation: 'vertical',
};
export const CustomColor = Template.bind({});
CustomColor.args = {
...Default.args,
activeColor: '#ff0000',
};
//# sourceMappingURL=ProgressNavigation.stories.js.map