@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

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

@@ -15,7 +15,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	const modifiers =
 		!args.modifiers || Array.isArray(args.modifiers)
 			? args.modifiers
-			: [args.modifiers]
+			: args.modifiers.split(' ')
 
 	// modifiers
 	if (modifiers) {

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,
+}

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/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.mdx → AvatarGroupSlotDefault.stories.ts}

@@ -1,23 +1,31 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
+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'
-import { Template } from './AvatarGroup.stories.mdx'
 
-<Meta
-	title="Components/AvatarGroup/Slots"
-	component={VvAvatarGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
+const meta: Meta<typeof VvAvatarGroup> = {
+	title: 'Components/AvatarGroup/Slots',
+	component: VvAvatarGroup,
+	args: defaultArgs,
+	argTypes,
+}
 
-export const TemplateSlot = (args) => ({
-	components: { VvAvatarGroup, VvAvatar },
-	setup() {
-		return { args }
+export default meta
+
+type Story = StoryObj<typeof VvAvatarGroup>
+
+export const Default: Story = {
+	args: {
+		...defaultArgs,
 	},
-	template: /* html */ `
+	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>
@@ -26,20 +34,6 @@ export const TemplateSlot = (args) => ({
 				<vv-avatar modifiers="rounded surface">+3</vv-avatar>
 			</vv-avatar-group>
 		</div>`,
-})
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{TemplateSlot.bind({})}
-	</Story>
-</Canvas>
+	}),
+	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',
@@ -71,18 +71,12 @@ export const argTypes = {
 	},
 	value: {
 		description: 'The button value',
-		type: {
-			summary: ['string', 'boolean', 'number'],
-		},
 		table: {
 			defaultValue: { summary: 'undefined' },
 		},
 	},
 	uncheckedValue: {
 		description: 'The button unchecked value',
-		type: {
-			summary: ['string', 'boolean', 'number'],
-		},
 		table: {
 			defaultValue: { summary: 'undefined' },
 		},
@@ -107,9 +101,6 @@ export const argTypes = {
 	rel: {
 		description: 'The rel attribute of the button',
 		control: { type: 'text' },
-		type: {
-			summary: 'boolean',
-		},
 		table: {
 			defaultValue: { summary: 'noopener noreferrer' },
 		},
@@ -162,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',
+	},
+}