@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -21,10 +21,12 @@ export const Template = (args, { argTypes }) => ({
 			selected: null,
 		}
 	},
-	template: /*html*/`<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
-				<div class="mt-24">
-					Selected: <span data-testId="value">{{ selected }}</span>
-				</div>`,
+	template: /*html*/ `
+		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
+		<div class="mt-24">
+			Selected: <span data-testId="value">{{ selected }}</span>
+		</div>
+	`,
 })
 
 <Canvas>

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.mdx

@@ -29,8 +29,9 @@ import { defaultArgs, argTypes } from './AccordionGroup.settings'
 			},
 		}}
 	>
-		{(args) => {
+		{(args, { argTypes }) => {
 			return {
+				props: Object.keys(argTypes),
 				components: { VvAccordionGroup, VvAccordion },
 				setup() {
 					return { args }
@@ -42,14 +43,16 @@ import { defaultArgs, argTypes } from './AccordionGroup.settings'
 							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
 					}
 				},
-				template: /*html*/`<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
-							<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
-							<vv-accordion name="a-2" title="Details 2" :content="content" />
-							<vv-accordion name="a-3" title="Details 3" :content="content" />
-						</vv-accordion-group>
-						<div class="mt-24"  >
-							Selected: <span data-testId="value">{{ selected }}</span>
-						</div>`,
+				template: /*html*/ `
+					<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
+						<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
+						<vv-accordion name="a-2" title="Details 2" :content="content" />
+						<vv-accordion name="a-3" title="Details 3" :content="content" />
+					</vv-accordion-group>
+					<div class="mt-24"  >
+						Selected: <span data-testId="value">{{ selected }}</span>
+					</div>
+				`,
 			}
 		}}
 	</Story>

package/src/stories/Badge/Badge.stories.mdx

@@ -16,9 +16,10 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`<vv-badge v-bind="args">
-			   		<template #default v-if="args.default"><span v-html="args.default"></span></template>	
-			   </vv-badge>`,
+	template: /*html*/ `
+		<vv-badge v-bind="args">
+			<template #default v-if="args.default"><span v-html="args.default"></span></template>	
+		</vv-badge>`,
 })
 
 <Canvas>

package/src/stories/Breadcrumb/Breadcrumb.stories.mdx

@@ -10,14 +10,16 @@ import { defaultArgs, argTypes } from './Breadcrumb.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvBreadcrumb },
 	setup() {
 		return { args }
 	},
-	template: /*html*/`<div class="bg-surface p-lg">
-			     <vv-breadcrumb v-bind="args" />
-			   </div>`,
+	template: /*html*/ `
+		<div class="bg-surface p-lg">
+			<vv-breadcrumb v-bind="args" />
+		</div>`,
 })
 
 <Canvas>

package/src/stories/Breadcrumb/Breadcrumb.test.ts

