@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

package/src/stories/Button/ButtonModifiers.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
 import { testButton } from './Button.test'
+import { Template } from './Button.stories.mdx'
 
 <Meta title="Components/Button/Props/modifiers" />
 
@@ -13,13 +14,8 @@ Stories of `VvButton` `modifiers`.
 Let's define a story for our `default` button:
 
 <Canvas>
-	<Story name="default" play={testButton}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Default" data-testid="button" />`
-			}
-		}}
+	<Story name="default" play={testButton} args={{ label: 'Default' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -36,13 +32,9 @@ Let's define a story for our `primary` button:
 			testButton(ctx, {
 				className: ['vv-button--primary']
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Primary" modifiers="primary" />`
-			}
 		}}
+		args={{ label: 'Primary', modifiers: 'primary' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -57,13 +49,9 @@ Let's define a story for our `secondary` button:
 			testButton(ctx, {
 				className: 'vv-button--secondary'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Secondary" modifiers="secondary" />`
-			}
 		}}
+		args={{ label: 'Secondary', modifiers: 'secondary' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -78,13 +66,9 @@ Let's define a story for our `danger` button:
 			testButton(ctx, {
 				className: 'vv-button--danger'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Danger" modifiers="danger" />`
-			}
 		}}
+		args={{ label: 'Danger', modifiers: 'danger' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -99,34 +83,26 @@ Let's define a story for our `ghost` button:
 			testButton(ctx, {
 				className: 'vv-button--ghost'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Ghost" modifiers="ghost" />`
-			}
 		}}
+		args={{ label: 'Ghost', modifiers: 'ghost' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 ## Text
 
-Let's define a story for our `text` button:
+Let's define a story for our `link` button:
 
 <Canvas>
 	<Story
-		name="text"
+		name="link"
 		play={async (ctx) => {
 			testButton(ctx, {
-				className: 'vv-button--text'
+				className: 'vv-button--link'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Text" modifiers="text" />`
-			}
 		}}
+		args={{ label: 'Link', modifiers: 'link' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -169,12 +145,93 @@ Let's define a story for our `static-dark` button:
 			testButton(ctx, {
 				className: 'vv-button--static-dark'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Static Dark" modifiers="static-dark" />`
-			}
 		}}
+		args={{ label: 'Static Dark', modifiers: 'static-dark' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Block
+
+Let's define a story for our `block` button:
+
+<Canvas>
+	<Story
+		name="block"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--block'
+			})
+		}}
+		args={{ label: 'Block', modifiers: 'block' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Rounded
+
+Let's define a story for our `rounded` button:
+
+<Canvas>
+	<Story
+		name="rounded"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--rounded'
+			})
+		}}
+		args={{ label: 'Rounded', modifiers: 'rounded' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Full-bleed
+
+Let's define a story for our `full-bleed` button:
+
+<Canvas>
+	<Story
+		name="full-bleed"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--full-bleed'
+			})
+		}}
+		args={{ label: 'Full-bleed', modifiers: 'full-bleed' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Action
+
+Let's define a story for our `action` button:
+
+<Canvas>
+	<Story
+		name="action"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--action'
+			})
+		}}
+		args={{ label: 'Action', modifiers: 'action' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Action-quiet
+
+Let's define a story for our `action-quiet` button:
+
+<Canvas>
+	<Story
+		name="action-quiet"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--action-quiet'
+			})
+		}}
+		args={{ label: 'Action-quiet', modifiers: 'action-quiet' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Button/ButtonPressed.stories.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { testButton } from './Button.test'
+
+<Meta title="Components/Button/Props/pressed" />
+
+## Action Pressed
+
+Let's define a story for our `action` `pressed` button.
+
+<Canvas>
+	<Story
+		name="pressed"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--pressed'
+			})
+		}}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Action Pressed" modifiers="action" pressed />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={'<vv-button label="Action" modifiers="action" pressed />'}
+/>

package/src/stories/Button/ButtonSlots.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
 import { within, userEvent } from '@storybook/testing-library'
 
 <Meta title="Components/Button/Slots" />

package/src/stories/ButtonGroup/ButtonGroup.stories.mdx

@@ -1,14 +1,13 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { VvButtonGroupProps } from '../../components/VvButtonGroup/VvButtonGroup'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { VvButtonGroupProps } from '@/components/VvButtonGroup'
 
 <Meta
 	title="Components/ButtonGroup"
 	component={VvButtonGroup}
