Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import React from 'react';
import { Story } from '@storybook/react';
import TimelineSlider, { TimelineSliderProps } from '../components/TimelineSlider';
// Storybook metadata
export default {
title: 'TimelineSlider',
component: TimelineSlider,
};
// Sample marks
const marksSample = [
{ value: 0, size: 'small' as const, labelBottom: 'Mark 0', color: '#1976d2', onClick: () => alert('Clicked mark 0') },
{
value: 25,
size: 'medium' as const,
labelBottom: 'Mark 25',
labelTop: '12',
color: '#e91e63',
onClick: () => alert('Clicked mark 25'),
},
{
value: 50,
size: 'large' as const,
labelBottom: 'Mark 50',
labelTop: '42',
color: '#ff9800',
onClick: () => alert('Clicked mark 50'),
},
{ value: 75, size: 'medium' as const, labelBottom: 'Mark 75', labelTop: '26', color: '#4caf50' },
{
value: 100,
size: 'small' as const,
labelBottom: 'Mark 100',
color: '#9c27b0',
onClick: () => alert('Clicked mark 100'),
},
];
// Default story
const Template: Story<TimelineSliderProps> = (args) => <TimelineSlider {...args} />;
export const Default = Template.bind({});
Default.args = {
labelEnd: 'Aug 2025',
labelSelected: 'April 2024',
labelStart: 'Jul 2022',
marks: marksSample,
};
// Story for all marks having the same value
export const SingleValueMarks = Template.bind({});
SingleValueMarks.args = {
marks: [
{ value: 50, size: 'small', color: '#1976d2' },
{ value: 50, size: 'medium', color: '#e91e63' },
{ value: 50, size: 'large', color: '#ff9800' },
],
};
|