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
00c5f261117fd986c8be70ecdc21762023e7ebc0
ui/test/components/__snapshots__/Alert.spec.ts.snap
Benjamin Canac 00c5f26111 fix(Avatar): handle loading manually to support @nuxt/image 
Resolves nuxt/ui-pro#727
2025-01-24 12:14:48 +01:00

258 lines
10 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 as correctly 1`] = `
"<article 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</article>"
`;
exports[`Alert > renders with avatar correctly 1`] = `
"<div 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="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 gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with class correctly 1`] = `
"<div class="relative overflow-hidden rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)] text-[var(--ui-bg)] w-48">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with close correctly 1`] = `
"<div 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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"><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.5"><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 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with closeIcon correctly 1`] = `
"<div 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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"><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.5"><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 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 gap-1">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90">Description</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with description slot correctly 1`] = `
"<div 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<div class="text-sm font-medium">Alert</div>
<div class="text-sm opacity-90">Description slot</div>
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with icon correctly 1`] = `
"<div 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 gap-1">
<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 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center 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 gap-1">
<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 class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-text-highlighted)] bg-[var(--ui-bg-elevated)]/50">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-bg)] bg-[var(--ui-bg-inverted)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center 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 gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with primary variant outline correctly 1`] = `
"<div class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center text-[var(--ui-primary)] ring ring-inset ring-[var(--ui-primary)]/25">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center bg-[var(--ui-primary)]/10 text-[var(--ui-primary)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 class="relative overflow-hidden w-full rounded-[calc(var(--ui-radius)*2)] p-4 flex gap-2.5 items-center 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 gap-1">
<div class="text-sm font-medium">Alert</div>
<!--v-if-->
<!--v-if-->
</div>
<!--v-if-->
</div>"
`;
exports[`Alert > renders with title correctly 1`] = `
"<div 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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 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)]">
<!--v-if-->
<div class="min-w-0 flex-1 flex flex-col gap-1">
<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