-	args={{ ...ObjectUtilities.propsToObject(VvButtonGroupProps) }}
+	args={{ ...propsToObject(VvButtonGroupProps) }}
 />
 
 export const Template = (args, { argTypes }) => ({

package/src/stories/ButtonGroup/{ButtonGroupTest.js → ButtonGroup.test.js}

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
+import { expect } from '@/test/expect'
+import { within } from '@storybook/testing-library'
 
 async function buttonGroupTest({ canvasElement, functions, ...args }) {
 	const buttonGroup = await within(canvasElement).findByRole('group')
@@ -10,9 +9,7 @@ async function buttonGroupTest({ canvasElement, functions, ...args }) {
 			await func({ buttonGroup, ...args })
 		})
 	}
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(buttonGroup)).toHaveNoViolations()
+	await expect(buttonGroup).toHaveNoViolations()
 }
 
 async function mixClassTest({
@@ -20,38 +17,19 @@ async function mixClassTest({
 	numberOfElements = null,
 	classToTest = null
 }) {
-	let roundedButtons = 0
+	let conunter = 0
 	const buttons = buttonGroup.children
 
 	for (const button of buttons) {
 		const buttonClassList = [...button.classList]
 
 		if (buttonClassList.includes(`vv-button--${classToTest}`)) {
-			roundedButtons++
+			conunter++
 		}
 	}
-	expect(roundedButtons).toBe(numberOfElements)
+	expect(conunter).toBe(numberOfElements)
 }
 
-expect.extend({
-	async toBeClicked(buttonGroup) {
-		let result = {
-			pass: false,
-			message: `Click event doesn't work`
-		}
-		buttonGroup.addEventListener('click', ({ target }) => {
-			if (target.id == 'btn2') {
-				result = {
-					pass: true,
-					message: `Click event work!`
-				}
-			}
-		})
-		await userEvent.click(buttonGroup.children[1])
-		return result
-	}
-})
-
 async function classTest({ buttonGroup, className = null }) {
 	if (className) {
 		expect(buttonGroup).toHaveClass(`vv-button-group--${className}`)

package/src/stories/ButtonGroup/ButtonGroupAction.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, classTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props/action" component={VvButtonGroup} />
 
@@ -25,7 +24,7 @@ A VvButtonGroup with the `action` prop
 				components: { VvButton, VvButtonGroup },
 				template: `
 					<div class="flex flex-col">
-						<vv-button-group action class="mt-22">
+						<vv-button-group modifiers="action" class="mt-22">
                             <vv-button>Button 1</vv-button>
                             <vv-button id="btn2">Button 2</vv-button>
                             <vv-button>Button 3</vv-button>
@@ -60,7 +59,7 @@ A VvButtonGroup with the `action`, `toggle` and `compact` props
 				},
 				template: `
 					<div class="flex">
-						<vv-button-group v-model:modelValue="modelValue" action toggle compact class="mt-22">
+						<vv-button-group v-model="modelValue" :modifiers="['action', 'toggle', 'compact']" class="mt-22">
                             <vv-button name="first" icon="akar-icons:copy" label="First" />
                             <vv-button name="second" icon="akar-icons:pencil" label="Second" />
                             <vv-button name="third" icon="akar-icons:trash-bin" label="Third" />
@@ -75,7 +74,7 @@ A VvButtonGroup with the `action`, `toggle` and `compact` props
 
 <Source
 	language="html"
-	code={`<vv-button-group v-model:modelValue="modelValue" action toggle compact>
+	code={`<vv-button-group v-model="modelValue" action toggle compact>
 	<vv-button name="first" icon="akar-icons:copy" label="First" />
 	<vv-button name="second" icon="akar-icons:pencil" label="Second" />
 	<vv-button name="third" icon="akar-icons:trash-bin" label="Third" />

package/src/stories/ButtonGroup/ButtonGroupActionQuiet.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, classTest } from './ButtonGroup.test'
 
 <Meta
 	title="Components/ButtonGroup/Props/action-quiet"
@@ -28,7 +27,7 @@ A VvButtonGroup with the `action-quiet` prop
 				components: { VvButton, VvButtonGroup },
 				template: `
 					<div class="flex flex-col">
-						<vv-button-group action-quiet>
+						<vv-button-group modifiers="action-quiet">
                             <vv-button>Button 1</vv-button>
                             <vv-button>Button 2</vv-button>
                             <vv-button>Button 3</vv-button>
@@ -42,7 +41,7 @@ A VvButtonGroup with the `action-quiet` prop
 
 <Source
 	language="html"
-	code={`<vv-button-group action-quiet>
+	code={`<vv-button-group modifiers="action-quiet">
 	<vv-button>Button 1</vv-button>
 	<vv-button>Button 2</vv-button>
 	<vv-button>Button 3</vv-button>

package/src/stories/ButtonGroup/ButtonGroupBlock.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, classTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props" component={VvButtonGroup} />
 
@@ -27,7 +26,7 @@ A VvButtonGroup with the <strong>block</strong> prop will be render with <strong
 				components: { VvButton, VvButtonGroup },
 				template: `
 					<div class="flex flex-col">
-						<vv-button-group block class="mt-22">
+						<vv-button-group modifiers="block" class="mt-22">
                             <vv-button>Button 1</vv-button>
                             <vv-button id="btn2">Button 2</vv-button>
                             <vv-button>Button 3</vv-button>

package/src/stories/ButtonGroup/ButtonGroupCompact.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, classTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props/compact" component={VvButtonGroup} />
 

package/src/stories/ButtonGroup/ButtonGroupRounded.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, classTest, mixClassTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, classTest, mixClassTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props/rounded" component={VvButtonGroup} />
 
@@ -26,7 +25,7 @@ A VvButtonGroup with the <strong>rounded</strong> prop will be render with <stro
 			return {
 				components: { VvButton, VvButtonGroup },
 				template: `
-                        <vv-button-group rounded>
+                        <vv-button-group modifiers="rounded">
                             <vv-button>Button 1</vv-button>
                             <vv-button id="btn2">Button 2</vv-button>
                             <vv-button>Button 3</vv-button>

package/src/stories/ButtonGroup/ButtonGroupToggle.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, mixClassTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, mixClassTest, classTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props/toggle" component={VvButtonGroup} />
 
@@ -26,7 +25,7 @@ Force VvButtonGroup to work as toggle button. Keep last clicked button as active
 				...ctx,
 				functions: [classTest, mixClassTest],
 				className: 'compact',
-				classToTest: 'active',
+				classToTest: 'pressed',
 				numberOfElements: 1
 			})
 		}>
@@ -39,7 +38,7 @@ Force VvButtonGroup to work as toggle button. Keep last clicked button as active
 						args
 					}
 				},
-				data: () => ({ selected: null }),
+				data: () => ({ selected: '1a' }),
 				template: `
 					<div class="flex flex-row justify-between">
                         <vv-button-group toggle compact @update:modelValue="selected = $event" :modelValue="selected">
@@ -47,7 +46,7 @@ Force VvButtonGroup to work as toggle button. Keep last clicked button as active
                             <vv-button name="2b">Button 2</vv-button>
                             <vv-button name="3c">Button 3</vv-button>
                         </vv-button-group>
-						<strong v-if="selected">Bottone selez: {{selected}}</strong> 
+						<strong v-if="selected">Selected: {{selected}}</strong> 
 					</div>
                     `
 			}
@@ -80,7 +79,7 @@ If VvButton child element has't a name attribute, when VvButton is registered in
 								<vv-button name="2b">Button 2</vv-button>
 								<vv-button name="3c">Button 3</vv-button>
 							</vv-button-group>
-							<strong v-if="selected">Bottone selez: {{selected}}</strong> 
+							<strong v-if="selected">Selected: {{selected}}</strong> 
 						</div>
 						<div class="flex flex-row justify-between mt-22">
 							<vv-button-group toggle compact v-bind="args" @update:modelValue="selected2 = $event" :model-value="selected2">
@@ -88,7 +87,7 @@ If VvButton child element has't a name attribute, when VvButton is registered in
 								<vv-button name="2b">Button 2</vv-button>
 								<vv-button name="3c">Button 3</vv-button>
 							</vv-button-group>
-							<strong v-if="selected2">Bottone selez: {{selected2}}</strong> 
+							<strong v-if="selected2">Selected: {{selected2}}</strong> 
 						</div>
                     `
 			}
@@ -113,15 +112,15 @@ If VvButton child element has't a name attribute, when VvButton is registered in
 				template: `
 					<div class="flex flex-col">
 						<div class="flex flex-row justify-between">
-							<vv-button-group toggle compact v-bind="args" @update:modelValue="selected = $event" :model-value="selected">
+							<vv-button-group toggle compact v-bind="args" v-model="selected">
 								<vv-button name="1">Button 1</vv-button>
 								<vv-button name="2" v-if="hide2b">Button 2</vv-button>
 								<vv-button name="3">Button 3</vv-button>
 							</vv-button-group>
-							<strong v-if="selected">Bottone selez: {{selected}}</strong> 
+							<strong v-if="selected">Selected: {{selected}}</strong> 
 						</div>
 						<button class="vv-button vv-button--secondary mt-22" @click="hide2b = !hide2b"> 
-							<label> {{hide2b?'Nascondi 2':'Mostra 2'}}</label>
+							<label> {{ hide2b ? 'Hide 2' : 'Show 2' }}</label>
 						</button>
 					</div>
                     `

package/src/stories/ButtonGroup/ButtonGroupVertical.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, classTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props" component={VvButtonGroup} />
 

package/src/stories/Card/Card.stories.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvCard from '../../components/VvCard/VvCard.vue'
+import VvCard from '@/components/VvCard/VvCard.vue'
+import { defaultCardTest } from './Card.test'
 
 <Meta title="Components/Card" component={VvCard} />
 
@@ -12,12 +12,14 @@ export const Template = (args, { argTypes }) => ({
 		return { args }
 	},
 	template: `
-        <vv-card v-bind="args">
-            Default
+        <vv-card v-bind="args" title="Card Title">
+            <template #content>Lorem ipsum dolor sit amet</template>
         </vv-card>
         `
 })
 
 <Canvas>
-	<Story name="vv-card">{Template.bind({})}</Story>
+	<Story name="vv-card" play={defaultCardTest}>
+		{Template.bind({})}
+	</Story>
 </Canvas>

package/src/stories/Card/Card.test.ts

@@ -0,0 +1,26 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+
+export async function defaultCardTest(data: PlayAttributes) {
+	const card = document.getElementsByClassName('vv-card')[0] as HTMLElement
+	data.args.variant && expect(card.outerHTML).toContain('variant="glass"')
+	card.children.length == 0 && expect(card.innerText).toBe('Default')
+	await expect(card).toHaveNoViolations()
+}
+
+export async function cardSlotsTest(data: PlayAttributes) {
+	const card = document.getElementsByClassName('vv-card')[0] as HTMLElement
+	const tags = ['header', 'picture', 'content', 'footer']
+	const cardItems = card.children
+	Array.from(cardItems).forEach((item, index) => {
+		index != 3
+			? expect(item.children[0] || item).toHaveClass(
+					`vv-card__${tags[index]}`
+			  )
+			: expect(item).toHaveClass(`vv-card__${tags[index]}`)
+		index != 2
+			? expect(item.nodeName).toEqual(tags[index].toUpperCase())
+			: expect(item.nodeName).toEqual('DIV')
+	})
+	await defaultCardTest(data)
+}

package/src/stories/Card/CardSlots.stories.mdx

@@ -1,12 +1,12 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvCard from '../../components/VvCard/VvCard.vue'
+import VvCard from '@/components/VvCard/VvCard.vue'
+import { cardSlotsTest } from './Card.test'
 
 <Meta title="Components/Card/Slots" component={VvCard} />
 
 <Canvas>
-	<Story name="Slots">
+	<Story name="Slots" play={cardSlotsTest}>
 		{(args) => {
 			return {
 				components: { VvCard },
@@ -24,12 +24,12 @@ import VvCard from '../../components/VvCard/VvCard.vue'
 							<img class="vv-card__picture aspect-photo" src="https://source.unsplash.com/featured/300×300/?ocean" alt="Card picture" style="height: 150px"/>
 						</picture>
 						<template #content>
-							Prova
+							Lorem ipsum dolor sit amet.
 						</template>
 						<template #footer>
 							<div class="flex items-center">
 								<span>Lorem ipsum dolor</span>
-								<button class="vv-button vv-button--action-quiet ml-auto" type="button">
+								<button class="vv-button vv-button--action-quiet ml-auto" type="button" aria-label="Add to favorites">
 									<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--akar-icons" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="akar-icons:heart"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3C4.239 3 2 5.216 2 7.95c0 2.207.875 7.445 9.488 12.74a.985.985 0 0 0 1.024 0C21.125 15.395 22 10.157 22 7.95C22 5.216 19.761 3 17 3s-5 3-5 3s-2.239-3-5-3Z"></path></svg>
 								</button>
 							</div>