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

package/src/stories/Card/CardVariant.stories.mdx

@@ -1,13 +1,14 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvCard from '../../components/VvCard/VvCard.vue'
+import VvCard from '@/components/VvCard/VvCard.vue'
+import { defaultCardTest } from './Card.test'
 
 <Meta title="Components/Card/Variant" component={VvCard} />
 
 <Canvas>
 	<Story
 		name="Variant"
+		play={defaultCardTest}
 		args={{
 			variant: 'glass'
 		}}>
@@ -24,9 +25,9 @@ import VvCard from '../../components/VvCard/VvCard.vue'
 						<picture>
 							<img class="aspect-photo block" src="https://source.unsplash.com/featured/300×300/?ocean" alt="Card picture"/>
 						</picture>
-						<vv-card v-bind="args" title="Prova glass" class="absolute inset-32">
+						<vv-card v-bind="args" title="Title" class="absolute inset-32">
 							<template #content>
-								Prova
+								Lorem ipsum dolor sit amet
 							</template>
 						</vv-card>
 					</div>

package/src/stories/Checkbox/Checkbox.stories.mdx

@@ -0,0 +1,51 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+<Meta title="Components/Checkbox" component={VvCheckbox} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvCheckbox },
+	setup() {
+		return { args }
+	},
+	data: () => ({ ckValue: null }),
+	template: `
+			<vv-checkbox v-bind="args" v-model="ckValue" :data-testData="ckValue" data-testId="checkbox" />
+			<div>Selected value: <span data-testId="selected">{{ckValue}}</span></div> 
+        `
+})
+
+<Source language="jsx" code={'<vv-checkbox/>'} />
+
+<Canvas>
+	<Story
+		name="vv-checkbox"
+		args={{
+			label: 'Option',
+			name: 'checkbox',
+			disabled: false,
+			switch: false,
+			binary: false,
+			value: 1
+		}}
+		argTypes={{
+			id: {
+				description: 'Input element id',
+				table: { category: 'Attributes' }
+			},
+			name: {
+				description: 'Input element name',
+				table: { category: 'Attributes' }
+			},
+			value: {
+				description: 'Input element',
+				table: { category: 'Attributes' }
+			}
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<ArgsTable story="vv-checkbox" />

package/src/stories/Checkbox/Checkbox.test.js

@@ -0,0 +1,115 @@
+import { expect } from '@/test/expect'
+import { userEvent, within } from '@storybook/testing-library'
+
+expect.extend({
+	toBeChecked(checkbox) {
+		checkbox.click()
+		if (checkbox.checked) {
+			return {
+				pass: true,
+				message: () => `Checkbox is checked`
+			}
+		}
+		return {
+			pass: false,
+			message: () => `Checkbox is not checked`
+		}
+	}
+})
+
+async function checkTest({ functions, ...data }) {
+	const checkbox = document.getElementById(data.args.id)
+	if (functions) {
+		functions.forEach(async (func) => {
+			await func({ checkbox, ...data })
+		})
+	}
+	await expect(checkbox.parentElement).toHaveNoViolations()
+}
+
+async function booleanTest({ checkbox }) {
+	checkbox.addEventListener('click', (event) => {
+		expect(event).toBeTruthy()
+	})
+	await expect(checkbox).toBeChecked()
+}
+
+async function binaryTest(data) {
+	const checkbox = document.getElementById(data.args.id)
+	expect(checkbox.parentElement).toHaveClass('vv-checkbox')
+	const checkValue = value.innerText.replace('Valore selez: ', '')
+	await expect(checkValue).toEqual(data.args.falseValue)
+	checkbox.addEventListener('change', (event) => {
+		expect(event).toBeTruthy()
+	})
+	await expect(checkbox).toBeChecked()
+	const value = document.getElementById('value')
+	await expect(checkValue).toEqual(data.args.trueValue)
+}
+
+async function disabledTest({ args }) {
+	const checkbox = document.getElementById(args.id)
+	await expect(checkbox.parentElement).toHaveClass('vv-checkbox--disabled')
+	await expect(checkbox).toBeDisabled()
+	await expect(checkbox).toHaveProperty('disabled')
+	await expect(checkbox).not.toBeChecked()
+	await expect(checkbox.parentElement).toHaveNoViolations()
+}
+
+async function readOnlyTest({ args }) {
+	const checkbox = document.getElementById(args.id)
+	expect(checkbox).toHaveProperty('readOnly')
+	await expect(checkbox).toHaveClass('vv-checkbox__input--readonly')
+	userEvent.click(checkbox)
+	await expect(checkbox).toBeChecked()
+	await classTest(checkbox, ['focus-visible', 'vv-checkbox__input--readonly'])
+	await expect(checkbox).toHaveNoViolations()
+}
+
+async function switchTest({ canvasElement, args }) {
+	const checkbox = document.getElementById(args.id)
+	expect(checkbox).toBeChecked()
+	const selected = await await within(canvasElement).findByTestId('selected')
+	expect(selected.innerText.replace(/\s/g, '')).toEqual(
+		JSON.stringify(args.value).replace(/\s/g, '')
+	)
+}
+
+async function hintLabelTest(data, propLabel = data.args.hintLabel) {
+	const hintText =
+		document.getElementsByClassName('vv-checkbox__hint')[0].innerText
+	if (typeof propLabel == 'string') {
+		expect(hintText).toEqual(propLabel)
+	}
+	if (Array.isArray(propLabel)) {
+		propLabel.forEach((label) => {
+			expect(hintText).toContain(label)
+		})
+	}
+}
+
+async function classTest(input, classNames = []) {
+	classNames.forEach((cssClass) => {
+		expect(input).toHaveClass(cssClass)
+	})
+}
+
+async function errorTest(data) {
+	const checkbox = document.getElementById(data.args.id)
+	await expect(checkbox.parentElement).toHaveClass('vv-checkbox--invalid')
+	if (data.args.errorLabel) {
+		hintLabelTest(data, data.args.errorLabel)
+	}
+	await expect(checkbox).toHaveNoViolations()
+}
+
+export {
+	checkTest,
+	booleanTest,
+	binaryTest,
+	disabledTest,
+	readOnlyTest,
+	switchTest,
+	hintLabelTest,
+	errorTest
+}

package/src/stories/Checkbox/CheckboxBinary.stories.mdx

@@ -0,0 +1,76 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { checkTest, booleanTest, binaryTest } from './Checkbox.test'
+
+<Meta title="Components/Checkbox/Binary" component={VvCheckbox} />
+
+# Binary True / false
+
+<Canvas>
+	<Story
+		name="True/false"
+		play={(ctx) =>
+			checkTest({
+				...ctx,
+				functions: [booleanTest]
+			})
+		}
+		args={{
+			id: 4,
+			label: 'Accept terms and conditions',
+			name: 'ck4',
+			trueValue: true,
+			falseValue: false
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckbox },
+				setup() {
+					return { args }
+				},
+				data() {
+					return {
+						checkValue: false
+					}
+				},
+				template: `<div data-testId="checkbox" :data-testData="checkValue" :key="checkValue">
+						      <vv-checkbox v-model="checkValue" v-bind="args"  />
+							  <div>Selected value: {{checkValue}}</div>
+						   </div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+# Binary "Yes" / "No"
+
+<Canvas>
+	<Story
+		name="Binary Yes / No"
+		args={{
+			id: 5,
+			label: 'Accept terms and conditions',
+			name: 'ck5',
+			trueValue: 'Yes',
+			falseValue: 'No'
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckbox },
+				setup() {
+					return { args }
+				},
+				data() {
+					return {
+						checkValue: 'No'
+					}
+				},
+				template: `<div :data-testData="checkValue" :key="checkValue">
+						      <vv-checkbox v-model="checkValue" v-bind="args"  />
+							  <div>Selected value: {{checkValue}}</div>
+						   </div>`
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/{Check/CheckDisabled.stories.mdx → Checkbox/CheckboxDisabled.stories.mdx}

@@ -1,16 +1,15 @@
 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'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { Template } from './Checkbox.stories.mdx'
+import { disabledTest } from './Checkbox.test'
 
 <Meta
-	title="Components/Check/Disabled"
+	title="Components/Checkbox/Disabled"
 	args={{
 		modelValue: []
 	}}
-	component={VvCheck}
+	component={VvCheckbox}
 />
 
 # Disabled
@@ -18,9 +17,10 @@ import { Template } from './Check.stories.mdx'
 <Canvas>
 	<Story
 		name="Disabled"
+		play={disabledTest}
 		args={{
 			id: 1,
-			label: 'opzione 1',
+			label: 'Option 1',
 			name: 'ck1',
 			disabled: true,
 			value: 1

package/src/stories/Checkbox/CheckboxError.stories.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { Template } from './Checkbox.stories.mdx'
+import { errorTest } from './Checkbox.test'
+
+<Meta title="Components/Checkbox/Error" component={VvCheckbox} />
+
+# Error
+
+<Canvas>
+	<Story
+		name="Error with message"
+		play={errorTest}
+		args={{
+			id: 7,
+			label: 'Accept terms and conditions',
+			name: 'ck7',
+			value: 'conditions',
+			error: true,
+			errorLabel: 'Error label'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+# Error with messages
+
+<Canvas>
+	<Story
+		name="Error with messages"
+		play={errorTest}
+		args={{
+			id: 8,
+			label: 'Accept terms and conditions',
+			name: 'ck8',
+			value: 'conditions',
+			error: true,
+			errorLabel: ['First error', 'Second error']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Checkbox/CheckboxHintLabel.stories.mdx

@@ -0,0 +1,35 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { Template } from './Checkbox.stories.mdx'
+import { checkTest, hintLabelTest } from './Checkbox.test'
+
+<Meta
+	title="Components/Checkbox/HintLabel"
+	args={{
+		modelValue: []
+	}}
+	component={VvCheckbox}
+/>
+
+# Hint label
+
+<Canvas>
+	<Story
+		name="Hint label"
+		play={(ctx) =>
+			checkTest({
+				...ctx,
+				functions: [hintLabelTest]
+			})
+		}
+		args={{
+			id: 9,
+			label: 'Accept terms and conditions',
+			name: 'ck9',
+			modelValue: false,
+			hintLabel: 'Lorem ipsum dolor sit amet'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/{Check/CheckReadonly.stories.mdx → Checkbox/CheckboxReadonly.stories.mdx}

@@ -1,16 +1,14 @@
 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'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { Template } from './Checkbox.stories.mdx'
 
 <Meta
-	title="Components/Check/Readonly"
+	title="Components/Checkbox/Readonly"
 	args={{
 		modelValue: []
 	}}
-	component={VvCheck}
+	component={VvCheckbox}
 />
 
 # Readonly
@@ -20,10 +18,10 @@ import { Template } from './Check.stories.mdx'
 		name="Readonly"
 		args={{
 			id: 2,
-			label: 'opzione 1',
+			label: 'Option 1',
 			name: 'ck2',
 			readonly: true,
-			value: 'Pera'
+			value: 'Option 2'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/Checkbox/CheckboxSlots.stories.mdx

@@ -0,0 +1,69 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+<Meta title="Components/Checkbox/Slots" component={VvCheckbox} />
+
+# Slot default
+
+Slot default define the content of Check
+
+<Source
+	language="jsx"
+	code={`<vv-checkbox name="option" :value="1">Option 1</vv-checkbox>
+<vv-checkbox name="option" :value="2">Option 2</vv-checkbox>
+<vv-checkbox name="option" :value="3">Option 3</vv-checkbox>`}
+/>
+
+# Slot default
+
+<Canvas>
+	<Story name="default">
+		{() => {
+			return {
+				components: { VvCheckbox },
+				data() {
+					return {
+						option: [1]
+					}
+				},
+				template: `
+					<vv-checkbox v-model="option" name="option" :value="1">
+						Option 1
+					</vv-checkbox>
+					<vv-checkbox v-model="option" name="option" :value="2">
+						Option 2
+					</vv-checkbox>
+					<vv-checkbox v-model="option" name="option" :value="3">
+						Option 3
+					</vv-checkbox>
+					<div>Selected value: {{option}} </div> 
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+# Slot hint
+
+<Canvas>
+	<Story name="hint">
+		{() => {
+			return {
+				components: { VvCheckbox },
+				data() {
+					return {
+						option: 1
+					}
+				},
+				template: `
+					<vv-checkbox v-model="option" name="r1" :value="1">
+						My label
+						<template #hint="{value}">
+							Selected value: {{value}}
+						</template>
+					</vv-checkbox>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/{Check/CheckSwitch.stories.mdx → Checkbox/CheckboxSwitch.stories.mdx}

@@ -1,16 +1,15 @@
 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'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { Template } from './Checkbox.stories.mdx'
+import { switchTest } from './Checkbox.test'
 
 <Meta
-	title="Components/Check/Switch"
+	title="Components/Checkbox/Switch"
 	args={{
 		modelValue: []
 	}}
-	component={VvCheck}
+	component={VvCheckbox}
 />
 
 # Switch
@@ -18,12 +17,13 @@ import { Template } from './Check.stories.mdx'
 <Canvas>
 	<Story
 		name="Switch"
+		play={switchTest}
 		args={{
 			id: 3,
-			label: 'opzione 1',
+			label: 'Option 1',
 			name: 'ck3',
 			switch: true,
-			value: { a: 'Banana' }
+			value: { a: 'Option 3' }
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -0,0 +1,69 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+<Meta title="Components/CheckboxGroup" component={VvCheckboxGroup} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvCheckboxGroup, VvCheckbox },
+	setup() {
+		return { args }
+	},
+	data: () => ({ selected: args.modelValue || [] }),
+	template: `
+		<div class="flex flex-row justify-between">
+            <vv-checkbox-group v-bind="args" v-model="selected">
+                <template v-slot:hint>
+                    <p>Lorem ipsum dolor sit amet</p>
+                </template> 
+            </vv-checkbox-group>
+            <strong v-if="selected">Selected options: {{selected}} </strong> 
+        </div>
+        `
+})
+
+# VvCheckboxGroup
+
+A group of checks.
+
+<Source language="jsx" code={'<vv-checkbox-group>...</vv-checkbox-group>'} />
+
+<Canvas>
+	<Story
+		name="vv-checkbox-group"
+		args={{
+			name: 'story1',
+			label: 'Label',
+			vertical: false,
+			disabled: false,
+			readonly: false,
+			options: [],
+			optionLabel: 'label',
+			optionValue: 'value',
+			hintLabel: 'Lorem ipsum dolor sit amet'
+		}}>
+		{(args) => {
+			return {
+				components: { VvCheckboxGroup, VvCheckbox },
+				data: () => ({ selected: args.modelValue || [] }),
+				setup() {
+					return { args }
+				},
+				template: `
+                    <div class="flex flex-row justify-between">
+                        <vv-checkbox-group v-bind="args" v-model="selected">
+                            <vv-checkbox id="o1" name="opts" value="1">Option 1</vv-checkbox>
+                            <vv-checkbox id="o2" name="opts" value="2">Option 2</vv-checkbox>
+                            <vv-checkbox id="o3" name="opts" value="3">Option 3</vv-checkbox>
+                        </vv-checkbox-group>
+                        <strong v-if="selected">Selected options: {{selected}} </strong> 
+                    </div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+<ArgsTable of={VvCheckboxGroup} />

package/src/stories/CheckboxGroup/CheckboxGroupDisabled.stories.mdx

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

package/src/stories/CheckboxGroup/CheckboxGroupError.stories.mdx

@@ -0,0 +1,28 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/Error" component={VvCheckboxGroup} />
+
+# Error & Error message
+
+<Canvas>
+	<Story
+		name="Error"
+		args={{
+			name: 'vv-group-options-error-label',
+			options: [
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
+			],
+			optionLabel: (o) => `${o.name} option`,
+			error: true,
+			errorLabel: ['First error', 'Second error']
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupHintLabel.stories.mdx

@@ -0,0 +1,27 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+
+import { Template } from './CheckboxGroup.stories.mdx'
+
+<Meta title="Components/CheckboxGroup/HintLabel" component={VvCheckboxGroup} />
+
+# HintLabel
+
+<Canvas>
+	<Story
+		name="HintLabel"
+		args={{
+			name: 'vv-group-options-hint-label',
+			options: [
+				{ value: 1, name: 'First' },
+				{ value: 2, name: 'Second' },
+				{ value: 3, name: 'Third' }
+			],
+			optionLabel: (o) => `${o.name} option`,
+			hintLabel: 'Lorem ipsum dolor sit amet'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>