From a841459eee6efb2154449ab92b808bb73fa18796 Mon Sep 17 00:00:00 2001 From: RadoslavDimchev Date: Wed, 30 Aug 2023 16:07:17 +0300 Subject: [PATCH] feat: create story with examples for link with arrow --- .../General/LinkWithArrow.stories.tsx | 74 +++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/components/General/LinkWithArrow.stories.tsx diff --git a/src/components/General/LinkWithArrow.stories.tsx b/src/components/General/LinkWithArrow.stories.tsx new file mode 100644 index 00000000..74102321 --- /dev/null +++ b/src/components/General/LinkWithArrow.stories.tsx @@ -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 + +export default meta +type Story = StoryObj + +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' }, + }, +}