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

package/src/stories/Alert/Alert.settings.ts

@@ -1,122 +1,123 @@
-import type { Meta } from '@storybook/vue3'
 import type { VvAlert } from '@/components'
-import { IconArgTypes } from '../argTypes'
-import { ModifiersArgTypes } from '../argTypes'
+import type { ArgTypes, Meta } from '@storybook/vue3'
+import { IconArgTypes, ModifiersArgTypes } from '../argTypes'
 
 export const defaultArgs: Meta<typeof VvAlert>['args'] = {
-	title: 'Alert title!',
-	content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-	dismissable: false,
-	autoClose: 0,
-	role: 'alert',
+    title: 'Alert title!',
+    content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    dismissable: false,
+    autoClose: 0,
+    role: 'alert',
 }
 
-export const argTypes = {
-	title: {
-		description: 'The alert title',
-	},
-	content: {
-		description: 'The alert content',
-	},
-	dismissable: {
-		description: 'Dismissable by clicking on the close button',
-		control: 'boolean',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
-	autoClose: {
-		description: 'Auto close after the specified time in milliseconds',
-		control: 'number',
-		table: {
-			defaultValue: {
-				summary: 0,
-			},
-		},
-	},
-	modifiers: {
-		...ModifiersArgTypes.modifiers,
-		options: [
-			'success',
-			'warning',
-			'danger',
-			'info',
-			'brand',
-			'notification',
-			'accent',
-			'callout',
-		],
-	},
-	icon: IconArgTypes.icon,
-	role: {
-		description: 'The alert role',
-		control: 'radio',
-		options: ['alert', 'alertdialog'],
-		table: {
-			defaultValue: 'alert',
-		},
-	},
-	// slots
-	header: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'title::before': {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	'title::after': {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	close: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	default: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
-	footer: {
-		control: {
-			type: 'text',
-		},
-		table: {
-			type: {
-				summary: 'html',
-			},
-		},
-	},
+export const argTypes: ArgTypes = {
+    'title': {
+        description: 'The alert title',
+    },
+    'content': {
+        description: 'The alert content',
+    },
+    'dismissable': {
+        description: 'Dismissable by clicking on the close button',
+        control: 'boolean',
+        table: {
+            defaultValue: {
+                summary: 'false',
+            },
+        },
+    },
+    'autoClose': {
+        description: 'Auto close after the specified time in milliseconds',
+        control: 'number',
+        table: {
+            defaultValue: {
+                summary: '0',
+            },
+        },
+    },
+    'modifiers': {
+        ...ModifiersArgTypes.modifiers,
+        options: [
+            'success',
+            'warning',
+            'danger',
+            'info',
+            'brand',
+            'notification',
+            'accent',
+            'callout',
+        ],
+    },
+    'icon': IconArgTypes.icon,
+    'role': {
+        description: 'The alert role',
+        control: 'radio',
+        options: ['alert', 'alertdialog'],
+        table: {
+            defaultValue: {
+                summary: 'alert',
+            },
+        },
+    },
+    // slots
+    'header': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'title::before': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'title::after': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'close': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'default': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'html',
+            },
+        },
+    },
+    'footer': {
+        control: {
+            type: 'text',
+        },
+        table: {
+            type: {
+                summary: 'html',
+            },
+        },
+    },
 }

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

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { argTypes, defaultArgs } from './Alert.settings'
 import { defaultTest } from './Alert.test'
-import { defaultArgs, argTypes } from './Alert.settings'
 
 const meta: Meta<typeof VvAlert> = {
-	title: 'Components/Alert',
-	component: VvAlert,
-	args: defaultArgs,
-	argTypes,
-	tags: ['autodocs'],
+    title: 'Components/Alert',
+    component: VvAlert,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
 }
 
 export default meta
@@ -16,14 +16,14 @@ export default meta
 export type Story = StoryObj<typeof VvAlert>
 
 export const Default: Story = {
-	args: defaultArgs,
-	play: defaultTest,
-	render: (args) => ({
-		components: { VvAlert },
-		setup() {
-			return { args }
-		},
-		template: /* html */ `
+    args: defaultArgs,
+    play: defaultTest,
+    render: args => ({
+        components: { VvAlert },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
 			<vv-alert v-bind="args" data-testId="element">
 				<template #header v-if="args.header"><div v-html="args.header"></div></template>
 				<template #title::before v-if="args['title::before']"><div v-html="args['title::before']"></div></template>
@@ -32,29 +32,29 @@ export const Default: Story = {
 				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
 			</vv-alert>
         `,
-	}),
+    }),
 }
 
 export const Dismissable: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		dismissable: true,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        dismissable: true,
