@volverjs/ui-vue 0.0.13-beta.8 → 0.0.13

package/src/stories/InputText/InputTextType.stories.ts

@@ -0,0 +1,119 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { argTypes, defaultArgs } from './InputText.settings'
+import { Default } from './InputText.stories'
+
+const meta: Meta<typeof VvInputText> = {
+    title: 'Components/InputText/Type',
+    component: VvInputText,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvInputText>
+
+export const Text: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'text',
+    },
+}
+
+export const Password: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'password',
+    },
+}
+
+export const Date: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'date',
+    },
+}
+
+export const DateTime: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'datetime-local',
+    },
+}
+
+export const Time: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'time',
+    },
+}
+
+export const Month: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'month',
+    },
+}
+
+export const Week: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'week',
+    },
+}
+
+export const Number: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'number',
+    },
+}
+
+export const Email: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'email',
+    },
+}
+
+export const Tel: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'tel',
+    },
+}
+
+export const Url: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'url',
+    },
+}
+
+export const Color: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'color',
+    },
+}
+
+export const Search: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        type: 'search',
+    },
+}

package/src/stories/Nav/Nav.settings.ts

@@ -0,0 +1,35 @@
+import type { ArgTypes, Meta } from '@storybook/vue3-vite'
+import type { VvNav } from '@/components'
+import { VvNavProps } from '@/components/VvNav'
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs: Meta<typeof VvNav>['args'] = {
+    ...propsToObject(VvNavProps),
+    items: [
+        {
+            label: 'Item 1',
+            href: 'javascript:void(0)',
+        },
+        {
+            label: 'Item 2',
+            to: 'about',
+        },
+        {
+            label: 'Item 3',
+            on: {
+                click: () => {
+                    // eslint-disable-next-line no-console
+                    console.log('clicked Item 3')
+                },
+            },
+        },
+    ],
+    modifiers: 'sidebar',
+}
+
+export const argTypes: ArgTypes = {
+    modifiers: {
+        ...ModifiersArgTypes.modifiers,
+        options: ['sidebar', 'aside', 'tabs', 'full'],
+    },
+}

package/src/stories/Nav/Nav.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { argTypes, defaultArgs } from './Nav.settings'
+import { defaultTest } from './Nav.test'
+
+const meta: Meta<typeof VvNav> = {
+    title: 'Components/Nav',
+    component: VvNav,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvNav>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvNav },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
+			<div class="m-md w-1/2">
+				<vv-nav v-bind="args" data-testId="element" />
+			</div>`,
+    }),
+    play: defaultTest,
+}

package/src/stories/Nav/Nav.test.ts

@@ -0,0 +1,19 @@
+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')
+
+    const menuEl = element.getElementsByClassName('vv-nav__menu')[0]
+
+    if (!args.items?.length) {
+        throw new Error('No items passed')
+    }
+
+    // check children number the same of items prop
+    expect(menuEl.children.length).toEqual(args.items?.length)
+
+    // check accessibility
+    await expect(element).toHaveNoViolations()
+}

package/src/stories/Nav/NavModifiers.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { argTypes, defaultArgs } from './Nav.settings'
+import { Default } from './Nav.stories'
+
+const meta: Meta<typeof VvNav> = {
+    title: 'Components/Nav/Modifiers',
+    component: VvNav,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvNav>
+
+export const Sidebar: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'sidebar',
+    },
+}
+
+export const Aside: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'aside',
+    },
+}
+
+export const Tabs: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'tabs',
+    },
+}
+
+export const TabsFull: Story = {
+    ...Default,
+    args: {
+        ...Default.args,
+        modifiers: 'tabs full',
+    },
+}

package/src/stories/Progress/Progress.settings.ts

@@ -0,0 +1,31 @@
+import type { ArgTypes } from '@storybook/vue3-vite'
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    max: undefined,
+    value: undefined,
+    label: 'Progress bar',
+}
+export const argTypes: ArgTypes = {
+    ...ModifiersArgTypes,
+    max: {
+        description:
+			'This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.',
+        control: {
+            type: 'text',
+        },
+    },
+    value: {
+        description:
+			'This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate.',
+        control: {
+            type: 'text',
+        },
+    },
+    label: {
+        description: 'Progress aria-label',
+        control: {
+            type: 'text',
+        },
+    },
+}

package/src/stories/Progress/Progress.stories.ts

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvProgress from '@/components/VvProgress/VvProgress.vue'
+import { argTypes, defaultArgs } from './Progress.settings'
+import { defaultTest } from './Progress.test'
+
+const meta: Meta<typeof VvProgress> = {
+    title: 'Components/Progress',
+    component: VvProgress,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvProgress>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvProgress },
+        setup() {
+            return { args }
+        },
+        template: /* html */ `
+			<vv-progress v-bind="args" />
+		`,
+    }),
+    play: defaultTest,
+}
+
+export const Determinate: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        max: '100',
+        value: '25',
+    },
+}

package/src/stories/Progress/Progress.test.ts

@@ -0,0 +1,9 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { expect } from '@/test/expect'
+
+export async function defaultTest({ canvasElement }: PlayAttributes) {
+    const progress = await within(canvasElement).findByRole('progressbar')
+    await expect(progress).toHaveClass('vv-progress')
+    await expect(progress).toHaveNoViolations()
+}

package/src/stories/Radio/Radio.settings.ts

@@ -0,0 +1,15 @@
+import { CheckboxRadioArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    name: 'radio',
+    label: 'Option',
+    value: 'my-value',
+    tabindex: 0,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+    valid: false,
+    indeterminate: false,
+}
+
+export const argTypes = CheckboxRadioArgTypes

package/src/stories/Radio/Radio.stories.ts

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { argTypes, defaultArgs } from './Radio.settings'
+import { defaultTest } from './Radio.test'
+
+const meta: Meta<typeof VvRadio> = {
+    title: 'Components/Radio',
+    component: VvRadio,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadio>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvRadio },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
+			<vv-radio v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #default v-if="args.default"><span v-html="args.default"></span></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-radio>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+		`,
+    }),
+    play: defaultTest,
+}
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
+}
+
+export const Readonly: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
+}
+
+export const Invalid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'You must accept terms and conditions',
+        label: 'Accept terms and conditions',
+    },
+}
+
+export const Valid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'Thank you for accepting terms and conditions',
+        label: 'Accept terms and conditions',
+    },
+}
+
+export const Hint: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please accept terms and conditions',
+    },
+}

