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

package/src/components/VvAvatar/VvAvatar.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+	import { VvAvatarProps } from '@/components/VvAvatar'
+
+	const props = defineProps(VvAvatarProps)
+	const { modifiers } = toRefs(props)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-avatar', modifiers)
+</script>
+
+<template>
+	<span
+		:class="bemCssClasses"
+		:role="imgSrc ? undefined : 'img'"
+		:aria-label="imgSrc ? undefined : 'avatar'"
+	>
+		<slot name="default">
+			<img v-if="imgSrc" :src="imgSrc" alt="avatar" />
+		</slot>
+	</span>
+</template>

package/src/components/VvAvatar/index.ts

@@ -0,0 +1,9 @@
+import { ModifiersProps } from '@/props'
+
+export const VvAvatarProps = {
+	...ModifiersProps,
+	/**
+	 * Image src for avatar
+	 */
+	imgSrc: String,
+}

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

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

package/src/stories/Avatar/Avatar.stories.mdx

@@ -0,0 +1,40 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import { defaultTest } from './Avatar.test'
+
+<Meta
+	title="Components/Avatar"
+	component={VvAvatar}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvAvatar },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<div class="m-md">
+			<vv-avatar v-bind="args" data-testId="element">
+				<template v-if="args.default">{{ args.default }}</template>
+			</vv-avatar>
+		</div>`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Image"
+		play={defaultTest}
+		args={{ imgSrc: 'https://i.pravatar.cc/300' }}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>

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]
+
+	// 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.mdx

@@ -0,0 +1,41 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import VvBadge from '@/components/VvBadge/VvBadge.vue'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import { defaultTest } from './Avatar.test'
+
+<Meta
+	title="Components/Avatar/Badge"
+	component={VvAvatar}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvAvatar, VvBadge },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<div class="m-md">
+			<vv-avatar v-bind="args" data-testId="element">
+				{{ args.default }}
+                <sup>
+                    <vv-badge :modifiers="['danger', 'rounded']">99+</vv-badge>
+                </sup>
+			</vv-avatar>
+		</div>`,
+})
+
+<Canvas>
+	<Story
+		name="Badge"
+		play={defaultTest}
+		args={{
+			default: 'MR',
+			modifiers: 'lg',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Avatar/AvatarModifiers.stories.mdx

@@ -0,0 +1,87 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import { defaultTest } from './Avatar.test'
+import { Template } from './Avatar.stories.mdx'
+
+<Meta
+	title="Components/Avatar/Modifiers"
+	component={VvAvatar}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story name="Small" play={defaultTest} args={{ modifiers: '' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="Medium" play={defaultTest} args={{ modifiers: 'md' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="Large" play={defaultTest} args={{ modifiers: 'lg' }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Rounded"
+		play={defaultTest}
+		args={{ modifiers: 'rounded', default: 'MR' }}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Square"
+		play={defaultTest}
+		args={{ modifiers: ['square', 'md'] }}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Bordered"
+		play={defaultTest}
+		args={{ modifiers: ['bordered', 'md'], default: 'MR' }}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Ring"
+		play={defaultTest}
+		args={{ modifiers: ['ring', 'md'], default: 'MR' }}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="CustomColors"
+		play={defaultTest}
+		args={{ modifiers: ['accent', 'md'], default: 'MR' }}
+		argTypes={{
+			...argTypes,
+			modifiers: {
+				...argTypes.modifiers,
+				options: [...argTypes.modifiers.options, 'accent'],
+			},
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Avatar/AvatarSlotDefault.stories.mdx

@@ -0,0 +1,29 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { defaultArgs, argTypes } from './Avatar.settings'
+import { defaultTest } from './Avatar.test'
+import { Template } from './Avatar.stories.mdx'
+
+<Meta
+	title="Components/Avatar/Slots"
+	component={VvAvatar}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		args={{ default: 'MR' }}
+		argTypes={{
+			default: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/test/expect.ts

@@ -21,6 +21,13 @@ declare global {
 				expected?: HTMLElement,
 			) => CustomMatcherResult
 		}
+		// eslint-disable-next-line
+		interface Matchers<R> {
+			toHaveImgChild: (
+				imgTag: string,
+				expected?: HTMLElement,
+			) => CustomMatcherResult
+		}
 	}
 }
 
@@ -68,6 +75,14 @@ expect.extend({
 				`One of these classes doesn't exist: ${classes.join(', ')}`,
 		}
 	},
+	async toHaveImgChild(element: HTMLElement, imgTag: string) {
+		const img = element.getElementsByTagName(imgTag)
+		return {
+			pass: img.length === 1,
+			message: () =>
+				`${imgTag} not exist!`,
+		}
+	},
 })
 
 export { expect }