@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

package/src/stories/Alert/AlertSlots.stories.ts

@@ -1,66 +1,66 @@
 import type { Meta } from '@storybook/vue3'
 import VvAlert from '@/components/VvAlert/VvAlert.vue'
-import { defaultArgs, argTypes } from './Alert.settings'
+import { argTypes, defaultArgs } from './Alert.settings'
 import { Default as DefaultStory, type Story } from './Alert.stories'
 
 const meta: Meta<typeof VvAlert> = {
-	title: 'Components/Alert/Slots',
-	component: VvAlert,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Alert/Slots',
+    component: VvAlert,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
 
 export const Default: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		default: /*html*/ `
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        modifiers: ['notification'],
+        default: /* html */ `
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 			<div class="mt-sm">Default <em class="italic">slot!</em></div>
 		`,
-	},
+    },
 }
 
 export const Header: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		header: 'Header <em class="italic">slot!</em>',
-	},
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        header: 'Header <em class="italic">slot!</em>',
+    },
 }
 
 export const TitleBefore: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		'title::before': /*html*/ `
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        'modifiers': ['notification'],
+        'title::before': /* html */ `
 			<small class="text-smaller flex-1">10 minutes ago</small>
 		`,
-	},
+    },
 }
 
 export const TitleAfter: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		'title::after': /*html*/ `
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        'modifiers': ['notification'],
+        'title::after': /* html */ `
 			<small class="text-smaller ml-auto">10 minutes ago</small>
 		`,
-	},
+    },
 }
 
 export const Footer: Story = {
-	...DefaultStory,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-		role: 'alertdialog',
-		footer: /*html*/ `
+    ...DefaultStory,
+    args: {
+        ...defaultArgs,
+        modifiers: ['notification'],
+        role: 'alertdialog',
+        footer: /* html */ `
 			<div class="vv-button-group" role="group">
 				<button type="button" class="vv-button vv-button--action" id="c1RmyuK7IURatQsTHcP42">
 					<span class="vv-button__label">Save</span>
@@ -70,5 +70,5 @@ export const Footer: Story = {
 				</button>
 			</div>
 		`,
-	},
+    },
 }

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

@@ -1,110 +1,112 @@
+import type { ArgTypes } from '@storybook/vue3'
 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,
+    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',
-			},
-		},
-	},
+
+export const argTypes: 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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvAlertGroup from '@/components/VvAlertGroup/VvAlertGroup.vue'
+import { argTypes, defaultArgs } from './AlertGroup.settings'
 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'],
+    title: 'Components/AlertGroup',
+    component: VvAlertGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,35 +16,35 @@ 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 */ `
+    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,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        stack: true,
+    },
 }
 
 export const Reverse: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		reverse: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        reverse: true,
+    },
 }

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

@@ -1,89 +1,87 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { userEvent, within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
-	const buttons =
-		canvasElement.getElementsByClassName('buttons-container')?.[0]
+    const element = await within(canvasElement).findByTestId('element')
+    const buttons
+		= canvasElement.getElementsByClassName('buttons-container')?.[0]
 
-	expect(element).toHaveClass('vv-alert-group')
+    expect(element).toHaveClass('vv-alert-group')
 
-	// check alert group list
-	const alertGroupList = element.getElementsByClassName(
-		'vv-alert-group__list',
-	)?.[0]
-	expect(alertGroupList).toBeTruthy()
+    // 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(' ')
+    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}`)
-		}
-	}
+    // 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')
-	}
+    // stack
+    if (args.stack) {
+        expect(element).toHaveClass('vv-alert-group--stack')
+    }
 
-	// reverse
-	if (args.reverse) {
-		expect(element).toHaveClass('vv-alert-group--reverse')
-	}
+    // reverse
+    if (args.reverse) {
+        expect(element).toHaveClass('vv-alert-group--reverse')
+    }
 
-	// position
-	if (args.position) {
-		expect(element).toHaveClass(`vv-alert-group--${args.position}`)
-	}
+    // 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}`,
-		)
-	}
+    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 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 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)
-	}
+    // slot after
+    if (args.after) {
+        const div = document.createElement('div')
+        div.innerHTML = args.after
+        expect(element.lastElementChild?.innerHTML).toEqual(div.innerHTML)
+    }
 
-	if (buttons) {
-		// click every button child and expect to have alert with correct css class
-		for (let i = 0; i < buttons.children.length; i++) {
-			const button = buttons.children[i] as HTMLElement
-			await button.click()
-			expect(alertGroupList.lastElementChild).toHaveClass(
-				`vv-alert--${button.id}`,
-			)
-		}
-	}
+    if (buttons) {
+        // click every button child and expect to have alert with correct css class
+        for (const element of buttons.children) {
+            const button = element as HTMLElement
+            await userEvent.click(button)
+            expect(alertGroupList.lastElementChild).toHaveClass(
+                `vv-alert--${button.id}`,
+            )
+        }
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }