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

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

@@ -0,0 +1,110 @@
+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/Length"
+	component={VvInputText}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Maxlength"
+		args={{
+			maxlength: 5,
+		}}
+		argTypes={{
+			maxlength: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Minlength"
+		args={{
+			minlength: 5,
+		}}
+		argTypes={{
+			minlength: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Count"
+		args={{
+			count: true,
+			minlength: 100,
+		}}
+		argTypes={{
+			count: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Limit"
+		args={{
+			count: 'limit',
+			maxlength: 100,
+		}}
+		argTypes={{
+			count: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Countdown"
+		args={{
+			count: 'countdown',
+			maxlength: 100,
+		}}
+		argTypes={{
+			count: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,112 @@
+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/MinMax"
+	component={VvInputText}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Min - Number"
+		args={{
+			type: 'number',
+			min: -15,
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+			min: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Max - Number"
+		args={{
+			type: 'number',
+			max: 15,
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+			max: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Min - Date"
+		args={{
+			type: 'date',
+			min: new Date().toISOString().split('T')[0],
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+			min: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Max - Date"
+		args={{
+			type: 'date',
+			max: new Date().toISOString().split('T')[0],
+		}}
+		argTypes={{
+			type: {
+				control: {
+					disable: true,
+				},
+			},
+			max: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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