arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-14 12:14:41 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
2c192ac145e3550153821627a389f03e26f247b5
ui/test/components/__snapshots__/Alert.spec.ts.snap
Benjamin Canac 2c192ac145 feat(Alert/Toast)!: add orientation prop
2025-02-05 13:44:21 +01:00

307 lines
14 KiB
Plaintext
Raw Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Alert > renders with actions correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Action</span>
<!--v-if-->
</button></div>
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with as correctly 1`] = `
"<article data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</article>"
`;
exports[`Alert > renders with avatar correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-[var(--ui-bg-elevated)] size-11 text-[22px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" width="44" height="44" class="h-full w-full rounded-[inherit] object-cover data-[error]:hidden" style="display: none;"><span class="font-medium leading-none text-[var(--ui-text-muted)] truncate"> </span></span>
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with class correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with close correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<div class="flex flex-wrap gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:x shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
</div>
</div>"
`;
exports[`Alert > renders with close slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with closeIcon correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<div class="flex flex-wrap gap-1.5 shrink-0 items-center">
<!--v-if--><button type="button" aria-label="Close" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-[var(--ui-text-muted)] hover:text-[var(--ui-text)] disabled:text-[var(--ui-text-muted)] aria-disabled:text-[var(--ui-text-muted)] focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-[var(--ui-border-inverted)] p-0"><span class="iconify i-lucide:trash shrink-0 size-5" aria-hidden="true"></span>
<!--v-if-->
<!--v-if-->
</button>
</div>
</div>"
`;
exports[`Alert > renders with description correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90 mt-1">Description</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with description slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90 mt-1">Description slot</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with icon correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with leading slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Leading slot</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with neutral variant outline correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg)] ring ring-inset ring-[var(--ui-border)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with neutral variant soft correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with neutral variant solid correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with neutral variant subtle correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50 ring ring-inset ring-[var(--ui-border-accented)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with orientation horizontal correctly 1`] = `
"<div data-orientation="horizontal" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90 mt-1">This is a description</div>
<!--v-if-->
</div>
<div class="flex flex-wrap gap-1.5 shrink-0 items-center"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Action</span>
<!--v-if-->
</button>
<!--v-if-->
</div>
</div>"
`;
exports[`Alert > renders with orientation vertical correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]"><span class="iconify i-lucide:lightbulb shrink-0 size-5" aria-hidden="true"></span>
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90 mt-1">This is a description</div>
<div class="flex flex-wrap gap-1.5 shrink-0 items-start mt-2.5"><button type="button" class="rounded-[calc(var(--ui-radius)*1.5)] font-medium inline-flex items-center focus:outline-hidden disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-[var(--ui-bg)] bg-[var(--ui-primary)] hover:bg-[var(--ui-primary)]/75 disabled:bg-[var(--ui-primary)] aria-disabled:bg-[var(--ui-primary)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ui-primary)]">
<!--v-if--><span class="truncate">Action</span>
<!--v-if-->
</button></div>
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with primary variant outline correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with primary variant soft correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with primary variant solid correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with primary variant subtle correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)]/10 text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with title correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with title slot correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-medium">Title slot</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with ui correctly 1`] = `
"<div data-orientation="vertical" class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-start bg-[var(--ui-primary)] text-[var(--ui-bg)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col">
<div class="text-sm font-bold">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
Reference in New Issue View Git Blame Copy Permalink