@volverjs/ui-vue 0.0.1-beta.2 → 0.0.1-beta.5

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

@@ -1,5 +1,4 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-// import vueRouter from 'storybook-vue3-router'
 import ObjectUtilities from '../../utils/ObjectUtilities'
 import VvBreadcrumb from '../../components/VvBreadcrumb/VvBreadcrumb.vue'
 import { VvBreadcrumbProps } from '../../components/VvBreadcrumb/VvBreadcrumb'

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

@@ -5,6 +5,7 @@ import { expect } from '@storybook/jest'
 import ObjectUtilities from '../../utils/ObjectUtilities'
 import VvButton from '../../components/VvButton/VvButton.vue'
 import { VvButtonProps } from '../../components/VvButton/VvButton'
+import { testButton } from './Button.test'
 
 <Meta
 	title="Components/Button"
@@ -61,13 +62,6 @@ export const Template = (args) => ({
 Stories of `VvButton`.
 Let's define a story for our playground `button`:
 
-<Story
-	name="vv-button"
-	args={{}}
-	play={async ({ args, canvasElement }) => {
-		const canvas = within(canvasElement)
-		await userEvent.click(canvas.getByRole('button'))
-		await expect.extend(toHaveNoViolations)
-	}}>
+<Story name="vv-button" args={{}} play={testButton}>
 	{Template.bind({})}
 </Story>

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

@@ -0,0 +1,57 @@
+import type { PlayAttributes } 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 = {}
+) {
+	const button = await within(canvasElement).findByRole('button')
+	if (isClickDisabled) {
+		await expect(button).not.toBeClicked()
+	} else {
+		await expect(button).toBeClicked()
+	}
+	expect(button).toHaveClass('vv-button')
+	if (className) {
+		expect(button).toHaveClass(className)
+	}
+	await expect(button).toHaveNoViolations()
+}
+
+export async function testButtonWithBadge({ canvasElement }: PlayAttributes) {
+	const button = await within(canvasElement).findByRole('button')
+	expect(button.innerHTML).toContain('vv-badge')
+	await testButton({ canvasElement })
+}
+
+export async function testButtonWithIconLeft({
+	canvasElement
+}: PlayAttributes) {
+	const button = await within(canvasElement).findByRole('button')
+	expect(button.innerHTML).toContain('vv-icon')
+	await testButton({ canvasElement })
+}
+export async function testButtonWithIconOnly({
+	canvasElement
+}: PlayAttributes) {
+	const button = await within(canvasElement).findByRole('button')
+	expect(button.classList).toContain('vv-button--icon-only')
+	await testButton({ canvasElement })
+}
+
+export async function testButtonLink(
+	{ canvasElement }: PlayAttributes,
+	{ isClickDisabled = false, className = null }: ButtonConfig = {}
+) {
+	const button = await within(canvasElement).findByRole('button')
+	await testButton({ canvasElement }, { isClickDisabled, className })
+	expect(button).toHaveProperty('href')
+	expect(button).toHaveProperty('target')
+	await testButton({ canvasElement })
+}

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

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvButton from '../../components/VvButton/VvButton.vue'
 import VvBadge from '../../components/VvBadge/VvBadge.vue'
+import { testButtonWithBadge } from './Button.test'
 
 <Meta title="Components/Button/badge" />
 
@@ -9,7 +10,7 @@ import VvBadge from '../../components/VvBadge/VvBadge.vue'
 Stories of `VvButton` with `badge`.
 
 <Canvas>
-	<Story name="badge">
+	<Story name="badge" play={testButtonWithBadge}>
 		{() => {
 			return {
 				components: { VvButton, VvBadge },

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

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvButton from '../../components/VvButton/VvButton.vue'
-import { buttonTest, classTest } from './test.js'
+import { testButtonWithIconLeft, testButtonWithIconOnly } from './Button.test'
 
 <Meta title="Components/Button/Props/icon" />
 
@@ -13,7 +13,7 @@ Stories of `VvButton` with `icon`.
 Let's define a story for our text `icon` button.
 
 <Canvas>
-	<Story name="icon-left" play={buttonTest}>
+	<Story name="icon-left" play={testButtonWithIconLeft}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -30,15 +30,7 @@ Let's define a story for our text `icon` button.
 Let's define a story for our `icon` only button.
 
 <Canvas>
-	<Story
-		name="icon-only"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'icon-only'
-			})
-		}>
+	<Story name="icon-only" play={testButtonWithIconOnly}>
 		{() => {
 			return {
 				components: { VvButton },

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

@@ -2,6 +2,7 @@ import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 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" />
 
@@ -14,7 +15,7 @@ Stories of `VvButton` with `icon`.
 Let's define a story for our text `icon` button.
 
 <Canvas>
-	<Story name="icon-left" play={buttonTest}>
+	<Story name="icon-left" play={testButton}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -33,13 +34,11 @@ Let's define a story for our right `icon` button.
 <Canvas>
 	<Story
 		name="icon-right"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'reverse'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--reverse'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -59,7 +58,13 @@ Let's define a story for our right `icon` button.
 Let's define a story for our top `icon` button.
 
 <Canvas>
-	<Story name="icon-top" play={buttonTest}>
+	<Story
+		name="icon-top"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--column'
+			})
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -81,13 +86,11 @@ Let's define a story for our bottom `icon` button.
 <Canvas>
 	<Story
 		name="icon-bottom"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'reverse'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: ['vv-button--column', 'vv-button--reverse']
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },

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

@@ -1,13 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvButton from '../../components/VvButton/VvButton.vue'
-// import vueRouter from 'storybook-vue3-router'
-import {
-	buttonTest,
-	disableTest,
-	cssTest,
-	propertyTest,
-	classTest
-} from './test.js'
+import { testButtonLink } from './Button.test'
 
 <Meta title="Components/Button/Link" />
 
@@ -20,12 +13,9 @@ Stories of `VvButton` with `link`.
 <Canvas>
 	<Story
 		name="link-text"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [propertyTest, classTest],
-				properties: ['target', 'href'],
-				className: 'text'
+		play={async (ctx) =>
+			testButtonLink(ctx, {
+				className: 'vv-button--text'
 			})
 		}>
 		{() => {
@@ -48,11 +38,9 @@ Stories of `VvButton` with `link`.
 	<Story
 		name="link-text-disabled"
 		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [disableTest, cssTest, classTest],
-				cssString: 'cursor: not-allowed',
-				className: 'text'
+			testButtonLink(ctx, {
+				isClickDisabled: true,
+				className: 'vv-button--disabled'
 			})
 		}>
 		{() => {
@@ -72,15 +60,7 @@ Stories of `VvButton` with `link`.
 ## Button link
 
 <Canvas>
-	<Story
-		name="button-link"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [propertyTest],
-				properties: ['target', 'href']
-			})
-		}>
+	<Story name="button-link" play={(ctx) => testButtonLink(ctx)}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -107,10 +87,9 @@ Stories of `VvButton` with `link`.
 	<Story
 		name="button-link-disabled"
 		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [disableTest, cssTest],
-				cssString: 'cursor: not-allowed'
+			testButtonLink(ctx, {
+				isClickDisabled: true,
+				className: 'vv-button--disabled'
 			})
 		}>
 		{() => {
@@ -135,18 +114,8 @@ export const Template = () => ({
 })
 
 <Canvas>
-	<Story
-		name="router-link"
-		args={{}}
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [propertyTest, classTest],
-				properties: ['href'],
-				className: 'text'
-			})
-		}>
-		{Template.bind()}
+	<Story name="router-link" args={{}} play={(ctx) => testButtonLink(ctx)}>
+		{RouterLinkStory}
 	</Story>
 </Canvas>
 

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

