chore(IconButon): delete unusual code
This commit is contained in:
@@ -1,105 +0,0 @@
|
|||||||
<script module>
|
|
||||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
||||||
import IconButton from './IconButton.svelte';
|
|
||||||
|
|
||||||
const { Story } = defineMeta({
|
|
||||||
title: 'Shared/IconButton',
|
|
||||||
component: IconButton,
|
|
||||||
tags: ['autodocs'],
|
|
||||||
parameters: {
|
|
||||||
docs: {
|
|
||||||
description: {
|
|
||||||
component:
|
|
||||||
'Icon button with rotation animation on click. Features clockwise/counterclockwise rotation options and icon snippet support for flexible icon rendering.',
|
|
||||||
},
|
|
||||||
story: { inline: false },
|
|
||||||
},
|
|
||||||
layout: 'centered',
|
|
||||||
},
|
|
||||||
argTypes: {
|
|
||||||
rotation: {
|
|
||||||
control: 'select',
|
|
||||||
options: ['clockwise', 'counterclockwise'],
|
|
||||||
description: 'Direction of rotation animation on click',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
control: 'object',
|
|
||||||
description: 'Icon snippet to render (required)',
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
control: 'boolean',
|
|
||||||
description: 'Disable the button',
|
|
||||||
},
|
|
||||||
onclick: {
|
|
||||||
action: 'clicked',
|
|
||||||
description: 'Click handler',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script lang="ts">
|
|
||||||
import ChevronLeft from '@lucide/svelte/icons/chevron-left';
|
|
||||||
import ChevronRight from '@lucide/svelte/icons/chevron-right';
|
|
||||||
import MinusIcon from '@lucide/svelte/icons/minus';
|
|
||||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
|
||||||
import SettingsIcon from '@lucide/svelte/icons/settings';
|
|
||||||
import XIcon from '@lucide/svelte/icons/x';
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#snippet chevronRightIcon({ className }: { className: string })}
|
|
||||||
<ChevronRight class={className} />
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet chevronLeftIcon({ className }: { className: string })}
|
|
||||||
<ChevronLeft class={className} />
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet plusIcon({ className }: { className: string })}
|
|
||||||
<PlusIcon class={className} />
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet minusIcon({ className }: { className: string })}
|
|
||||||
<MinusIcon class={className} />
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet settingsIcon({ className }: { className: string })}
|
|
||||||
<SettingsIcon class={className} />
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet xIcon({ className }: { className: string })}
|
|
||||||
<XIcon class={className} />
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<Story
|
|
||||||
name="Default"
|
|
||||||
args={{
|
|
||||||
icon: chevronRightIcon,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{#snippet template(args)}
|
|
||||||
<IconButton onclick={() => console.log('Default clicked')} {...args}>
|
|
||||||
{#snippet icon({ className })}
|
|
||||||
<ChevronRight class={className} />
|
|
||||||
{/snippet}
|
|
||||||
</IconButton>
|
|
||||||
{/snippet}
|
|
||||||
</Story>
|
|
||||||
|
|
||||||
<Story
|
|
||||||
name="Disabled"
|
|
||||||
args={{
|
|
||||||
icon: chevronRightIcon,
|
|
||||||
disabled: true,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{#snippet template(args)}
|
|
||||||
<div class="flex flex-col gap-4 items-center">
|
|
||||||
<IconButton disabled {...args}>
|
|
||||||
{#snippet icon({ className })}
|
|
||||||
<ChevronRight class={className} />
|
|
||||||
{/snippet}
|
|
||||||
</IconButton>
|
|
||||||
</div>
|
|
||||||
{/snippet}
|
|
||||||
</Story>
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
<!--
|
|
||||||
Component: IconButton
|
|
||||||
Shadcn button size="icon" variant="ghost" with custom styling and icon snippet
|
|
||||||
-->
|
|
||||||
<script lang="ts">
|
|
||||||
import { Button } from '$shared/shadcn/ui/button';
|
|
||||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
|
||||||
import type {
|
|
||||||
ComponentProps,
|
|
||||||
Snippet,
|
|
||||||
} from 'svelte';
|
|
||||||
|
|
||||||
interface Props extends ComponentProps<typeof Button> {
|
|
||||||
/**
|
|
||||||
* Direction of the rotation effect on click
|
|
||||||
* @default clockwise
|
|
||||||
*/
|
|
||||||
rotation?: 'clockwise' | 'counterclockwise';
|
|
||||||
/**
|
|
||||||
* Icon
|
|
||||||
*/
|
|
||||||
icon: Snippet<[{ className: string }]>;
|
|
||||||
}
|
|
||||||
|
|
||||||
let { rotation = 'clockwise', icon, ...rest }: Props = $props();
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
class="
|
|
||||||
group relative border-none size-9
|
|
||||||
bg-background-20 hover:bg-background-60
|
|
||||||
backdrop-blur-3xl
|
|
||||||
transition-all duration-200 ease-out
|
|
||||||
will-change-transform
|
|
||||||
hover:-translate-y-0.5
|
|
||||||
active:translate-y-0 active:scale-95 active:shadow-none
|
|
||||||
cursor-pointer
|
|
||||||
disabled:opacity-50 disabled:pointer-events-none
|
|
||||||
"
|
|
||||||
size="icon"
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
{@render icon?.({
|
|
||||||
className: cn(
|
|
||||||
'size-4 transition-all duration-200 stroke-[1.5] stroke-text-muted group-hover:stroke-foreground group-hover:scale-110 group-hover:stroke-2 group-active:scale-90 group-disabled:stroke-transparent',
|
|
||||||
rotation === 'clockwise'
|
|
||||||
? 'group-active:rotate-6'
|
|
||||||
: 'group-active:-rotate-6',
|
|
||||||
),
|
|
||||||
})}
|
|
||||||
</Button>
|
|
||||||
Reference in New Issue
Block a user