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

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

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBadge from '../../components/VvBadge/VvBadge.vue'
-import VvButton from '../../components/VvButton/VvButton.vue'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { badgeTest } from './Badge.test'
 
 <Meta title="Components/Badge/Props/modifiers" />
 
@@ -9,7 +10,7 @@ import VvButton from '../../components/VvButton/VvButton.vue'
 Let's define a story for our `rounded` badge.
 
 <Canvas>
-	<Story name="rounded">
+	<Story name="rounded" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge, VvButton },
@@ -24,7 +25,7 @@ Let's define a story for our `rounded` badge.
 Let's define a story for our `outline` badge.
 
 <Canvas>
-	<Story name="outline">
+	<Story name="outline" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge, VvButton },
@@ -39,7 +40,7 @@ Let's define a story for our `outline` badge.
 Let's define a story for our `ghost` badge.
 
 <Canvas>
-	<Story name="ghost">
+	<Story name="ghost" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge, VvButton },
@@ -54,7 +55,7 @@ Let's define a story for our `ghost` badge.
 Let's define a story for our `sm` badge.
 
 <Canvas>
-	<Story name="sm">
+	<Story name="sm" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge, VvButton },

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

@@ -1,18 +1,19 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvBreadcrumb from '../../components/VvBreadcrumb/VvBreadcrumb.vue'
-import { VvBreadcrumbProps } from '../../components/VvBreadcrumb/VvBreadcrumb'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
+import { breadcrumbTest } from './Breadcrumb.test'
 
 <Meta
 	title="Components/Breadcrumb"
 	component={VvBreadcrumb}
 	args={{
-		...ObjectUtilities.propsToObject(VvBreadcrumbProps),
+		...propsToObject(VvBreadcrumbProps),
 		routes: [
 			{
 				label: 'Home',
 				title: 'Home',
-				href: '/'
+				href: '/home'
 			},
 			{
 				label: 'Library',
@@ -32,7 +33,9 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-breadcrumb v-bind="args" />`
+	template: `<div class="bg-surface p-lg">
+			     <vv-breadcrumb v-bind="args" />
+			   </div>`
 })
 
 # VvBreadcrumb
@@ -41,5 +44,10 @@ Stories of `VvBreadcrumb`.
 Let's define a story for our playground `breadcrumb`:
 
 <Canvas>
-	<Story name="vv-breadcrumb" args={{}} render={Template.bind()} />
+	<Story
+		name="vv-breadcrumb"
+		play={breadcrumbTest}
+		args={{}}
+		render={Template.bind()}
+	/>
 </Canvas>

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

@@ -0,0 +1,49 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { expect } from '@/test/expect'
+
+export async function breadcrumbTest(
+	data: PlayAttributes = {} as PlayAttributes,
+	{ className = null }: ComponentConfig = {}
+) {
+	const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
+
+	// breadcrumb component class test
+	expect(breadcrumb).toHaveClass('vv-breadcrumb')
+	className && expect(breadcrumb).toHaveClass(className)
+
+	// test every breadcrumb item
+	const navLinks = breadcrumb.children[0].children
+	Array.from(navLinks).forEach((linkContainer, index) => {
+		const link = linkContainer.children[0] as HTMLLinkElement
+		const propRoutes = data.args.routes[index]
+
+		// label and title test
+		expect(link.innerText).toEqual(propRoutes.label)
+		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')
+
+			// click test
+			link.addEventListener('click', linkClick)
+			expect(link).toBeClicked()
+
+			// tag type test
+			expect(link.nodeName).toEqual('A')
+
+			// route test
+			expect(link.href).toContain(propRoutes.href)
+		} else {
+			expect(linkContainer).toHaveClass('vv-breadcrumb__item-active')
+			expect(link.nodeName).toBe('SPAN')
+		}
+	})
+	expect(breadcrumb).toHaveNoViolations()
+}
+
+function linkClick(event: Event) {
+	event.preventDefault()
+}

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

@@ -1,25 +1,26 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvBreadcrumb from '../../components/VvBreadcrumb/VvBreadcrumb.vue'
-import { VvBreadcrumbProps } from '../../components/VvBreadcrumb/VvBreadcrumb'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
 import { Template } from './Breadcrumb.stories.mdx'
+import { breadcrumbTest } from './Breadcrumb.test'
 
 <Meta
 	title="Components/Breadcrumb/Props/multiline"
 	component={VvBreadcrumb}
 	args={{
-		...ObjectUtilities.propsToObject(VvBreadcrumbProps),
+		...propsToObject(VvBreadcrumbProps),
 		multiline: true,
 		routes: [
 			{
 				label: 'Home',
 				title: 'Home',
-				to: '/'
+				href: '/'
 			},
 			{
 				label: 'Library',
 				title: 'Library',
-				to: '/library'
+				href: '/library'
 			},
 			{
 				label: 'Book 1',
@@ -35,7 +36,14 @@ Stories of `VvBreadcrumb`.
 Let's define a story for our `multiline` `breadcrumb`:
 
 <Canvas>
-	<Story name="multiline" args={{}}>
+	<Story
+		name="multiline"
+		play={(ctx) => {
+			breadcrumbTest(ctx, {
+				className: 'vv-breadcrumb--multiline'
+			})
+		}}
+		args={{}}>
 		{Template.bind()}
 	</Story>
 </Canvas>

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

@@ -1,17 +1,16 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
 import { within, userEvent } from '@storybook/testing-library'
-import { axe, toHaveNoViolations } from 'jest-axe'
-import { expect } from '@storybook/jest'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { VvButtonProps } from '../../components/VvButton/VvButton'
+import { expect } from '@/test/expect'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { VvButtonProps } from '@/components/VvButton'
 import { testButton } from './Button.test'
 
 <Meta
 	title="Components/Button"
 	component={VvButton}
 	args={{
-		...ObjectUtilities.propsToObject(VvButtonProps),
+		...propsToObject(VvButtonProps),
 		target: undefined,
 		to: undefined,
 		href: undefined,
@@ -20,18 +19,18 @@ import { testButton } from './Button.test'
 	argTypes={{
 		onClick: { action: 'clicked' },
 		modifiers: {
+			options: [
+				null,
+				'primary',
+				'secondary',
+				'danger',
+				'ghost',
+				'text',
+				'static-light',
+				'static-dark'
+			],
 			control: {
-				type: 'select',
-				options: [
-					null,
-					'primary',
-					'secondary',
-					'danger',
-					'ghost',
-					'text',
-					'static-light',
-					'static-dark'
-				]
+				type: 'select'
 			}
 		},
 		label: {

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

@@ -1,15 +1,10 @@
-import type { PlayAttributes } from '@/test/types'
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
 import { within } from '@storybook/testing-library'
 import { expect } from '@/test/expect'
 
-interface ButtonConfig {
-	isClickDisabled?: boolean
-	className?: string | string[] | null
-}
-
 export async function testButton(
 	{ canvasElement }: PlayAttributes = {} as PlayAttributes,
-	{ isClickDisabled = false, className = null }: ButtonConfig = {}
+	{ isClickDisabled = false, className = null }: ComponentConfig = {}
 ) {
 	const button = await within(canvasElement).findByRole('button')
 	if (isClickDisabled) {
@@ -21,7 +16,7 @@ export async function testButton(
 	if (className) {
 		expect(button).toHaveClass(className)
 	}
-	await expect(button).toHaveNoViolations()
+	expect(button).toHaveNoViolations()
 }
 
 export async function testButtonWithBadge(playAttributes: PlayAttributes) {
@@ -49,13 +44,14 @@ export async function testButtonWithIconOnly(playAttributes: PlayAttributes) {
 
 export async function testButtonLink(
 	playAttributes: PlayAttributes,
-	{ isClickDisabled = false, className = null }: ButtonConfig = {}
+	{ isClickDisabled = false, className = null }: ComponentConfig = {}
 ) {
 	const button = await within(playAttributes.canvasElement).findByRole(
 		'button'
 	)
 	await testButton(playAttributes, { isClickDisabled, className })
-	expect(button).toHaveProperty('href')
-	expect(button).toHaveProperty('target')
-	await testButton(playAttributes)
+	if (!isClickDisabled) {
+		expect(button).toHaveProperty('href')
+		expect(button).toHaveProperty('target')
+	}
 }

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

@@ -1,5 +1,6 @@
 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'
 
 <Meta title="Components/Button/Props/active" />
 

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

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvBadge from '../../components/VvBadge/VvBadge.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
 import { testButtonWithBadge } from './Button.test'
 
 <Meta title="Components/Button/badge" />

package/src/stories/Button/ButtonDisabled.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 { testButton } from './Button.test'
 
 <Meta title="Components/Button/Props/disabled" />

package/src/stories/Button/ButtonIcon.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 { testButtonWithIconLeft, testButtonWithIconOnly } from './Button.test'
 
 <Meta title="Components/Button/Props/icon" />
@@ -34,10 +34,13 @@ Let's define a story for our `icon` only button.
 		{() => {
 			return {
 				components: { VvButton },
-				template: `<vv-button icon="heart" rounded />`
+				template: `<vv-button icon="heart" aria-label="Add to favorites" rounded />`
 			}
 		}}
 	</Story>
 </Canvas>
 
-<Source language="jsx" code={'<vv-button icon="heart" rounded />'} />
+<Source
+	language="jsx"
+	code={'<vv-button icon="heart" aria-label="Add to favorites" rounded />'}
+/>

package/src/stories/Button/ButtonIconPosition.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'
 import { testButton } from './Button.test'
 

package/src/stories/Button/ButtonLink.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 { testButtonLink } from './Button.test'
 
 <Meta title="Components/Button/Link" />
@@ -105,21 +105,3 @@ Stories of `VvButton` with `link`.
 	language="jsx"
 	code={`<vv-button label="Button link" href="https://google.it" target="_blank" disabled />`}
 />
-
-## Router-link
-
-export const Template = () => ({
-	components: { VvButton },
-	template: `<vv-button label="Router link" to="/test" variant="text" />`
-})
-
-<Canvas>
-	<Story name="router-link" args={{}} play={(ctx) => testButtonLink(ctx)}>
-		{RouterLinkStory}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-button label="Router link" to="/" variant="text" />`}
-/>

package/src/stories/Button/ButtonLoading.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 { testButton } from './Button.test'
 
 <Meta title="Components/Button/Props/loading" />
@@ -17,7 +17,7 @@ Let's define a story for our `loading` button.
 		name="loading"
 		play={async (ctx) => {
 			testButton(ctx, {
-				isClickDisabled: true
+				isClickDisabled: false
 			})
 		}}>
 		{() => {
@@ -40,7 +40,7 @@ Let's define a story for `loading-icon`
 		name="loading-icon"
 		play={async (ctx) => {
 			testButton(ctx, {
-				isClickDisabled: true
+				isClickDisabled: false
 			})
 		}}>
 		{() => {
@@ -63,7 +63,7 @@ Let's define a story for `loading-label`
 		name="loading-label"
 		play={async (ctx) => {
 			testButton(ctx, {
-				isClickDisabled: true
+				isClickDisabled: false
 			})
 		}}>
 		{() => {

package/src/stories/Button/ButtonModifiers.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 { testButton } from './Button.test'
 import { Template } from './Button.stories.mdx'
 

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} />
 
@@ -60,7 +59,7 @@ A VvButtonGroup with the `action`, `toggle` and `compact` props
 				},
 				template: `
 					<div class="flex">
-						<vv-button-group v-model:modelValue="modelValue" :modifiers="['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"

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

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