mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-24 08:50:34 +01:00
feat(Separator): new component (#46)
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Sandro Circi
GitHub
33
test/components/Separator.spec.ts
Normal file
33
test/components/Separator.spec.ts
Normal file
@@ -0,0 +1,33 @@
|
||||
import { describe, it, expect } from 'vitest'
|
||||
import Separator, { type SeparatorProps } from '../../src/runtime/components/Separator.vue'
|
||||
import ComponentRender from '../component-render'
|
||||
|
||||
describe('Separator', () => {
|
||||
it.each([
|
||||
['basic case', {}],
|
||||
['with as', { props: { as: 'span' } }],
|
||||
['with class', { props: { class: 'flex-row-reverse' } }],
|
||||
['with size 2xs', { props: { size: '2xs' as const } }],
|
||||
['with size xs', { props: { size: 'xs' as const } }],
|
||||
['with size sm', { props: { size: 'sm' as const } }],
|
||||
['with size md', { props: { size: 'md' as const } }],
|
||||
['with size lg', { props: { size: 'lg' as const } }],
|
||||
['with size xl', { props: { size: 'xl' as const } }],
|
||||
['with label', { props: { label: '+1' } }],
|
||||
['with icon', { props: { icon: 'i-heroicons-photo' } }],
|
||||
['with avatar', { props: { avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } } }],
|
||||
['with orientation horizontal', { props: { orientation: 'horizontal' as const } }],
|
||||
['with orientation vertical', { props: { orientation: 'vertical' as const } }],
|
||||
['with type dashed', { props: { type: 'dashed' as const } }],
|
||||
['with type dotted', { props: { type: 'dotted' as const } }],
|
||||
['with color green', { props: { color: 'green' as const } }],
|
||||
['with color white', { props: { color: 'white' as const } }],
|
||||
['with color gray', { props: { color: 'gray' as const } }],
|
||||
['with color black', { props: { color: 'black' as const } }],
|
||||
['with decorative', { props: { decorative: true } }],
|
||||
['with ui', { props: { ui: { label: 'text-lg' } } }]
|
||||
])('renders %s correctly', async (nameOrHtml: string, options: { props?: SeparatorProps, slots?: any }) => {
|
||||
const html = await ComponentRender(nameOrHtml, options, Separator)
|
||||
expect(html).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
155
test/components/__snapshots__/Separator.spec.ts.snap
Normal file
155
test/components/__snapshots__/Separator.spec.ts.snap
Normal file
@@ -0,0 +1,155 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Separator > renders basic case correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with as correctly 1`] = `"<span data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row"><div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div><!--v-if--></span>"`;
|
||||
|
||||
exports[`Separator > renders with avatar correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-gray-100 dark:bg-gray-800 size-5 text-[10px] shrink-0"><img role="img" src="https://avatars.githubusercontent.com/u/739984?v=4" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-gray-500 dark:text-gray-400 truncate"></span></span></div>
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with class correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row-reverse">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with color black correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-900 dark:border-white w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with color gray correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with color green correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-green-500 dark:border-green-400 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with color white correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-white dark:border-gray-900 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with decorative correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="none" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with icon correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><svg data-v-9533427c="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="icon shrink-0 size-5" width="1em" height="1em" viewBox="0 0 24 24">
|
||||
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m2.25 15.75l5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5m10.5-11.25h.008v.008h-.008zm.375 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0"></path>
|
||||
</svg></div>
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with label correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<div class="font-medium text-gray-700 dark:text-gray-200 flex mx-3 whitespace-nowrap"><span class="text-sm">+1</span></div>
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with orientation horizontal correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with orientation vertical correctly 1`] = `
|
||||
"<div data-orientation="vertical" aria-orientation="vertical" role="separator" class="flex items-center align-center text-center h-full flex-col">
|
||||
<div class="border-gray-200 dark:border-gray-800 h-full border-solid border-s"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with size 2xs correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with size lg correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[5px]"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with size md correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[4px]"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with size sm correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[3px]"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with size xl correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[6px]"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with size xs correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t-[2px]"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with type dashed correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-dashed border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with type dotted correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-dotted border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`Separator > renders with ui correctly 1`] = `
|
||||
"<div data-orientation="horizontal" role="separator" class="flex items-center align-center text-center w-full flex-row">
|
||||
<div class="border-gray-200 dark:border-gray-800 w-full border-solid border-t"></div>
|
||||
<!--v-if-->
|
||||
</div>"
|
||||
`;
|
||||
Reference in New Issue
Block a user