@@ -12,39 +12,41 @@ export async function defaultTest(
 	const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
 
 	// breadcrumb component class test
-	expect(breadcrumb).toHaveClass('vv-breadcrumb')
+	await expect(breadcrumb).toHaveClass('vv-breadcrumb')
 
 	// test every breadcrumb item
 	const navLinks = breadcrumb.children[0].children
-	Array.from(navLinks).forEach((linkContainer, index) => {
+	Array.from(navLinks).forEach(async (linkContainer, index) => {
 		const link = linkContainer.children[0] as HTMLLinkElement
 		const propRoutes = data.args.routes[index]
 
 		// label and title test
 		if (!customSlot) {
-			expect(link.innerText).toEqual(propRoutes.label)
+			await expect(link.innerText).toEqual(propRoutes.label)
 		}
-		expect(link.title).toEqual(propRoutes.title)
+		await expect(link.title).toEqual(propRoutes.title)
 
 		const isNotLastItem = index < navLinks.length - 1
 		if (isNotLastItem) {
 			// link class test
-			expect(linkContainer).toHaveClass('vv-breadcrumb__item')
-			expect(link).toHaveClass('vv-breadcrumb__link')
+			await expect(linkContainer).toHaveClass('vv-breadcrumb__item')
+			await expect(link).toHaveClass('vv-breadcrumb__link')
 
 			// click test
 			link.addEventListener('click', linkClick)
-			expect(link).toBeClicked()
+			await expect(link).toBeClicked()
 
 			// tag type test
-			expect(link.nodeName).toEqual('A')
+			await expect(link.nodeName).toEqual('A')
 
 			// route test
-			expect(link.href).toContain(propRoutes.href)
+			await expect(link.href).toContain(propRoutes.href)
 		} else {
-			expect(linkContainer).toHaveClass('vv-breadcrumb__item-active')
-			expect(link.nodeName).toBe('SPAN')
+			await expect(linkContainer).toHaveClass(
+				'vv-breadcrumb__item-active',
+			)
+			await expect(link.nodeName).toBe('SPAN')
 		}
 	})
-	expect(breadcrumb).toHaveNoViolations()
+	await expect(breadcrumb).toHaveNoViolations()
 }

package/src/stories/Breadcrumb/BreadcrumbSlots.stories.mdx

@@ -29,14 +29,14 @@ import { defaultArgs, argTypes } from './Breadcrumb.settings'
 					return { args }
 				},
 				components: { VvBreadcrumb, VvIcon },
-				template: /*html*/`
-                <VvBreadcrumb v-bind="args">
-                    <template #label="{route, index}">
-                        <VvIcon v-if="index === 0" name="home" :aria-label="route.label"  />
-                        <template v-else>{{ route.label }}</template>
-                    </template>
-                </VvBreadcrumb>
-            `,
+				template: /*html*/ `
+					<VvBreadcrumb v-bind="args">
+						<template #label="{route, index}">
+							<VvIcon v-if="index === 0" name="home" :aria-label="route.label"  />
+							<template v-else>{{ route.label }}</template>
+						</template>
+					</VvBreadcrumb>
+            	`,
 			}
 		}}
 	</Story>

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

@@ -10,20 +10,22 @@ import { argTypes, defaultArgs } from './Button.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
-	components: { VvButton },
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	data() {
 		return { value: undefined }
 	},
 	setup() {
 		return { args }
 	},
-	template: /*html*/`<vv-button v-bind="args" v-model="value" name="my-button">
-					<template #before v-if="args.before"><div v-html="args.before"></div></template>
-					<template #default v-if="args.default"><div v-html="args.default"></div></template>
-					<template #after v-if="args.after"><div v-html="args.after"></div></template>
-			   </vv-button>
-			   <div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>`,
+	components: { VvButton },
+	template: /*html*/ `
+		<vv-button v-bind="args" v-model="value" name="my-button" data-testId="element">
+			<template #before v-if="args.before"><div v-html="args.before"></div></template>
+			<template #default v-if="args.default"><div v-html="args.default"></div></template>
+			<template #after v-if="args.after"><div v-html="args.after"></div></template>
+		</vv-button>
+		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>`,
 })
 
 <Canvas>

package/src/stories/Button/Button.test.ts

