@volverjs/ui-vue 0.0.1-beta.8 → 0.0.1

package/src/stories/Button/ButtonToggle.stories.mdx

@@ -0,0 +1,50 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import { Template } from './Button.stories.mdx'
+import { defaultTest } from './Button.test'
+import { argTypes, defaultArgs } from './Button.settings'
+
+<Meta title="Components/Button/Toggle" args={defaultArgs} argTypes={argTypes} />
+
+<Canvas>
+	<Story
+		name="Default"
+		args={{
+			toggle: true,
+		}}
+		argTypes={{
+			toggle: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Unselectable"
+		args={{
+			toggle: true,
+			unselectable: false,
+		}}
+		argTypes={{
+			toggle: {
+				control: {
+					disable: true,
+				},
+			},
+			unselectable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/ButtonGroup/ButtonGroup.settings.ts

@@ -0,0 +1,28 @@
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { VvButtonGroupProps } from '@/components/VvButtonGroup'
+import { argTypes as buttonArgTypes } from '../Button/Button.settings'
+
+export const defaultArgs = {
+	...propsToObject(VvButtonGroupProps),
+	modifiers: [],
+}
+
+export const argTypes = {
+	modelValue: {
+		table: {
+			disable: true,
+		},
+	},
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['compact', 'vertical', 'block'],
+	},
+	itemModifiers: {
+		options: buttonArgTypes.modifiers.options,
+		control: {
+			type: 'check',
+		},
+	},
+	...DefaultSlotArgTypes,
+}

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

@@ -1,39 +1,37 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-
-import VvButton from '../../components/VvButton/VvButton.vue'
-import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
-import { VvButtonGroupProps } from '../../components/VvButtonGroup/VvButtonGroup'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { defaultArgs, argTypes } from './ButtonGroup.settings'
+import { defaultTest } from './ButtonGroup.test'
 
 <Meta
 	title="Components/ButtonGroup"
 	component={VvButtonGroup}
-	args={{ ...ObjectUtilities.propsToObject(VvButtonGroupProps) }}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 export const Template = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	components: { VvButton, VvButtonGroup },
+	data() {
+		return { value: undefined }
+	},
 	setup() {
 		return { args }
 	},
 	template: `
-        <vv-button-group v-bind="args">
-            <vv-button name="1a">Button 1</vv-button>
+        <vv-button-group v-bind="args" v-model="value" data-testId="button-group">
+            <vv-button name="1a" data-testId="first-button">Button 1</vv-button>
             <vv-button name="2b">Button 2</vv-button>
             <vv-button name="3c">Button 3</vv-button>
         </vv-button-group>
-        `
+		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>
+        `,
 })
 
-# VvButtonGroup
-
-A button group is a grouping of buttons whose actions are related to each other.
-
-<Source language="jsx" code={'<vv-button></vv-button>'} />
-
 <Canvas>
-	<Story name="vv-button-group" args={{ vertical: false, compact: false }}>
-		{Template.bind({})}
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/ButtonGroup/ButtonGroup.test.ts

@@ -0,0 +1,35 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within } from '@storybook/testing-library'
+
+export async function defaultTest(
+	{ canvasElement, args }: PlayAttributes = {} as PlayAttributes,
+) {
+	const buttonGroup = (await within(canvasElement).findByTestId(
+		'button-group',
+	)) as HTMLElement
+	const firstButton = (await within(canvasElement).findByTestId(
+		'first-button',
+	)) as HTMLElement
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: [args.modifiers]
+
+	// check modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(buttonGroup).toHaveClass(`vv-button-group--${modifier}`)
+		}
+	}
+
+	// check disabled
+	if (args.disabled) {
+		await expect(firstButton).not.toBeClicked()
+	} else {
+		await expect(firstButton).toBeClicked()
+	}
+
+	// check accessibility
+	await expect(buttonGroup).toHaveNoViolations()
+}

package/src/stories/ButtonGroup/ButtonGroupModifiers.stories.mdx

@@ -0,0 +1,52 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { Template } from './ButtonGroup.stories.mdx'
+import { defaultArgs, argTypes } from './ButtonGroup.settings'
+import { defaultTest } from './ButtonGroup.test'
+
+<Meta
+	title="Components/ButtonGroup/Modifiers"
+	component={VvButtonGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Compact"
+		args={{ modifiers: 'compact' }}
+		play={defaultTest}
+		argTypes={{
+			modifiers: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="Vertical" args={{ modifiers: 'vertical' }} play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Block"
+		args={{ modifiers: 'block' }}
+		play={defaultTest}
+		argTypes={{
+			modifiers: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -1,131 +1,62 @@
-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>'
-	}
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
+import { Template } from './ButtonGroup.stories.mdx'
+import { defaultArgs, argTypes } from './ButtonGroup.settings'
+import { defaultTest } from './ButtonGroup.test'
+
+<Meta
+	title="Components/ButtonGroup/Toggle"
+	component={VvButtonGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
 />
 
 <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 name="Default" play={defaultTest}>
+		{Template.bind()}
 	</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
-					}
+	<Story
+		name="Multiple"
+		args={{ toggle: true, multiple: true }}
+		argTypes={{
+			toggle: {
+				control: {
+					disable: true,
+				},
+			},
+			multiple: {
+				control: {
+					disable: true,
 				},
-				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>
-                    `
-			}
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</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
-					}
+	<Story
+		name="Unselectable"
+		args={{ toggle: true, unselectable: false }}
+		argTypes={{
+			toggle: {
+				control: {
+					disable: true,
+				},
+			},
+			unselectable: {
+				control: {
+					disable: true,
 				},
-				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>
-                    `
-			}
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>

package/src/stories/Card/Card.settings.ts

@@ -0,0 +1,55 @@
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	title: 'Card title',
+	content:
+		'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+}
+
+export const argTypes = {
+	modifiers: {
+		...ModifiersArgTypes.modifiers,
+		options: ['glass'],
+	},
+	title: {
+		description: 'The title of the card',
+		control: { type: 'text' },
+	},
+	...DefaultSlotArgTypes,
+	header: {
+		description: 'The header slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	content: {
+		description: 'The content slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+	footer: {
+		description: 'The footer slot',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}

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

@@ -1,23 +1,39 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCard from '@/components/VvCard/VvCard.vue'
+import { defaulTest } from './Card.test'
+import { defaultArgs, argTypes } from './Card.settings'
 
-import VvCard from '../../components/VvCard/VvCard.vue'
+<Meta
+	title="Components/Card"
+	component={VvCard}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
-<Meta title="Components/Card" component={VvCard} />
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
+export const Template = (args) => ({
 	components: { VvCard },
 	setup() {
 		return { args }
 	},
 	template: `
-        <vv-card v-bind="args">
-            Default
+        <vv-card v-bind="args" data-testId="card">
+			<template #default v-if="args.default"><div v-html="args.default"></div></template>
+			<template #header v-if="args.header"><div v-html="args.header"></div></template>
+			<template #content v-if="args.content"><div v-html="args.content"></div></template>
+			<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
         </vv-card>
-        `
+        `,
 })
 
 <Canvas>
-	<Story name="vv-card">{Template.bind({})}</Story>
+	<Story
+		name="Default"
+		play={defaulTest}
+		args={{
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+		}}
+	>
+		{Template.bind()}
+	</Story>
 </Canvas>

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

@@ -0,0 +1,23 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within } from '@storybook/testing-library'
+
+export async function defaulTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'card',
+	)) as HTMLElement
+	const modifiers =
+		!args.modifiers || Array.isArray(args.modifiers)
+			? args.modifiers
+			: [args.modifiers]
+
+	// check modifiers
+	if (modifiers) {
+		for (const modifier of modifiers) {
+			expect(element).toHaveClass(`vv-card--${modifier}`)
+		}
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

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

@@ -1,42 +1,98 @@
-import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCard from '@/components/VvCard/VvCard.vue'
+import { defaulTest } from './Card.test'
+import { defaultArgs, argTypes } from './Card.settings'
+import { Template } from './Card.stories.mdx'
 
-import VvCard from '../../components/VvCard/VvCard.vue'
-
-<Meta title="Components/Card/Slots" component={VvCard} />
+<Meta
+	title="Components/Card/Slots"
+	component={VvCard}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
 <Canvas>
-	<Story name="Slots">
+	<Story
+		name="Default"
+		play={defaulTest}
+		argTypes={{
+			default: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
 		{(args) => {
 			return {
 				components: { VvCard },
 				setup() {
 					return {
-						args
+						args,
 					}
 				},
 				template: `
-					<vv-card v-bind="args" class="absolute inset-32">
-						<template #header>
-							Header
-						</template>
+					<vv-card v-bind="args" class="max-w-max" data-testId="card">
 						<picture>
-							<img class="vv-card__picture aspect-photo" src="https://source.unsplash.com/featured/300×300/?ocean" alt="Card picture" style="height: 150px"/>
+							<img class="aspect-photo h-300" src="https://unsplash.it/300" alt="Card picture"/>
 						</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>
+
+<Canvas>
+	<Story
+		name="Header"
+		play={defaulTest}
+		args={{
+			header: 'Header <em class="italic">slot!</em>',
+		}}
+		argTypes={{
+			header: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Content"
+		play={defaulTest}
+		argTypes={{
+			content: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Footer"
+		play={defaulTest}
+		args={{
+			footer: 'Footer <em class="italic">slot!</em>',
+		}}
+		argTypes={{
+			footer: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>