vega-frontend-monorepo/libs/ui-toolkit/src/components/sparkline/sparkline.stories.tsx
m.ray 319e14164d
Feat/324 sparkline component (#381)
* move colors in ui-toolkit/config

* fixing tests and add stories

* fixing some tests and edit story

* update sparkline story

* rename story templates for sparkline

* use tailwind colors and rename to *.spec.tsx

* use tailwind only

* remove test.tsx

* Update libs/tailwindcss-config/src/theme.js

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

* remove gray from tailwind and use black/40 and white/40 for strokeCurrent

Co-authored-by: madalinaraicu <“madalina@raygroup.uk”>
Co-authored-by: Matthew Russell <mattrussell36@gmail.com>
2022-05-09 18:19:19 +03:00

57 lines
1.2 KiB
TypeScript

import type { Story, Meta } from '@storybook/react';
import { Sparkline } from './sparkline';
export default {
component: Sparkline,
title: 'Sparkline',
} as Meta;
const Template: Story = (args) => <Sparkline data={args['data']} {...args} />;
export const Grey = Template.bind({});
Grey.args = {
data: [
1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8,
],
width: 60,
height: 30,
points: 25,
className: 'w-[113px]',
};
export const Equal = Template.bind({});
Equal.args = {
data: [
12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
10, 11, 12,
],
width: 60,
height: 30,
points: 25,
className: 'w-[113px]',
};
export const Increase = Template.bind({});
Increase.args = {
data: [
1, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
10, 11, 12,
],
width: 60,
height: 30,
points: 25,
className: 'w-[113px]',
};
export const Decrease = Template.bind({});
Decrease.args = {
data: [
12, 2, 3, 4, 5, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 6, 7, 8, 9,
10, 11, 1,
],
width: 60,
height: 30,
points: 25,
className: 'w-[113px]',
};