+    },
 }
 
 export const AutoClose: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		autoClose: 8000,
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        autoClose: 8000,
+    },
 }
 
 export const Icon: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		icon: 'warning',
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        icon: 'warning',
+    },
 }

package/src/stories/Alert/Alert.test.ts

@@ -1,99 +1,97 @@
 import type { PlayAttributes } from '@/test/types'
 import { expect } from '@/test/expect'
-import { within } from '@storybook/testing-library'
+import { within } from '@storybook/test'
 
 export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-	const element = (await within(canvasElement).findByTestId(
-		'element',
-	)) as HTMLElement
+    const element = await within(canvasElement).findByTestId('element')
 
-	expect(element).toHaveClass('vv-alert')
+    expect(element).toHaveClass('vv-alert')
 
-	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(' ')
 
-	const alertHeaderEl =
-		element.getElementsByClassName('vv-alert__header')?.[0]
-	const closeButtonEl = element.getElementsByClassName('vv-alert__close')?.[0]
-	const alertContentEl =
-		element.getElementsByClassName('vv-alert__content')?.[0]
-	const alertFooterEl =
-		element.getElementsByClassName('vv-alert__footer')?.[0]
+    const alertHeaderEl
+		= element.getElementsByClassName('vv-alert__header')?.[0]
+    const closeButtonEl = element.getElementsByClassName('vv-alert__close')?.[0]
+    const alertContentEl
+		= element.getElementsByClassName('vv-alert__content')?.[0]
+    const alertFooterEl
+		= element.getElementsByClassName('vv-alert__footer')?.[0]
 
-	// modifiers
-	if (modifiers) {
-		for (const modifier of modifiers) {
-			expect(element).toHaveClass(`vv-alert--${modifier}`)
-		}
-	}
+    // modifiers
+    if (modifiers) {
+        for (const modifier of modifiers) {
+            expect(element).toHaveClass(`vv-alert--${modifier}`)
+        }
+    }
 
-	// dismissable
-	if (args.dismissable) {
-		expect(element).toHaveClass('vv-alert--dismissable')
-		expect(closeButtonEl).not.toBeUndefined()
-	}
+    // dismissable
+    if (args.dismissable) {
+        expect(element).toHaveClass('vv-alert--dismissable')
+        expect(closeButtonEl).not.toBeUndefined()
+    }
 
-	// autoclose
-	if (args.autoClose) {
-		expect(element).toHaveClass('vv-alert--auto-close')
-		expect(closeButtonEl).not.toBeUndefined()
-		expect(closeButtonEl.firstChild).toHaveClass('vv-alert__close-mask')
-	}
+    // autoclose
+    if (args.autoClose) {
+        expect(element).toHaveClass('vv-alert--auto-close')
+        expect(closeButtonEl).not.toBeUndefined()
+        expect(closeButtonEl.firstChild).toHaveClass('vv-alert__close-mask')
+    }
 
-	if (!args.autoClose && !args.dismissable) {
-		expect(closeButtonEl).toBeUndefined()
-	}
+    if (!args.autoClose && !args.dismissable) {
+        expect(closeButtonEl).toBeUndefined()
+    }
 
