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

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

@@ -1,10 +1,9 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
 import { toGroup } from '../utils'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
-import { VvTextareaProps } from '../../components/VvTextarea/VvTextarea'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
+import { VvTextareaProps } from '@/components/VvTextarea'
 
 <Meta title="Components/Textarea" component={VvTextarea} />
 
@@ -16,11 +15,8 @@ export const Template = (args, { argTypes }) => ({
 	},
 	data: () => ({ value: args.modelValue || '' }),
 	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-model="value" v-bind="args" data-testId="textarea" />
+		<div>Value: <span data-testId="value">{{value}}</span></div>`
 })
 
 # VvTextarea
@@ -31,7 +27,7 @@ export const Template = (args, { argTypes }) => ({
 	<Story
 		name="vv-textarea"
 		args={{
-			...ObjectUtilities.propsToObject(VvTextareaProps),
+			...propsToObject(VvTextareaProps),
 			maxlength: null
 		}}
 		argTypes={{

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

@@ -0,0 +1,204 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { within, userEvent } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+
+export async function textareaTest(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		customText = null
+	}: ComponentConfig = {}
+) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+
+	// click test
+	if (isClickDisabled) {
+		await expect(textarea).not.toBeClicked()
+	} else {
+		await expect(textarea).toBeClicked()
+		await userEvent.click
+
+		// test maxlength and text
+		const text = customText || 'Lorem ipsum'
+		userEvent.keyboard(text)
+		if (!data.args.limit && data.args.maxlength) {
+			data.args.maxlength >= text.length
+				? expect(textarea.value).toEqual(text)
+				: expect(textarea.value.length).toEqual(data.args.maxlength)
+		} else {
+			expect(textarea.value).toEqual(data.args.modelValue || text)
+		}
+	}
+
+	// test html attributes
+	const baseAttrs = ['id', 'name', 'placeholder', 'required', 'rows', 'cols']
+	baseAttrs.forEach((attr) => {
+		data.args[attr] &&
+			expect(textarea.getAttribute(attr)).toEqual(data.args[attr])
+	})
+	data.args.readonly && expect(textarea.readOnly).toEqual(data.args.readonly)
+
+	// test label and modelValue
+	data.args.label &&
+		expect(
+			(textareaWrapperParent.firstChild as HTMLTextAreaElement)?.innerText
+		).toEqual(data.args.label)
+	data.args.modelValue && expect(textarea.value).toEqual(data.args.modelValue)
+
+	// class test
+	await sleep()
+	expect(textareaWrapperParent).toHaveClass([
+		'vv-textarea',
+		'vv-textarea--dirty'
+	])
+	className && expect(textareaWrapperParent).toHaveClass(className)
+	expect(textareaWrapperParent).toHaveNoViolations()
+}
+
+export async function autoclearTest({
+	canvasElement,
+	...data
+}: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+	expect(data.args.autoclear).toBe(true)
+	await textareaTest({ canvasElement, ...data })
+	const button = document.getElementsByClassName(
+		'vv-button'
+	)[0] as HTMLButtonElement
+	await expect(button).toBeClicked()
+	await sleep()
+	expect(textarea.value).toBe('')
+}
+
+export async function hintLabelTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	{ className }: ComponentConfig
+) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	let propLabel: string | string[]
+	const hintLabel = (textareaWrapperParent.lastChild as HTMLElement)
+		?.innerText
+
+	// test hint label based on his prop
+	if (data.args.loading) {
+		data.args.error || data.args.valid
+			? (propLabel = data.args.loadingLabel)
+			: (propLabel = data.args.loadingLabel)
+	} else if (data.args.error) {
+		propLabel = data.args.errorLabel
+	} else if (data.args.valid) {
+		propLabel = data.args.validLabel
+	} else {
+		propLabel = data.args.hintLabel
+	}
+	if (typeof propLabel == 'string') {
+		expect(hintLabel).toEqual(propLabel)
+	}
+	if (Array.isArray(propLabel)) {
+		propLabel.forEach((label) => {
+			expect(hintLabel).toContain(label)
+		})
+	}
+	await textareaTest({ canvasElement, ...data }, { className: className })
+}
+
+export async function limitTest({ canvasElement, ...data }: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+	const limit = document.getElementsByClassName(
+		'vv-textarea__limit'
+	)[0] as HTMLElement
+	!data.args.maxlength &&
+		expect(textarea.value.length).toEqual(parseInt(limit.innerText))
+	await textareaTest({ canvasElement, ...data })
+	if (data.args.maxlength) {
+		while (textarea.value.length < data.args.maxlength)
+			await userEvent.keyboard(
+				' dolor sit amet, consectetur adipiscing elit'
+			)
+		expect(textarea.value.length).toEqual(data.args.maxlength)
+		data.args.limit == true &&
+			expect(limit.innerText).toEqual(
+				`${textarea.value.length}/${data.args.maxlength}`
+			)
+		data.args.limit == 'countdown' &&
+			expect(limit.innerHTML).toBe(
+				`${data.args.maxlength - textarea.value.length}`
+			)
+	}
+}
+
+export async function iconTest(
+	{ canvasElement, ...data }: PlayAttributes,
+	customElement: ComponentConfig
+) {
+	const icon = customElement || document.querySelector('svg')
+	expect(icon.customElement || icon).toHaveClass([
+		'vv-icon',
+		'iconify',
+		'iconify--normal',
+		'iconify--ds'
+	])
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	data.args.iconPosition &&
+		expect(textareaWrapperParent).toHaveClass(
+			`vv-textarea--icon-${data.args.iconPosition}`
+		)
+	textareaTest({ canvasElement, ...data })
+}
+
+export async function slotsTest({ canvasElement, ...data }: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const textareaWrapper = textareaWrapperParent.children[0]
+	const icon = textareaWrapper.firstElementChild as HTMLElement
+	iconTest({ canvasElement, ...data }, { customElement: icon })
+	const button = textareaWrapper.lastElementChild as HTMLButtonElement
+	expect(button).toHaveClass('vv-button')
+	expect(button.innerText).toBe('Here!')
+}
+
+export async function debounceTest({ canvasElement, ...data }: PlayAttributes) {
+	const textareaWrapperParent = await within(canvasElement).findByTestId(
+		'textarea'
+	)
+	const value = await within(canvasElement).findByTestId('value')
+	const textarea = textareaWrapperParent.querySelector(
+		'textarea'
+	) as HTMLTextAreaElement
+	userEvent.click(textarea)
+	const text = 'test'
+	userEvent.keyboard(text)
+	expect(value.innerText).toEqual('')
+	setTimeout(() => {
+		expect(value.innerText).not.toEqual(textarea.value)
+	}, data.args.debounce - 10)
+	setTimeout(() => {
+		expect(value.innerText).toEqual(textarea.value)
+	}, data.args.debounce + 10)
+	await setTimeout(async () => {
+		textarea.value = ''
+		await textareaTest({ canvasElement, ...data }, { customText: text })
+	}, data.args.debounce * 1.3)
+}

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { autoclearTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Autoclear" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Autoclear"
+		play={autoclearTest}
 		args={{
 			name: 'textarea-autoclear',
 			label: 'Autoclear',

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Autocomplete" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Autocomplete"
+		play={textareaTest}
 		args={{
 			name: 'textarea-autocomplete-on',
 			label: 'Nome',

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Autofocus" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Autofocus"
+		play={textareaTest}
 		args={{
 			name: 'textarea-autofocus',
 			label: 'Campo in autofocus',

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { debounceTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Debounce" component={VvTextarea} />
 
@@ -12,11 +12,12 @@ import { Template } from './Textarea.stories.mdx'
 
 <Canvas>
 	<Story
-		name="Disabled"
+		name="Debounce"
+		play={debounceTest}
 		args={{
-			name: 'textarea-disabled',
-			disabled: true,
-			modelValue: 'Prova'
+			name: 'textarea-debounce',
+			debounce: 700,
+			label: 'Debounce'
 		}}>
 		{Template.bind({})}
 	</Story>

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Disabled" component={VvTextarea} />
 
@@ -13,10 +13,16 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Disabled"
+		play={(ctx) => {
+			textareaTest(ctx, {
+				isClickDisabled: true
+			})
+		}}
 		args={{
 			name: 'textarea-disabled',
 			disabled: true,
-			modelValue: 'Prova'
+			modelValue: 'Test',
+			label: 'Disabled'
 		}}>
 		{Template.bind({})}
 	</Story>

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Error" component={VvTextarea} />
 
@@ -13,6 +13,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Error"
+		play={async (ctx) => {
+			textareaTest(ctx, {
+				className: 'vv-textarea--invalid'
+			})
+		}}
 		args={{
 			name: 'textarea-error',
 			error: true

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { hintLabelTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/ErrorLabel" component={VvTextarea} />
 
@@ -13,6 +13,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Error"
+		play={async (ctx) => {
+			hintLabelTest(ctx, {
+				className: 'vv-textarea--invalid'
+			})
+		}}
 		args={{
 			name: 'textarea-error',
 			label: 'Single error message',
@@ -26,6 +31,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Errors"
+		play={async (ctx) => {
+			hintLabelTest(ctx, {
+				className: 'vv-textarea--invalid'
+			})
+		}}
 		args={{
 			name: 'textarea-error',
 			label: 'Multiple error messages',

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Floating" component={VvTextarea} />
 
@@ -13,6 +13,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Floating"
+		play={(ctx) => {
+			textareaTest(ctx, {
+				className: 'vv-textarea--floating'
+			})
+		}}
 		args={{
 			name: 'textarea-floating',
 			label: 'Label di prova',

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { hintLabelTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/HintLabel" component={VvTextarea} />
 
@@ -13,6 +13,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="HintLabel"
+		play={async (ctx) => {
+			hintLabelTest(ctx, {
+				className: null
+			})
+		}}
 		args={{
 			name: 'textarea-hint',
 			hintLabel: 'Help text di prova!'

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { iconTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Icon" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Icon"
+		play={iconTest}
 		args={{
 			name: 'textarea-icon',
 			icon: 'add'

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { iconTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/IconPosition" component={VvTextarea} />
 
@@ -15,6 +15,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Left"
+		play={iconTest}
 		args={{
 			name: 'textarea-icon',
 			icon: 'add',
@@ -29,6 +30,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Right"
+		play={iconTest}
 		args={{
 			name: 'textarea-icon',
 			icon: 'add',

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Id" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Id"
+		play={textareaTest}
 		args={{ name: 'textarea-id', id: 'ID_11_11', label: 'Label di prova' }}>
 		{Template.bind({})}
 	</Story>

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Label" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Label"
+		play={textareaTest}
 		args={{ name: 'textarea-label', label: 'Label di prova' }}>
 		{Template.bind({})}
 	</Story>

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { limitTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Limit" component={VvTextarea} />
 
@@ -13,6 +13,7 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Limit"
+		play={limitTest}
 		args={{
 			name: 'textarea-show-limit',
 			limit: true
@@ -26,6 +27,7 @@ Se imposto anche il maxlength, visualizza anche il numero massimo di caratteri c
 <Canvas>
 	<Story
 		name="Limit with Max"
+		play={limitTest}
 		args={{
 			name: 'textarea-show-limit',
 			limit: true,
@@ -40,6 +42,7 @@ Se imposto anche il maxlength, visualizza anche il numero massimo di caratteri c
 <Canvas>
 	<Story
 		name="Limit countdown"
+		play={limitTest}
 		args={{
 			name: 'textarea-show-countdown',
 			limit: 'countdown',

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { textareaTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/Loading" component={VvTextarea} />
 
@@ -13,6 +13,11 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Loading"
+		play={async (ctx) => {
+			textareaTest(ctx, {
+				className: 'vv-textarea--loading'
+			})
+		}}
 		args={{
 			name: 'textarea-loading',
 			loading: true

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

@@ -1,8 +1,8 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { hintLabelTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/LoadingLabel" component={VvTextarea} />
 
@@ -13,10 +13,16 @@ import { Template } from './Textarea.stories.mdx'
 <Canvas>
 	<Story
 		name="Loading"
+		play={async (ctx) => {
+			hintLabelTest(ctx, {
+				className: 'vv-textarea--loading'
+			})
+		}}
 		args={{
 			name: 'textarea-loading',
 			loading: true,
-			loadingLabel: 'Loading label!'
+			loadingLabel: 'Loading label!',
+			label: 'Loading label'
 		}}>
 		{Template.bind({})}
 	</Story>

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

@@ -1,19 +1,20 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvTextarea from '../../components/VvTextarea/VvTextarea.vue'
+import VvTextarea from '@/components/VvTextarea/VvTextarea.vue'
 import { Template } from './Textarea.stories.mdx'
+import { limitTest } from './Textarea.test'
 
 <Meta title="Components/Textarea/Props/MaxLength" component={VvTextarea} />
 
-# maxLength
+# maxlength
 
 `maxlength` numero massimo di caratteri che posso digitare
 
 <Canvas>
 	<Story
 		name="MaxLength"
-		args={{ name: 'textarea-max-length', maxlength: 5 }}>
+		play={limitTest}
+		args={{ name: 'textarea-max-length', maxlength: 7 }}>
 		{Template.bind({})}
 	</Story>
 </Canvas>