@volverjs/ui-vue 0.0.1-beta.11

package/src/stories/NativeSelect/NativeSelectValid.stories.mdx

@@ -0,0 +1,36 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+import { Template } from './NativeSelect.stories.mdx'
+
+<Meta title="Components/NativeSelect/Props/valid" />
+
+# VvNativeSelect valid/valid-label
+
+Let's define a story for our `valid` and `valid-label` select.
+
+<Canvas>
+	<Story
+		name="valid"
+		args={{
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			options: ['Option 1', 'Option 2', 'Option 3'],
+			valid: true,
+			validLabel: 'The field is correct!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`
+<vv-select
+	v-model:modelValue="value"
+	:options="options"
+	placeholder="Placeholder"
+	label="Label 1"
+	valid
+	valid-label="An error occurred!"
+/>`}
+/>

package/src/stories/NativeSelect/NativeSelectValueKey.stories.mdx

@@ -0,0 +1,66 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvNativeSelect from '../../components/VvNativeSelect/VvNativeSelect.vue'
+
+<Meta title="Components/NativeSelect/Props/value-key_label-key" />
+
+# VvNativeSelect valueKey and labelKey
+
+Let's define a story for our `valueKey` and `labelKey` select.
+
+Options object array with custom `valueKey` ("val") and custom `labelKey` ("title"):
+
+<Source
+	language="json"
+	code={`[
+	{
+		"title": "Option 1",
+		"val": 1
+	},
+	{
+		"title": "Option 2",
+		"val": 2
+	},
+	{
+		"title": "Option 3",
+		"val": 3
+	}
+]`}
+/>
+
+<Canvas>
+	<Story name="value-key_label-key">
+		{() => {
+			return {
+				components: { VvNativeSelect },
+				data() {
+					return {
+						value: '',
+						options: [
+							{
+								title: 'Option 1',
+								val: 1
+							},
+							{
+								title: 'Option 2',
+								val: 2
+							},
+							{
+								title: 'Option 3',
+								val: 3
+							}
+						]
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-native-select v-model:modelValue="value" :options="options" value-key="val" label-key="title" />
+						value: {{ value }}
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-native-select v-model:modelValue="value" :options="options" value-key="val" label-key="title" />`}
+/>

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

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvProgress from '../../components/VvProgress/VvProgress.vue'
+import { progressTest, indeterminateTest } from './ProgressTest.js'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import { VvProgressProps } from '../../components/VvProgress/VvProgress'
+
+<Meta
+	title="Components/Progress"
+	component={VvProgress}
+	args={{
+		...ObjectUtilities.propsToObject(VvProgressProps)
+	}}
+	argTypes={{
+		value: {
+			defaultValue: 30
+		},
+		max: {
+			defaultValue: 100
+		},
+		determinate: false
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvProgress },
+	setup() {
+		return { args }
+	},
+	template: `<vv-progress v-bind="args" />`
+})
+
+# VvProgress
+
+Stories of `VvProgress`.
+
+Let's define a story for our playground `progress`:
+
+<Story name="vv-progress" play={indeterminateTest}>
+	{Template.bind()}
+</Story>

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

@@ -0,0 +1,19 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvProgress from '../../components/VvProgress/VvProgress.vue'
+import { Template } from './Progress.stories.mdx'
+
+<Meta title="Components/Progress/Props" component={VvProgress} />
+
+# VvProgress determinate
+
+Stories of `VvProgress`.
+Let's define a story for our `determinate` progress with `max` and `value`:
+
+<Story name="determinate" args={{ determinate: true, max: '100', value: '25' }}>
+	{Template.bind({})}
+</Story>
+
+<Source
+	language="html"
+	code={`<vv-progress max="100" value="25" determinate />`}
+/>

package/src/stories/Progress/ProgressTest.js

