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

package/src/stories/InputText/InputText.settings.ts

@@ -0,0 +1,221 @@
+import { InputTextareaArgTypes } from '@/stories/argTypes'
+import { VvInputTextProps } from '@/components/VvInputText'
+import normal from '@/assets/icons/normal.json'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+export const defaultArgs = {
+	...propsToObject(VvInputTextProps),
+	name: 'vv-input-text',
+	label: 'Input label',
+	placeholder: 'Input placeholder',
+	min: undefined,
+	max: undefined,
+	minlength: undefined,
+	maxlength: undefined,
+}
+
+export const argTypes = {
+	...InputTextareaArgTypes,
+	type: {
+		description: 'Type of form control',
+		options: [
+			'color',
+			'date',
+			'datetime-local',
+			'email',
+			'month',
+			'number',
+			'password',
+			'search',
+			'tel',
+			'text',
+			'time',
+			'url',
+			'week',
+		],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'text',
+			},
+		},
+	},
+	min: {
+		description:
+			'Minimum value. Available for input types: date, month, week, time, datetime-local, number, range.',
+		type: ['number', 'string'],
+		control: {
+			type: 'text',
+		},
+	},
+	max: {
+		description:
+			'Maximum value. Available for input types: date, month, week, time, datetime-local, number, range.',
+		type: ['number', 'string'],
+		control: {
+			type: 'text',
+		},
+	},
+	step: {
+		description:
+			'Incremental values that are valid. Available for input types: date, month, week, time, datetime-local and number.',
+		type: {
+			summary: 'number',
+		},
+		table: {
+			defaultValue: {
+				summary: 1,
+			},
+		},
+	},
+	pattern: {
+		description:
+			'Pattern the value must match to be valid. Available for input types: text, search, url, tel, email and password.',
+		type: {
+			summary: 'regex',
+		},
+		control: {
+			type: 'text',
+		},
+	},
+	multiple: {
+		type: 'boolean',
+		description:
+			'Whether to allow multiple values. Available for input type email.',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	iconShowPassword: {
+		description: 'VvIcon name for show password button',
+		options: ['', ...Object.keys(normal.icons)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'eye-on',
+			},
+		},
+	},
+	iconHidePassword: {
+		description: 'VvIcon name for hide password button',
+		options: ['', ...Object.keys(normal.icons)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'eye-off',
+			},
+		},
+	},
+	iconClear: {
+		description: 'VvIcon name for clear button',
+		options: ['', ...Object.keys(normal.icons)],
+		control: {
+			type: 'select',
+		},
+		table: {
+			defaultValue: {
+				summary: 'close',
+			},
+		},
+	},
+	labelStepUp: {
+		description: 'Label for step up button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Increase value',
+			},
+		},
+	},
+	labelStepDown: {
+		description: 'Label for step down button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Decrease value',
+			},
+		},
+	},
+	labelShowPassword: {
+		description: 'Label for show password button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Show password',
+			},
+		},
+	},
+	labelHidePassword: {
+		description: 'Label for hide password button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Hide password',
+			},
+		},
+	},
+	labelClear: {
+		description: 'Label for clear button',
+		type: {
+			summary: 'string',
+		},
+		control: {
+			type: 'text',
+		},
+		table: {
+			defaultValue: {
+				summary: 'Clear',
+			},
+		},
+	},
+	before: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	after: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

package/src/stories/InputText/InputText.stories.mdx

