feat(Link): style with app config

This commit is contained in:
Benjamin Canac
2024-03-22 12:46:52 +01:00
parent e3ef0c59b9
commit 349780dae1
8 changed files with 107 additions and 32 deletions

View File

@@ -8,8 +8,10 @@ describe('Link', () => {
['with to', { props: { to: '/' } }],
['with type', { props: { type: 'submit' as const } }],
['with disabled', { props: { disabled: true } }],
['with activeClass', { props: { active: true, to: '/', activeClass: 'text-sm' } }],
['with inactiveClass', { props: { active: false, to: '/', inactiveClass: 'text-gray-300' } }]
['with raw', { props: { raw: true } }],
['with class', { props: { class: 'font-medium' } }],
['with activeClass', { props: { active: true, activeClass: 'text-gray-900 dark:text-white' } }],
['with inactiveClass', { props: { active: false, inactiveClass: 'hover:text-primary-500 dark:hover:text-primary-400' } }]
])('renders %s correctly', async (nameOrHtml: string, options: { props: LinkProps }) => {
const html = await ComponentRender(nameOrHtml, options, Link)
expect(html).toMatchSnapshot()

View File

@@ -1,13 +1,17 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
exports[`Link > renders with activeClass correctly 1`] = `"<a href="/" class="text-sm"></a>"`;
exports[`Link > renders with activeClass correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-900 dark:text-white"></button>"`;
exports[`Link > renders with as correctly 1`] = `"<div type="button" disabled="false"></div>"`;
exports[`Link > renders with as correctly 1`] = `"<div type="button" disabled="false" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></div>"`;
exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled=""></button>"`;
exports[`Link > renders with class correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 font-medium"></button>"`;
exports[`Link > renders with inactiveClass correctly 1`] = `"<a href="/" class="text-gray-300"></a>"`;
exports[`Link > renders with disabled correctly 1`] = `"<button type="button" disabled="" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 cursor-not-allowed opacity-75"></button>"`;
exports[`Link > renders with to correctly 1`] = `"<a href="/"></a>"`;
exports[`Link > renders with inactiveClass correctly 1`] = `"<button type="button" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-primary-500 dark:hover:text-primary-400"></button>"`;
exports[`Link > renders with type correctly 1`] = `"<button type="submit"></button>"`;
exports[`Link > renders with raw correctly 1`] = `"<button type="button" class=""></button>"`;
exports[`Link > renders with to correctly 1`] = `"<a href="/" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></a>"`;
exports[`Link > renders with type correctly 1`] = `"<button type="submit" class="focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"></button>"`;