@volverjs/ui-vue 0.0.1-beta.11

package/src/stories/ButtonGroup/ButtonGroupActionQuiet.stories.mdx

@@ -0,0 +1,50 @@
+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'
+
+<Meta
+	title="Components/ButtonGroup/Props/action-quiet"
+	component={VvButtonGroup}
+/>
+
+# Action quiet
+
+A VvButtonGroup with the `action-quiet` prop
+
+<Canvas>
+	<Story
+		name="action-quiet"
+		play={(ctx) =>
+			buttonGroupTest({
+				...ctx,
+				functions: [classTest],
+				className: 'action-quiet'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				template: `
+					<div class="flex flex-col">
+						<vv-button-group action-quiet>
+                            <vv-button>Button 1</vv-button>
+                            <vv-button>Button 2</vv-button>
+                            <vv-button>Button 3</vv-button>
+                        </vv-button-group>
+					</div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-button-group action-quiet>
+	<vv-button>Button 1</vv-button>
+	<vv-button>Button 2</vv-button>
+	<vv-button>Button 3</vv-button>
+</vv-button-group>`}
+/>

package/src/stories/ButtonGroup/ButtonGroupBlock.stories.mdx

@@ -0,0 +1,40 @@
+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'
+
+<Meta title="Components/ButtonGroup/Props" component={VvButtonGroup} />
+
+# Block
+
+A VvButtonGroup with the <strong>block</strong> prop will be render with <strong>.vv-button-group--block</strong> css class. <br/>
+
+<Source language="jsx" code={'<vv-button block></vv-button>'} />
+
+<Canvas>
+	<Story
+		name="block"
+		play={(ctx) =>
+			buttonGroupTest({
+				...ctx,
+				functions: [classTest],
+				className: 'block'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				template: `
+					<div class="flex flex-col">
+						<vv-button-group block class="mt-22">
+                            <vv-button>Button 1</vv-button>
+                            <vv-button id="btn2">Button 2</vv-button>
+                            <vv-button>Button 3</vv-button>
+                        </vv-button-group> 
+					</div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/ButtonGroup/ButtonGroupCompact.stories.mdx

@@ -0,0 +1,38 @@
+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'
+
+<Meta title="Components/ButtonGroup/Props/compact" component={VvButtonGroup} />
+
+# Compact
+
+A VvButtonGroup with the <strong>compact</strong> prop will be render with <strong>.vv-button-group--compact</strong> css class.
+
+<Source language="jsx" code={'<vv-button compact></vv-button>'} />
+
+<Canvas>
+	<Story
+		name="compact"
+		play={(ctx) =>
+			buttonGroupTest({
+				...ctx,
+				functions: [classTest],
+				className: 'compact'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				template: `
+                        <vv-button-group compact>
+                            <vv-button id="btn1">Button 1</vv-button>
+                            <vv-button id="btn2">Button 2</vv-button>
+                            <vv-button id="btn3">Button 3</vv-button>
+                        </vv-button-group>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/ButtonGroup/ButtonGroupRounded.stories.mdx

@@ -0,0 +1,77 @@
+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, mixClassTest } from './ButtonGroupTest.js'
+
+<Meta title="Components/ButtonGroup/Props/rounded" component={VvButtonGroup} />
+
+# Rounded
+
+A VvButtonGroup with the <strong>rounded</strong> prop will be render with <strong>.vv-button-group--rounded</strong> css class. <br/>
+
+<Source language="jsx" code={'<vv-button rounded></vv-button>'} />
+
+<Canvas>
+	<Story
+		name="rounded"
+		play={(ctx) =>
+			buttonGroupTest({
+				...ctx,
+				functions: [classTest],
+				className: 'rounded'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				template: `
+                        <vv-button-group rounded>
+                            <vv-button>Button 1</vv-button>
+                            <vv-button id="btn2">Button 2</vv-button>
+                            <vv-button>Button 3</vv-button>
+                        </vv-button-group>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+# Mix rounded buttons
+
+You can manage the rounded stile of single buttons into group. Set rounded=false and add <strong>.vv-button--rounded</strong> to single buttons.
+
+<Canvas>
+	<Story
+		name="mix"
+		play={(ctx) =>
+			buttonGroupTest({
+				...ctx,
+				functions: [mixClassTest],
+				numberOfElements: 2,
+				classToTest: 'rounded'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				template: `
+					<div class="flex flex-col">
+                        <vv-button-group data-testid="mix1">
+                            <vv-button class="vv-button vv-button--rounded">Button 1</vv-button>
+                            <vv-button id="btn2">Button 2</vv-button>
+                            <vv-button class="vv-button vv-button--rounded">Button 3</vv-button>
+                        </vv-button-group>
+						<!--
+						 <vv-button-group data-testid="mix2" class="mt-22">
+                            <vv-button>Button 1</vv-button>
+                            <vv-button>Button 2</vv-button>
+                            <vv-button class="vv-button vv-button--rounded">Button 3</vv-button>
+                        </vv-button-group>
+						-->
+					</div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/ButtonGroup/ButtonGroupTest.js

@@ -0,0 +1,61 @@
+import { expect } from '@storybook/jest'
+import { userEvent, within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function buttonGroupTest({ canvasElement, functions, ...args }) {
+	const buttonGroup = await within(canvasElement).findByRole('group')
+	await expect(buttonGroup).toBeClicked()
+	if (functions) {
+		functions.forEach(async (func) => {
+			await func({ buttonGroup, ...args })
+		})
+	}
+	// Accessibility Test
+	expect.extend(toHaveNoViolations)
+	expect(await axe(buttonGroup)).toHaveNoViolations()
+}
+
+async function mixClassTest({
+	buttonGroup,
+	numberOfElements = null,
+	classToTest = null
+}) {
+	let roundedButtons = 0
+	const buttons = buttonGroup.children
+
+	for (const button of buttons) {
+		const buttonClassList = [...button.classList]
+
+		if (buttonClassList.includes(`vv-button--${classToTest}`)) {
+			roundedButtons++
+		}
+	}
+	expect(roundedButtons).toBe(numberOfElements)
+}
+
+expect.extend({
+	async toBeClicked(buttonGroup) {
+		let result = {
+			pass: false,
+			message: `Click event doesn't work`
+		}
+		buttonGroup.addEventListener('click', ({ target }) => {
+			if (target.id == 'btn2') {
+				result = {
+					pass: true,
+					message: `Click event work!`
+				}
+			}
+		})
+		await userEvent.click(buttonGroup.children[1])
+		return result
+	}
+})
+
+async function classTest({ buttonGroup, className = null }) {
+	if (className) {
+		expect(buttonGroup).toHaveClass(`vv-button-group--${className}`)
+	}
+}
+
+export { buttonGroupTest, classTest, mixClassTest }

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

@@ -0,0 +1,131 @@
+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'
+
+<Meta title="Components/ButtonGroup/Props/toggle" component={VvButtonGroup} />
+
+# Toggle
+
+Force VvButtonGroup to work as toggle button. Keep last clicked button as active/selected.
+
+<Source
+	language="jsx"
+	code={
+		'<vv-button-group v-bind="props" model-value="selected" @update:modelValue="selected = $event"></vv-button-group>'
+	}
+/>
+
+<Canvas>
+	<Story
+		name="toggle"
+		args={{}}
+		play={(ctx) =>
+			buttonGroupTest({
+				...ctx,
+				functions: [classTest, mixClassTest],
+				className: 'compact',
+				classToTest: 'active',
+				numberOfElements: 1
+			})
+		}>
+		{(args, { argTypes }) => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				props: Object.keys(argTypes),
+				setup() {
+					return {
+						args
+					}
+				},
+				data: () => ({ selected: null }),
+				template: `
+					<div class="flex flex-row justify-between">
+                        <vv-button-group toggle compact @update:modelValue="selected = $event" :modelValue="selected">
+                            <vv-button name="1a">Button 1</vv-button>
+                            <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> 
+					</div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+Warning!<br/>
+Toggle mode work only if VvButtonGroup childs are VvButton components.
+If VvButton child element has't a name attribute, when VvButton is registered into VvButtonGroup a custom key will be generated.
+
+# Toggle multipli
+
+<Canvas>
+	<Story name="toggle istanze multiple" args={{ modelValue: null }}>
+		{(args, { argTypes }) => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				props: Object.keys(argTypes),
+				setup() {
+					return {
+						args
+					}
+				},
+				data: () => ({ selected: null, selected2: null }),
+				template: `
+                        <div class="flex flex-row justify-between">
+							<vv-button-group toggle compact v-bind="args" @update:modelValue="selected = $event" :model-value="selected">
+								<vv-button name="1a">Button 1</vv-button>
+								<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> 
+						</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">
+								<vv-button name="1a">Button 1</vv-button>
+								<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> 
+						</div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>
+
+# Toggle v-if on button
+
+<Canvas>
+	<Story name="v-if on button" args={{ modelValue: null }}>
+		{(args, { argTypes }) => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				props: Object.keys(argTypes),
+				setup() {
+					return {
+						args
+					}
+				},
+				data: () => ({ hide2b: false, selected: null }),
+				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 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> 
+						</div>
+						<button class="vv-button vv-button--secondary mt-22" @click="hide2b = !hide2b"> 
+							<label> {{hide2b?'Nascondi 2':'Mostra 2'}}</label>
+						</button>
+					</div>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,38 @@
+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'
+
+<Meta title="Components/ButtonGroup/Props" component={VvButtonGroup} />
+
+# Vertical
+
+A VvButtonGroup with the <strong>vertical</strong> prop will be render with <strong>.vv-button-group--vertical</strong> css class.
+
+<Source language="jsx" code={'<vv-button vertical></vv-button>'} />
+
+<Canvas>
+	<Story
+		name="vertical"
+		play={(ctx) =>
+			buttonGroupTest({
+				...ctx,
+				functions: [classTest],
+				className: 'vertical'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton, VvButtonGroup },
+				template: `
+                        <vv-button-group vertical>
+                            <vv-button>Button 1</vv-button>
+                            <vv-button id="btn2">Button 2</vv-button>
+                            <vv-button>Button 3</vv-button>
+                        </vv-button-group>
+                    `
+			}
+		}}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,23 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvCard from '../../components/VvCard/VvCard.vue'
+
+<Meta title="Components/Card" component={VvCard} />
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvCard },
+	setup() {
+		return { args }
+	},
+	template: `
+        <vv-card v-bind="args">
+            Default
+        </vv-card>
+        `
+})
+
+<Canvas>
+	<Story name="vv-card">{Template.bind({})}</Story>
+</Canvas>

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

@@ -0,0 +1,42 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvCard from '../../components/VvCard/VvCard.vue'
+
+<Meta title="Components/Card/Slots" component={VvCard} />
+
+<Canvas>
+	<Story name="Slots">
+		{(args) => {
+			return {
+				components: { VvCard },
+				setup() {
+					return {
+						args
+					}
+				},
+				template: `
+					<vv-card v-bind="args" class="absolute inset-32">
+						<template #header>
+							Header
+						</template>
+						<picture>
+							<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
+						</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">
+									<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>
+						</template>
+					</vv-card>
+					`
+			}
+		}}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import { action } from '@storybook/addon-actions'
+
+import VvCard from '../../components/VvCard/VvCard.vue'
+
+<Meta title="Components/Card/Variant" component={VvCard} />
+
+<Canvas>
+	<Story
+		name="Variant"
+		args={{
+			variant: 'glass'
+		}}>
+		{(args) => {
+			return {
+				components: { VvCard },
+				setup() {
+					return {
+						args
+					}
+				},
+				template: `
+					<div class="relative theme theme--light"  style="width: 450px">
+						<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">
+							<template #content>
+								Prova
+							</template>
+						</vv-card>
+					</div>
+					`
+			}
+		}}
+	</Story>
+</Canvas>

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

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

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