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

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

4
test/components/Card.spec.ts
View File

@@ -1,11 +1,15 @@
import { describe, it, expect } from 'vitest'
import Card, { type CardProps, type CardSlots } from '../../src/runtime/components/Card.vue'
import ComponentRender from '../component-render'
import theme from '#build/ui/card'
describe('Card', () => {
const variants = Object.keys(theme.variants.variant) as any
it.each([
// Props
['with as', { props: { as: 'section' } }],
...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant } }]),
['with class', { props: { class: 'rounded-xl' } }],
['with ui', { props: { ui: { body: 'font-bold' } } }],
// Slots

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-->