@@ -0,0 +1,28 @@
+import { expect } from '@storybook/jest'
+import { within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function progressTest({ canvasElement }) {
+	const progress = await within(canvasElement).findByRole('progressbar')
+	expect(progress).toHaveClass('vv-progress')
+	await accessibilityTest(progress)
+}
+
+async function indeterminateTest({ canvasElement }) {
+	const progress = await within(canvasElement).findByRole('progressbar')
+	await classTest(progress, ['vv-progress', 'vv-progress--indeterminate'])
+	await accessibilityTest(progress)
+}
+
+async function classTest(progress, classNames = []) {
+	classNames.forEach((cssClass) => {
+		expect(progress).toHaveClass(cssClass)
+	})
+}
+
+async function accessibilityTest(element) {
+	expect.extend(toHaveNoViolations)
+	expect(await axe(element)).toHaveNoViolations()
+}
+
+export { progressTest, indeterminateTest, classTest, accessibilityTest }

package/src/stories/Radio/Radio.stories.mdx

@@ -0,0 +1,67 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+<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 } }
+	}}
+	component={VvRadio}
+/>
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvRadio },
+	setup() {
+		return { args }
+	},
+	data: () => ({ ckValue: args.modelValue }),
+	template: `
+        <div class="flex flex-row justify-between">
+			<vv-radio v-bind="args" v-model:modelValue="ckValue"/>
+			<strong >Valore selez: {{ckValue}} </strong> 
+		</div>
+        `
+})
+
+# VvRadio
+
+A radio allows the user to select one option.
+
+<Source language="jsx" code={'<vv-radio/>'} />
+
+<Canvas>
+	<Story
+		name="vv-radio"
+		args={{
+			id: 1,
+			label: 'opzione 1',
+			name: 'o1',
+			disabled: false,
+			modelValue: null,
+			value: { a: 1 }
+		}}
+		argTypes={{
+			id: {
+				description: 'Id input element.',
+				table: { category: 'Attributes' }
+			},
+			name: {
+				description: 'Nome input element',
+				table: { category: 'Attributes' }
+			},
+			value: {
+				description: 'Valore input element',
+				table: { category: 'Attributes' }
+			}
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<ArgsTable story="vv-radio" />

package/src/stories/Radio/RadioDisabled.stories.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+import { Template } from './Radio.stories.mdx'
+
+<Meta
+	title="Components/RadioButton/Disabled"
+	args={{
+		modelValue: null
+	}}
+	component={VvRadio}
+/>
+
+# Disabled
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{
+			id: 1,
+			label: 'opzione 1',
+			name: 'ck1',
+			disabled: true,
+			value: 1
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Radio/RadioError.stories.mdx

@@ -0,0 +1,64 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+import { Template } from './Radio.stories.mdx'
+
+<Meta
+	title="Components/RadioButton/Error"
+	args={{
+		modelValue: null
+	}}
+	component={VvRadio}
+/>
+
+# Error
+
+<Canvas>
+	<Story
+		name="Invalid"
+		args={{
+			id: 6,
+			label: 'Voglio acquistare questa enciclopedia!',
+			name: 'ck6',
+			modelValue: false,
+			error: true
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+# Error with message
+
+<Canvas>
+	<Story
+		name="Error with message"
+		args={{
+			id: 7,
+			label: 'Voglio acquistare questa enciclopedia!',
+			name: 'ck7',
+			modelValue: false,
+			error: true,
+			errorLabel: 'Sbagliato!'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+# Error with messages
+
+<Canvas>
+	<Story
+		name="Error with messages"
+		args={{
+			id: 8,
+			label: 'Voglio acquistare questa enciclopedia!',
+			name: 'ck8',
+			modelValue: false,
+			error: true,
+			errorLabel: ['Sbagliato!', 'Mona!']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Radio/RadioHintLabel.stories.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+import { Template } from './Radio.stories.mdx'
+
+<Meta
+	title="Components/RadioButton/HintLabel"
+	args={{
+		modelValue: null
+	}}
+	component={VvRadio}
+/>
+
+# HintLabel
+
+<Canvas>
+	<Story
+		name="HintLabel"
+		args={{
+			id: 1,
+			label: 'opzione 1',
+			name: 'ck1',
+			disabled: true,
+			value: 1
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Radio/RadioSlots.stories.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+<Meta title="Components/RadioButton/Slots" component={VvRadio} />
+
+# Slot default
+
+Slot default define the content of RadioButton
+
+<Source
+	language="jsx"
+	code={'<vv-radio name="r1" value="1">My content</vv-radio>'}
+/>
+
+<Canvas>
+	<Story name="default">
+		{() => {
+			return {
+				components: { VvRadio },
+				template: `
+					<vv-radio name="r1" value="1">
+						My content
+					</vv-radio>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/Radio/RadioTest.js

@@ -0,0 +1,90 @@
+/* eslint-disable no-console */
+import { expect } from '@storybook/jest'
+import { userEvent } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function disabledTest() {
+	const radioInput = document.getElementById('1')
+	console.log({ radioInput })
+	await expect(radioInput).toHaveClass('vv-input-radio__input--disabled')
+	await expect(radioInput).toBeDisabled()
+	await expect(radioInput).toHaveProperty('disabled')
+	await expect(radioInput).not.toBeChecked()
+	await accessibilityTest(radioInput)
+}
+
+async function invalidTest() {
+	const radioInput = document.getElementById('6')
+	console.log(radioInput.parentElement)
+	await expect(radioInput.parentElement).toHaveClass(
+		'vv-input-radio--invalid'
+	)
+	accessibilityTest(radioInput)
+}
+
+async function errorWithSingleMessageTest() {
+	const radioInput = document.getElementById('7')
+	await expect(radioInput.parentElement).toHaveClass(
+		'vv-input-radio--invalid'
+	)
+	const errorMessage = radioInput.labels[0].childNodes[4].innerHTML
+	expect(errorMessage).toBe('Sbagliato!')
+	accessibilityTest(radioInput)
+}
+
+async function errorWithMultipleMessagesTest() {
+	const radioInput = document.getElementById('8')
+	await expect(radioInput.parentElement).toHaveClass(
+		'vv-input-radio--invalid'
+	)
+	// expect(errorMessage).toBe('Sbagliato!')
+	console.log(radioInput.labels)
+	accessibilityTest(radioInput)
+}
+
+async function switchTest() {
+	const radioInput = document.getElementById('3')
+	await expect(radioInput.parentElement).toHaveClass(
+		'vv-input-checkbox--switch'
+	)
+	userEvent.click(radioInput)
+	await expect(radioInput).toBeChecked()
+	console.log(radioInput.parentElement)
+	accessibilityTest(radioInput)
+}
+
+expect.extend({
+	async toBeChecked(radioInput) {
+		let result = {
+			pass: false,
+			message: `Click event doesn't work`
+		}
+		// await userEvent.click(radioInput)
+		await radioInput.click()
+		if (radioInput.checked) {
+			result = {
+				pass: true,
+				message: `Click event work!`
+			}
+		}
+		return result
+	}
+})
+
+async function classTest(input, classNames = []) {
+	classNames.forEach((cssClass) => {
+		expect(input).toHaveClass(cssClass)
+	})
+}
+
+async function accessibilityTest(element) {
+	expect.extend(toHaveNoViolations)
+	expect(await axe(element)).toHaveNoViolations()
+}
+
+export {
+	disabledTest,
+	invalidTest,
+	errorWithSingleMessageTest,
+	errorWithMultipleMessagesTest
+}

package/src/stories/RadioGroup/RadioGroup.stories.mdx

@@ -0,0 +1,73 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+import { radioGroupTest } from './RadioProperty.test.ts'
+
+<Meta title="Components/RadioGroup" component={VvRadioGroup} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvRadioGroup, VvRadio },
+	setup() {
+		return { args }
+	},
+	data: () => ({ selected: args.modelValue || null }),
+	template: `
+		<div class="flex flex-row justify-between">
+            <vv-radio-group role="radiogroup" v-bind="args" v-model:modelValue="selected">
+                <template v-slot:hint>
+                    <p>Ciao sono un hint di default. Piacere.</p>
+                </template> 
+            </vv-radio-group>
+            <strong v-if="selected">Selezione: {{selected}} </strong> 
+        </div>
+        `
+})
+
+# VvRadioGroup
+
+A group of radios.
+
+<Source language="jsx" code={'<vv-radio-group>...</vv-radio-group>'} />
+
+<Canvas>
+	<Story
+		name="vv-radio-group"
+		play={radioGroupTest}
+		args={{
+			name: 'radio',
+			label: 'Prova',
+			vertical: false,
+			disabled: false,
+			readonly: false,
+			options: [],
+			optionLabel: 'label',
+			optionValue: 'value',
+			hintLabel: 'Ciccio',
+			role: 'radiogroup'
+		}}>
+		{(args) => {
+			return {
+				components: { VvRadioGroup, VvRadio },
+				data: () => ({ selected: args.modelValue || null }),
+				setup() {
+					return { args }
+				},
+				template: `
+                    <div class="flex flex-row justify-between">
+                        <vv-radio-group v-bind="args" v-model:modelValue="selected">
+                            <vv-radio id="radio_opt1" name="opts" value="1">Opt 1</vv-radio>
+                            <vv-radio id="radio_opt2" name="opts" value="2">Opt 2</vv-radio>
+                            <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
+                        </vv-radio-group>
+                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
+                    </div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+<ArgsTable of={VvCheckGroup} />

package/src/stories/RadioGroup/RadioGroupDisabled.stories.mdx

@@ -0,0 +1,33 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+import { radioGroupTest } from './RadioProperty.test.ts'
+import { Template } from './RadioGroup.stories.mdx'
+
+<Meta title="Components/RadioGroup/Disabled" component={VvRadioGroup} />
+
+# Disabled
+
+<Canvas>
+	<Story
+		name="Disabled"
+		play={async (ctx) => {
+			radioGroupTest(ctx, {
+				isClickDisabled: true
+			})
+		}}
+		args={{
+			name: 'disabled',
+			options: [
+				{ value: 1, label: 'Mela' },
+				{ value: 2, label: 'Pera' },
+				{ value: 3, label: 'Banana' }
+			],
+			disabled: true,
+			role: 'radiogroup'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/RadioGroup/RadioGroupError.stories.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+import { radioGroupTest } from './RadioProperty.test.ts'
+import { Template } from './RadioGroup.stories.mdx'
+
+<Meta title="Components/RadioGroup/Error" component={VvRadioGroup} />
+
+# Error & Error message
+
+<Canvas>
+	<Story
+		name="Error"
+		play={async (ctx) => {
+			radioGroupTest(ctx, {
+				className: 'vv-input-radio-group--invalid'
+			})
+		}}
+		args={{
+			name: 'error',
+			options: [
+				{ value: 1, name: 'Mela' },
+				{ value: 2, name: 'Pera' },
+				{ value: 3, name: 'Banana' }
+			],
+			optionLabel: (o) => `Frutto: ${o.name}`,
+			error: true,
+			errorLabel: ['Errore 1', 'Errore 2'],
+			role: 'radiogroup'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/RadioGroup/RadioGroupHintLabel.stories.mdx

@@ -0,0 +1,33 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '../../components/VvRadio/VvRadio.vue'
+
+import { labelTest, radioGroupTest } from './RadioProperty.test.ts'
+
+<Meta title="Components/RadioGroup/HintLabel" component={VvRadioGroup} />
+
+# HintLabel
+
+<Canvas>
+	<Story
+		name="HintLabel"
+		play={async ({ canvasElement, args }) => {
+			labelTest(
+				{ canvasElement, args },
+				{ child: 1, propName: 'hintLabel' }
+			)
+		}}
+		args={{
+			name: 'vv-group-options-hint-label',
+			options: [
+				{ value: 1, name: 'Mela' },
+				{ value: 2, name: 'Pera' },
+				{ value: 3, name: 'Banana' }
+			],
+			optionLabel: (o) => `Frutto: ${o.name}`,
+			hintLabel: 'Prova prova prova prova',
+			role: 'radiogroup'
+		}}
+	/>
+</Canvas>