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

package/src/stories/CheckGroup/CheckGroup.stories.mdx

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

package/src/stories/CheckGroup/CheckGroupDisabled.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Disabled" component={VvCheckGroup} />
-
-# Disabled
-
-<Canvas>
-	<Story
-		name="Disabled"
-		args={{
-			name: 'story-disabled',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			disabled: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupError.stories.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Error" component={VvCheckGroup} />
-
-# Error & Error message
-
-<Canvas>
-	<Story
-		name="Error"
-		args={{
-			name: 'vv-group-options-error-label',
-			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']
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupHintLabel.stories.mdx

@@ -1,27 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/HintLabel" component={VvCheckGroup} />
-
-# HintLabel
-
-<Canvas>
-	<Story
-		name="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'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupLabel.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Label" component={VvCheckGroup} />
-
-# Label
-
-<Canvas>
-	<Story
-		name="Label"
-		args={{
-			name: 'story-label',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			label: 'Custom label'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupReadonly.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Readonly" component={VvCheckGroup} />
-
-# Readonly
-
-<Canvas>
-	<Story
-		name="Readonly"
-		args={{
-			name: 'story-readonly',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			readonly: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupSlots.stories.mdx

@@ -1,152 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-<Meta title="Components/CheckGroup/Slots" component={VvCheckGroup} />
-
-# Default
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{
-			name: 'story-slot-default'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                            <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                            <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Hint
-
-<Canvas>
-	<Story
-		name="Hint"
-		args={{
-			name: 'story-slot-hint'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                                <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                                <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                            </template>
-                            <template v-slot:hint="slotProps">
-                                <p>Ciao sono lo slot HINT!</p>
-								<p>{{slotProps}}</p> 
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Valid
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'story-slot-valid',
-			valid: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                                <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                                <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                            </template>
-                            <template v-slot:valid>
-                                <p>Ciao sono lo slot VALID!</p>
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-# Error
-
-<Canvas>
-	<Story
-		name="Error"
-		args={{
-			name: 'story-slot-error',
-			error: true
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheckGroup, VvCheck },
-				data: () => ({ selected: args.modelValue || [] }),
-				setup() {
-					return { args }
-				},
-				template:
-					/**html */
-					`
-                    <div class="flex flex-row justify-between">
-                        <vv-check-group v-bind="args" v-model:modelValue="selected">
-                            <template v-slot:default>
-                                <vv-check id="o1" name="opts" value="1">Opt 1</vv-check>
-                                <vv-check id="o2" name="opts" value="2">Opt 2</vv-check>
-                                <vv-check id="o3" name="opts" value="3">Opt 3</vv-check>
-                            </template>
-                            <template v-slot:error>
-                                <p>Ciao sono lo slot ERROR!</p>
-                            </template>
-                        </vv-check-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong>
-                    </div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupValid.stories.mdx

@@ -1,28 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Valid" component={VvCheckGroup} />
-
-# Valid & Valid label
-
-<Canvas>
-	<Story
-		name="Valid"
-		args={{
-			name: 'vv-group-options-valid-label',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
-			valid: true,
-			validLabel: 'Campo corretto'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/CheckGroup/CheckGroupVertical.stories.mdx

@@ -1,26 +0,0 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-
-import VvCheckGroup from '../../components/VvCheckGroup/VvCheckGroup.vue'
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './CheckGroup.stories.mdx'
-
-<Meta title="Components/CheckGroup/Vertical" component={VvCheckGroup} />
-
-# Vertical
-
-<Canvas>
-	<Story
-		name="Vertical"
-		args={{
-			name: 'story-vertical',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			vertical: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Radio/RadioTest.js

@@ -1,90 +0,0 @@
-/* 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/RadioOptionsTest.js

@@ -1,78 +0,0 @@
-import { expect } from '@storybook/jest'
-
-async function mainOptionsTest({ functions, ...data }) {
-	const options = data.args.options
-	options.forEach((option, index) => {
-		const radio = document.getElementById(`options_opt${index}`)
-		const radioValue = radio._value
-		const radioLabel = radio.parentElement.innerText
-		functions.forEach(async (func) => {
-			await func({ ...data }, index, radioValue, radioLabel)
-		})
-	})
-}
-
-async function radioOptionsTest({ ...data }, index, radioValue, radioLabel) {
-	const optionValue = data.args.options[index].value
-	const optionLabel = data.args.options[index].label
-	expect(optionLabel).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function arrayOptionsTest({ ...data }, index, radioValue, radioLabel) {
-	const optionValue = data.args.options[index]
-	expect(optionValue).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function optionsValueStringTest(
-	{ ...data },
-	index,
-	radioValue,
-	radioLabel
-) {
-	const optionValue = data.args.options[index].qta
-	const optionLabel = data.args.options[index].label
-	expect(optionLabel).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function optionsValueFunctionTest({ ...data }, index, radioValue) {
-	const optionValue = data.args.options[index].qta
-	const optionLabel = data.args.options[index].label
-	const resultValue = `${optionValue}_${optionLabel}`
-	expect(radioValue).toEqual(resultValue)
-}
-
-async function optionsLabelStringTest(
-	{ ...data },
-	index,
-	radioValue,
-	radioLabel
-) {
-	const optionValue = data.args.options[index].value
-	const optionLabel = data.args.options[index].name
-	expect(optionLabel).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function optionsLabelFunctionTest(
-	{ ...data },
-	index,
-	radioValue,
-	radioLabel
-) {
-	const optionLabel = data.args.options[index].name
-	const resultLabel = `Frutto: ${optionLabel}`
-	expect(radioLabel).toEqual(resultLabel)
-}
-
-export {
-	mainOptionsTest,
-	radioOptionsTest,
-	arrayOptionsTest,
-	optionsValueStringTest,
-	optionsValueFunctionTest,
-	optionsLabelStringTest,
-	optionsLabelFunctionTest
-}

package/src/stories/RadioGroup/RadioProperty.test.ts

@@ -1,87 +0,0 @@
-import type { PlayAttributes } from '@/test/types'
-import { within } from '@storybook/testing-library'
-import { expect } from '@/test/expect'
-
-interface RadioConfig {
-	isClickDisabled?: boolean
-	isVertical?: boolean
-	className?: string | string[] | null
-	child?: number
-	propName?: string
-}
-
-async function radioGroupTest(
-	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
-	{
-		isClickDisabled = false,
-		className = null,
-		isVertical = false
-	}: RadioConfig = {}
-) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const prefix = data.args.name
-	const radio1 = document.getElementById(`${prefix}_opt1`) as HTMLInputElement
-	const radio2 = document.getElementById(`${prefix}_opt2`) as HTMLInputElement
-	expect(radioGroupParent).toHaveClass('vv-input-radio-group')
-	if (!isVertical) {
-		expect(radioGroupParent).toHaveClass([
-			'vv-input-radio-group--horizontal'
-		])
-	} else {
-		expect(radioGroupParent).not.toHaveClass('vv-input-radio--horizontal')
-	}
-	if (className) {
-		expect(radioGroupParent).toHaveClass(className)
-	}
-	if (isClickDisabled) {
-		await expect(radio1).not.toBeClicked()
-		expect(radio1).toHaveClass('vv-input-radio__input--disabled')
-	} else {
-		await expect(radio1).toBeClicked()
-		await expect(radio1).toHaveClass([
-			'focus-visible',
-			'vv-input-radio__input--checked'
-		])
-		radioCheck(radio1, true)
-		radioCheck(radio2, false)
-	}
-	expect(radioGroupParent).toHaveNoViolations()
-}
-
-async function labelTest(
-	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
-	{ child = 0, propName = '' }: RadioConfig = {}
-) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const labelInnerHTML = radioGroupParent.children[child].innerHTML
-	const propLabel = data.args[propName]
-	expect(labelInnerHTML).toBeTruthy()
-	expect(propLabel).toBeTruthy()
-	expect(labelInnerHTML).toEqual(propLabel)
-	await radioGroupTest({ canvasElement, ...data })
-}
-
-async function readonlyTest(
-	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes
-) {
-	const radioGroupWrapper = await document.getElementsByClassName(
-		'vv-input-radio-group__wrapper'
-	)[0]
-	const radioLabels = [...radioGroupWrapper.children]
-	radioLabels.forEach((label) => {
-		const radio = label.children[0]
-		expect(radio).toHaveClass('vv-input-radio__input--readonly')
-	})
-	radioGroupTest({ canvasElement, ...data })
-}
-
-async function radioCheck(radio: HTMLInputElement, value: boolean) {
-	expect(radio.ariaChecked).toBe(`${value}`)
-	expect(radio.checked).toBe(value)
-}
-
-export { radioGroupTest, labelTest, readonlyTest }