@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/src/stories/AvatarGroup/AvatarGroup.settings.ts

@@ -0,0 +1,60 @@
+import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	...propsToObject(VvAvatarGroupProps),
+	items: [
+		{
+			text: 'MR',
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+		{
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+		{
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+		{
+			imgSrc: 'https://i.pravatar.cc/300',
+			modifiers: 'rounded',
+		},
+	],
+	avatarModifiers: 'rounded',
+}
+
+export const argTypes = {
+	...DefaultSlotArgTypes,
+	default: {
+		description: 'Default slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['tight', 'relaxed'],
+	},
+	avatarModifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
+	},
+	toShow: {
+		control: {
+			type: 'number',
+		},
+	},
+	totalItems: {
+		control: {
+			type: 'number',
+		},
+	},
+}

package/src/stories/AvatarGroup/AvatarGroup.stories.ts

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { defaultArgs, argTypes } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
+
+const meta: Meta<typeof VvAvatarGroup> = {
+	title: 'Components/AvatarGroup',
+	component: VvAvatarGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatarGroup>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvAvatarGroup },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+		<div class="m-md">
+		<vv-avatar-group v-bind="args" data-testId="element">
+			<template v-if="args.default">{{ args.default }}</template>
+		</vv-avatar-group>
+	</div>`,
+	}),
+	play: defaultTest,
+}

package/src/stories/AvatarGroup/AvatarGroup.test.ts

@@ -0,0 +1,36 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+
+	// slot default
+	if (!args.default && !args.items && !args.items?.length) {
+		throw new Error('Default slot or items is required!')
+	}
+
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: [args.modifiers]
+
+	// modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-avatar-group--${modifier}`)
+		}
+	}
+
+	// check children numbers
+	if (args.items && args.items.length && !args.default) {
+		if ((args.totalItems || args.items.length) > args.toShow) {
+			expect(element.children.length).toEqual(args.toShow + 1)
+		}
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/AvatarGroup/AvatarGroupModifiers.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import { defaultArgs, argTypes } from './AvatarGroup.settings'
+import { Default } from './AvatarGroup.stories'
+
+const meta: Meta<typeof VvAvatarGroup> = {
+	title: 'Components/AvatarGroup/Modifiers',
+	component: VvAvatarGroup,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatarGroup>
+
+export const Tight: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'tight',
+	},
+}
+
+export const Relaxed: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		modifiers: 'relaxed',
+	},
+}

package/src/stories/AvatarGroup/AvatarGroupSlotDefault.stories.ts

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultArgs, argTypes } from './AvatarGroup.settings'
+import { defaultTest } from './AvatarGroup.test'
+
+const meta: Meta<typeof VvAvatarGroup> = {
+	title: 'Components/AvatarGroup/Slots',
+	component: VvAvatarGroup,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatarGroup>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvAvatarGroup, VvAvatar },
+		setup() {
+			return { args }
+		},
+
+		template: /* html */ `
+		<div class="m-md">
+			<vv-avatar-group v-bind="args" data-testId="element" modifiers="relaxed">
+				<vv-avatar modifiers="rounded">MR</vv-avatar>
+				<vv-avatar modifiers="rounded accent">PB</vv-avatar>
+				<vv-avatar imgSrc="https://i.pravatar.cc/300" modifiers="rounded" />
+				<vv-avatar modifiers="rounded surface">+3</vv-avatar>
+			</vv-avatar-group>
+		</div>`,
+	}),
+	play: defaultTest,
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { defaultTest } from './Badge.test'
+import { defaultArgs, argTypes } from './Badge.settings'
+
+const meta: Meta<typeof VvBadge> = {
+	title: 'Components/Badge',
+	component: VvBadge,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvBadge>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+		value: 14
+	},
+	render: (args) => ({
+		components: { VvBadge },
+		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>
+		`,
+	}),
+	play: defaultTest,
+}
+
+export const Dot: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		value: '',
+	},
+}

package/src/stories/Badge/BadgeSlots.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { defaultArgs, argTypes } from './Badge.settings'
+import { Default as DefaultStory } from './Badge.stories'
+
+const meta: Meta<typeof VvBadge> = {
+	title: 'Components/Badge/Slots',
+	component: VvBadge,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvBadge>
+
+export const Default: Story = {
+	...DefaultStory,
+	args: {
+		...DefaultStory.args,
+		default: 'Default <em class="italic">slot!</em>',
+	},
+}

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

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
+import { defaultTest } from './Breadcrumb.test'
+import { defaultArgs, argTypes } from './Breadcrumb.settings'
+
+const meta: Meta<typeof VvBreadcrumb> = {
+	title: 'Components/Breadcrumb',
+	component: VvBreadcrumb,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvBreadcrumb>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvBreadcrumb },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<div class="bg-surface p-lg">
+			<vv-breadcrumb v-bind="args" />
+		</div>`,
+	}),
+	play: (data) => defaultTest(data, false),
+}
+
+export const Multiline: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		modifiers: 'multiline',
+	},
+}

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

