@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

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

@@ -1,38 +1,50 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBadge from '../../components/VvBadge/VvBadge.vue'
-import testBadgeVariant from './BadgeTest.js'
-import testDangerBadge from './BadgeTest.js'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { defaultTest } from './Badge.test'
+import { defaultArgs, argTypes } from './Badge.settings'
 
 <Meta
 	title="Components/Badge"
 	component={VvBadge}
-	argTypes={{
-		value: {
-			defaultValue: '14',
-			control: { type: 'text' }
-		},
-		color: {
-			control: {
-				type: 'select',
-				options: ['', 'black', 'danger', 'success', 'warning']
-			}
-		}
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
-export const Template = (args) => ({
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
 	components: { VvBadge },
 	setup() {
 		return { args }
 	},
-	template: `<vv-badge v-bind="args" />`
+	template: `<vv-badge v-bind="args">
+			   		<template #default v-if="args.default"><span v-html="args.default"></span></template>	
+			   </vv-badge>`,
 })
 
-# VvBadge
+<Canvas>
+	<Story name="Default" args={{ value: '14' }} play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-Stories of `VvBadge`.
-Let's define a story for our playground `badge`:
-
-<Story name="vv-badge" args={{}}>
-	{Template.bind({})}
-</Story>
+<Canvas>
+	<Story
+		name="Dot"
+		args={{ value: '' }}
+		argTypes={{
+			default: {
+				control: {
+					disable: true,
+				},
+			},
+			value: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Badge/Badge.test.ts

@@ -0,0 +1,12 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+
+export const defaultTest = async ({ canvasElement, args }: PlayAttributes) => {
+	const badge = await within(canvasElement).findByRole('status')
+	expect(badge).toHaveClass('vv-badge')
+	if (args.modifiers.length > 0) {
+		expect(badge).toHaveClass(`vv-badge--${args.modifiers}`)
+	}
+	await expect(badge).toHaveNoViolations()
+}

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

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { defaultTest } from './Badge.test'
+import { defaultArgs, argTypes } from './Badge.settings'
+import { Template } from './Badge.stories.mdx'
+
+<Meta title="Components/Badge/Slots" component={VvBadge} args={defaultArgs} />
+
+<Canvas>
+	<Story
+		name="Default"
+		args={{ default: 'Default <em class="italic">slot!</em>' }}
+		argTypes={{
+			default: { ...argTypes.default, table: { disable: true } },
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Breadcrumb/Breadcrumb.settings.ts

@@ -0,0 +1,41 @@
+import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+export const defaultArgs = {
+	...propsToObject(VvBreadcrumbProps),
+	routes: [
+		{
+			label: 'Home',
+			title: 'Home',
+			href: '/home',
+		},
+		{
+			label: 'Library',
+			title: 'Library',
+			href: '/library',
+		},
+		{
+			label: 'Book 1',
+			title: 'Book 1',
+		},
+	],
+}
+
+export const argTypes = {
+	modifiers: {
+		control: 'check',
+		options: ['multiline'],
+	},
+	label: {
+		description: 'The label slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

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

@@ -1,30 +1,13 @@
-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 { Meta, Story } from '@storybook/addon-docs'
+import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+import { defaultTest } from './Breadcrumb.test'
+import { defaultArgs, argTypes } from './Breadcrumb.settings'
 
 <Meta
 	title="Components/Breadcrumb"
 	component={VvBreadcrumb}
-	args={{
-		...ObjectUtilities.propsToObject(VvBreadcrumbProps),
-		routes: [
-			{
-				label: 'Home',
-				title: 'Home',
-				href: '/'
-			},
-			{
-				label: 'Library',
-				title: 'Library',
-				href: '/library'
-			},
-			{
-				label: 'Book 1',
-				title: 'Book 1'
-			}
-		]
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 export const Template = (args) => ({
@@ -32,14 +15,34 @@ 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
-
-Stories of `VvBreadcrumb`.
-Let's define a story for our playground `breadcrumb`:
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		args={{}}
+		render={Template.bind()}
+	/>
+</Canvas>
 
 <Canvas>
-	<Story name="vv-breadcrumb" args={{}} render={Template.bind()} />
+	<Story
+		name="Multiline"
+		play={defaultTest}
+		args={{
+			modifiers: 'multiline',
+		}}
+		argTypes={{
+			modifiers: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		render={Template.bind()}
+	/>
 </Canvas>

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

@@ -0,0 +1,50 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+
+function linkClick(event: Event) {
+	event.preventDefault()
+}
+
+export async function defaultTest(
+	data: PlayAttributes = {} as PlayAttributes,
+	customSlot: false,
+) {
+	const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
+
+	// breadcrumb component class test
+	expect(breadcrumb).toHaveClass('vv-breadcrumb')
+
+	// 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
+		if (!customSlot) {
+			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()
+}

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

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+import VvIcon from '@/components/VvIcon/VvIcon.vue'
+import { defaultTest } from './Breadcrumb.test'
+import { defaultArgs, argTypes } from './Breadcrumb.settings'
+
+<Meta
+	title="Components/Breadcrumb/Slots"
+	component={VvBreadcrumb}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Label"
+		play={(args) => defaultTest(args, true)}
+		argTypes={{
+			label: {
+				table: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{(args) => {
+			return {
+				setup() {
+					return { args }
+				},
+				components: { VvBreadcrumb, VvIcon },
+				template: `
+                <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>
+</Canvas>

package/src/stories/Button/Button.settings.ts

@@ -0,0 +1,145 @@
+import {
+	DefaultSlotArgTypes,
+	ModifiersArgTypes,
+	DisabledArgTypes,
+	LoadingArgTypes,
+	UnselectableArgTypes,
+} from '@/stories/argTypes'
+import normal from '@/assets/icons/normal.json'
+
+export const defaultArgs = {
+	label: 'Button',
+	type: 'button',
+	toggle: false,
+	unselectable: true,
+	loading: false,
+	pressed: false,
+	active: false,
+	disabled: false,
+	rel: 'noopener noreferrer',
+	iconPosition: 'left',
+	icon: undefined,
+}
+
+export const argTypes = {
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: [
+			'primary',
+			'secondary',
+			'danger',
+			'ghost',
+			'link',
+			'action',
+			'action-quiet',
+			'static-light',
+			'static-dark',
+			'full-bleed',
+			'block',
+			'rounded',
+		],
+	},
+	icon: {
+		options: ['', ...Object.keys(normal.icons)],
+		control: {
+			type: 'select',
+		},
+	},
+	iconPosition: {
+		options: ['left', 'right', 'top', 'bottom'],
+		control: {
+			type: 'radio',
+		},
+		table: {
+			defaultValue: { summary: 'left' },
+		},
+	},
+	label: {
+		table: {
+			category: '',
+			type: '',
+		},
+		description: 'The label of the button',
+		control: { type: 'text' },
+	},
+	toggle: {
+		description: 'Whether the button is toggleable',
+		control: { type: 'boolean' },
+		table: {
+			defaultValue: { summary: false },
+		},
+	},
+	...UnselectableArgTypes,
+	...LoadingArgTypes,
+	...DisabledArgTypes,
+	pressed: {
+		description: 'Whether the button is pressed',
+		control: { type: 'boolean' },
+		table: {
+			defaultValue: { summary: false },
+		},
+	},
+	active: {
+		description: 'Whether the button is active',
+		control: { type: 'boolean' },
+		table: {
+			defaultValue: { summary: false },
+		},
+	},
+	rel: {
+		description: 'The rel attribute of the button',
+		control: { type: 'text' },
+		table: {
+			defaultValue: { summary: 'noopener noreferrer' },
+		},
+	},
+	type: {
+		options: ['button', 'submit', 'reset'],
+		control: {
+			type: 'radio',
+		},
+		table: {
+			defaultValue: { summary: 'button' },
+		},
+	},
+	href: {
+		description: 'The href attribute',
+		control: { type: 'text' },
+	},
+	target: {
+		options: ['', '_blank', '_self', '_parent', '_top'],
+		description: 'The target attribute',
+		control: {
+			type: 'select',
+		},
+	},
+	to: {
+		description: 'The router link / nuxt link settings',
+		control: { type: 'object' },
+	},
+	...DefaultSlotArgTypes,
+	before: {
+		description: 'Before label slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	after: {
+		description: 'After label slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

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

@@ -1,67 +1,33 @@
 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 { testButton } from './Button.test'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultTest } from './Button.test'
+import { argTypes, defaultArgs } from './Button.settings'
 
 <Meta
 	title="Components/Button"
 	component={VvButton}
-	args={{
-		...ObjectUtilities.propsToObject(VvButtonProps),
-		target: undefined,
-		to: undefined,
-		href: undefined,
-		label: 'Test'
-	}}
-	argTypes={{
-		onClick: { action: 'clicked' },
-		modifiers: {
-			control: {
-				type: 'select',
-				options: [
-					null,
-					'primary',
-					'secondary',
-					'danger',
-					'ghost',
-					'text',
-					'static-light',
-					'static-dark'
-				]
-			}
-		},
-		label: {
-			control: { type: 'text' }
-		},
-		loading: {
-			control: { type: 'boolean' }
-		},
-		disabled: {
-			control: { type: 'boolean' }
-		}
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 export const Template = (args) => ({
 	components: { VvButton },
+	data() {
+		return { value: undefined }
+	},
 	setup() {
-		function onClick() {
-			console.log('onClick')
-		}
-		return { args, onClick }
+		return { args }
 	},
-	template: `<vv-button v-bind="args" @click="onClick" />`
+	template: `<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>`,
 })
 
-# VvButton
-
-Stories of `VvButton`.
-Let's define a story for our playground `button`:
-
-<Story name="vv-button" args={{}} play={testButton}>
-	{Template.bind({})}
-</Story>
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -2,56 +2,45 @@ 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 = {}
+export async function defaultTest(
+	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
 ) {
-	const button = await within(canvasElement).findByRole('button')
-	if (isClickDisabled) {
-		await expect(button).not.toBeClicked()
-	} else {
-		await expect(button).toBeClicked()
+	const element = await within(canvasElement).findByRole('button')
+
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: [args.modifiers]
+
+	expect(element).toHaveClass('vv-button')
+
+	// icon
+	if (args.icon) {
+		expect(element.innerHTML).toContain('vv-icon')
 	}
-	expect(button).toHaveClass('vv-button')
-	if (className) {
-		expect(button).toHaveClass(className)
+
+	// modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-button--${modifier}`)
+		}
 	}
-	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 })
-}
+	// disabled
+	if (args.disabled) {
+		await expect(element).not.toBeClicked()
+	} else {
+		await expect(element).toBeClicked()
 
-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 })
-}
+		// link
+		if (args.href) {
+			expect(element).toHaveProperty('href')
+		}
+		if (args.target) {
+			expect(element).toHaveProperty('target')
+		}
+	}
 
-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 })
+	// accessibility
+	expect(element).toHaveNoViolations()
 }