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

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

@@ -1,29 +0,0 @@
-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 { disabledTest } from './RadioPropertyTest.js'
-import { Template } from './RadioGroup.stories.mdx'
-
-<Meta title="Components/RadioGroup/Disabled" component={VvRadioGroup} />
-
-# Disabled
-
-<Canvas>
-	<Story
-		name="Disabled"
-		play={disabledTest}
-		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

@@ -1,31 +0,0 @@
-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 { errorLabelTest } from './RadioPropertyTest'
-import { Template } from './RadioGroup.stories.mdx'
-
-<Meta title="Components/RadioGroup/Error" component={VvRadioGroup} />
-
-# Error & Error message
-
-<Canvas>
-	<Story
-		name="Error"
-		play={errorLabelTest}
-		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

@@ -1,28 +0,0 @@
-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 { hintLabelTest } from './RadioPropertyTest.js'
-
-<Meta title="Components/RadioGroup/HintLabel" component={VvRadioGroup} />
-
-# HintLabel
-
-<Canvas>
-	<Story
-		name="HintLabel"
-		play={hintLabelTest}
-		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>

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

@@ -1,29 +0,0 @@
-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 { Template } from './RadioGroup.stories.mdx'
-import { labelTest } from './RadioPropertyTest.js'
-
-<Meta title="Components/RadioGroup/Label" component={VvRadioGroup} />
-
-# Label
-
-<Canvas>
-	<Story
-		name="Label"
-		play={labelTest}
-		args={{
-			name: 'story-label',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			label: 'Custom label',
-			role: 'radiogroup'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,65 +0,0 @@
-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 {
-	mainOptionsTest,
-	optionsLabelStringTest,
-	optionsLabelFunctionTest
-} from './RadioOptionsTest'
-import { Template } from './RadioGroup.stories.mdx'
-
-<Meta title="Components/RadioGroup/OptionLabel" component={VvRadioGroup} />
-
-# OptionLabel
-
-Change object prop for label
-
-<Canvas>
-	<Story
-		name="OptionsLabel - string"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsLabelStringTest]
-			})
-		}
-		args={{
-			name: 'options',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: 'name'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# OptionLabel Function
-
-Use function to define option label
-
-<Canvas>
-	<Story
-		name="OptionsLabel - function"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsLabelFunctionTest]
-			})
-		}
-		args={{
-			name: 'options',
-			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
-			],
-			optionLabel: (o) => `Frutto: ${o.name}`
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,65 +0,0 @@
-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 {
-	mainOptionsTest,
-	optionsValueStringTest,
-	optionsValueFunctionTest
-} from './RadioOptionsTest.js'
-import { Template } from './RadioGroup.stories.mdx'
-
-<Meta title="Components/RadioGroup/OptionsValue" component={VvRadioGroup} />
-
-# OptionValue
-
-Change object prop for value
-
-<Canvas>
-	<Story
-		name="OptionsValue - string"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsValueStringTest]
-			})
-		}
-		args={{
-			name: 'options',
-			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
-			],
-			optionValue: 'qta'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# OptionValue Function
-
-Use function to define option value
-
-<Canvas>
-	<Story
-		name="OptionsValue - function"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsValueFunctionTest]
-			})
-		}
-		args={{
-			name: 'options',
-			options: [
-				{ qta: 1, label: 'Mela' },
-				{ qta: 2, label: 'Pera' },
-				{ qta: 3, label: 'Banana' }
-			],
-			optionValue: (o) => `${o.qta}_${o.label}`
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,29 +0,0 @@
-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 { readonlyTest } from './RadioPropertyTest.js'
-import { Template } from './RadioGroup.stories.mdx'
-
-<Meta title="Components/RadioGroup/Readonly" component={VvRadioGroup} />
-
-# Readonly
-
-<Canvas>
-	<Story
-		name="Readonly"
-		play={readonlyTest}
-		args={{
-			name: 'readonly',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			readonly: true,
-			role: 'radiogroup'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,31 +0,0 @@
-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 { validTest } from './RadioPropertyTest.js'
-import { Template } from './RadioGroup.stories.mdx'
-
-<Meta title="Components/RadioGroup/Valid" component={VvRadioGroup} />
-
-# Valid & Valid label
-
-<Canvas>
-	<Story
-		name="Valid"
-		play={validTest}
-		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',
-			role: 'radiogroup'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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

@@ -1,29 +0,0 @@
-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 { verticalTest } from './RadioPropertyTest.js'
-import { Template } from './RadioGroup.stories.mdx'
-
-<Meta title="Components/RadioGroup/Vertical" component={VvRadioGroup} />
-
-# Vertical
-
-<Canvas>
-	<Story
-		name="Vertical"
-		play={verticalTest}
-		args={{
-			name: 'vertical',
-			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
-			],
-			vertical: true,
-			role: 'radiogroup'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

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/RadioPropertyTest.js

@@ -1,131 +0,0 @@
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function radioGroupTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const radio1 = document.getElementById('o1')
-	const radio2 = document.getElementById('o2')
-	radioCheck(radio1, false)
-	await expect(radio1).toBeClicked()
-	classTest(radioGroupParent, [
-		'vv-input-radio-group',
-		'vv-input-radio-group--horizontal'
-	])
-	classTest(radio1, ['focus-visible', 'vv-input-radio__input--checked'])
-	radioCheck(radio1, true)
-	radioCheck(radio2, false)
-	accessibilityTest(radioGroupParent)
-}
-
-async function disabledTest() {
-	const radio = document.getElementById('disabled_opt0')
-	expect(radio).toHaveClass('vv-input-radio__input--disabled')
-	expect(radio).toBeDisabled()
-	await radioCheck(radio, false)
-	await userEvent.click(radio)
-	await expect(radio).not.toBeClicked()
-	await radioCheck(radio, false)
-	accessibilityTest(radio.parentElement)
-}
-
-async function errorLabelTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	expect(radioGroupParent).toHaveClass('vv-input-radio-group--invalid')
-	accessibilityTest(radioGroupParent)
-}
-
-async function hintLabelTest({ canvasElement, ...data }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const labelInnerHTML = radioGroupParent.lastChild.innerHTML
-	const hintLabel = data.args.hintLabel
-	expect(labelInnerHTML).toBeTruthy()
-	expect(hintLabel).toBeTruthy()
-	expect(labelInnerHTML).toEqual(hintLabel)
-}
-
-async function labelTest({ canvasElement, ...data }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const labelInnerHTML = radioGroupParent.firstChild.innerHTML
-	const hintLabel = data.args.label
-	expect(labelInnerHTML).toBeTruthy()
-	expect(hintLabel).toBeTruthy()
-	expect(labelInnerHTML).toEqual(hintLabel)
-}
-
-async function readonlyTest() {
-	const radios = ['readonly_opt0', 'readonly_opt1', 'readonly_opt2']
-	radios.forEach((radio) => {
-		expect(document.getElementById(radio)).toHaveClass(
-			'vv-input-radio__input--readonly'
-		)
-	})
-}
-
-async function validTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	expect(radioGroupParent).toHaveClass('vv-input-radio-group--valid')
-	accessibilityTest(radioGroupParent)
-}
-
-async function verticalTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	expect(radioGroupParent).not.toHaveClass('vv-input-radio-group--horizontal')
-}
-
-expect.extend({
-	async toBeClicked(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()
-}
-
-async function radioCheck(radio, value) {
-	expect(radio.ariaChecked).toBe(`${value}`)
-	expect(radio.checked).toBe(value)
-}
-
-export {
-	radioGroupTest,
-	errorLabelTest,
-	hintLabelTest,
-	labelTest,
-	disabledTest,
-	readonlyTest,
-	validTest,
-	verticalTest
-}

package/src/stories/RadioGroup/RadioSlotsTest.js

@@ -1,20 +0,0 @@
-import { expect } from '@storybook/jest'
-import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function slotsTest({ canvasElement }, radioGroup) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const slot = radioGroupParent.lastElementChild
-	expect(slot).toHaveClass('vv-input-radio-group__hint')
-	expect(slot.innerText).toBeTruthy
-	if (radioGroup) {
-		expect(radioGroupParent).toHaveClass(
-			`vv-input-radio-group--${radioGroup}`
-		)
-	}
-	expect.extend(toHaveNoViolations)
-	expect(await axe(slot)).toHaveNoViolations()
-}
-export { slotsTest }

package/src/stories/Select/SelectDisabled.stories.mdx

@@ -1,32 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
-
-<Meta title="Components/Select/Props/disabled" />
-
-# VvSelect disabled
-
-Let's define a story for our `disabled` select.
-
-<Canvas>
-	<Story name="disabled">
-		{() => {
-			return {
-				components: { VvSelect },
-				data() {
-					return {
-						value: '',
-						options: ['Option 1', 'Option 2', 'Option 3']
-					}
-				},
-				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" disabled />`}
-/>

package/src/stories/Select/SelectMaxValues.stories.mdx

@@ -1,33 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvSelect from '../../components/VvSelect/VvSelect.vue'
-
-<Meta title="Components/Select/Props/maxValues" />
-
-# VvSelect maxValues
-
-Let's define a story for our multple `max-values` select.
-
-<Canvas>
-	<Story name="maxValues">
-		{() => {
-			return {
-				components: { VvSelect },
-				data() {
-					return {
-						value: '',
-						options: ['Option 4', 'Option 5', 'Option 6']
-					}
-				},
-				template: `<div class="w-1/2">
-						<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />
-						value: {{ value }}
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-select v-model:modelValue="value" :options="options" label="Label 1" multiple max-values="2" />`}
-/>