@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

package/src/stories/Accordion/Accordion.stories.ts

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { defaultTest } from './Accordion.test'
+import { defaultArgs, argTypes } from './Accordion.settings'
+
+const meta: Meta<typeof VvAccordion> = {
+	title: 'Components/Accordion',
+	component: VvAccordion,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAccordion>
+
+export const Default: Story = {
+	args: defaultArgs,
+	play: defaultTest,
+	render: (args) => ({
+		components: { VvAccordion },
+		setup() {
+			const open = ref(false)
+			return { args, open }
+		},
+		template: /* html */ `
+			<vv-accordion data-testId="element" v-bind="args" v-model="open">
+                <template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
+                <template #default v-if="args.default"><div v-html="args.default"></div></template>
+            </vv-accordion>
+            <div class="mt-24">
+                {{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
+            </div>
+    `,
+	}),
+}
+
+export const Not: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		not: true,
+	},
+}

package/src/stories/Accordion/AccordionSlots.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { Default as AccordionDefault } from './Accordion.stories'
+import { defaultArgs } from './Accordion.settings'
+
+const meta: Meta<typeof VvAccordion> = {
+	title: 'Components/Accordion/Slots',
+	component: VvAccordion,
+}
+
+export default meta
+
+type Story = StoryObj<typeof VvAccordion>
+
+export const Default: Story = {
+	...AccordionDefault,
+	args: {
+		...defaultArgs,
+		default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
+	},
+}
+
+export const Summary: Story = {
+	...AccordionDefault,
+	args: {
+		...defaultArgs,
+		summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
+	},
+}

package/src/stories/AccordionGroup/AccordionGroup.settings.ts

@@ -42,11 +42,33 @@ export const argTypes = {
 			disable: true,
 		},
 	},
+	items: {
+		description: 'Accordion group items',
+	},
+	collapse: {
+		description: 'Enables accordion group collapse',
+		control: 'boolean',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	not: {
+		description: 'Inverts the accordion group state',
+		control: 'boolean',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
 	modifiers: {
 		...ModifiersArgTypes.modifiers,
 		options: ['compact', 'bordered'],
 	},
 	itemModifiers: {
+		description: 'Accordion items BEM modifiers',
 		control: 'check',
 		options: ['marker-right', 'bordered'],
 	},

package/src/stories/AccordionGroup/AccordionGroup.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import { defaultTest } from './AccordionGroup.test'
+import { defaultArgs, argTypes } from './AccordionGroup.settings'
+
+export default {
+	title: 'Components/AccordionGroup',
+	component: VvAccordionGroup,
+	args: defaultArgs,
+	argTypes,
+	tags: ['autodocs'],
+} as Meta<typeof VvAccordionGroup>
+
+export type Story = StoryObj<typeof VvAccordionGroup>
+
+export const Default: Story = {
+	args: defaultArgs,
+	play: defaultTest,
+	render: (args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { VvAccordionGroup },
+		setup() {
+			return { args }
+		},
+		data() {
+			return {
+				selected: null,
+			}
+		},
+		template: /*html*/ `
+		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
+		<div class="mt-24">
+			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
+		</div>
+	`,
+	}),
+}
+
+export const Not: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		not: true,
+	},
+}
+
+export const Collapse: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		collapse: true,
+	},
+}
+
+export const CollapseNot: Story = {
+	...Default,
+	args: {
+		...defaultArgs,
+		collapse: true,
+		not: true,
+	},
+}

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -0,0 +1,53 @@
+import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
+import { defaultTest } from './AccordionGroup.test'
+import { defaultArgs, argTypes } from './AccordionGroup.settings'
+import meta, { type Story } from './AccordionGroup.stories'
+
+export default {
+	...meta,
+	title: 'Components/AccordionGroup/Slots',
+}
+
+export const Default: Story = {
+	args: defaultArgs,
+	argTypes: {
+		...argTypes,
+		items: {
+			control: {
+				disable: true,
+			},
+		},
+		default: {
+			...argTypes.default,
+			control: {
+				disable: true,
+			},
+		},
+	},
+	play: defaultTest,
+	render: (args) => ({
+		props: Object.keys(argTypes),
+		components: { VvAccordionGroup, VvAccordion },
+		setup() {
+			return { args }
+		},
+		data() {
+			return {
+				selected: '',
+				content:
+					'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+			}
+		},
+		template: /*html*/ `
+			<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
+				<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
+				<vv-accordion name="a-2" title="Details 2" :content="content" />
+				<vv-accordion name="a-3" title="Details 3" :content="content" />
+			</vv-accordion-group>
+			<div class="mt-24"  >
+				Opened: <span data-testId="value">{{ selected }}</span>
+			</div>
+		`,
+	}),
+}

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

@@ -0,0 +1,110 @@
+import { IconArgTypes } from '../argTypes'
+import { ModifiersArgTypes } from '../argTypes'
+
+export const defaultArgs = {
+	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',
+			},
+		},
+	},
+	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'
+import VvAlert from '@/components/VvAlert/VvAlert.vue'
+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'],
+}
+
+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,95 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+
+	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 closeButton = alertHeaderEl?.lastChild as HTMLElement
+	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(closeButton).toHaveClass('vv-alert__close')
+	}
+
+	// autoclose
+	if (args.autoClose) {
+		expect(element).toHaveClass('vv-alert--auto-close')
+		expect(closeButton).toHaveClass('vv-alert__close')
+		expect(closeButton.firstChild).toHaveClass('vv-alert__close-mask')
+	}
+
+	// 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,77 @@
+import type { Meta } from '@storybook/vue3'
+import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { defaultArgs, argTypes } from './Alert.settings'
+import { Default, type Story } 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,74 @@
+import type { Meta } from '@storybook/vue3'
+import VvAlert from '@/components/VvAlert/VvAlert.vue'
+import { defaultArgs, argTypes } 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,
+}
+
+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>
+		`,
+	},
+}