Ilia Mashkov
97 lines
2.9 KiB
Svelte
97 lines
2.9 KiB
Svelte
<script module lang="ts">
|
|
import ArrowUpRightIcon from '@lucide/svelte/icons/arrow-up-right';
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
import type { ComponentProps } from 'svelte';
|
|
import Link from './Link.svelte';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Shared/Link',
|
|
component: Link,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
docs: {
|
|
description: {
|
|
component:
|
|
'Styled link component based on the footer link design. Supports optional icon snippet and standard anchor attributes.',
|
|
},
|
|
story: { inline: false },
|
|
},
|
|
layout: 'centered',
|
|
},
|
|
argTypes: {
|
|
href: {
|
|
control: 'text',
|
|
description: 'Link URL',
|
|
},
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<Story
|
|
name="Default"
|
|
args={{
|
|
href: 'https://fonts.google.com',
|
|
target: '_blank',
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof Link>)}
|
|
<Link {...args}>
|
|
<span>Google Fonts</span>
|
|
</Link>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story
|
|
name="With Icon"
|
|
args={{
|
|
href: 'https://fonts.google.com',
|
|
target: '_blank',
|
|
}}
|
|
>
|
|
{#snippet template(args: ComponentProps<typeof Link>)}
|
|
<Link {...args}>
|
|
<span>Google Fonts</span>
|
|
{#snippet icon()}
|
|
<ArrowUpRightIcon
|
|
size={10}
|
|
class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
|
|
/>
|
|
{/snippet}
|
|
</Link>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Multiple Links">
|
|
{#snippet template()}
|
|
<div class="flex gap-4 p-8 bg-neutral-100 dark:bg-neutral-900 rounded-lg">
|
|
<Link href="https://fonts.google.com" target="_blank">
|
|
<span>Google Fonts</span>
|
|
{#snippet icon()}
|
|
<ArrowUpRightIcon
|
|
size={10}
|
|
class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
|
|
/>
|
|
{/snippet}
|
|
</Link>
|
|
<Link href="https://www.fontshare.com" target="_blank">
|
|
<span>Fontshare</span>
|
|
{#snippet icon()}
|
|
<ArrowUpRightIcon
|
|
size={10}
|
|
class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
|
|
/>
|
|
{/snippet}
|
|
</Link>
|
|
<Link href="https://github.com" target="_blank">
|
|
<span>GitHub</span>
|
|
{#snippet icon()}
|
|
<ArrowUpRightIcon
|
|
size={10}
|
|
class="fill-body group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-200"
|
|
/>
|
|
{/snippet}
|
|
</Link>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|