@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

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

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

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

@@ -0,0 +1,158 @@
+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/Modifiers',
+	component: VvButton,
+	args: defaultArgs,
+	argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvButton>
+
+export const Primary: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Primary',
+		modifiers: 'primary',
+	},
+}
+
+export const Secondary: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Secondary',
+		modifiers: 'secondary',
+	},
+}
+
+export const Danger: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Danger',
+		modifiers: 'danger',
+	},
+}
+
+export const Ghost: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Ghost',
+		modifiers: 'ghost',
+	},
+}
+
+export const Link: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Link',
+
+		modifiers: 'link',
+	},
+}
+
+export const StaticLight: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Static light',
+		modifiers: 'static-light',
+	},
+	render: (args) => ({
+		components: { VvButton },
+		backgrounds: {
+			default: 'dark',
+		},
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<div class="bg-black p-md">
+				<vv-button v-bind="args" data-testId="element" />
+			</div>
+		`,
+	})
+
+}
+
+
+export const StaticDark: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Static light',
+		modifiers: 'static-light',
+	},
+	render: (args) => ({
+		components: { VvButton },
+		backgrounds: {
+			default: 'dark',
+		},
+		setup() {
+			return { args }
+		},
+		template: /*html*/ `
+			<div class="bg-white p-md">
+				<vv-button v-bind="args" data-testId="element" />
+			</div>
+		`,
+	})
+}
+
+export const Block: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Block',
+		modifiers: 'block',
+	},
+}
+
+export const Rounded: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Rounded',
+		modifiers: 'rounded',
+	},
+}
+
+export const FullBleed: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Full bleed',
+
+		modifiers: 'full-bleed',
+	},
+}
+
+
+export const Action: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Action',
+		modifiers: 'action',
+	},
+}
+
+export const ActionQuiet: Story = {
+	...Default,
+	args: {
+		...Default.args,
+		label: 'Action quiet',
+
+		modifiers: 'action-quiet',
+	},
+}