@@ -1,5 +1,6 @@
 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/loading" />
 
@@ -12,7 +13,13 @@ Stories of `VvButton` with `loading`.
 Let's define a story for our `loading` button.
 
 <Canvas>
-	<Story name="loading">
+	<Story
+		name="loading"
+		play={async (ctx) => {
+			testButton(ctx, {
+				isClickDisabled: true
+			})
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -29,7 +36,13 @@ Let's define a story for our `loading` button.
 Let's define a story for `loading-icon`
 
 <Canvas>
-	<Story name="loading-icon">
+	<Story
+		name="loading-icon"
+		play={async (ctx) => {
+			testButton(ctx, {
+				isClickDisabled: true
+			})
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -46,7 +59,13 @@ Let's define a story for `loading-icon`
 Let's define a story for `loading-label`
 
 <Canvas>
-	<Story name="loading-label">
+	<Story
+		name="loading-label"
+		play={async (ctx) => {
+			testButton(ctx, {
+				isClickDisabled: true
+			})
+		}}>
 		{() => {
 			return {
 				components: { VvButton },

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

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvButton from '../../components/VvButton/VvButton.vue'
-import { buttonTest, classTest } from './test.js'
+import { testButton } from './Button.test'
 
 <Meta title="Components/Button/Props/modifiers" />
 
@@ -13,7 +13,7 @@ Stories of `VvButton` `modifiers`.
 Let's define a story for our `default` button:
 
 <Canvas>
-	<Story name="default" play={buttonTest}>
+	<Story name="default" play={testButton}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -32,13 +32,11 @@ Let's define a story for our `primary` button:
 <Canvas>
 	<Story
 		name="primary"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'primary'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: ['vv-button--primary']
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -55,13 +53,11 @@ Let's define a story for our `secondary` button:
 <Canvas>
 	<Story
 		name="secondary"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'secondary'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--secondary'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -78,13 +74,11 @@ Let's define a story for our `danger` button:
 <Canvas>
 	<Story
 		name="danger"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'danger'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--danger'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -101,13 +95,11 @@ Let's define a story for our `ghost` button:
 <Canvas>
 	<Story
 		name="ghost"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'ghost'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--ghost'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -124,13 +116,11 @@ Let's define a story for our `text` button:
 <Canvas>
 	<Story
 		name="text"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'text'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--text'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -147,13 +137,11 @@ Let's define a story for our `static-light` button:
 <Canvas>
 	<Story
 		name="static-light"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'static-light'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--static-light'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -177,13 +165,11 @@ Let's define a story for our `static-dark` button:
 <Canvas>
 	<Story
 		name="static-dark"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'static-dark'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--static-dark'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },

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

@@ -1,7 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvButton from '../../components/VvButton/VvButton.vue'
-import { within, userEvent } from '@storybook/testing-library'
 import { buttonTest, classTest, cssTest, disableTest } from './test.js'
+import { testButton } from './Button.test'
 
 <Meta title="Components/Button/Variant" />
 
@@ -17,14 +17,11 @@ Create block level button that span the full width of a parent.
 <Canvas>
 	<Story
 		name="block"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest, cssTest],
-				className: 'block',
-				cssString: 'display: block'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: `vv-button--block`
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -43,14 +40,11 @@ Let's define a story for our `rounded` button:
 <Canvas>
 	<Story
 		name="rounded"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest, cssTest],
-				className: 'rounded',
-				cssString: 'border-radius: 9999px'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: `vv-button--rounded`
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -69,13 +63,11 @@ Let's define a story for our `full-bleed` button:
 <Canvas>
 	<Story
 		name="full-bleed"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'full-bleed'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: `vv-button--full-bleed`
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -101,13 +93,11 @@ Let's define a story for our `disabled` button.
 <Canvas>
 	<Story
 		name="disabled"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [cssTest, disableTest],
-				cssString: 'cursor: not-allowed'
+		play={async (ctx) => {
+			testButton(ctx, {
+				isClickDisabled: true
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -126,13 +116,11 @@ Let's define a story for our `active` button.
 <Canvas>
 	<Story
 		name="active"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'active'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--active'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -151,13 +139,11 @@ Let's define a story for our `action` button.
 <Canvas>
 	<Story
 		name="action"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'action'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--action'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -176,13 +162,11 @@ Let's define a story for our `action` `selected` button.
 <Canvas>
 	<Story
 		name="selected"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'selected'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--selected'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },
@@ -201,13 +185,11 @@ Let's define a story for our `action-quiet` button.
 <Canvas>
 	<Story
 		name="action-quiet"
-		play={(ctx) =>
-			buttonTest({
-				...ctx,
-				functions: [classTest],
-				className: 'selected'
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--action-quiet'
 			})
-		}>
+		}}>
 		{() => {
 			return {
 				components: { VvButton },

package/src/stories/volver-ui-vue.stories.mdx

@@ -3,7 +3,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'
 <Meta title="Volver ui-vue" />
 
 <div class="flex justify-center pb-xl">
-	<img src="https://raw.githubusercontent.com/volverjs/style/develop/src/assets/volverjs.svg" />
+	{/* <img src="https://raw.githubusercontent.com/volverjs/style/main/src/assets/volverjs.svg" /> */}
+	<img src="volverjs-beta.png" />
 </div>
 
 # @volverjs/ui-vue