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

package/src/stories/Button/ButtonVariant.stories.mdx

@@ -1,205 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { buttonTest, classTest, cssTest, disableTest } from './test.js'
-import { testButton } from './Button.test'
-
-<Meta title="Components/Button/Variant" />
-
-# VvButton variant
-
-Stories of `VvButton` default `variant`.
-
-## Block
-
-Let's define a story for our `block` button.
-Create block level button that span the full width of a parent.
-
-<Canvas>
-	<Story
-		name="block"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: `vv-button--block`
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Block" block />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Block" block />'} />
-
-## Rounded
-
-Let's define a story for our `rounded` button:
-
-<Canvas>
-	<Story
-		name="rounded"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: `vv-button--rounded`
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Rounded" rounded />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Rounded" rounded />'} />
-
-## Full-bleed
-
-Let's define a story for our `full-bleed` button:
-
-<Canvas>
-	<Story
-		name="full-bleed"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: `vv-button--full-bleed`
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<div class="flex gap-4">
-						<vv-button label="Full bleed" full-bleed />
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<div class="flex gap-4">
-	<vv-button label="Full bleed" full-bleed />
-</div>`}
-/>
-
-## Disabled
-
-Let's define a story for our `disabled` button.
-
-<Canvas>
-	<Story
-		name="disabled"
-		play={async (ctx) => {
-			testButton(ctx, {
-				isClickDisabled: true
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Disabled" disabled />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Disabled" disabled />'} />
-
-## Active
-
-Let's define a story for our `active` button.
-
-<Canvas>
-	<Story
-		name="active"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--active'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Active" active />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Active" active />'} />
-
-## Action
-
-Let's define a story for our `action` button.
-
-<Canvas>
-	<Story
-		name="action"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--action'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Action" action />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Action" action />'} />
-
-## Action Selected
-
-Let's define a story for our `action` `selected` button.
-
-<Canvas>
-	<Story
-		name="selected"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--selected'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Action Selected" action selected />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Action" action selected />'} />
-
-## Action quiet
-
-Let's define a story for our `action-quiet` button.
-
-<Canvas>
-	<Story
-		name="action-quiet"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--action-quiet'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Action quiet" action-quiet />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={'<vv-button label="Action quiet" action-quiet />'}
-/>

package/src/stories/Button/test.js

@@ -1,41 +0,0 @@
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function buttonTest({ canvasElement, functions, ...args }) {
-	const button = await within(canvasElement).findByRole('button')
-	await userEvent.click(button)
-
-	if (functions) {
-		functions.forEach(async (func) => {
-			await func({ button: button, ...args })
-		})
-	}
-
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(button)).toHaveNoViolations()
-}
-
-async function classTest({ button, className = null }) {
-	if (className) {
-		expect(button).toHaveClass(`vv-button--${className}`)
-	}
-}
-
-async function cssTest({ button, cssString = null }) {
-	if (cssString) {
-		expect(button).toHaveStyle(cssString)
-	}
-}
-async function disableTest({ button }) {
-	expect(button).toBeDisabled()
-}
-
-async function propertyTest({ button, properties = [] }) {
-	properties.forEach((property) => {
-		expect(button).toHaveProperty(property)
-	})
-}
-
-export { buttonTest, classTest, cssTest, disableTest, propertyTest }

package/src/stories/Check/Check.stories.mdx

@@ -1,62 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-<Meta
-	title="Components/Check"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvCheck },
-	setup() {
-		return { args }
-	},
-	data: () => ({ ckValue: [] }),
-	template: `
-		<div :data-testData="ckValue" data-testId="checkbox" class="flex flex-row justify-between">
-			<vv-check v-bind="args" v-model:modelValue="ckValue" class="ciccio"/>
-			<strong v-if="ckValue">Valore selez: {{ckValue}} </strong> 
-		</div>
-        `
-})
-
-<Source language="jsx" code={'<vv-check/>'} />
-
-<Canvas>
-	<Story
-		name="vv-check"
-		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'ck1',
-			disabled: false,
-			switch: false,
-			binary: false,
-			modelValue: [],
-			value: 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-check" />

package/src/stories/Check/CheckBinary.stories.mdx

@@ -1,75 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-import { checkTest, booleanTest, binaryTest } from './CheckPropertyTest.js'
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/Binary"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Binary True/false (sperimentale)
-
-<Canvas>
-	<Story
-		name="True/false"
-		play={(ctx) =>
-			checkTest({
-				...ctx,
-				functions: [booleanTest]
-			})
-		}
-		args={{
-			id: 4,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck4',
-			binary: true,
-			modelValue: false
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Binary "Si"/"No" (sperimentale)
-
-<Canvas>
-	<Story
-		name="Binario Si/No (sperimentale)"
-		args={{
-			id: 5,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck5',
-			binary: true,
-			trueValue: 'Si',
-			falseValue: 'No'
-		}}>
-		{(args) => {
-			return {
-				components: { VvCheck },
-				setup() {
-					return { args }
-				},
-				data() {
-					return {
-						checkValue: 'No'
-					}
-				},
-				watch: {
-					checkValue: {
-						immediate: true,
-						handler(newValue) {}
-					}
-				},
-				template: `<div :data-testData="checkValue" :key="checkValue">
-						<vv-check v-model:modelValue="checkValue" v-bind="args"  />
-						<strong v-if="checkValue">Valore selez: {{checkValue}} </strong>
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckError.stories.mdx

