@volverjs/ui-vue 0.0.1-beta.11

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

@@ -0,0 +1,30 @@
+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/Disabled"
+	args={{
+		modelValue: []
+	}}
+	component={VvCheck}
+/>
+
+# Disabled
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{
+			id: 1,
+			label: 'opzione 1',
+			name: 'ck1',
+			disabled: true,
+			value: 1
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,64 @@
+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

@@ -0,0 +1,74 @@
+/* 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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,102 @@
+/* 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/CheckReadonly.stories.mdx

@@ -0,0 +1,30 @@
+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/Readonly"
+	args={{
+		modelValue: []
+	}}
+	component={VvCheck}
+/>
+
+# Readonly
+
+<Canvas>
+	<Story
+		name="Readonly"
+		args={{
+			id: 2,
+			label: 'opzione 1',
+			name: 'ck2',
+			readonly: true,
+			value: 'Pera'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,51 @@
+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>

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

@@ -0,0 +1,30 @@
+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/Switch"
+	args={{
+		modelValue: []
+	}}
+	component={VvCheck}
+/>
+
+# Switch
+
+<Canvas>
+	<Story
+		name="Switch"
+		args={{
+			id: 3,
+			label: 'opzione 1',
+			name: 'ck3',
+			switch: true,
+			value: { a: 'Banana' }
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,26 @@
+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/CheckGroupOptionLabel.stories.mdx

@@ -0,0 +1,48 @@
+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/OptionLabel" component={VvCheckGroup} />
+
+# OptionLabel
+
+Change object prop for label
+
+<Canvas>
+	<Story
+		name="OptionsLabel - string"
+		args={{
+			name: 'vv-group-options-label-string',
+			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"
+		args={{
+			name: 'vv-group-options-label-function',
+			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/CheckGroup/CheckGroupOptionValue.stories.mdx

@@ -0,0 +1,48 @@
+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/OptionValue" component={VvCheckGroup} />
+
+# OptionValue
+
+Change object prop for value
+
+<Canvas>
+	<Story
+		name="OptionValue - string"
+		args={{
+			name: 'vv-group-options-value-string',
+			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="OptionValue - function"
+		args={{
+			name: 'vv-group-options-value-function',
+			options: [
+				{ qta: 1, label: 'Mela' },
+				{ qta: 2, label: 'Pera' },
+				{ qta: 3, label: 'Banana' }
+			],
+			optionValue: (o) => `${o.qta}_${o.label}`
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>