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

package/src/stories/AlertGroup/AlertGroup.settings.ts

@@ -0,0 +1,110 @@
+import { ModifiersArgTypes } from '../argTypes'
+
+export const defaultArgs = {
+	name: 'default',
+	items: [
+		{
+			id: 1,
+			title: 'Info!',
+			content: 'This is an info message.',
+			icon: 'information',
+			modifiers: 'info',
+		},
+		{
+			id: 2,
+			title: 'Warning!',
+			content: 'This is an warning message.',
+			icon: 'warning',
+			modifiers: 'warning',
+		},
+		{
+			id: 3,
+			title: 'Danger!',
+			content: 'This is an danger message.',
+			icon: 'error',
+			modifiers: 'danger',
+		},
+	],
+	stack: false,
+	reverse: false,
+}
+export const argTypes = {
+	name: {
+		description: 'The alert group name',
+	},
+	items: {
+		description: 'The alert group items',
+		table: {
+			defaultValue: {
+				summary: '[]',
+			},
+		},
+	},
+	stack: {
+		description: 'Stack alerts',
+		table: {
+			defaultValue: {
+				summary: 'false',
+			},
+		},
+	},
+	reverse: {
+		description: 'Reverse alerts',
+		table: {
+			defaultValue: {
+				summary: 'false',
+			},
+		},
+	},
+	position: {
+		description: 'The alert group position',
+		control: 'radio',
+		options: ['absolute', 'fixed'],
+	},
+	inline: {
+		description: 'The alert group inline alignment',
+		control: 'radio',
+		options: ['start', 'middle', 'end'],
+	},
+	block: {
+		description: 'The alert group block alignment',
+		control: 'radio',
+		options: ['top', 'center', 'bottom'],
+	},
+	transition: {
+		description: 'The alert group transition',
+		control: 'text',
+	},
+	...ModifiersArgTypes,
+	// slots
+	default: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	before: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	after: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

package/src/stories/AlertGroup/AlertGroup.stories.ts

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { defaultTest } from './AlertGroup.test'
+import { defaultArgs, argTypes } from './AlertGroup.settings'
+
+const meta: Meta<typeof VvAlertGroup> = {
+	title: 'Components/AlertGroup',
+	component: VvAlertGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+export type Story = StoryObj<typeof VvAlertGroup>
+
+export const Default: Story = {
+	args: defaultArgs,
+	play: defaultTest,
+	render: (args) => ({
+		components: { VvAlertGroup },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+            <vv-alert-group v-bind="args" data-testId="element">
+                <template #before v-if="args.before"><div v-html="args.before"></div></template>
+                <template #after v-if="args.after"><div v-html="args.after"></div></template>
+                <template #default v-if="args.default"><div v-html="args.default"></div></template>
+            </vv-alert-group>
+        `,
+	}),
+}
+
+export const Stack: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		stack: true,
+	},
+}
+
+export const Reverse: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		reverse: true,
+	},
+}

package/src/stories/AlertGroup/AlertGroup.test.ts

@@ -0,0 +1,76 @@
+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
+
+	expect(element).toHaveClass('vv-alert-group')
+
+	// check alert group list
+	const alertGroupList = element.getElementsByClassName(
+		'vv-alert-group__list',
+	)?.[0]
+	expect(alertGroupList).toBeTruthy()
+
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: args.modifiers.split(' ')
+
+	// modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-alert-group--${modifier}`)
+		}
+	}
+
+	// stack
+	if (args.stack) {
+		expect(element).toHaveClass('vv-alert-group--stack')
+	}
+
+	// reverse
+	if (args.reverse) {
+		expect(element).toHaveClass('vv-alert-group--reverse')
+	}
+
+	// position
+	if (args.position) {
+		expect(element).toHaveClass(`vv-alert-group--${args.position}`)
+	}
+
+	if (args.inline && args.block) {
+		expect(element).toHaveClass(
+			`vv-alert-group--${args.block}-${args.inline}`,
+		)
+	}
+
+	// slot default
+	if (args.default) {
+		const div = document.createElement('div')
+		div.innerHTML = args.default
+		expect(alertGroupList.firstElementChild?.innerHTML).toEqual(
+			div.innerHTML,
+		)
+	}
+
+	// slot before
+	if (args.before) {
+		const div = document.createElement('div')
+		div.innerHTML = args.before
+		expect(element.firstElementChild?.innerHTML).toEqual(div.innerHTML)
+	}
+
+	// slot after
+	if (args.after) {
+		const div = document.createElement('div')
+		div.innerHTML = args.after
+		expect(element.lastElementChild?.innerHTML).toEqual(div.innerHTML)
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/AlertGroup/AlertGroupPosition.stories.ts

@@ -0,0 +1,103 @@
+import type { Meta } from '@storybook/vue3'
+import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { defaultArgs, argTypes } from './AlertGroup.settings'
+import { Default, type Story } from './AlertGroup.stories'
+
+const meta: Meta<typeof VvAlertGroup> = {
+	title: 'Components/AlertGroup/Position',
+	component: VvAlertGroup,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+export const TopStart: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'top',
+		inline: 'start',
+	},
+}
+
+export const TopMiddle: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'top',
+		inline: 'middle',
+	},
+}
+
+export const TopEnd: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'top',
+		inline: 'end',
+	},
+}
+
+export const CenterStart: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'center',
+		inline: 'start',
+	},
+}
+
+export const CenterMiddle: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'center',
+		inline: 'middle',
+	},
+}
+
+export const CenterEnd: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'center',
+		inline: 'end',
+	},
+}
+
+export const BottomStart: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'bottom',
+		inline: 'start',
+	},
+}
+
+export const BottomMiddle: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'bottom',
+		inline: 'middle',
+	},
+}
+
+export const BottomEnd: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		position: 'absolute',
+		block: 'bottom',
+		inline: 'end',
+	},
+}

