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

package/src/stories/ButtonGroup/ButtonGroupToggle.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, mixClassTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, mixClassTest, classTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props/toggle" component={VvButtonGroup} />
 
@@ -26,7 +25,7 @@ Force VvButtonGroup to work as toggle button. Keep last clicked button as active
 				...ctx,
 				functions: [classTest, mixClassTest],
 				className: 'compact',
-				classToTest: 'active',
+				classToTest: 'pressed',
 				numberOfElements: 1
 			})
 		}>
@@ -39,7 +38,7 @@ Force VvButtonGroup to work as toggle button. Keep last clicked button as active
 						args
 					}
 				},
-				data: () => ({ selected: null }),
+				data: () => ({ selected: '1a' }),
 				template: `
 					<div class="flex flex-row justify-between">
                         <vv-button-group toggle compact @update:modelValue="selected = $event" :modelValue="selected">
@@ -47,7 +46,7 @@ Force VvButtonGroup to work as toggle button. Keep last clicked button as active
                             <vv-button name="2b">Button 2</vv-button>
                             <vv-button name="3c">Button 3</vv-button>
                         </vv-button-group>
-						<strong v-if="selected">Bottone selez: {{selected}}</strong> 
+						<strong v-if="selected">Selected: {{selected}}</strong> 
 					</div>
                     `
 			}
@@ -80,7 +79,7 @@ If VvButton child element has't a name attribute, when VvButton is registered in
 								<vv-button name="2b">Button 2</vv-button>
 								<vv-button name="3c">Button 3</vv-button>
 							</vv-button-group>
-							<strong v-if="selected">Bottone selez: {{selected}}</strong> 
+							<strong v-if="selected">Selected: {{selected}}</strong> 
 						</div>
 						<div class="flex flex-row justify-between mt-22">
 							<vv-button-group toggle compact v-bind="args" @update:modelValue="selected2 = $event" :model-value="selected2">
@@ -88,7 +87,7 @@ If VvButton child element has't a name attribute, when VvButton is registered in
 								<vv-button name="2b">Button 2</vv-button>
 								<vv-button name="3c">Button 3</vv-button>
 							</vv-button-group>
-							<strong v-if="selected2">Bottone selez: {{selected2}}</strong> 
+							<strong v-if="selected2">Selected: {{selected2}}</strong> 
 						</div>
                     `
 			}
@@ -113,15 +112,15 @@ If VvButton child element has't a name attribute, when VvButton is registered in
 				template: `
 					<div class="flex flex-col">
 						<div class="flex flex-row justify-between">
-							<vv-button-group toggle compact v-bind="args" @update:modelValue="selected = $event" :model-value="selected">
+							<vv-button-group toggle compact v-bind="args" v-model="selected">
 								<vv-button name="1">Button 1</vv-button>
 								<vv-button name="2" v-if="hide2b">Button 2</vv-button>
 								<vv-button name="3">Button 3</vv-button>
 							</vv-button-group>
-							<strong v-if="selected">Bottone selez: {{selected}}</strong> 
+							<strong v-if="selected">Selected: {{selected}}</strong> 
 						</div>
 						<button class="vv-button vv-button--secondary mt-22" @click="hide2b = !hide2b"> 
-							<label> {{hide2b?'Nascondi 2':'Mostra 2'}}</label>
+							<label> {{ hide2b ? 'Hide 2' : 'Show 2' }}</label>
 						</button>
 					</div>
                     `

package/src/stories/ButtonGroup/ButtonGroupVertical.stories.mdx

@@ -1,8 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { buttonGroupTest, classTest } from './ButtonGroupTest.js'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { buttonGroupTest, classTest } from './ButtonGroup.test'
 
 <Meta title="Components/ButtonGroup/Props" component={VvButtonGroup} />
 

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

@@ -1,7 +1,7 @@
 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" component={VvCard} />
 
@@ -12,12 +12,14 @@ export const Template = (args, { argTypes }) => ({
 		return { args }
 	},
 	template: `
-        <vv-card v-bind="args">
-            Default
+        <vv-card v-bind="args" title="Card Title">
+            <template #content>Lorem ipsum dolor sit amet</template>
         </vv-card>
         `
 })
 
 <Canvas>
-	<Story name="vv-card">{Template.bind({})}</Story>
+	<Story name="vv-card" play={defaultCardTest}>
+		{Template.bind({})}
+	</Story>
 </Canvas>

package/src/stories/Card/Card.test.ts

@@ -0,0 +1,26 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+
+export async function defaultCardTest(data: PlayAttributes) {
+	const card = document.getElementsByClassName('vv-card')[0] as HTMLElement
+	data.args.variant && expect(card.outerHTML).toContain('variant="glass"')
+	card.children.length == 0 && expect(card.innerText).toBe('Default')
+	await expect(card).toHaveNoViolations()
+}
+
+export async function cardSlotsTest(data: PlayAttributes) {
+	const card = document.getElementsByClassName('vv-card')[0] as HTMLElement
+	const tags = ['header', 'picture', 'content', 'footer']
+	const cardItems = card.children
+	Array.from(cardItems).forEach((item, index) => {
+		index != 3
+			? expect(item.children[0] || item).toHaveClass(
+					`vv-card__${tags[index]}`
+			  )
+			: expect(item).toHaveClass(`vv-card__${tags[index]}`)
+		index != 2
+			? expect(item.nodeName).toEqual(tags[index].toUpperCase())
+			: expect(item.nodeName).toEqual('DIV')
+	})
+	await defaultCardTest(data)
+}

package/src/stories/Card/CardSlots.stories.mdx

@@ -1,12 +1,12 @@
 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 { cardSlotsTest } from './Card.test'
 
 <Meta title="Components/Card/Slots" component={VvCard} />
 
 <Canvas>
-	<Story name="Slots">
+	<Story name="Slots" play={cardSlotsTest}>
 		{(args) => {
 			return {
 				components: { VvCard },
@@ -24,12 +24,12 @@ import VvCard from '../../components/VvCard/VvCard.vue'
 							<img class="vv-card__picture aspect-photo" src="https://source.unsplash.com/featured/300×300/?ocean" alt="Card picture" style="height: 150px"/>
 						</picture>
 						<template #content>
-							Prova
+							Lorem ipsum dolor sit amet.
 						</template>
 						<template #footer>
 							<div class="flex items-center">
 								<span>Lorem ipsum dolor</span>
-								<button class="vv-button vv-button--action-quiet ml-auto" type="button">
+								<button class="vv-button vv-button--action-quiet ml-auto" type="button" aria-label="Add to favorites">
 									<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--akar-icons" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" data-icon="akar-icons:heart"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3C4.239 3 2 5.216 2 7.95c0 2.207.875 7.445 9.488 12.74a.985.985 0 0 0 1.024 0C21.125 15.395 22 10.157 22 7.95C22 5.216 19.761 3 17 3s-5 3-5 3s-2.239-3-5-3Z"></path></svg>
 								</button>
 							</div>

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>