@@ -1,64 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/Error"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# 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/Check/CheckErrorTests.js

@@ -1,74 +0,0 @@
-/* eslint-disable no-console */
-
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function disabledTest() {
-	const checkInput = document.getElementById('1')
-	await expect(checkInput).toHaveClass('vv-input-check__input--disabled')
-	await expect(checkInput).toBeDisabled()
-	await expect(checkInput).toHaveProperty('disabled')
-	await expect(checkInput).not.toBeChecked()
-	await expect(checkInput.value).toBe('')
-	await accessibilityTest(checkInput)
-}
-
-async function readOnlyTest() {
-	const checkInput = document.getElementById('2')
-	const value = document.getElementById('value')
-	console.log(checkInput.modelValue)
-	expect(checkInput).toHaveProperty('readOnly')
-	await expect(checkInput).toHaveClass('vv-input-check__input--readonly')
-	userEvent.click(checkInput)
-	await expect(checkInput).toBeChecked()
-	await console.log({ checkInput })
-	await classTest(checkInput, [
-		'focus-visible',
-		'vv-input-check__input--checked',
-		'vv-input-check__input--readonly'
-	])
-	accessibilityTest(checkInput)
-}
-
-async function switchTest() {
-	const checkInput = document.getElementById('3')
-	await expect(checkInput.parentElement).toHaveClass(
-		'vv-input-checkbox--switch'
-	)
-	userEvent.click(checkInput)
-	await expect(checkInput).toBeChecked()
-	console.log(checkInput.parentElement)
-	accessibilityTest(checkInput)
-}
-
-expect.extend({
-	async toBeChecked(checkInput) {
-		let result = {
-			pass: false,
-			message: `Click event doesn't work`
-		}
-		// await userEvent.click(checkInput)
-		await checkInput.click()
-		if (checkInput.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, readOnlyTest, switchTest }

package/src/stories/Check/CheckHintLabel.stories.mdx

@@ -1,30 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-
-import { Template } from './Check.stories.mdx'
-
-<Meta
-	title="Components/Check/HintLabel"
-	args={{
-		modelValue: []
-	}}
-	component={VvCheck}
-/>
-
-# Hint label
-
-<Canvas>
-	<Story
-		name="Hint label"
-		args={{
-			id: 9,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck9',
-			modelValue: false,
-			hintLabel: 'Aiuto! Son qui!'
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Check/CheckPropertyTest.js

@@ -1,102 +0,0 @@
-/* eslint-disable no-console */
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function checkTest({ canvasElement, functions, ...data }) {
-	const checkboxParent = await within(canvasElement).findByTestId('checkbox')
-	const checkbox = document.getElementById(`${data.args.id}`)
-	console.log(data)
-	expect(checkbox).toBeChecked()
-	if (functions) {
-		functions.forEach(async (func) => {
-			await func({ checkboxParent, ...data })
-		})
-	}
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(checkboxParent)).toHaveNoViolations()
-}
-
-async function booleanTest(checkboxParent) {
-	const checkbox = document.getElementById(`${checkboxParent.args.id}`)
-	console.log([checkboxParent.checkboxParent.attributes[0]])
-	// expect(checkboxParent.children[0]).toHaveClass('vv-input-checkbox')
-	checkbox.addEventListener('change', (event) => {
-		expect(event).toBeTruthy
-	})
-	await userEvent.click(checkbox)
-	await classTest(checkbox, [
-		'focus-visible',
-		'vv-input-check__input--checked'
-	])
-}
-
-async function binaryTest() {
-	const checkbox = document.getElementById('5')
-	expect(checkbox.parentElement).toHaveClass('vv-input-checkbox')
-	// userEvent.click(checkbox)
-	userEvent.click(checkbox)
-	accessibilityTest(checkbox)
-	checkbox.addEventListener('change', (event) => {
-		console.log(event)
-	})
-}
-
-async function disabledTest() {
-	const checkInput = document.getElementById('1')
-	await expect(checkInput).toHaveClass('vv-input-check__input--disabled')
-	await expect(checkInput).toBeDisabled()
-	await expect(checkInput).toHaveProperty('disabled')
-	await expect(checkInput).not.toBeChecked()
-	await expect(checkInput.value).toBe('')
-	await accessibilityTest(checkInput)
-}
-
-async function readOnlyTest() {
-	const checkInput = document.getElementById('2')
-	const value = document.getElementById('value')
-	console.log(checkInput.modelValue)
-	expect(checkInput).toHaveProperty('readOnly')
-	await expect(checkInput).toHaveClass('vv-input-check__input--readonly')
-	userEvent.click(checkInput)
-	await expect(checkInput).toBeChecked()
-	await console.log({ checkInput })
-	await classTest(checkInput, [
-		'focus-visible',
-		'vv-input-check__input--checked',
-		'vv-input-check__input--readonly'
-	])
-	accessibilityTest(checkInput)
-}
-
-expect.extend({
-	async toBeChecked(checkInput) {
-		let result = {
-			pass: false,
-			message: `Click event doesn't work`
-		}
-		// await userEvent.click(checkInput)
-		await checkInput.click()
-		if (checkInput.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 { checkTest, booleanTest, binaryTest, disabledTest, readOnlyTest }

package/src/stories/Check/CheckSlots.stories.mdx

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