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

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>

package/src/stories/Checkbox/Checkbox.settings.ts

@@ -0,0 +1,43 @@
+import { CheckboxRadioArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	name: 'checkbox',
+	label: 'Option',
+	value: 'my-value',
+	tabindex: 0,
+	disabled: false,
+	switch: false,
+	readonly: false,
+	invalid: false,
+	valid: false,
+	indeterminate: false,
+	uncheckedValue: undefined,
+}
+
+export const argTypes = {
+	...CheckboxRadioArgTypes,
+	indeterminate: {
+		type: 'boolean',
+		description: 'If true, the input will be indeterminated',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+	uncheckedValue: {
+		description: 'Value associated with the unchecked state.',
+		control: {
+			type: 'text',
+		},
+	},
+	switch: {
+		type: 'boolean',
+		description: 'If true, the input will be displayed as a switch.',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+}

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

@@ -0,0 +1,163 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { defaultTest } from './Checkbox.test'
+
+<Meta
+	title="Components/Checkbox"
+	component={VvCheckbox}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvCheckbox },
+	setup() {
+		return { args }
+	},
+	data: () => ({ inputValue: args.uncheckedValue }),
+	template: `
+			<vv-checkbox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+				<template #default v-if="args.default"><span v-html="args.default"></span></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+			</vv-checkbox>
+			<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+        `,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Disabled"
+		play={defaultTest}
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Readonly"
+		play={defaultTest}
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Switch"
+		play={defaultTest}
+		args={{ switch: true }}
+		argTypes={{
+			switch: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Invalid"
+		play={defaultTest}
+		args={{
+			invalid: true,
+			invalidLabel: 'You must accept terms and conditions',
+			label: 'Accept terms and conditions',
+		}}
+		argTypes={{
+			invalid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Valid"
+		play={defaultTest}
+		args={{
+			valid: true,
+			validLabel: 'Thank you for accepting terms and conditions',
+			label: 'Accept terms and conditions',
+		}}
+		argTypes={{
+			valid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Indeterminate"
+		play={defaultTest}
+		args={{
+			indeterminate: true,
+		}}
+		argTypes={{
+			indeterminate: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{
+			hintLabel: 'Please accept terms and conditions',
+		}}
+		argTypes={{
+			hintLabel: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Checkbox/Checkbox.test.ts

@@ -0,0 +1,81 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { sleep } from '@/test/sleep'
+import { within } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+	const value = (await within(canvasElement).findByTestId(
+		'value',
+	)) as HTMLElement
+	const input = element.getElementsByTagName('input')[0]
+	const hint = element.getElementsByClassName('vv-checkbox__hint')[0]
+
+	// unchecked value
+	if (args.uncheckedValue !== undefined) {
+		expect(value.innerHTML).toEqual(String(args.uncheckedValue))
+	}
+
+	// checked value
+	if (!args.invalid && !args.indeterminate) {
+		element.addEventListener('click', async () => {
+			await sleep()
+			if (!args.disabled && !args.readonly) {
+				expect(value.innerHTML).toEqual(String(args.value))
+			}
+		})
+		if (args.disabled || args.readonly) {
+			await expect(input).not.toBeChecked()
+		} else {
+			await expect(input).toBeChecked()
+		}
+	}
+
+	// disabled
+	if (args.disabled) {
+		await expect(element).toHaveClass('vv-checkbox--disabled')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// readonly
+	if (args.readonly) {
+		await expect(element).toHaveClass('vv-checkbox--readonly')
+		await expect(input).toHaveProperty('disabled')
+		await expect(input).not.toBeChecked()
+	}
+
+	// indeterminate
+	if (args.indeterminate) {
+		await expect(element).toHaveClass('vv-checkbox--indeterminate')
+		await expect(input).toHaveProperty('indeterminate')
+	}
+
+	// invalid
+	if (args.invalid) {
+		await expect(element).toHaveClass('vv-checkbox--invalid')
+		await expect(input).toHaveProperty('ariaInvalid')
+		if (args.invalidLabel) {
+			await expect(hint.innerHTML).toEqual(args.invalidLabel)
+		}
+	}
+
+	// valid
+	if (args.valid) {
+		await expect(element).toHaveClass('vv-checkbox--valid')
+		await expect(input).toHaveProperty('ariaInvalid', 'false')
+		if (args.validLabel) {
+			await expect(hint.innerHTML).toEqual(args.validLabel)
+		}
+	}
+
+	// hint
+	if (args.hintLabel) {
+		await expect(hint.innerHTML).toEqual(args.hintLabel)
+	}
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

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

@@ -0,0 +1,68 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultTest } from './Checkbox.test'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { Template } from './Checkbox.stories.mdx'
+
+<Meta
+	title="Components/Checkbox/Binary"
+	component={VvCheckbox}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="True / false"
+		play={defaultTest}
+		argTypes={{
+			value: {
+				...argTypes.value,
+				control: {
+					disable: true,
+				},
+			},
+			uncheckedValue: {
+				...argTypes.uncheckedValue,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			label: 'Accept terms and conditions',
+			value: true,
+			uncheckedValue: false,
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Yes / no"
+		play={defaultTest}
+		argTypes={{
+			value: {
+				...argTypes.value,
+				control: {
+					disable: true,
+				},
+			},
+			uncheckedValue: {
+				...argTypes.uncheckedValue,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		args={{
+			label: 'Accept terms and conditions',
+			value: 'Yes',
+			uncheckedValue: 'No',
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,46 @@
+import { Meta, Story } from '@storybook/addon-docs'
+import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
+import { defaultTest } from './Checkbox.test'
+import { defaultArgs, argTypes } from './Checkbox.settings'
+import { Template } from './Checkbox.stories.mdx'
+
+<Meta
+	title="Components/Checkbox/Slots"
+	component={VvCheckbox}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+<Canvas>
+	<Story
+		name="Default"
+		play={defaultTest}
+		args={{ default: 'Default <em class="italic">slot!</em>' }}
+		argTypes={{
+			default: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{ hint: 'Hint <em class="italic">slot!</em>' }}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroup.settings.ts

@@ -0,0 +1,15 @@
+import { CheckboxRadioGroupArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	name: 'checkbox-group',
+	label: 'Select an option',
+	options: ['Option 1', 'Option 2', 'Option 3'],
+	disabled: false,
+	readonly: false,
+	vertical: false,
+	invalid: false,
+	valid: false,
+	tabindex: 0,
+}
+
+export const argTypes = CheckboxRadioGroupArgTypes

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

@@ -0,0 +1,134 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
+import { defaultArgs, argTypes } from './CheckboxGroup.settings'
+import { defaultTest } from './CheckboxGroup.test'
+
+<Meta
+	title="Components/CheckboxGroup"
+	component={VvCheckboxGroup}
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvCheckboxGroup },
+	setup() {
+		return { args }
+	},
+	data: () => ({ inputValue: undefined }),
+	template: `
+            <vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
+                <template #default v-if="args.default"><span v-html="args.default"></span></template>
+				<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
+            </vv-checkbox-group>
+            <div>Value: <span data-testId="value">{{inputValue}}</span></div> 
+        `,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Disabled"
+		play={defaultTest}
+		args={{ disabled: true }}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Readonly"
+		play={defaultTest}
+		args={{ readonly: true }}
+		argTypes={{
+			readonly: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Vertical"
+		play={defaultTest}
+		args={{ vertical: true }}
+		argTypes={{
+			vertical: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Invalid"
+		play={defaultTest}
+		args={{ invalid: true, invalidLabel: 'This field is required.' }}
+		argTypes={{
+			invalid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Valid"
+		play={defaultTest}
+		args={{ valid: true, validLabel: 'Selected response is valid.' }}
+		argTypes={{
+			valid: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Hint"
+		play={defaultTest}
+		args={{ hintLabel: 'Please fill the input above.' }}
+		argTypes={{
+			hint: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>