@@ -7,7 +7,7 @@ function linkClick(event: Event) {
 
 export async function defaultTest(
 	data: PlayAttributes = {} as PlayAttributes,
-	customSlot: false,
+	customSlot: boolean,
 ) {
 	const breadcrumb = document.getElementsByClassName('vv-breadcrumb')[0]
 

package/src/stories/Breadcrumb/BreadcrumbSlots.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+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'
+
+const meta: Meta<typeof VvBreadcrumb> = {
+	title: 'Components/Breadcrumb/Slots',
+	component: VvBreadcrumb,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvBreadcrumb>
+
+export const Label: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvBreadcrumb, VvIcon },
+		setup() {
+			return { args }
+		},
+		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>
+            	`,
+	}),
+	play: (data) => defaultTest(data, true),
+}

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

@@ -22,7 +22,7 @@ export const defaultArgs = {
 }
 
 export const argTypes = {
-	modifiers: {
+	 modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: [
 			'primary',
@@ -69,6 +69,18 @@ export const argTypes = {
 			defaultValue: { summary: false },
 		},
 	},
+	value: {
+		description: 'The button value',
+		table: {
+			defaultValue: { summary: 'undefined' },
+		},
+	},
+	uncheckedValue: {
+		description: 'The button unchecked value',
+		table: {
+			defaultValue: { summary: 'undefined' },
+		},
+	},
 	...UnselectableArgTypes,
 	...LoadingArgTypes,
 	...DisabledArgTypes,
@@ -141,5 +153,5 @@ export const argTypes = {
 				summary: 'html',
 			},
 		},
-	},
+	}, 
 }

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

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultTest } from './Button.test'
+import { argTypes, defaultArgs } from './Button.settings'
+
+const meta: Meta<typeof VvButton> = {
+	title: 'Components/Button',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+	},
+	render: (args) => ({
+		components: { VvButton },
+		setup() {
+			return { args }
+		},
+		data: () => ({ currentValue: undefined }),
+		template: /*html*/ `
+			<vv-button v-bind="args" v-model="currentValue" 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: {{ currentValue }}</div>
+		`,
+	}),
+	play: defaultTest,
+}

package/src/stories/Button/ButtonIcon.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { Default } from './Button.stories'
+import { argTypes, defaultArgs } from './Button.settings'
+
+const meta: Meta<typeof VvButton> = {
+	title: 'Components/Button/Icon',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Top: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'add',
+		iconPosition: 'top',
+		label: 'Button with top icon',
+		modifiers: 'ghost',
+	},
+}
+
+export const Right: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'add',
+		iconPosition: 'right',
+		label: 'Button with right icon',
+	},
+}
+
+export const Bottom: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'add',
+		iconPosition: 'bottom',
+		label: 'Button with bottom icon',
+		modifiers: 'ghost',
+	},
+}
+
+export const Left: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'add',
+		label: 'Button with left icon',
+	},
+}
+
+export const NoLabel: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'add',
+		label: '',
+		ariaLabel: 'Add new item',
+		modifiers: 'rounded',
+	},
+}

package/src/stories/Button/ButtonLink.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { Default } from './Button.stories'
+import { argTypes, defaultArgs } from './Button.settings'
+
+const meta: Meta<typeof VvButton> = {
+	title: 'Components/Button/Link',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Href: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'arrow-right',
+		iconPosition: 'right',
+		label: 'Link button',
+		href: 'https://volverjs.github.io/style',
+		target: '_blank',
+	},
+}
+
+export const HrefDisabled: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		icon: 'arrow-right',
+		iconPosition: 'right',
+		label: 'Link button',
+		href: 'https://volverjs.github.io/style',
+		target: '_blank',
+		disabled: true,
+	},
+}

package/src/stories/Button/ButtonLoading.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { Default } from './Button.stories'
+import { argTypes, defaultArgs } from './Button.settings'
+
+const meta: Meta<typeof VvButton> = {
+	title: 'Components/Button/Loading',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Loading: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loading: true,
+	},
+}
+
+export const Icon: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loadingIcon: 'reload',
+		loading: true,
+	},
+}
+
+export const Label: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		loadingLabel: 'Reloading...',
+		loading: true,
+	},
+}