@volverjs/ui-vue 0.0.13-beta.9 → 0.0.14

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

@@ -0,0 +1,123 @@
+import type { ArgTypes, Meta } from '@storybook/vue3-vite'
+import type { VvAlert } from '@/components'
+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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+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

@@ -0,0 +1,97 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { expect } from '@/test/expect'
+
+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

@@ -0,0 +1,78 @@
+import type { Meta } from '@storybook/vue3-vite'
+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

@@ -0,0 +1,75 @@
+import type { Meta } from '@storybook/vue3-vite'
+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

@@ -0,0 +1,112 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+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

@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+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

@@ -0,0 +1,87 @@
+import type { PlayAttributes } from '@/test/types'
+import { userEvent, within } from 'storybook/test'
+import { expect } from '@/test/expect'
+
+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()
+}