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

package/src/stories/Checkbox/Checkbox.settings.ts

@@ -0,0 +1,43 @@
+import { CheckboxRadioArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	name: 'checkbox',
+	label: 'Option',
+	value: 'my-value',
+	tabindex: 0,
+	disabled: false,
+	switch: false,
+	readonly: false,
+	invalid: false,
+	valid: false,
+	indeterminate: false,
+	uncheckedValue: undefined,
+}
+
+export const argTypes = {
+	...CheckboxRadioArgTypes,
+	indeterminate: {
+		type: 'boolean',
+		description: 'If true, the input will be indeterminated',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	uncheckedValue: {
+		description: 'Value associated with the unchecked state.',
+		control: {
+			type: 'text',
+		},
+	},
+	switch: {
+		type: 'boolean',
+		description: 'If true, the input will be displayed as a switch.',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+}

package/src/stories/Checkbox/Checkbox.stories.mdx

@@ -0,0 +1,163 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { defaultTest } from './Checkbox.test'
+
+<Meta
+	title="Components/Checkbox"
+	component={VvCheckbox}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvCheckbox },
+	setup() {
+		return { args }
+	},
+	data: () => ({ inputValue: args.uncheckedValue }),
+	template: `
+			<vv-checkbox 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-checkbox>
+			<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="Switch"
+		play={defaultTest}
+		args={{ switch: true }}
+		argTypes={{
+			switch: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Invalid"
+		play={defaultTest}
+		args={{
+			invalid: true,
+			invalidLabel: 'You must accept terms and conditions',
+			label: 'Accept terms and conditions',
+		}}
+		argTypes={{
+			invalid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Valid"
+		play={defaultTest}
+		args={{
+			valid: true,
+			validLabel: 'Thank you for accepting terms and conditions',
+			label: 'Accept terms and conditions',
+		}}
+		argTypes={{
+			valid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Indeterminate"
+		play={defaultTest}
+		args={{
+			indeterminate: true,
+		}}
+		argTypes={{
+			indeterminate: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{
+			hintLabel: 'Please accept terms and conditions',
+		}}
+		argTypes={{
+			hintLabel: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Checkbox/Checkbox.test.ts

@@ -0,0 +1,81 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/testing-library'
+
+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 input = element.getElementsByTagName('input')[0]
+	const hint = element.getElementsByClassName('vv-checkbox__hint')[0]
+
+	// unchecked value
+	if (args.uncheckedValue !== undefined) {
+		expect(value.innerHTML).toEqual(String(args.uncheckedValue))
+	}
+
+	// checked value
+	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-checkbox--disabled')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// readonly
+	if (args.readonly) {
+		await expect(element).toHaveClass('vv-checkbox--readonly')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// indeterminate
+	if (args.indeterminate) {
+		await expect(element).toHaveClass('vv-checkbox--indeterminate')
+		await expect(input).toHaveProperty('indeterminate')
+	}
+
+	// invalid
+	if (args.invalid) {
+		await expect(element).toHaveClass('vv-checkbox--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--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/Checkbox/CheckboxBinary.stories.mdx

@@ -0,0 +1,68 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultTest } from './Checkbox.test'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { Template } from './Checkbox.stories.mdx'
+
+<Meta
+	title="Components/Checkbox/Binary"
+	component={VvCheckbox}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="True / false"
+		play={defaultTest}
+		argTypes={{
+			value: {
+				...argTypes.value,
+				control: {
+					disable: true,
+				},
+			},
+			uncheckedValue: {
+				...argTypes.uncheckedValue,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			label: 'Accept terms and conditions',
+			value: true,
+			uncheckedValue: false,
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Yes / no"
+		play={defaultTest}
+		argTypes={{
+			value: {
+				...argTypes.value,
+				control: {
+					disable: true,
+				},
+			},
+			uncheckedValue: {
+				...argTypes.uncheckedValue,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			label: 'Accept terms and conditions',
+			value: 'Yes',
+			uncheckedValue: 'No',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Checkbox/CheckboxSlots.stories.mdx

@@ -0,0 +1,46 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultTest } from './Checkbox.test'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { Template } from './Checkbox.stories.mdx'
+
+<Meta
+	title="Components/Checkbox/Slots"
+	component={VvCheckbox}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		args={{ default: 'Default <em class="italic">slot!</em>' }}
+		argTypes={{
+			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/CheckboxGroup/CheckboxGroup.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/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -0,0 +1,134 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import { defaultArgs, argTypes } from './CheckboxGroup.settings'
+import { defaultTest } from './CheckboxGroup.test'
+
+<Meta
+	title="Components/CheckboxGroup"
+	component={VvCheckboxGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvCheckboxGroup },
+	setup() {
+		return { args }
+	},
+	data: () => ({ inputValue: undefined }),
+	template: `
+            <vv-checkbox-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-checkbox-group>
+            <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="Vertical"
+		play={defaultTest}
+		args={{ vertical: true }}
+		argTypes={{
+			vertical: {
+				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="Valid"
+		play={defaultTest}
+		args={{ valid: true, validLabel: 'Selected response is valid.' }}
+		argTypes={{
+			valid: {
+				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>

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()
+}