@volverjs/ui-vue 0.0.10-beta.60 → 0.0.10-beta.62

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

@@ -1,123 +0,0 @@
-import type { VvAlert } from '@/components'
-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',
-}
-
-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,60 +0,0 @@
-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'
-
-const meta: Meta<typeof VvAlert> = {
-    title: 'Components/Alert',
-    component: VvAlert,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-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 */ `
-			<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>
-				<template #title::after v-if="args['title::after']"><div v-html="args['title::after']"></div></template>
-				<template #default v-if="args.default"><div v-html="args.default"></div></template>
-				<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
-			</vv-alert>
-        `,
-    }),
-}
-
-export const Dismissable: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        dismissable: true,
-    },
-}
-
-export const AutoClose: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        autoClose: 8000,
-    },
-}
-
-export const Icon: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        icon: 'warning',
-    },
-}

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

@@ -1,97 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { within } from '@storybook/test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-    const element = await within(canvasElement).findByTestId('element')
-
-    expect(element).toHaveClass('vv-alert')
-
-    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]
-
-    // 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()
-    }
-
-    // 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()
-    }
-
-    // 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 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 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,
-        )
-    }
-
-    // check accessibility
-    await expect(element).toHaveNoViolations()
-}

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

@@ -1,78 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import type { Story } from './Alert.stories'
-import VvAlert from '@/components/VvAlert/VvAlert.vue'
-import { argTypes, defaultArgs } from './Alert.settings'
-import { Default } from './Alert.stories'
-
-const meta: Meta<typeof VvAlert> = {
-    title: 'Components/Alert/Modifiers',
-    component: VvAlert,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-export const Notification: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['notification'],
-    },
-}
-
-export const Callout: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['callout'],
-    },
-}
-
-export const Info: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['info'],
-    },
-}
-
-export const Success: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['success'],
-    },
-}
-
-export const Warning: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['warning'],
-    },
-}
-
-export const Danger: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['danger'],
-    },
-}
-
-export const Accent: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['accent'],
-    },
-}
-
-export const Brand: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        modifiers: ['brand'],
-    },
-}

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

@@ -1,75 +0,0 @@
-import type { Meta } from '@storybook/vue3'
-import type { Story } from './Alert.stories'
-import VvAlert from '@/components/VvAlert/VvAlert.vue'
-import { argTypes, defaultArgs } from './Alert.settings'
-import { Default as DefaultStory } from './Alert.stories'
-
-const meta: Meta<typeof VvAlert> = {
-    title: 'Components/Alert/Slots',
-    component: VvAlert,
-    args: defaultArgs,
-    argTypes,
-}
-
-export default meta
-
-export const Default: Story = {
-    ...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>',
-    },
-}
-
-export const TitleBefore: Story = {
-    ...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 */ `
-			<small class="text-smaller ml-auto">10 minutes ago</small>
-		`,
-    },
-}
-
-export const Footer: Story = {
-    ...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>
-				</button>
-				<button type="button" class="vv-button vv-button--action-quiet" id="i2YcewpfM6ZKrhx1dHDe5">
-					<span class="vv-button__label">Cancel</span>
-				</button>
-			</div>
-		`,
-    },
-}

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

@@ -1,112 +0,0 @@
-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,
-}
-
-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,50 +0,0 @@
-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'
-
-const meta: Meta<typeof VvAlertGroup> = {
-    title: 'Components/AlertGroup',
-    component: VvAlertGroup,
-    args: defaultArgs,
-    argTypes,
-    tags: ['autodocs'],
-}
-
-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 */ `
-            <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,
-    },
-}
-
-export const Reverse: Story = {
-    ...Default,
-    args: {
-        ...defaultArgs,
-        reverse: true,
-    },
-}

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

@@ -1,87 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { expect } from '@/test/expect'
-import { userEvent, within } from '@storybook/test'
-
-export async function defaultTest({ canvasElement, args }: PlayAttributes) {
-    const element = await within(canvasElement).findByTestId('element')
-    const buttons
-		= canvasElement.getElementsByClassName('buttons-container')?.[0]
-
-    expect(element).toHaveClass('vv-alert-group')
-
-    // 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(' ')
-
-    // 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')
-    }
-
-    // reverse
-    if (args.reverse) {
-        expect(element).toHaveClass('vv-alert-group--reverse')
-    }
-
-    // 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}`,
-        )
-    }
-
-    // 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 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 (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()
-}