@@ -1,94 +1,167 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
+import { defaultArgs, argTypes } from './InputText.settings'
+import { defaultTest } from './InputText.test'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+<Meta
+	title="Components/InputText"
+	component={VvInputText}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-<Meta title="Components/InputText" component={VvInputText} />
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
+export const Template = (args) => ({
 	components: { VvInputText },
 	setup() {
 		return { args }
 	},
-	data: () => ({ value: args.modelValue || '' }),
+	data: () => ({ inputValue: undefined }),
 	template: `
-		<div class="flex flex-col justify-between">
-			<vv-input-text v-bind="args" v-model:modelValue="value"/>
-			<strong v-if="value">Valore: {{value}} </strong> 
-		</div>
-        `
+		<vv-input-text v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<template #before v-if="args.before"><div class="pl-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="pr-sm flex" v-html="args.after"></div></template>
+		</vv-input-text>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+        `,
 })
 
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
-		name="vv-input-text"
-		args={{
-			text: 'text',
-			id: 'vv-input-text',
-			name: 'vv-input-text',
-			placeholder: 'Prova input',
-			label: 'Campo di prova',
-			hintLabel: 'Hint label text',
-			autocomplete: 'off',
-			disabled: false,
-			readonly: false,
-			valid: false,
-			error: false,
-			loading: false,
-			loadingLabel: 'Ciao sono il loading',
-			icon: '',
-			iconPosition: null,
-			floating: false,
-			min: null,
-			max: null,
-			minlength: null,
-			maxlength: null
-		}}
+		name="Disabled"
+		args={{ disabled: true }}
 		argTypes={{
-			id: {
-				description: 'Id input element.',
-				table: { category: 'Attributes' }
-			},
-			name: {
-				description: 'Nome input element',
-				table: { category: 'Attributes' }
+			disabled: {
+				control: {
+					disable: true,
+				},
 			},
-			placeholder: {
-				description: 'Placeholder input',
-				table: { category: 'Attributes' }
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Readonly"
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
 			},
-			iconPosition: {
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Valid"
+		args={{
+			valid: true,
+			validLabel: 'The field is valid.',
+			icon: 'check',
+		}}
+		argTypes={{
+			valid: {
 				control: {
-					type: 'select',
-					options: [null, 'left', 'right']
+					disable: true,
 				},
-				table: { category: 'Attributes' }
 			},
-			type: {
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Invalid"
+		args={{
+			invalid: true,
+			invalidLabel: 'The field is required.',
+			icon: 'error-2',
+		}}
+		argTypes={{
+			invalid: {
 				control: {
-					type: 'select',
-					options: ['text', 'password', 'date', 'datetime-local']
+					disable: true,
 				},
-				table: { category: 'Attributes' }
 			},
-			minlength: {
-				description: 'Lunghezza minima testo',
-				table: { category: 'Attributes' }
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		args={{
+			hintLabel: 'Please enter your name.',
+		}}
+		argTypes={{
+			hintLabel: {
+				control: {
+					disable: true,
+				},
 			},
-			maxlength: {
-				description: 'Lunghezza massima testo',
-				table: { category: 'Attributes' }
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Loading"
+		args={{
+			loading: true,
+			loadingLabel: 'Loading...',
+		}}
+		argTypes={{
+			loading: {
+				control: {
+					disable: true,
+				},
 			},
-			min: {
-				description: 'Valore minimo',
-				table: { category: 'Attributes' }
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Floating"
+		args={{
+			floating: true,
+		}}
+		argTypes={{
+			floating: {
+				control: {
+					disable: true,
+				},
 			},
-			max: {
-				description: 'Valore massimo',
-				table: { category: 'Attributes' }
-			}
-		}}>
-		{Template.bind({})}
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/InputText/InputText.test.ts

@@ -0,0 +1,125 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within, userEvent } from '@storybook/testing-library'
+import { INPUT_TYPES, type InputType } from '@/components/VvInputText'
+
+const valueByType = (type: InputType) => {
+	switch (type) {
+		case INPUT_TYPES.TEXT:
+		case INPUT_TYPES.PASSWORD:
+		case INPUT_TYPES.SEARCH:
+			return 'Lorem ipsum'
+		case INPUT_TYPES.NUMBER:
+			return '1'
+		case INPUT_TYPES.EMAIL:
+			return 'test@test.com'
+		case INPUT_TYPES.TEL:
+			return '+1234567890'
+		case INPUT_TYPES.URL:
+			return 'https://www.test.com'
+		case INPUT_TYPES.DATE:
+			return new Date().toISOString().split('T')[0]
+		case INPUT_TYPES.TIME:
+			return '12:00'
+		case INPUT_TYPES.COLOR:
+		case INPUT_TYPES.DATETIME_LOCAL:
+		case INPUT_TYPES.MONTH:
+		case INPUT_TYPES.WEEK:
+			return undefined
+	}
+}
+
+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-input-text__hint')[0]
+
+	// value
+	if (!args.invalid && !args.disabled && !args.readonly) {
+		const inputValue = valueByType(args.type)
+		if (inputValue) {
+			await expect(input).toBeClicked()
+			await userEvent.keyboard(inputValue)
+			await sleep()
+			if (args.maxlength) {
+				await expect(value.innerHTML).toEqual(
+					inputValue.slice(0, args.maxlength),
+				)
+			} else {
+				await expect(value.innerHTML).toEqual(inputValue)
+			}
+		}
+	}
+
+	// disabled
+	if (args.disabled) {
+		await expect(element).toHaveClass('vv-input-text--disabled')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeClicked()
+	}
+
+	// readonly
+	if (args.readonly) {
+		await expect(element).toHaveClass('vv-input-text--readonly')
+		await expect(input).toHaveProperty('readOnly')
+	}
+
+	// invalid
+	if (args.invalid) {
+		await expect(element).toHaveClass('vv-input-text--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-input-text--valid')
+		await expect(input).toHaveProperty('ariaInvalid', 'false')
+		if (args.validLabel) {
+			await expect(hint.innerHTML).toEqual(args.validLabel)
+		}
+	}
+
+	//   min / max / minlength / maxlength
+	if (args.min) {
+		await expect(input).toHaveProperty('min', String(args.min))
+	}
+
+	if (args.max) {
+		await expect(input).toHaveProperty('max', String(args.max))
+	}
+
+	if (args.minlength) {
+		await expect(input).toHaveProperty('minLength', args.minlength)
+	}
+
+	if (args.maxlength) {
+		await expect(input).toHaveProperty('maxLength', args.maxlength)
+	}
+
+	// floating
+	if (args.floating) {
+		await expect(element).toHaveClass('vv-input-text--floating')
+	}
+
+	// loading
+	if (args.loading) {
+		await expect(element).toHaveClass('vv-input-text--loading')
+	}
+
+	// hint
+	if (args.hintLabel) {
+		await expect(hint.innerHTML).toEqual(args.hintLabel)
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/stories/InputText/InputTextIconPosition.stories.mdx

@@ -1,31 +1,78 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvInputText from '@/components/VvInputText/VvInputText.vue'
 import { Template } from './InputText.stories.mdx'
+import { defaultTest } from './InputText.test.ts'
+import { defaultArgs, argTypes } from './InputText.settings'
+
+<Meta
+	title="Components/InputText/Icon"
+	component={VvInputText}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-<Meta title="Components/InputText/IconPosition" component={VvInputText} />
+<Canvas>
+	<Story
+		name="Default"
+		args={{
+			icon: 'heart',
+		}}
+		argTypes={{
+			icon: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
 	<Story
 		name="Left"
 		args={{
-			name: 'input-text-icon',
-			icon: 'add',
-			iconPosition: 'left'
-		}}>
-		{Template.bind({})}
+			icon: 'heart',
+			iconPosition: 'left',
+		}}
+		argTypes={{
+			icon: {
+				control: {
+					disable: true,
+				},
+			},
+			iconPosition: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
 	<Story
-		name="Right"
+		name="Src"
 		args={{
-			name: 'input-text-icon',
-			icon: 'add',
-			iconPosition: 'right'
-		}}>
-		{Template.bind({})}
+			icon: {
+				name: 'engineering',
+				src: 'https://raw.githubusercontent.com/google/material-design-icons/master/src/social/engineering/materialicons/24px.svg',
+			},
+		}}
+		argTypes={{
+			icon: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>