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

package/src/stories/Radio/Radio.stories.mdx

@@ -1,67 +1,127 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { defaultArgs, argTypes } from './Radio.settings'
+import { defaultTest } from './Radio.test'
 
 <Meta
-	title="Components/RadioButton"
-	argTypes={{
-		onClick: { action: 'click', table: { disable: true } },
-		onChange: { action: 'change', table: { disable: true } },
-		onFocus: { action: 'focus', table: { disable: true } },
-		onBlur: { action: 'blur', table: { disable: true } }
-	}}
+	title="Components/Radio"
 	component={VvRadio}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
+export const Template = (args) => ({
 	components: { VvRadio },
 	setup() {
 		return { args }
 	},
-	data: () => ({ ckValue: args.modelValue }),
+	data: () => ({ inputValue: undefined }),
 	template: `
-        <div class="flex flex-row justify-between">
-			<vv-radio v-bind="args" v-model:modelValue="ckValue"/>
-			<strong >Valore selez: {{ckValue}} </strong> 
-		</div>
-        `
+		<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> 
+	`,
 })
 
-# VvRadio
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-A radio allows the user to select one option.
+<Canvas>
+	<Story
+		name="Disabled"
+		play={defaultTest}
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-<Source language="jsx" code={'<vv-radio/>'} />
+<Canvas>
+	<Story
+		name="Readonly"
+		play={defaultTest}
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
 	<Story
-		name="vv-radio"
+		name="Invalid"
+		play={defaultTest}
 		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'o1',
-			disabled: false,
-			modelValue: null,
-			value: { a: 1 }
+			invalid: true,
+			invalidLabel: 'You must accept terms and conditions',
+			label: 'Accept terms and conditions',
 		}}
 		argTypes={{
-			id: {
-				description: 'Id input element.',
-				table: { category: 'Attributes' }
+			invalid: {
+				control: {
+					disable: true,
+				},
 			},
-			name: {
-				description: 'Nome input element',
-				table: { category: 'Attributes' }
+		}}
+	>
+		{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,
+				},
 			},
-			value: {
-				description: 'Valore input element',
-				table: { category: 'Attributes' }
-			}
-		}}>
-		{Template.bind({})}
+		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<ArgsTable story="vv-radio" />
+<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/Radio/Radio.test.ts

@@ -0,0 +1,70 @@
+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-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.mdx

@@ -1,29 +1,46 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { defaultTest } from './Radio.test'
+import { defaultArgs, argTypes } from './Radio.settings'
+import { Template } from './Radio.stories.mdx'
 
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-<Meta title="Components/RadioButton/Slots" component={VvRadio} />
-
-# Slot default
-
-Slot default define the content of RadioButton
-
-<Source
-	language="jsx"
-	code={'<vv-radio name="r1" value="1">My content</vv-radio>'}
+<Meta
+	title="Components/Radio/Slots"
+	component={VvRadio}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 <Canvas>
-	<Story name="default">
-		{() => {
-			return {
-				components: { VvRadio },
-				template: `
-					<vv-radio name="r1" value="1">
-						My content
-					</vv-radio>
-                    `
-			}
+	<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/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.mdx

@@ -1,73 +1,134 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import { defaultArgs, argTypes } from './RadioGroup.settings'
+import { defaultTest } from './RadioGroup.test'
 
-import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
+<Meta
+	title="Components/RadioGroup"
+	component={VvRadioGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-import { radioGroupTest } from './RadioPropertyTest.js'
-
-<Meta title="Components/RadioGroup" component={VvRadioGroup} />
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvRadioGroup, VvRadio },
+export const Template = (args) => ({
+	components: { VvRadioGroup },
 	setup() {
 		return { args }
 	},
-	data: () => ({ selected: args.modelValue || null }),
+	data: () => ({ inputValue: undefined }),
 	template: `
-		<div class="flex flex-row justify-between">
-            <vv-radio-group v-bind="args" v-model:modelValue="selected">
-                <template v-slot:hint>
-                    <p>Ciao sono un hint di default. Piacere.</p>
-                </template> 
+            <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>
-            <strong v-if="selected">Selezione: {{selected}} </strong> 
-        </div>
-        `
+            <div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+        `,
 })
 
-# VvRadioGroup
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-A group of radios.
+<Canvas>
+	<Story
+		name="Disabled"
+		play={defaultTest}
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-<Source language="jsx" code={'<vv-radio-group>...</vv-radio-group>'} />
+<Canvas>
+	<Story
+		name="Readonly"
+		play={defaultTest}
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
 	<Story
-		name="vv-radio-group"
-		play={radioGroupTest}
-		args={{
-			name: 'story1',
-			label: 'Prova',
-			vertical: false,
-			disabled: false,
-			readonly: false,
-			options: [],
-			optionLabel: 'label',
-			optionValue: 'value',
-			hintLabel: 'Ciccio',
-			role: 'radiogroup'
-		}}>
-		{(args) => {
-			return {
-				components: { VvRadioGroup, VvRadio },
-				data: () => ({ selected: args.modelValue || null }),
-				setup() {
-					return { args }
+		name="Vertical"
+		play={defaultTest}
+		args={{ vertical: true }}
+		argTypes={{
+			vertical: {
+				control: {
+					disable: true,
 				},
-				template: `
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected">
-                            <vv-radio id="o1" name="opts" value="1">Opt 1</vv-radio>
-                            <vv-radio id="o2" name="opts" value="2">Opt 2</vv-radio>
-                            <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
-                    `
-			}
+			},
 		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<ArgsTable of={VvCheckGroup} />
+<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/RadioGroup/RadioGroup.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 radio = element.getElementsByClassName('vv-radio')[0]
+	const input = radio.getElementsByTagName('input')[0]
+	const hint = element.getElementsByClassName('vv-radio-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
+	) {
+		radio.addEventListener('click', async () => {
+			await sleep()
+			const firstValue = getOptionValue(args, 0)
+			expect(value.innerHTML).toEqual(firstValue)
+		})
+		await expect(input).toBeChecked()
+	}
+
+	// disabled
+	if (args.disabled) {
+		await expect(element).toHaveClass('vv-radio-group--disabled')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// readonly
+	if (args.readonly) {
+		await expect(element).toHaveClass('vv-radio-group--readonly')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// vertical
+	if (!args.vertical) {
+		await expect(element).toHaveClass('vv-radio-group--horizontal')
+	}
+
+	// invalid
+	if (args.invalid) {
+		await expect(element).toHaveClass('vv-radio-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-radio-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()
+}