@@ -5,24 +5,26 @@ import { expect } from '@/test/expect'
 export async function defaultTest(
 	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const element = await within(canvasElement).findByRole('button')
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
 
 	const modifiers =
 		!args.modifiers || Array.isArray(args.modifiers)
 			? args.modifiers
 			: [args.modifiers]
 
-	expect(element).toHaveClass('vv-button')
+	await expect(element).toHaveClass('vv-button')
 
 	// icon
 	if (args.icon) {
-		expect(element.innerHTML).toContain('vv-icon')
+		await expect(element.innerHTML).toContain('vv-icon')
 	}
 
 	// modifiers
 	if (modifiers) {
 		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-button--${modifier}`)
+			await expect(element).toHaveClass(`vv-button--${modifier}`)
 		}
 	}
 
@@ -34,13 +36,13 @@ export async function defaultTest(
 
 		// link
 		if (args.href) {
-			expect(element).toHaveProperty('href')
+			await expect(element).toHaveProperty('href')
 		}
 		if (args.target) {
-			expect(element).toHaveProperty('target')
+			await expect(element).toHaveProperty('target')
 		}
 	}
 
 	// accessibility
-	expect(element).toHaveNoViolations()
+	await expect(element).toHaveNoViolations()
 }

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

@@ -123,9 +123,9 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: /*html*/`
+				template: /*html*/ `
 				<div class="bg-black p-md">
-					<vv-button v-bind="args" />
+					<vv-button v-bind="args" data-testId="element" />
 				</div>
 				`,
 			}
@@ -156,9 +156,9 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: /*html*/`
+				template: /*html*/ `
 				<div class="bg-white p-md">
-					<vv-button v-bind="args" />
+					<vv-button v-bind="args" data-testId="element" />
 				</div>
 				`,
 			}

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

@@ -46,11 +46,12 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				components: { VvButton, VvBadge },
-				template: /*html*/`<vv-button v-bind="args">
-							<template #before>
-								<vv-badge value="12" modifiers="danger" />
-							</template>
-						</vv-button>`,
+				template: /*html*/ `
+					<vv-button v-bind="args" data-testId="element">
+						<template #before>
+							<vv-badge value="12" modifiers="danger" />
+						</template>
+					</vv-button>`,
 			}
 		}}
 	</Story>
@@ -77,11 +78,13 @@ import { argTypes, defaultArgs } from './Button.settings'
 					return { args }
 				},
 				components: { VvButton, VvBadge },
-				template: /*html*/`<vv-button v-bind="args">
-							<template #after>
-								<vv-badge value="12" modifiers="danger" />
-							</template>
-						</vv-button>`,
+				template: /*html*/ `
+					<vv-button v-bind="args" data-testId="element">
+						<template #after>
+							<vv-badge value="12" modifiers="danger" />
+						</template>
+					</vv-button>
+				`,
 			}
 		}}
 	</Story>
@@ -100,11 +103,13 @@ import { argTypes, defaultArgs } from './Button.settings'
 				setup() {
 					return { args }
 				},
-				template: /*html*/`<vv-button v-bind="args">
-							<template #label>
-								Label <em class="italic">slot!</em>
-							</template>
-						</vv-button>`,
+				template: /*html*/ `
+					<vv-button v-bind="args" data-testId="element">
+						<template #label>
+							Label <em class="italic">slot!</em>
+						</template>
+					</vv-button>
+				`,
 			}
 		}}
 	</Story>

package/src/stories/Button/ButtonState.stories.mdx

@@ -19,11 +19,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				},
 			},
 		}}
-		play={async (ctx) => {
-			defaultTest(ctx, {
-				className: 'vv-button--active',
-			})
-		}}
+		play={defaultTest}
 	>
 		{Template.bind()}
 	</Story>
@@ -35,7 +31,6 @@ import { argTypes, defaultArgs } from './Button.settings'
 		args={{
 			pressed: true,
 			label: 'Pressed button',
-			modifiers: 'action-quiet',
 		}}
 		argTypes={{
 			pressed: {
@@ -44,11 +39,7 @@ import { argTypes, defaultArgs } from './Button.settings'
 				},
 			},
 		}}
-		play={async (ctx) => {
-			defaultTest(ctx, {
-				className: 'vv-button--pressed',
-			})
-		}}
+		play={defaultTest}
 	>
 		{Template.bind()}
 	</Story>

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

@@ -20,14 +20,14 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`
+	template: /*html*/ `
         <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
             <vv-button name="1a" data-testId="first-button">Button 1</vv-button>
             <vv-button name="2b">Button 2</vv-button>
             <vv-button name="3c">Button 3</vv-button>
         </vv-button-group>
 		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
-        `,
+    `,
 })
 
 <Canvas>

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

@@ -20,14 +20,14 @@ export const Template = (args, { argTypes }) => ({
 	setup() {
 		return { args }
 	},
-	template: /*html*/`
+	template: /*html*/ `
         <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
             <vv-button modifiers="primary" name="1a" data-testId="first-button">Button 1</vv-button>
             <vv-button modifiers="secondary" name="2b">Button 2</vv-button>
             <vv-button modifiers="danger" name="3c">Button 3</vv-button>
         </vv-button-group>
 		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
-        `,
+    `,
 })
 
 <Canvas>

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

@@ -10,19 +10,20 @@ import { defaultArgs, argTypes } from './Card.settings'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCard },
 	setup() {
 		return { args }
 	},
-	template: /*html*/`
+	template: /*html*/ `
         <vv-card v-bind="args" data-testId="card">
 			<template #default v-if="args.default"><div v-html="args.default"></div></template>
 			<template #header v-if="args.header"><div v-html="args.header"></div></template>
 			<template #content v-if="args.content"><div v-html="args.content"></div></template>
 			<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
         </vv-card>
-        `,
+    `,
 })
 
 <Canvas>

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

@@ -14,7 +14,7 @@ export async function defaulTest({ canvasElement, args }: PlayAttributes) {
 	// check modifiers
 	if (modifiers) {
 		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-card--${modifier}`)