-	// icon
-	if (args.icon) {
-		expect(alertHeaderEl.firstChild).toHaveClass('vv-alert__icon')
-	}
+    // icon
+    if (args.icon) {
+        expect(alertHeaderEl.firstChild).toHaveClass('vv-alert__icon')
+    }
 
-	// slot default
-	if (args.default) {
-		const div = document.createElement('div')
-		div.innerHTML = args.default
-		expect(alertContentEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
+    // slot default
+    if (args.default) {
+        const div = document.createElement('div')
+        div.innerHTML = args.default
+        expect(alertContentEl.firstElementChild?.innerHTML).toEqual(
+            div.innerHTML,
+        )
+    }
 
-	// slot header
-	if (args.header) {
-		const div = document.createElement('div')
-		div.innerHTML = args.header
-		expect(alertHeaderEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
+    // slot header
+    if (args.header) {
+        const div = document.createElement('div')
+        div.innerHTML = args.header
+        expect(alertHeaderEl.firstElementChild?.innerHTML).toEqual(
+            div.innerHTML,
+        )
+    }
 
-	// slot title before
-	if (args['title::before']) {
-		const div = document.createElement('div')
-		div.innerHTML = args['title::before']
-		expect(alertHeaderEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
+    // slot title before
+    if (args['title::before']) {
+        const div = document.createElement('div')
+        div.innerHTML = args['title::before']
+        expect(alertHeaderEl.firstElementChild?.innerHTML).toEqual(
+            div.innerHTML,
+        )
+    }
 
-	// slot title after
-	if (args['title::after']) {
-		const div = document.createElement('div')
-		div.innerHTML = args['title::after']
-		expect(alertHeaderEl.lastElementChild?.innerHTML).toEqual(div.innerHTML)
-	}
+    // slot title after
+    if (args['title::after']) {
+        const div = document.createElement('div')
+        div.innerHTML = args['title::after']
+        expect(alertHeaderEl.lastElementChild?.innerHTML).toEqual(div.innerHTML)
+    }
 
-	// slot footer
-	if (args.footer) {
-		const div = document.createElement('div')
-		div.innerHTML = args.footer
-		expect(alertFooterEl.firstElementChild?.innerHTML).toEqual(
-			div.innerHTML,
-		)
-	}
+    // slot footer
+    if (args.footer) {
+        const div = document.createElement('div')
+        div.innerHTML = args.footer
+        expect(alertFooterEl.firstElementChild?.innerHTML).toEqual(
+            div.innerHTML,
+        )
+    }
 
-	// check accessibility
-	await expect(element).toHaveNoViolations()
+    // check accessibility
+    await expect(element).toHaveNoViolations()
 }

package/src/stories/Alert/AlertModifiers.stories.ts

@@ -1,77 +1,77 @@
 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, type Story } from './Alert.stories'
 
 const meta: Meta<typeof VvAlert> = {
-	title: 'Components/Alert/Modifiers',
-	component: VvAlert,
-	args: defaultArgs,
-	argTypes,
+    title: 'Components/Alert/Modifiers',
+    component: VvAlert,
+    args: defaultArgs,
+    argTypes,
 }
 
 export default meta
 
 export const Notification: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['notification'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['notification'],
+    },
 }
 
 export const Callout: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['callout'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['callout'],
+    },
 }
 
 export const Info: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['info'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['info'],
+    },
 }
 
 export const Success: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['success'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['success'],
+    },
 }
 
 export const Warning: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['warning'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['warning'],
+    },
 }
 
 export const Danger: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['danger'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['danger'],
+    },
 }
 
 export const Accent: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['accent'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['accent'],
+    },
 }
 
 export const Brand: Story = {
-	...Default,
-	args: {
-		...defaultArgs,
-		modifiers: ['brand'],
-	},
+    ...Default,
+    args: {
+        ...defaultArgs,
+        modifiers: ['brand'],
+    },
 }