feat: create story with examples for link with arrow
This commit is contained in:
parent
c349c56ee2
commit
a841459eee
|
@ -0,0 +1,74 @@
|
||||||
|
import type { Meta, StoryObj } from '@storybook/react'
|
||||||
|
|
||||||
|
import LinkWithArrow from './LinkWithArrow'
|
||||||
|
import { withRouter } from 'storybook-addon-react-router-v6'
|
||||||
|
|
||||||
|
const meta = {
|
||||||
|
title: 'General/LinkWithArrow',
|
||||||
|
component: LinkWithArrow,
|
||||||
|
parameters: {
|
||||||
|
layout: 'centered',
|
||||||
|
},
|
||||||
|
tags: ['autodocs'],
|
||||||
|
decorators: [withRouter()],
|
||||||
|
} satisfies Meta<typeof LinkWithArrow>
|
||||||
|
|
||||||
|
export default meta
|
||||||
|
type Story = StoryObj<typeof meta>
|
||||||
|
|
||||||
|
export const LeftArrow: Story = {
|
||||||
|
args: {
|
||||||
|
text: 'Learn More',
|
||||||
|
to: '/',
|
||||||
|
arrowLeft: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RightArrow: Story = {
|
||||||
|
args: {
|
||||||
|
text: 'Learn More',
|
||||||
|
to: '/',
|
||||||
|
arrowRight: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const BothArrows: Story = {
|
||||||
|
args: {
|
||||||
|
text: 'Learn More',
|
||||||
|
to: '/',
|
||||||
|
arrowLeft: true,
|
||||||
|
arrowRight: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WithoutArrow: Story = {
|
||||||
|
args: {
|
||||||
|
text: 'Learn More',
|
||||||
|
to: '/',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WithoutText: Story = {
|
||||||
|
args: {
|
||||||
|
text: '',
|
||||||
|
to: '/',
|
||||||
|
arrowLeft: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WithLongText: Story = {
|
||||||
|
args: {
|
||||||
|
text: 'This is a very long text that is used to test the component.',
|
||||||
|
to: '/',
|
||||||
|
arrowLeft: true,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WithCustomStyle: Story = {
|
||||||
|
args: {
|
||||||
|
text: 'Learn More',
|
||||||
|
to: '/',
|
||||||
|
arrowLeft: true,
|
||||||
|
style: { backgroundColor: 'lightgray' },
|
||||||
|
},
|
||||||
|
}
|
Loading…
Reference in New Issue