+			await expect(element).toHaveClass(`vv-card--${modifier}`)
 		}
 	}
 

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

@@ -31,13 +31,13 @@ import { Template } from './Card.stories.mdx'
 						args,
 					}
 				},
-				template: /*html*/`
+				template: /*html*/ `
 					<vv-card v-bind="args" class="max-w-max" data-testId="card">
 						<picture>
 							<img class="aspect-photo h-300" src="https://unsplash.it/300" alt="Card picture"/>
 						</picture>
 					</vv-card>
-					`,
+				`,
 			}
 		}}
 	</Story>

package/src/stories/Checkbox/Checkbox.stories.mdx

@@ -10,19 +10,20 @@ import { defaultTest } from './Checkbox.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCheckbox },
 	setup() {
 		return { args }
 	},
 	data: () => ({ inputValue: args.uncheckedValue }),
-	template: /*html*/`
-			<vv-checkbox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-				<template #default v-if="args.default"><span v-html="args.default"></span></template>
-				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-			</vv-checkbox>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-        `,
+	template: /*html*/ `
+		<vv-checkbox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<template #default v-if="args.default"><span v-html="args.default"></span></template>
+			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+		</vv-checkbox>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+	`,
 })
 
 <Canvas>

package/src/stories/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -10,19 +10,20 @@ import { defaultTest } from './CheckboxGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCheckboxGroup },
 	setup() {
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: /*html*/`
-            <vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-                <template #default v-if="args.default"><span v-html="args.default"></span></template>
-				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-            </vv-checkbox-group>
-            <div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-        `,
+	template: /*html*/ `
+		<vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<template #default v-if="args.default"><span v-html="args.default"></span></template>
+			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+		</vv-checkbox-group>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+	`,
 })
 
 <Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupSlots.stories.mdx

@@ -11,21 +11,22 @@ import { defaultTest } from './CheckboxGroup.test'
 	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvCheckboxGroup, VvCheckbox },
 	setup() {
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: /*html*/`
-           <vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-				<vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
-				<vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
-				<vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
-				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-			</vv-checkbox-group>
-			<div>Value: <span data-testId="value">{{inputValue}}</span></div>
-        `,
+	template: /*html*/ `
+		<vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+			<vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+			<vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+		</vv-checkbox-group>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div>
+	`,
 })
 
 <Canvas>