arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-27 18:30:35 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(Card): add variant prop

Browse Source
This commit is contained in:
Benjamin Canac
2025-02-14 19:23:07 +01:00
parent 7a56903f47
commit 847d4aa752
7 changed files with 151 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
test/components/__snapshots__/Card-vue.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Card > renders with as correctly 1`] = `
"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -17,7 +17,7 @@ exports[`Card > renders with class correctly 1`] = `
`;
exports[`Card > renders with default slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<div class="p-4 sm:p-6">Default slot</div>
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Card > renders with default slot correctly 1`] = `
`;
exports[`Card > renders with footer slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<div class="p-4 sm:px-6">Footer slot</div>
@@ -33,7 +33,7 @@ exports[`Card > renders with footer slot correctly 1`] = `
`;
exports[`Card > renders with header slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<div class="p-4 sm:px-6">Header slot</div>
<!--v-if-->
<!--v-if-->
@@ -41,7 +41,39 @@ exports[`Card > renders with header slot correctly 1`] = `
`;
exports[`Card > renders with ui correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant outline correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant soft correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant solid correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant subtle correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->

42
test/components/__snapshots__/Card.spec.ts.snap
View File

@@ -1,7 +1,7 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Card > renders with as correctly 1`] = `
"<section class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<section class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
@@ -17,7 +17,7 @@ exports[`Card > renders with class correctly 1`] = `
`;
exports[`Card > renders with default slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<div class="p-4 sm:p-6">Default slot</div>
<!--v-if-->
@@ -25,7 +25,7 @@ exports[`Card > renders with default slot correctly 1`] = `
`;
exports[`Card > renders with footer slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<div class="p-4 sm:px-6">Footer slot</div>
@@ -33,7 +33,7 @@ exports[`Card > renders with footer slot correctly 1`] = `
`;
exports[`Card > renders with header slot correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<div class="p-4 sm:px-6">Header slot</div>
<!--v-if-->
<!--v-if-->
@@ -41,7 +41,39 @@ exports[`Card > renders with header slot correctly 1`] = `
`;
exports[`Card > renders with ui correctly 1`] = `
"<div class="bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border) rounded-[calc(var(--ui-radius)*2)]">
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant outline correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg) ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant soft correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant solid correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-inverted) text-(--ui-bg)">
<!--v-if-->
<!--v-if-->
<!--v-if-->
</div>"
`;
exports[`Card > renders with variant subtle correctly 1`] = `
"<div class="rounded-[calc(var(--ui-radius)*2)] bg-(--ui-bg-elevated)/50 ring ring-(--ui-border) divide-y divide-(--ui-border)">
<!--v-if-->
<!--v-if-->
<!--v-if-->