package/src/stories/Radio/Radio.test.ts

@@ -0,0 +1,66 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from 'storybook/test'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+    const element = await within(canvasElement).findByTestId('element')
+    const value = await within(canvasElement).findByTestId('value')
+    const input = element.getElementsByTagName('input')[0]
+    const hint = element.getElementsByClassName('vv-radio__hint')[0]
+
+    // click
+    if (!args.invalid && !args.indeterminate) {
+        element.addEventListener('click', async () => {
+            await sleep()
+            if (!args.disabled && !args.readonly) {
+                expect(value.innerHTML).toEqual(String(args.value))
+            }
+        })
+        if (args.disabled || args.readonly) {
+            await expect(input).not.toBeChecked()
+        } else {
+            await expect(input).toBeChecked()
+        }
+    }
+
+    // disabled
+    if (args.disabled) {
+        await expect(element).toHaveClass('vv-radio--disabled')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
+
+    // readonly
+    if (args.readonly) {
+        await expect(element).toHaveClass('vv-radio--readonly')
+        await expect(input).toHaveProperty('disabled')
+        await expect(input).not.toBeChecked()
+    }
+
+    // invalid
+    if (args.invalid) {
+        await expect(element).toHaveClass('vv-radio--invalid')
+        await expect(input).toHaveProperty('ariaInvalid')
+        if (args.invalidLabel) {
+            await expect(hint.innerHTML).toEqual(args.invalidLabel)
+        }
+    }
+
+    // valid
+    if (args.valid) {
+        await expect(element).toHaveClass('vv-radio--valid')
+        await expect(input).toHaveProperty('ariaInvalid', 'false')
+        if (args.validLabel) {
+            await expect(hint.innerHTML).toEqual(args.validLabel)
+        }
+    }
+
+    // hint
+    if (args.hintLabel) {
+        await expect(hint.innerHTML).toEqual(args.hintLabel)
+    }
+
+    // check accessibility
+    await expect(element).toHaveNoViolations()
+}

package/src/stories/Radio/RadioSlots.stories.ts

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { argTypes, defaultArgs } from './Radio.settings'
+import { Default as DefaultStory } from './Radio.stories'
+
+const meta: Meta<typeof VvRadio> = {
+    title: 'Components/Radio/Slots',
+    component: VvRadio,
+    args: defaultArgs,
+    argTypes,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadio>
+
+export const Default: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        default: 'DefaultStory <em class="italic">slot!</em>',
+    },
+}
+
+export const HintSlot: Story = {
+    ...DefaultStory,
+    args: {
+        ...DefaultStory.args,
+        hint: 'Hint <em class="italic">slot!</em>',
+    },
+}

package/src/stories/RadioGroup/RadioGroup.settings.ts

@@ -0,0 +1,15 @@
+import { CheckboxRadioGroupArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+    name: 'checkbox-group',
+    label: 'Select an option',
+    options: ['Option 1', 'Option 2', 'Option 3'],
+    disabled: false,
+    readonly: false,
+    vertical: false,
+    invalid: false,
+    valid: false,
+    tabindex: 0,
+}
+
+export const argTypes = CheckboxRadioGroupArgTypes

package/src/stories/RadioGroup/RadioGroup.stories.ts

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import { argTypes, defaultArgs } from './RadioGroup.settings'
+import { defaultTest } from './RadioGroup.test'
+
+const meta: Meta<typeof VvRadioGroup> = {
+    title: 'Components/RadioGroup',
+    component: VvRadioGroup,
+    args: defaultArgs,
+    argTypes,
+    tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvRadioGroup>
+
+export const Default: Story = {
+    args: {
+        ...defaultArgs,
+    },
+    render: args => ({
+        components: { VvRadioGroup },
+        setup() {
+            return { args }
+        },
+        data: () => ({ inputValue: undefined }),
+        template: /* html */ `
+			<vv-radio-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #default v-if="args.default"><span v-html="args.default"></span></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-radio-group>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+		`,
+    }),
+    play: defaultTest,
+}
+
+export const Disabled: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        disabled: true,
+    },
+}
+
+export const Readonly: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        readonly: true,
+    },
+}
+
+export const Vertical: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        vertical: true,
+    },
+}
+
+export const Invalid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        invalid: true,
+        invalidLabel: 'This field is required.',
+    },
+}
+
+export const Valid: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        valid: true,
+        validLabel: 'Selected response is valid.',
+    },
+}
+
+export const Hint: Story = {
+    ...Default,
+    args: {
+        ...defaultArgs,
+        hintLabel: 'Please fill the input above.',
+    },
+}