package/src/stories/AlertGroup/AlertGroupSlots.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta } from '@storybook/vue3'
+import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { defaultArgs, argTypes } from './AlertGroup.settings'
+import { Default as DefaultStory, type Story } from './AlertGroup.stories'
+
+const meta: Meta<typeof VvAlert> = {
+	title: 'Components/AlertGroup/Slots',
+	component: VvAlert,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+export const Default: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		modifiers: ['notification'],
+		default: /* html */ `
+			<div class="vv-alert vv-alert--success" role="alert" aria-labelledby="Els38gSOH_Op3SFpzekW--title" style="--alert-duration:0ms;">
+				<div class="vv-alert__header">
+					<strong id="Els38gSOH_Op3SFpzekW--title" class="vv-alert__title">Success!</strong>
+				</div>
+				<div class="vv-alert__content">This is an success message.</div>
+			</div>
+			<div class="vv-alert vv-alert--accent mt-xs" role="alert" aria-labelledby="nkas44ZTfhbt5OEJYL06N-title" style="--alert-duration:0ms;">
+				<div class="vv-alert__header">
+					<strong id="nkas44ZTfhbt5OEJYL06N-title" class="vv-alert__title">Accent!</strong>
+				</div>
+				<div class="vv-alert__content">This is an accent message.</div>
+			</div>
+		`,
+	},
+}
+
+export const Before: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		modifiers: ['notification'],
+		before: /* html */ `
+			<div class="flex justify-center">
+				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
+					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
+					<span class="vv-button__label">Clear All</span>
+				</button>
+			</div>
+		`,
+	},
+}
+
+export const After: Story = {
+	...DefaultStory,
+	args: {
+		...defaultArgs,
+		modifiers: ['notification'],
+		after: /* html */ `
+			<div class="flex justify-center">
+				<button type="button" class="vv-button vv-button--action-quiet" id="y_Cl2wtJ8JJpDo-t6za2i">
+					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="vv-icon vv-button__icon iconify iconify--normal iconify--vv" width="1em" height="1em" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M6 18 18 6M6 6l12 12"></path></svg>
+					<span class="vv-button__label">Clear All</span>
+				</button>
+			</div>
+		`,
+	},
+}

package/src/stories/Avatar/Avatar.settings.ts

@@ -0,0 +1,37 @@
+import { VvAvatarProps } from '@/components/VvAvatar'
+import { DefaultSlotArgTypes } from '@/stories/argTypes'
+import type { ArgTypes } from '@storybook/types'
+
+export const defaultArgs = {
+	...propsToObject(VvAvatarProps),
+	imgSrc: 'https://i.pravatar.cc/300',
+}
+
+export const argTypes: ArgTypes = {
+	...DefaultSlotArgTypes,
+	default: {
+		description: 'Content slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	modifiers: {
+		description: 'Component BEM modifiers',
+		control: {
+			type: 'check',
+		},
+		options: ['rounded', 'square', 'bordered', 'ring', 'lg', 'md'],
+	},
+	imgSrc: {
+		control: {
+			type: 'text',
+		},
+		description: 'The image url',
+	},
+}

