@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/src/stories/CheckboxGroup/CheckboxGroup.test.ts

@@ -0,0 +1,83 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/testing-library'
+import { getOptionValue } from '@/test/options'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+	const value = (await within(canvasElement).findByTestId(
+		'value',
+	)) as HTMLElement
+	const checkbox = element.getElementsByClassName('vv-checkbox')[0]
+	const input = checkbox.getElementsByTagName('input')[0]
+	const hint = element.getElementsByClassName('vv-checkbox-group__hint')[0]
+
+	// unchecked value
+	if (args.uncheckedValue !== undefined) {
+		expect(value.innerHTML).toEqual(String(args.uncheckedValue))
+	}
+
+	// checked value
+	if (
+		!args.invalid &&
+		!args.disabled &&
+		!args.readonly &&
+		args.options &&
+		args.options.length > 0
+	) {
+		checkbox.addEventListener('click', async () => {
+			await sleep()
+			const firstValue = getOptionValue(args, 0)
+			expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
+		})
+		await expect(input).toBeChecked()
+	}
+
+	// disabled
+	if (args.disabled) {
+		await expect(element).toHaveClass('vv-checkbox-group--disabled')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// readonly
+	if (args.readonly) {
+		await expect(element).toHaveClass('vv-checkbox-group--readonly')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// vertical
+	if (!args.vertical) {
+		await expect(element).toHaveClass('vv-checkbox-group--horizontal')
+	}
+
+	// invalid
+	if (args.invalid) {
+		await expect(element).toHaveClass('vv-checkbox-group--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-checkbox-group--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/CheckboxGroup/CheckboxGroupOptions.stories.mdx

@@ -0,0 +1,100 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import { Template } from './CheckboxGroup.stories.mdx'
+import { defaultArgs, argTypes } from './CheckboxGroup.settings'
+import { defaultTest } from './CheckboxGroup.test'
+
+<Meta
+	title="Components/CheckboxGroup/Options"
+	component={VvCheckboxGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Array of Objects"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			options: [
+				{ value: 'first', label: 'First' },
+				{ value: 'second', label: 'Second' },
+				{ value: 'third', label: 'Third' },
+			],
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Option label key"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			labelKey: 'name',
+			options: [
+				{ value: 'first', name: 'First' },
+				{ value: 'second', name: 'Second' },
+				{ value: 'third', name: 'Third' },
+			],
+		}}
+		argTypes={{
+			labelKey: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Option value key"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			valueKey: 'id',
+			options: [
+				{ id: 'first', label: 'First' },
+				{ id: 'second', label: 'Second' },
+				{ id: 'third', label: 'Third' },
+			],
+		}}
+		argTypes={{
+			options: {
+				valueKey: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupSlots.stories.mdx

@@ -0,0 +1,67 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultArgs, argTypes } from './CheckboxGroup.settings'
+import { defaultTest } from './CheckboxGroup.test'
+
+<Meta
+	title="Components/CheckboxGroup/Slots"
+	component={VvCheckboxGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvCheckboxGroup, VvCheckbox },
+	setup() {
+		return { args }
+	},
+	data: () => ({ inputValue: undefined }),
+	template: `
+           <vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+				<vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+				<vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-checkbox-group>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div>
+        `,
+})
+
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				control: {
+					disable: true,
+				},
+			},
+			default: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{ hint: 'Hint <em class="italic">slot!</em>' }}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Combobox/Combobox.settings.ts

@@ -0,0 +1,127 @@
+import {
+	ValidArgTypes,
+	InvalidArgTypes,
+	HintArgTypes,
+	LoadingArgTypes,
+	DisabledArgTypes,
+	ReadonlyArgTypes,
+	ModifiersArgTypes,
+	OptionsArgTypes,
+	IconArgTypes,
+	TabindexArgTypes,
+	FloatingArgTypes,
+	UnselectableArgTypes,
+} from '@/stories/argTypes'
+import { VvComboboxProps } from '@/components/VvCombobox'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+export const defaultArgs = {
+	...propsToObject(VvComboboxProps),
+	name: 'vv-combobox',
+	maxValues: undefined,
+	options: ['Option 1', 'Option 2', 'Option 3'],
+	placeholder: 'Select an option',
+	label: 'Combobox label',
+}
+export const argTypes = {
+	...TabindexArgTypes,
+	...ValidArgTypes,
+	...InvalidArgTypes,
+	...HintArgTypes,
+	...LoadingArgTypes,
+	...DisabledArgTypes,
+	...ReadonlyArgTypes,
+	...ModifiersArgTypes,
+	...OptionsArgTypes,
+	...IconArgTypes,
+	...FloatingArgTypes,
+	...UnselectableArgTypes,
+	multiple: {
+		type: 'boolean',
+		description:
+			' This Boolean attribute indicates that multiple options can be selected in the list.',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	label: {
+		type: 'string',
+		description: '<label> value for the combobox',
+		control: {
+			type: 'text',
+		},
+	},
+	labelNoResults: {
+		type: 'string',
+		description: 'Label of "no results" options',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'No results',
+			},
+		},
+	},
+	placeholder: {
+		type: 'string',
+		description: 'Text that appears when it has no value set.',
+		control: {
+			type: 'text',
+		},
+	},
+	searchable: {
+		type: 'boolean',
+		description: 'Enable search in options',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	searchPlaceholder: {
+		type: 'string',
+		description:
+			'Text that appears in the in the search input when it has no value set..',
+		control: {
+			type: 'text',
+		},
+	},
+	debounceSearch: {
+		type: 'number',
+		description: 'Debounce milliseconds for search',
+		control: {
+			type: 'number',
+		},
+	},
+	maxValues: {
+		description: 'Max number of selected values',
+		type: ['number', 'string'],
+		control: {
+			type: 'text',
+		},
+	},
+	separator: {
+		type: 'string',
+		description: 'Separator of selected values',
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: ', ',
+			},
+		},
+	},
+	native: {
+		type: 'boolean',
+		description: 'Show native select',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+}

