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

package/src/stories/Badge/BadgeDot.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/dot" />
 
@@ -9,7 +10,7 @@ import VvButton from '../../components/VvButton/VvButton.vue'
 Without a value, the badge is a dot
 
 <Canvas>
-	<Story name="dot">
+	<Story name="dot" play={badgeTest}>
 		{() => {
 			return {
 				components: { VvBadge, VvButton },

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

@@ -0,0 +1,66 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+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" />
+
+# VvBadge rounded
+
+Let's define a story for our `rounded` badge.
+
+<Canvas>
+	<Story name="rounded" play={badgeTest}>
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="rounded" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+# VvBadge outline
+
+Let's define a story for our `outline` badge.
+
+<Canvas>
+	<Story name="outline" play={badgeTest}>
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="outline" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+# VvBadge ghost
+
+Let's define a story for our `ghost` badge.
+
+<Canvas>
+	<Story name="ghost" play={badgeTest}>
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="ghost" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+# VvBadge small
+
+Let's define a story for our `sm` badge.
+
+<Canvas>
+	<Story name="sm" play={badgeTest}>
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge modifiers="sm" value="99+" />`
+			}
+		}}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,28 @@
+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/active" />
+
+## Active
+
+Let's define a story for our `active` button.
+
+<Canvas>
+	<Story
+		name="active"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--active'
+			})
+		}}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Active" active />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Active" 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

@@ -0,0 +1,28 @@
+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/disabled" />
+
+## Disabled
+
+Let's define a story for our `disabled` button.
+
+<Canvas>
+	<Story
+		name="disabled"
+		play={async (ctx) => {
+			testButton(ctx, {
+				isClickDisabled: true
+			})
+		}}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Disabled" disabled />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Disabled" 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,7 +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 { within, userEvent } from '@storybook/testing-library'
-import { buttonTest, classTest } from './test.js'
 import { testButton } from './Button.test'
 
 <Meta title="Components/Button/Props/icon-position" />

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
 			})
 		}}>
 		{() => {