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

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

@@ -1,30 +1,69 @@
-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 { Template } from './InputText.stories.mdx'
+import { defaultTest } from './InputText.test.ts'
+import { defaultArgs, argTypes } from './InputText.settings'
 
-import VvInputText from '../../components/VvInputText/VvInputText.vue'
-import VvIcon from '../../components/VvIcon/VvIcon.vue'
+<Meta
+	title="Components/InputText/Slots"
+	component={VvInputText}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-<Meta title="Components/InputText/Slots" component={VvInputText} />
+<Canvas>
+	<Story
+		name="Before"
+		args={{
+			before: '<div class="vv-badge vv-badge--sm uppercase">Before</vv-badge>',
+		}}
+		argTypes={{
+			before: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
-# Slot icons left e right
+<Canvas>
+	<Story
+		name="After"
+		args={{
+			after: '<div class="vv-badge vv-badge--sm uppercase">After</vv-badge>',
+		}}
+		argTypes={{
+			after: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
 
 <Canvas>
-	<Story name="left-right-slots">
-		{() => {
-			return {
-				components: { VvInputText, VvIcon },
-				data: () => ({ text: '' }),
-				template: `
-					<vv-input-text name="r1" v-model:modelValue="text">
-						<template v-slot:icon-left="slotProps">
-                            <VvIcon name="add"/>
-                        </template>
-                        <template v-slot:icon-right>
-                            <button class="vv-button"> QUA! </button>
-                        </template>
-					</vv-input-text>
-                    `
-			}
+	<Story
+		name="Hint"
+		args={{
+			hint: 'Hint <em class="italic">slot!</em>',
+		}}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

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

@@ -1,81 +1,259 @@
-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/Type" component={VvInputText} />
+<Meta
+	title="Components/InputText/Type"
+	component={VvInputText}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
 <Canvas>
-	<Story name="Text" args={{ name: 'input-text', type: 'text' }}>
-		{Template.bind({})}
+	<Story
+		name="Text"
+		args={{
+			type: 'text',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Password" args={{ name: 'input-password', type: 'password' }}>
-		{Template.bind({})}
+	<Story
+		name="Password"
+		args={{
+			type: 'password',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Date" args={{ name: 'input-date', type: 'date' }}>
-		{Template.bind({})}
+	<Story
+		name="Date"
+		args={{
+			type: 'date',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
 	<Story
 		name="DateTime"
-		args={{ name: 'input-datetime', type: 'datetime-local' }}>
-		{Template.bind({})}
+		args={{
+			type: 'datetime-local',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Number" args={{ name: 'input-number', type: 'number' }}>
-		{Template.bind({})}
+	<Story
+		name="Time"
+		args={{
+			type: 'time',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Time" args={{ name: 'input-time', type: 'time' }}>
-		{Template.bind({})}
+	<Story
+		name="Month"
+		args={{
+			type: 'month',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Email" args={{ name: 'input-email', type: 'email' }}>
-		{Template.bind({})}
+	<Story
+		name="Week"
+		args={{
+			type: 'week',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Tel" args={{ name: 'input-tel', type: 'tel' }}>
-		{Template.bind({})}
+	<Story
+		name="Number"
+		args={{
+			type: 'number',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Url" args={{ name: 'input-url', type: 'url' }}>
-		{Template.bind({})}
+	<Story
+		name="Email"
+		args={{
+			type: 'email',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Color" args={{ name: 'input-color', type: 'color' }}>
-		{Template.bind({})}
+	<Story
+		name="Tel"
+		args={{
+			type: 'tel',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Url"
+		args={{
+			type: 'url',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="Search" args={{ name: 'input-search', type: 'search' }}>
-		{Template.bind({})}
+	<Story
+		name="Color"
+		args={{
+			type: 'color',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 <Canvas>
-	<Story name="File" args={{ name: 'input-file', type: 'file' }}>
-		{Template.bind({})}
+	<Story
+		name="Search"
+		args={{
+			type: 'search',
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Progress/Progress.settings.ts

@@ -0,0 +1,33 @@
+import { ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	max: undefined,
+	value: undefined,
+	label: 'Progress bar',
+}
+export const argTypes = {
+	...ModifiersArgTypes,
+	max: {
+		description:
+			'This attribute describes how much work the task indicated by the progress element requires. The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.',
+		type: ['number', 'string'],
+		control: {
+			type: 'text',
+		},
+	},
+	value: {
+		description:
+			'This attribute specifies how much of the task that has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no value attribute, the progress bar is indeterminate.',
+		type: ['number', 'string'],
+		control: {
+			type: 'text',
+		},
+	},
+	label: {
+		description: 'Progress aria-label',
+		type: 'string',
+		control: {
+			type: 'text',
+		},
+	},
+}

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

@@ -1,14 +1,13 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvProgress from '../../components/VvProgress/VvProgress.vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvProgressProps } from '../../components/VvProgress/VvProgress'
+import { Meta, Story } from '@storybook/addon-docs'
+import VvProgress from '@/components/VvProgress/VvProgress.vue'
+import { defaultTest } from './Progress.test'
+import { defaultArgs, argTypes } from './Progress.settings'
 
 <Meta
 	title="Components/Progress"
 	component={VvProgress}
-	args={{
-		...ObjectUtilities.propsToObject(VvProgressProps)
-	}}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 export const Template = (args) => ({
@@ -16,14 +15,13 @@ export const Template = (args) => ({
 	setup() {
 		return { args }
 	},
-	template: `<vv-progress v-bind="args" />`
+	template: `<vv-progress v-bind="args" />`,
 })
 
-# VvProgress
-
-Stories of `VvProgress`.
-Let's define a story for our playground `progress`:
+<Story name="Default" play={defaultTest}>
+	{Template.bind()}
+</Story>
 
-<Story name="vv-progress" args={{}}>
-	{Template.bind({})}
+<Story name="Determinate" play={defaultTest} args={{ max: '100', value: '25' }}>
+	{Template.bind()}
 </Story>

package/src/stories/Progress/Progress.test.ts

@@ -0,0 +1,9 @@
+import { expect } from '@/test/expect'
+import type { PlayAttributes } from '@/test/types'
+import { within } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement }: PlayAttributes) {
+	const progress = await within(canvasElement).findByRole('progressbar')
+	expect(progress).toHaveClass('vv-progress')
+	await expect(progress).toHaveNoViolations()
+}

package/src/stories/Radio/Radio.settings.ts

@@ -0,0 +1,15 @@
+import { CheckboxRadioArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	name: 'radio',
+	label: 'Option',
+	value: 'my-value',
+	tabindex: 0,
+	disabled: false,
+	readonly: false,
+	invalid: false,
+	valid: false,
+	indeterminate: false,
+}
+
+export const argTypes = CheckboxRadioArgTypes

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>