package/src/stories/Avatar/Avatar.stories.ts

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

package/src/stories/Avatar/Avatar.test.ts

@@ -0,0 +1,34 @@
+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.imgSrc) {
+		throw new Error('Default slot or imgSrc is required!')
+	}
+
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: args.modifiers.split(' ')
+
+	// modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-avatar--${modifier}`)
+		}
+	}
+
+	// check img tag exist
+	if (args.imgSrc && !args.default) {
+		expect(element).toHaveImgChild('img')
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/Avatar/AvatarBadge.stories.ts

@@ -0,0 +1,36 @@
+// Replace vue3 with vue if you are using Storybook for Vue 2
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { defaultArgs, argTypes } from './Avatar.settings'
+
+const meta: Meta<typeof VvAvatar> = {
+	title: 'Components/Avatar/Badge',
+	component: VvAvatar,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatar>
+
+export const Badge: Story = {
+	args: {
+		modifiers: 'lg',
+	},
+	render: (args) => ({
+		components: { VvAvatar, VvBadge },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<vv-avatar v-bind="args" data-testId="element">
+				MR
+                <sup>
+                    <vv-badge modifiers="danger rounded">99+</vv-badge>
+                </sup>
+			</vv-avatar>
+    `,
+	}),
+}

package/src/stories/Avatar/AvatarModifiers.stories.ts

@@ -0,0 +1,100 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import { defaultTest } from '../Avatar/Avatar.test'
+
+const meta: Meta<typeof VvAvatar> = {
+	title: 'Components/Avatar/Modifiers',
+	component: VvAvatar,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatar>
+
+const VvAvatarTemplate: Story = {
+	args: {
+		default: 'MR',
+		modifiers: '',
+	},
+	render: (args) => ({
+		components: { VvAvatar },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<vv-avatar v-bind="args" data-testId="element">
+				{{ args.default }}
+			</vv-avatar>`,
+	}),
+	play: defaultTest,
+}
+
+export const Small: Story = {
+	...VvAvatarTemplate,
+}
+
+export const Medium: Story = {
+	...VvAvatarTemplate,
+	args: {
+		...VvAvatarTemplate.args,
+		modifiers: 'md',
+	},
+}
+
+export const Large: Story = {
+	...VvAvatarTemplate,
+	args: {
+		...VvAvatarTemplate.args,
+		modifiers: 'lg',
+	},
+}
+
+export const Rounded: Story = {
+	...VvAvatarTemplate,
+	args: {
+		...VvAvatarTemplate.args,
+		modifiers: 'rounded md',
+	},
+}
+
+export const Square: Story = {
+	...VvAvatarTemplate,
+	args: {
+		...VvAvatarTemplate.args,
+		modifiers: 'square md',
+	},
+}
+
+export const Bordered: Story = {
+	...VvAvatarTemplate,
+	args: {
+		...VvAvatarTemplate.args,
+		modifiers: 'bordered md',
+	},
+}
+
+export const Ring: Story = {
+	...VvAvatarTemplate,
+	args: {
+		...VvAvatarTemplate.args,
+		modifiers: 'ring md',
+	},
+}
+
+export const CustomColor: Story = {
+	...VvAvatarTemplate,
+	args: {
+		...VvAvatarTemplate.args,
+		modifiers: 'accent md',
+	},
+	argTypes: {
+		...argTypes,
+		modifiers: {
+			...argTypes.modifiers,
+			options: [...argTypes.modifiers.options, 'accent'],
+		},
+	},
+}

package/src/stories/Avatar/AvatarSlots.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import { defaultTest } from '../Avatar/Avatar.test'
+
+const meta: Meta<typeof VvAvatar> = {
+	title: 'Components/Avatar/Slots',
+	component: VvAvatar,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAvatar>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
+		default: 'MR',
+	},
+	render: (args) => ({
+		components: { VvAvatar },
+		setup() {
+			return { args }
+		},
+		template: /* html */ `
+			<vv-avatar v-bind="args" data-testId="element">
+				<template v-if="args.default"> {{ args.default }} </template>
+			</vv-avatar>
+    `,
+	}),
+	play: defaultTest,
+}