glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/test-coverage #27

Merged
ilia merged 12 commits from feature/test-coverage into main 2026-02-22 07:46:55 +00:00
Conversation 0 Commits 12 Files Changed 32 -133
2 changed files with 0 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit eff3979372 - Show all commits

81
src/widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.stories.svelte
View File

@@ -124,17 +124,6 @@ const mockCourier: UnifiedFont = {
</Providers>
</Story>
<Story name="Serif vs Sans-Serif">
{@const _ = (comparisonStore.fontA = mockCourier, comparisonStore.fontB = mockVerdana)}
<Providers>
<div class="min-h-screen flex items-center justify-center p-8">
<div class="w-full max-w-5xl">
<ComparisonSlider />
</div>
</div>
</Providers>
</Story>
<Story name="Loading State">
{@const _ = (comparisonStore.fontA = undefined, comparisonStore.fontB = undefined)}
<Providers>
@@ -145,73 +134,3 @@ const mockCourier: UnifiedFont = {
</div>
</Providers>
</Story>
<Story name="With Custom Text">
{@const _ = (
comparisonStore.fontA = mockArial,
comparisonStore.fontB = mockVerdana,
comparisonStore.text = 'Typography is the art and technique of arranging type.'
)}
<Providers>
<div class="min-h-screen flex items-center justify-center p-8">
<div class="w-full max-w-5xl">
<ComparisonSlider />
</div>
</div>
</Providers>
</Story>
<Story name="Short Text">
{@const _ = (comparisonStore.fontA = mockGeorgia, comparisonStore.fontB = mockCourier, comparisonStore.text = 'Hello')}
<Providers>
<div class="min-h-screen flex items-center justify-center p-8">
<div class="w-full max-w-5xl">
<ComparisonSlider />
</div>
</div>
</Providers>
</Story>
<Story name="Multiline Text">
{@const _ = (
comparisonStore.fontA = mockArial,
comparisonStore.fontB = mockGeorgia,
comparisonStore.text =
'The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump!'
)}
<Providers>
<div class="min-h-screen flex items-center justify-center p-8">
<div class="w-full max-w-5xl">
<ComparisonSlider />
</div>
</div>
</Providers>
</Story>
<Story name="Settings Mode">
{@const _ = (comparisonStore.fontA = mockVerdana, comparisonStore.fontB = mockArial)}
<Providers>
<div class="min-h-screen flex items-center justify-center p-8">
<div class="w-full max-w-5xl">
<div class="mb-8 text-center">
<p class="text-text-muted">Click the settings icon to toggle settings mode</p>
</div>
<ComparisonSlider />
</div>
</div>
</Providers>
</Story>
<Story name="Responsive Container">
{@const _ = (comparisonStore.fontA = mockGeorgia, comparisonStore.fontB = mockVerdana)}
<Providers>
<div class="min-h-screen flex items-center justify-center p-8">
<div class="w-full">
<div class="mb-8 text-center">
<p class="text-text-muted">Resize the browser to see responsive behavior</p>
</div>
<ComparisonSlider />
</div>
</div>
</Providers>
</Story>

52
src/widgets/ComparisonSlider/ui/ComparisonSlider/FontShifter.svelte
View File

@@ -1,52 +0,0 @@
<script lang="ts">
import { cn } from '$shared/shadcn/utils/shadcn-utils';
interface Props {
text: string;
fontName: string;
isAnimating: boolean;
onAnimationComplete?: () => void;
}
let { text, fontName, isAnimating, onAnimationComplete }: Props = $props();
// Split text into characters, preserving spaces
const chars = $derived(text.split('').map(c => c === ' ' ? '\u00A0' : c));
let completedCount = 0;
function handleTransitionEnd() {
completedCount++;
if (completedCount === chars.length) {
onAnimationComplete?.();
completedCount = 0;
}
}
</script>
<div class="relative inline-flex flex-wrap leading-tight">
{#each chars as char, i}
<span
class={cn(
'inline-block transition-all duration-500 ease-[cubic-bezier(0.34,1.56,0.64,1)]',
isAnimating ? 'opacity-0 -translate-y-4 rotate-x-90' : 'opacity-100 translate-y-0 rotate-x-0',
)}
style:font-family={fontName}
style:transition-delay="{i * 25}ms"
ontransitionend={i === chars.length - 1 ? handleTransitionEnd : null}
>
{char}
</span>
{/each}
</div>
<style>
/* Necessary for the "Flip" feel */
div {
perspective: 1000px;
}
span {
transform-style: preserve-3d;
backface-visibility: hidden;
}
</style>