package/src/stories/Combobox/Combobox.stories.mdx

@@ -0,0 +1,204 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCombobox from '@/components/VvCombobox/VvCombobox.vue'
+import { defaultTest } from './Combobox.test'
+import { defaultArgs, argTypes } from './Combobox.settings'
+
+<Meta
+	title="Components/Combobox"
+	component={VvCombobox}
+    args={defaultArgs}
+	argTypes={argTypes}
+
+/>
+
+export const Template = (args) => ({
+	components: { VvCombobox },
+	setup() {
+		return { args }
+	},
+	data() {
+		return {
+			inputValue: undefined,
+		}
+	},
+	template: `
+		<vv-combobox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<template #before v-if="args.before"><div class="pr-sm flex" v-html="args.before"></div></template>
+			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			<template #after v-if="args.after"><div class="pl-sm flex" v-html="args.after"></div></template>
+		</vv-combobox>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+		`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Disabled"
+		play={defaultTest}
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Readonly"
+		play={defaultTest}
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Unselectable"
+		play={defaultTest}
+		args={{ unselectable: false }}
+		argTypes={{
+			unselectable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Valid"
+		play={defaultTest}
+		args={{ valid: true, validLabel: 'Selected response is valid.' }}
+		argTypes={{
+			valid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Invalid"
+		play={defaultTest}
+		args={{ invalid: true, invalidLabel: 'This field is required.' }}
+		argTypes={{
+			invalid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{ hintLabel: 'Please fill the input above.' }}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Loading"
+		args={{
+			loading: true,
+			loadingLabel: 'Loading...',
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Searchable"
+		play={defaultTest}
+		args={{ searchable: true, searchPlaceholder: 'Search...' }}
+		argTypes={{
+			searchable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Floating"
+		play={defaultTest}
+		args={{ floating: true }}
+		argTypes={{
+			floating: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Native"
+		play={defaultTest}
+		args={{ native: true }}
+		argTypes={{
+			native: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Combobox/Combobox.test.ts

@@ -0,0 +1,103 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within } from '@storybook/testing-library'
+import { sleep } from '@/test/sleep'
+import { getOptionValue } from '@/test/options'
+import { defaultTest as selectDefaultTest } from '@/stories/Select/Select.test'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	// native
+	if (args.native) {
+		await selectDefaultTest({ canvasElement, args })
+		return
+	}
+
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+	const value = (await within(canvasElement).findByTestId(
+		'value',
+	)) as HTMLElement
+	const dropdown = element.getElementsByClassName(
+		'vv-dropdown',
+	)[0] as HTMLElement
+	const dropdownFirstItem = dropdown.getElementsByTagName(
+		'label',
+	)[0] as HTMLElement
+	const dropdownSecondItem = dropdown.getElementsByTagName(
+		'label',
+	)[1] as HTMLElement
+	const hint = element.getElementsByClassName('vv-select__hint')[0]
+
+	// disabled
+	if (args.disabled) {
+		await expect(element).toHaveClass('vv-select--disabled')
+	}
+
+	// readonly
+	if (args.readonly) {
+		await expect(element).toHaveClass('vv-select--readonly')
+	}
+
+	if (
+		!args.invalid &&
+		!args.disabled &&
+		!args.readonly &&
+		args.options &&
+		args.options.length > 0
+	) {
+		// select first value
+		await expect(dropdownFirstItem).toBeClicked()
+		await sleep()
+		const firstValue = getOptionValue(args, 0)
+		if (args.multiple) {
+			await expect(JSON.parse(value.innerHTML)).toEqual([firstValue])
+		} else {
+			await expect(value.innerHTML).toEqual(firstValue)
+		}
+
+		// select second value
+		if (args.options.length > 1) {
+			await expect(dropdownSecondItem).toBeClicked()
+			await sleep()
+			const secondValue = getOptionValue(args, 1)
+			if (args.multiple) {
+				await expect(JSON.parse(value.innerHTML)).toEqual([
+					firstValue,
+					secondValue,
+				])
+			} else {
+				await expect(value.innerHTML).toEqual(secondValue)
+			}
+		}
+	}
+
+	// invalid
+	if (args.invalid) {
+		await expect(element).toHaveClass('vv-select--invalid')
+		if (args.invalidLabel) {
+			await expect(hint.innerHTML).toEqual(args.invalidLabel)
+		}
+	}
+
+	// valid
+	if (args.valid) {
+		await expect(element).toHaveClass('vv-select--valid')
+		if (args.validLabel) {
+			await expect(hint.innerHTML).toEqual(args.validLabel)
+		}
+	}
+
+	// loading
+	if (args.loading) {
+		await expect(element).toHaveClass('vv-select--loading')
+	}
+
+	// hint
+	if (args.hintLabel) {
+		await expect(hint.innerHTML).toEqual(args.hintLabel)
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}