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

package/src/stories/Select/SelectOptions.stories.mdx

@@ -1,78 +1,100 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Template } from './Select.stories.mdx'
+import { defaultArgs, argTypes } from './Select.settings'
+import { defaultTest } from './Select.test'
 
-<Meta title="Components/Select/Props/options" />
-
-# VvSelect options
-
-Let's define a story for our `options` select.
-
-Options string array:
-
-<Source language="json" code={`[ "Option 4", "Option 5", "Option 6" ]`} />
-
-Options object array and default `valueKey` ("value") and `labelKey` ("label"):
-
-<Source
-	language="json"
-	code={`[
-	{
-		"label": "Option 1",
-		"value": 1
-	},
-	{
-		"label": "Option 2",
-		"value": 2
-	},
-	{
-		"label": "Option 3",
-		"value": 3
-	}
-]`}
+<Meta
+	title="Components/Select/Options"
+	component={VvSelect}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 <Canvas>
-	<Story name="options">
-		{() => {
-			return {
-				components: { VvSelect },
-				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="Array of Objects"
+		play={defaultTest}
+		argTypes={{
+			options: {
+				...argTypes.options,
+				control: {
+					disable: true,
 				},
-				template: `<div class="flex gap-32">
-						<div class="w-1/2">
-							<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />
-							value: {{ value }}
-						</div>
-						<div class="w-1/2">
-							<vv-select v-model:modelValue="objectValue" :options="optionsObject" placeholder="Placeholder" label="Label 1" />
-							value: {{ objectValue }}
-						</div>
-					</div>`
-			}
+			},
+		}}
+		args={{
+			options: [
+				{ value: 'first', label: 'First' },
+				{ value: 'second', label: 'Second' },
+				{ value: 'third', label: 'Third' },
+			],
 		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<Source
-	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" />`}
-/>
+<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/Select/SelectSlots.stories.mdx

@@ -0,0 +1,48 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvSelect from '@/components/VvSelect/VvSelect.vue'
+import { Template } from './Select.stories.mdx'
+import { defaultTest } from './Select.test.ts'
+import { defaultArgs, argTypes } from './Select.settings'
+
+<Meta
+	title="Components/Select/Slots"
+	component={VvSelect}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Before"
+		play={defaultTest}
+		args={{
+			before: '<div class="vv-badge vv-badge--sm uppercase">Before</vv-badge>',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="After"
+		play={defaultTest}
+		args={{
+			after: '<div class="vv-badge vv-badge--sm uppercase">After</vv-badge>',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{
+			hint: 'Hint <em class="italic">slot!</em>',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Textarea/Textarea.settings.ts

@@ -0,0 +1,96 @@
+import { InputTextareaArgTypes } from '@/stories/argTypes'
+import { VvTextareaProps } from '@/components/VvTextarea'
+import { propsToObject } from '@/utils/ObjectUtilities'
+
+export const defaultArgs = {
+	...propsToObject(VvTextareaProps),
+	name: 'vv-textarea',
+	label: 'Textarea label',
+	placeholder: 'Textarea placeholder',
+	minlength: undefined,
+	maxlength: undefined,
+}
+
+export const argTypes = {
+	...InputTextareaArgTypes,
+	cols: {
+		type: 'number',
+		description:
+			'The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.',
+		control: {
+			type: 'number',
+		},
+		table: {
+			defaultValue: {
+				summary: 20,
+			},
+		},
+	},
+	rows: {
+		type: 'number',
+		description:
+			'The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.',
+		control: {
+			type: 'number',
+		},
+		table: {
+			defaultValue: {
+				summary: 2,
+			},
+		},
+	},
+	wrap: {
+		type: {
+			summary: 'string',
+		},
+		description:
+			'Indicates how the control should wrap the value for form submission.',
+		options: ['hard', 'soft', 'off'],
+		control: {
+			type: 'check',
+		},
+		table: {
+			defaultValue: {
+				summary: 'soft',
+			},
+		},
+	},
+	spellcheck: {
+		type: {
+			summary: ['string', 'boolean'],
+		},
+		description:
+			'Specifies whether the textarea is subject to spell checking by the underlying browser/OS. ',
+		options: [true, false, 'default'],
+		control: {
+			type: 'check',
+		},
+		table: {
+			defaultValue: {
+				summary: 'default',
+			},
+		},
+	},
+	before: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	after: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

package/src/stories/Textarea/Textarea.stories.mdx

@@ -1,84 +1,186 @@
-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 VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { defaultArgs, argTypes } from './Textarea.settings'
+import { defaultTest } from './Textarea.test'
 
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+<Meta
+	title="Components/Textarea"
+	component={VvTextarea}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-<Meta title="Components/Textarea" component={VvTextarea} />
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
+export const Template = (args) => ({
 	components: { VvTextarea },
 	setup() {
 		return { args }
 	},
-	data: () => ({ value: args.modelValue || '' }),
+	data: () => ({ inputValue: undefined }),
 	template: `
-		<div class="flex flex-col justify-between">
-			<vv-textarea v-bind="args" v-model:modelValue="value"/>
-			<strong v-if="value">Valore: {{value}} </strong> 
-		</div>
-        `
+		<vv-textarea v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+			<template #before v-if="args.before"><div class="pt-sm 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="pt-sm pr-sm flex" v-html="args.after"></div></template>
+		</vv-textarea>
+		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+        `,
 })
 
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Readonly"
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
-		name="vv-textarea"
+		name="Valid"
 		args={{
-			text: 'text',
-			id: 'vv-textarea',
-			name: 'vv-textarea',
-			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,
-			minlength: null,
-			maxlength: null
+			valid: true,
+			validLabel: 'The field is valid.',
+			icon: 'check',
 		}}
 		argTypes={{
-			id: {
-				description: 'Id input element.',
-				table: { category: 'Attributes' }
+			valid: {
+				control: {
+					disable: true,
+				},
 			},
-			name: {
-				description: 'Nome input element',
-				table: { category: 'Attributes' }
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Invalid"
+		args={{
+			invalid: true,
+			invalidLabel: 'The field is required.',
+			icon: 'error-2',
+		}}
+		argTypes={{
+			invalid: {
+				control: {
+					disable: true,
+				},
 			},
-			placeholder: {
-				description: 'Placeholder input',
-				table: { category: 'Attributes' }
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		args={{
+			hintLabel: 'Please enter your name.',
+		}}
+		argTypes={{
+			hintLabel: {
+				control: {
+					disable: true,
+				},
 			},
-			iconPosition: {
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Loading"
+		args={{
+			loading: true,
+			loadingLabel: 'Loading...',
+		}}
+		argTypes={{
+			laoding: {
 				control: {
-					type: 'select',
-					options: [null, 'left', 'right']
+					disable: true,
 				},
-				table: { category: 'Attributes' }
 			},
-			type: {
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Floating"
+		args={{
+			floating: true,
+		}}
+		argTypes={{
+			floating: {
 				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="Resizable"
+		args={{
+			resizable: true,
+		}}
+		argTypes={{
+			resizable: {
+				control: {
+					disable: true,
+				},
 			},
-			maxlength: {
-				description: 'Lunghezza massima testo',
-				table: { category: 'Attributes' }
-			}
-		}}>
-		{Template.bind({})}
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Textarea/Textarea.test.ts

@@ -0,0 +1,90 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within, userEvent } 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 textarea = element.getElementsByTagName('textarea')[0]
+	const hint = element.getElementsByClassName('vv-textarea__hint')[0]
+
+	// value
+	if (!args.invalid && !args.disabled && !args.readonly) {
+		const inputValue = 'Lorem ipsum'
+		if (inputValue) {
+			await expect(textarea).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-textarea--disabled')
+		await expect(textarea).toHaveProperty('disabled')
+		await expect(textarea).not.toBeClicked()
+	}
+
+	// readonly
+	if (args.readonly) {
+		await expect(element).toHaveClass('vv-textarea--readonly')
+		await expect(textarea).toHaveProperty('readOnly')
+	}
+
+	// invalid
+	if (args.invalid) {
+		await expect(element).toHaveClass('vv-textarea--invalid')
+		await expect(textarea).toHaveProperty('ariaInvalid')
+		if (args.invalidLabel) {
+			await expect(hint.innerHTML).toEqual(args.invalidLabel)
+		}
+	}
+
+	// valid
+	if (args.valid) {
+		await expect(element).toHaveClass('vv-textarea--valid')
+		await expect(textarea).toHaveProperty('ariaInvalid', 'false')
+		if (args.validLabel) {
+			await expect(hint.innerHTML).toEqual(args.validLabel)
+		}
+	}
+
+	// minlength / maxlength
+	if (args.minlength) {
+		await expect(textarea).toHaveProperty('minLength', args.minlength)
+	}
+
+	if (args.maxlength) {
+		await expect(textarea).toHaveProperty('maxLength', args.maxlength)
+	}
+
+	// floating
+	if (args.floating) {
+		await expect(element).toHaveClass('vv-textarea--floating')
+	}
+
+	// loading
+	if (args.loading) {
+		await expect(element).toHaveClass('vv-textarea--loading')
+	}
+
+	// hint
+	if (args.hintLabel) {
+		await expect(hint.innerHTML).toEqual(args.hintLabel)
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}