@volverjs/ui-vue 0.0.1-beta.12 → 0.0.1-beta.16

package/src/stories/NativeSelect/NativeSelectOptions.stories.mdx

@@ -1,5 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
+import { Template } from './NativeSelect.stories.mdx'
+import { optionsTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/options" />
 
@@ -32,47 +34,51 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 />
 
 <Canvas>
-	<Story name="options">
-		{() => {
-			return {
-				components: { VvNativeSelect },
-				data() {
-					return {
-						value: '',
-						objectValue: '',
-						options: ['Option 4', 'Option 5', 'Option 6'],
-						optionsObject: [
-							{
-								label: 'Option 1',
-								value: 1
-							},
-							{
-								label: 'Option 2',
-								value: 2
-							},
-							{
-								label: 'Option 3',
-								value: 3
-							}
-						]
-					}
+	<Story
+		name="optionsArray"
+		play={optionsTest}
+		args={{
+			name: 'select-1',
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			value: '',
+			options: ['Option 1', 'Option 2', 'Option 3'],
+			'data-testid': 'native-select'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="optionsObject"
+		play={optionsTest}
+		args={{
+			name: 'select-2',
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			value: '',
+			options: [
+				{
+					label: 'Option 1',
+					value: 1
+				},
+				{
+					label: 'Option 2',
+					value: 2
 				},
-				template: `<div class="flex gap-32">
-						<div class="w-1/2">
-							<vv-native-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />
-							value: {{ value }}
-						</div>
-						<div class="w-1/2">
-							<vv-native-select v-model:modelValue="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
-							value: {{ objectValue }}
-						</div>
-					</div>`
-			}
-		}}
+				{
+					label: 'Option 3',
+					value: 3
+				}
+			],
+			'data-testid': 'native-select'
+		}}>
+		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Source
 	language="html"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
+	code={`<vv-native-select v-model="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
 />

package/src/stories/NativeSelect/NativeSelectReadonly.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
 import { Template } from './NativeSelect.stories.mdx'
+import { readonlyTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/readonly" />
 
@@ -9,15 +10,22 @@ import { Template } from './NativeSelect.stories.mdx'
 Let's define a story for our `readonly` select.
 
 <Canvas>
-	<Story
-		name="readonly"
-		args={{
-			label: 'Lorem Ipsum',
-			placeholder: 'Placeholder',
-			options: ['Option 1', 'Option 2', 'Option 3'],
-			readonly: true
-		}}>
-		{Template.bind({})}
+	<Story name="readonly" play={readonlyTest}>
+		{() => {
+			return {
+				components: { VvNativeSelect },
+				data() {
+					return {
+						value: 'Option 1',
+						options: ['Option 1', 'Option 2', 'Option 3']
+					}
+				},
+				template: `
+					<vv-native-select data-testid="native-select" placeholder="Select option" name="select" v-model="value" :options="options" label="Readonly" readonly />
+					<div>Value : {{ value }}</div>
+				`
+			}
+		}}
 	</Story>
 </Canvas>
 
@@ -25,7 +33,7 @@ Let's define a story for our `readonly` select.
 	language="html"
 	code={`
 <vv-select
-	v-model:modelValue="value"
+	v-model="value"
 	:options="options"
 	placeholder="Placeholder"
 	label="Label 1"

package/src/stories/NativeSelect/NativeSelectUseObject.stories.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
+import { Template } from './NativeSelect.stories.mdx'
 
 <Meta title="Components/NativeSelect/Props/useObject" />
 
@@ -28,39 +29,34 @@ Options object array and default `valueKey` ("value") and `labelKey` ("label"):
 />
 
 <Canvas>
-	<Story name="useObject">
-		{() => {
-			return {
-				components: { VvNativeSelect },
-				data() {
-					return {
-						value: '',
-						options: [
-							{
-								label: 'Option 1',
-								value: 1
-							},
-							{
-								label: 'Option 2',
-								value: 2
-							},
-							{
-								label: 'Option 3',
-								value: 3
-							}
-						]
-					}
+	<Story
+		name="useObject"
+		args={{
+			name: 'select',
+			value: '',
+			label: 'label',
+			placeholder: 'placeholder',
+			options: [
+				{
+					label: 'Option 1',
+					value: 1
 				},
-				template: `<div class="w-1/2">
-						<vv-native-select v-model:modelValue="value" :options="options" label="Label 1" use-object />
-						value: {{ value }}
-					</div>`
-			}
-		}}
+				{
+					label: 'Option 2',
+					value: 2
+				},
+				{
+					label: 'Option 3',
+					value: 3
+				}
+			],
+			'use-object': true
+		}}>
+		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Source
 	language="html"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" label="Label 1" use-object />`}
+	code={`<vv-native-select v-model="value" :options="options" label="Label 1" use-object />`}
 />

package/src/stories/NativeSelect/NativeSelectValid.stories.mdx

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
 import { Template } from './NativeSelect.stories.mdx'
+import { validTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/valid" />
 
@@ -11,12 +12,15 @@ Let's define a story for our `valid` and `valid-label` select.
 <Canvas>
 	<Story
 		name="valid"
+		play={validTest}
 		args={{
+			name: 'select',
 			label: 'Lorem Ipsum',
 			placeholder: 'Placeholder',
 			options: ['Option 1', 'Option 2', 'Option 3'],
 			valid: true,
-			validLabel: 'The field is correct!'
+			validLabel: 'The field is correct!',
+			'data-testid': 'native-select'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -26,7 +30,7 @@ Let's define a story for our `valid` and `valid-label` select.
 	language="html"
 	code={`
 <vv-select
-	v-model:modelValue="value"
+	v-model="value"
 	:options="options"
 	placeholder="Placeholder"
 	label="Label 1"

package/src/stories/NativeSelect/NativeSelectValueKey.stories.mdx

@@ -1,5 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import VvNativeSelect from '@/components/VvNativeSelect/VvNativeSelect.vue'
+import { Template } from './NativeSelect.stories.mdx'
+import { customKeysTest } from './NativeSelect.test'
 
 <Meta title="Components/NativeSelect/Props/value-key_label-key" />
 
@@ -28,39 +30,37 @@ Options object array with custom `valueKey` ("val") and custom `labelKey` ("titl
 />
 
 <Canvas>
-	<Story name="value-key_label-key">
-		{() => {
-			return {
-				components: { VvNativeSelect },
-				data() {
-					return {
-						value: '',
-						options: [
-							{
-								title: 'Option 1',
-								val: 1
-							},
-							{
-								title: 'Option 2',
-								val: 2
-							},
-							{
-								title: 'Option 3',
-								val: 3
-							}
-						]
-					}
+	<Story
+		name="value-key_label-key"
+		play={customKeysTest}
+		args={{
+			name: 'select',
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			value: '',
+			options: [
+				{
+					title: 'Option 1',
+					val: 1
 				},
-				template: `<div class="w-1/2">
-						<vv-native-select v-model:modelValue="value" :options="options" value-key="val" label-key="title" />
-						value: {{ value }}
-					</div>`
-			}
-		}}
+				{
+					title: 'Option 2',
+					val: 2
+				},
+				{
+					title: 'Option 3',
+					val: 3
+				}
+			],
+			'value-key': 'val',
+			'label-key': 'title',
+			'data-testid': 'native-select'
+		}}>
+		{Template.bind({})}
 	</Story>
 </Canvas>
 
 <Source
 	language="jsx"
-	code={`<vv-native-select v-model:modelValue="value" :options="options" value-key="val" label-key="title" />`}
+	code={`<vv-native-select v-model="value" :options="options" value-key="val" label-key="title" />`}
 />

package/src/stories/Progress/Progress.stories.mdx

@@ -1,23 +1,20 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvProgress from '../../components/VvProgress/VvProgress.vue'
-import { progressTest, indeterminateTest } from './ProgressTest.js'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvProgressProps } from '../../components/VvProgress/VvProgress'
+import VvProgress from '@/components/VvProgress/VvProgress.vue'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { VvProgressProps } from '@/components/VvProgress'
+import { progressTest, indeterminateTest } from './Progress.test'
 
 <Meta
 	title="Components/Progress"
 	component={VvProgress}
 	args={{
-		...ObjectUtilities.propsToObject(VvProgressProps)
+		...propsToObject(VvProgressProps)
 	}}
 	argTypes={{
 		value: {
-			defaultValue: 30
-		},
-		max: {
-			defaultValue: 100
-		},
-		determinate: false
+			defaultValue: undefined,
+			control: { type: 'number', min: 0, max: 1, step: 0.1 }
+		}
 	}}
 />
 

package/src/stories/Progress/{ProgressTest.js → Progress.test.js}

@@ -1,17 +1,16 @@
-import { expect } from '@storybook/jest'
+import { expect } from '@/test/expect'
 import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
 
 async function progressTest({ canvasElement }) {
 	const progress = await within(canvasElement).findByRole('progressbar')
 	expect(progress).toHaveClass('vv-progress')
-	await accessibilityTest(progress)
+	await expect(progress).toHaveNoViolations()
 }
 
 async function indeterminateTest({ canvasElement }) {
 	const progress = await within(canvasElement).findByRole('progressbar')
 	await classTest(progress, ['vv-progress', 'vv-progress--indeterminate'])
-	await accessibilityTest(progress)
+	await expect(progress).toHaveNoViolations()
 }
 
 async function classTest(progress, classNames = []) {
@@ -20,9 +19,4 @@ async function classTest(progress, classNames = []) {
 	})
 }
 
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
-}
-
-export { progressTest, indeterminateTest, classTest, accessibilityTest }
+export { progressTest, indeterminateTest, classTest }

package/src/stories/Progress/ProgressDeterminate.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvProgress from '../../components/VvProgress/VvProgress.vue'
+import VvProgress from '@/components/VvProgress/VvProgress.vue'
 import { Template } from './Progress.stories.mdx'
 
 <Meta title="Components/Progress/Props" component={VvProgress} />
@@ -9,11 +9,8 @@ import { Template } from './Progress.stories.mdx'
 Stories of `VvProgress`.
 Let's define a story for our `determinate` progress with `max` and `value`:
 
-<Story name="determinate" args={{ determinate: true, max: '100', value: '25' }}>
+<Story name="determinate" args={{ determinate: true, max: 100, value: 25 }}>
 	{Template.bind({})}
 </Story>
 
-<Source
-	language="html"
-	code={`<vv-progress max="100" value="25" determinate />`}
-/>
+<Source language="html" code={`<vv-progress max="100" value="25" />`} />

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

@@ -1,10 +1,10 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { radioTest } from './Radio.test'
 
 <Meta
-	title="Components/RadioButton"
+	title="Components/Radio"
 	argTypes={{
 		onClick: { action: 'click', table: { disable: true } },
 		onChange: { action: 'change', table: { disable: true } },
@@ -21,42 +21,36 @@ export const Template = (args, { argTypes }) => ({
 		return { args }
 	},
 	data: () => ({ ckValue: args.modelValue }),
-	template: `
-        <div class="flex flex-row justify-between">
-			<vv-radio v-bind="args" v-model:modelValue="ckValue"/>
-			<strong >Valore selez: {{ckValue}} </strong> 
-		</div>
-        `
+	template: `<vv-radio v-bind="args" v-model="ckValue"/><div>Selected value: {{ckValue}}</div>`
 })
 
 # VvRadio
 
 A radio allows the user to select one option.
 
-<Source language="jsx" code={'<vv-radio/>'} />
+<Source language="jsx" code={'<vv-radio label="option" :value="{ a: 1 }" />'} />
 
 <Canvas>
 	<Story
 		name="vv-radio"
+		play={radioTest}
 		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'o1',
+			label: 'Option',
+			name: 'radio',
 			disabled: false,
-			modelValue: null,
 			value: { a: 1 }
 		}}
 		argTypes={{
 			id: {
-				description: 'Id input element.',
+				description: 'Input id',
 				table: { category: 'Attributes' }
 			},
 			name: {
-				description: 'Nome input element',
+				description: 'Input name',
 				table: { category: 'Attributes' }
 			},
 			value: {
-				description: 'Valore input element',
+				description: 'Input value',
 				table: { category: 'Attributes' }
 			}
 		}}>

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

@@ -0,0 +1,52 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { expect } from '@/test/expect'
+
+export async function radioTest(
+	data: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		slotContent = null
+	}: ComponentConfig = {}
+) {
+	const radio =
+		(document.getElementById(data.args.id) as HTMLInputElement) ||
+		(document.getElementsByClassName(
+			'vv-radio__input'
+		)[0] as HTMLInputElement)
+
+	expect(radio).toHaveClass('vv-radio__input')
+	className && expect(radio).toHaveClass(className)
+
+	if (isClickDisabled) {
+		await expect(radio).not.toBeClicked()
+	} else {
+		await expect(radio).toBeClicked()
+		expect(radio.checked).toBe(true)
+	}
+	data.args.name && expect(radio.name).toEqual(data.args.name)
+	const label = radio.parentElement
+	expect(label).toHaveClass('vv-radio')
+	expect(label?.innerText).toEqual(
+		slotContent ? slotContent : data.args.label
+	)
+	data.args.error && expect(label).toHaveClass('vv-radio--invalid')
+	expect(radio && label).toHaveNoViolations()
+}
+
+export async function hintLabelTest(data: PlayAttributes) {
+	const label = document.getElementsByClassName('vv-radio')[0] as HTMLElement
+	const propLabel: string | string[] =
+		data.args.hintLabel || data.args.errorLabel
+	const hintLabel = label.lastElementChild as HTMLElement
+	expect(hintLabel).toHaveClass('vv-radio__hint')
+	// test hint label based on his type
+	if (typeof propLabel == 'string') {
+		expect(hintLabel.innerText).toEqual(propLabel)
+	}
+	if (Array.isArray(propLabel)) {
+		propLabel.forEach((label) => {
+			expect(hintLabel.innerHTML).toContain(label)
+		})
+	}
+}

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

@@ -1,12 +1,10 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './Radio.stories.mdx'
 
 <Meta
-	title="Components/RadioButton/Disabled"
+	title="Components/Radio/Disabled"
 	args={{
 		modelValue: null
 	}}
@@ -19,9 +17,8 @@ import { Template } from './Radio.stories.mdx'
 	<Story
 		name="Disabled"
 		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'ck1',
+			label: 'Option',
+			name: 'radio-disabled',
 			disabled: true,
 			value: 1
 		}}>

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

@@ -1,12 +1,10 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './Radio.stories.mdx'
 
 <Meta
-	title="Components/RadioButton/Error"
+	title="Components/Radio/Error"
 	args={{
 		modelValue: null
 	}}
@@ -15,32 +13,15 @@ import { Template } from './Radio.stories.mdx'
 
 # Error
 
-<Canvas>
-	<Story
-		name="Invalid"
-		args={{
-			id: 6,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck6',
-			modelValue: false,
-			error: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Error with message
-
 <Canvas>
 	<Story
 		name="Error with message"
 		args={{
-			id: 7,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck7',
+			label: 'Accept terms and conditions',
+			name: 'radio-error',
 			modelValue: false,
 			error: true,
-			errorLabel: 'Sbagliato!'
+			errorLabel: 'Error label'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -52,12 +33,11 @@ import { Template } from './Radio.stories.mdx'
 	<Story
 		name="Error with messages"
 		args={{
-			id: 8,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck8',
+			label: 'Accept terms and conditions',
+			name: 'radio-error',
 			modelValue: false,
 			error: true,
-			errorLabel: ['Sbagliato!', 'Mona!']
+			errorLabel: ['First error', 'Second error']
 		}}>
 		{Template.bind({})}
 	</Story>

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

@@ -1,12 +1,11 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './Radio.stories.mdx'
+import { hintLabelTest } from './Radio.test'
 
 <Meta
-	title="Components/RadioButton/HintLabel"
+	title="Components/Radio/HintLabel"
 	args={{
 		modelValue: null
 	}}
@@ -18,11 +17,11 @@ import { Template } from './Radio.stories.mdx'
 <Canvas>
 	<Story
 		name="HintLabel"
+		play={hintLabelTest}
 		args={{
-			id: 1,
-			label: 'opzione 1',
+			label: 'Option 1',
+			hintLabel: 'Lorem ipsum dolor sit amet',
 			name: 'ck1',
-			disabled: true,
 			value: 1
 		}}>
 		{Template.bind({})}