@volverjs/ui-vue 0.0.1 → 0.0.3-beta.2

package/src/stories/RadioGroup/RadioGroupSlots.stories.mdx

@@ -17,7 +17,7 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: `
+	template: /*html*/`
            <vv-radio-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 				<vv-radio id="o1" name="opts" value="1">Option 1</vv-radio>
 				<vv-radio id="o2" name="opts" value="2">Option 2</vv-radio>

package/src/stories/Select/Select.settings.ts

@@ -10,18 +10,25 @@ import {
 	IconArgTypes,
 	TabindexArgTypes,
 	IdNameArgTypes,
+	FloatingArgTypes,
+	UnselectableArgTypes,
+	AutofocusArgTypes,
+	AutocompleteArgTypes,
 } from '@/stories/argTypes'
 import { propsToObject } from '@/utils/ObjectUtilities'
 import { VvSelectProps } from '@/components/VvSelect'
 
 export const defaultArgs = {
 	...propsToObject(VvSelectProps),
+	name: 'vv-select',
 	options: ['Option 1', 'Option 2', 'Option 3'],
 	placeholder: 'Select an option',
 	label: 'Select label',
 }
 export const argTypes = {
 	...IdNameArgTypes,
+	...AutofocusArgTypes,
+	...AutocompleteArgTypes,
 	...TabindexArgTypes,
 	...ValidArgTypes,
 	...InvalidArgTypes,
@@ -32,29 +39,8 @@ export const argTypes = {
 	...ModifiersArgTypes,
 	...OptionsArgTypes,
 	...IconArgTypes,
-	autocomplete: {
-		type: {
-			summary: 'string',
-		},
-		description: 'Hint for for autofill feature.',
-		control: {
-			type: 'text',
-		},
-		table: {
-			defaultValue: {
-				summary: 'off',
-			},
-		},
-	},
-	autofocus: {
-		type: 'boolean',
-		description: 'Global attribute autofocus.',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
+	...FloatingArgTypes,
+	...UnselectableArgTypes,
 	multiple: {
 		type: 'boolean',
 		description:

package/src/stories/Select/Select.stories.mdx

@@ -20,7 +20,7 @@ export const Template = (args) => ({
 			inputValue: undefined,
 		}
 	},
-	template: `
+	template: /*html*/`
 		<vv-select v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 			<template #before v-if="args.before"><div class="pl-sm flex" v-html="args.before"></div></template>
 			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
@@ -70,6 +70,40 @@ export const Template = (args) => ({
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story
+		name="Multiple"
+		play={defaultTest}
+		args={{ multiple: true }}
+		argTypes={{
+			multiple: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Unselectable"
+		play={defaultTest}
+		args={{ unselectable: false }}
+		argTypes={{
+			unselectable: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
 		name="Valid"
@@ -128,6 +162,32 @@ export const Template = (args) => ({
 			loading: true,
 			loadingLabel: 'Loading...',
 		}}
+		argTypes={{
+			loading: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Floating"
+		args={{
+			floating: true,
+		}}
+		argTypes={{
+			floating: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
 		play={defaultTest}
 	>
 		{Template.bind()}

package/src/stories/Textarea/Textarea.stories.mdx

@@ -16,7 +16,7 @@ export const Template = (args) => ({
 		return { args }
 	},
 	data: () => ({ inputValue: undefined }),
-	template: `
+	template: /*html*/`
 		<vv-textarea v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
 			<template #before v-if="args.before"><div class="pt-sm pl-sm flex" v-html="args.before"></div></template>
 			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>

package/src/stories/Tooltip/Tooltip.settings.ts

@@ -0,0 +1,26 @@
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { VvTooltipProps } from '@/components/VvTooltip'
+import { DefaultSlotArgTypes, ModifiersArgTypes } from '@/stories/argTypes'
+
+export const defaultArgs = {
+	...propsToObject(VvTooltipProps),
+    default: "I'm a tooltip"
+}
+
+export const argTypes = {
+    ...ModifiersArgTypes,
+    ...DefaultSlotArgTypes,
+    position: {
+        type: {
+			summary: 'string',
+		},
+        control: {
+            type: 'select',
+        },
+        table: {
+			defaultValue: { summary: 'bottom' },
+		},
+        description: 'Indicates where to place the tooltip',
+        options: [undefined, 'left', 'right', 'bottom', 'top']
+    }
+}

package/src/stories/Tooltip/Tooltip.stories.mdx

@@ -0,0 +1,98 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
+import VvButton from '@/components/VvButton/VvButton.vue'
+import { defaultArgs, argTypes } from './Tooltip.settings'
+import { defaultTest } from './Tooltip.test'
+
+<Meta
+	title="Components/Tooltip"
+	component={ VvTooltip }
+	args={ defaultArgs }
+	argTypes={ argTypes }
+/>
+
+export const Template = (args) => ({
+	components: { VvTooltip, VvButton },
+	setup() {
+		return { args }
+	},
+	template:
+		/* html */`
+		<div class="max-w-full flex justify-center m-xl">
+			<vv-button >Hover me
+				<vv-tooltip v-bind="args" data-testId="element">
+					<template #default v-if="args.default"><div v-html="args.default"></div></template>
+				</vv-tooltip>
+			</vv-button>
+		</div>`
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Top"
+		play={defaultTest}
+		args={{ position: 'top' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				}
+			},
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Bottom"
+		play={defaultTest}
+		args={{ position: 'bottom' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				}
+			},
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Right"
+		play={defaultTest}
+		args={{ position: 'right' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				}
+			},
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Left"
+		play={defaultTest}
+		args={{ position: 'left' }}
+		argTypes={{
+			position: {
+				control: {
+					disable: true,
+				}
+			},
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Tooltip/Tooltip.test.ts

@@ -0,0 +1,49 @@
+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 parentElement = element.parentElement as HTMLElement
+
+	// slot default
+	if (!args.default) {
+		throw new Error('Default slot is required!')
+	}
+
+	// check if tooltip is visible after focus
+	await parentElement.focus()
+	await sleep(800)
+	await expect(window.getComputedStyle(element)).toHaveProperty('opacity', "1")
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+
+	// check if tooltip is not visible after blur
+	await parentElement.blur()
+	await sleep(800)
+	await expect(window.getComputedStyle(element)).toHaveProperty('opacity', "0")
+
+	// position right
+	if (args.position === 'right') {
+		await expect(element).toHaveClass('vv-tooltip--right')
+	}
+	
+	// position left
+	if (args.position === 'left') {
+		await expect(element).toHaveClass('vv-tooltip--left')
+	}
+	
+	// position top
+	if (args.position === 'top') {
+		await expect(element).toHaveClass('vv-tooltip--top')
+	}
+	
+	// position bottom
+	if (args.position === 'bottom') {
+		await expect(element).toHaveClass('vv-tooltip--bottom')
+	}
+}

package/src/stories/argTypes.ts

@@ -272,19 +272,31 @@ export const IdNameArgTypes = {
 	},
 }
 
-export const InputTextareaArgTypes = {
-	...IdNameArgTypes,
-	...TabindexArgTypes,
-	...DisabledArgTypes,
-	...ReadonlyArgTypes,
-	...ValidArgTypes,
-	...InvalidArgTypes,
-	...HintArgTypes,
-	...LoadingArgTypes,
-	...ModifiersArgTypes,
-	...CountArgTypes,
-	...DebounceArgTypes,
-	...IconArgTypes,
+export const UnselectableArgTypes = {
+	unselectable: {
+		type: 'boolean',
+		description: 'If true the field will be unselectable',
+		table: {
+			defaultValue: {
+				summary: true,
+			},
+		},
+	},
+}
+
+export const FloatingArgTypes = {
+	floating: {
+		type: 'boolean',
+		description: 'If true the label will be floating',
+		table: {
+			defaultValue: {
+				summary: false,
+			},
+		},
+	},
+}
+
+export const AutofocusArgTypes = {
 	autofocus: {
 		type: 'boolean',
 		description: 'Global attribute autofocus.',
@@ -294,6 +306,9 @@ export const InputTextareaArgTypes = {
 			},
 		},
 	},
+}
+
+export const AutocompleteArgTypes = {
 	autocomplete: {
 		type: {
 			summary: 'string',
@@ -308,6 +323,24 @@ export const InputTextareaArgTypes = {
 			},
 		},
 	},
+}
+
+export const InputTextareaArgTypes = {
+	...IdNameArgTypes,
+	...AutofocusArgTypes,
+	...AutocompleteArgTypes,
+	...TabindexArgTypes,
+	...DisabledArgTypes,
+	...ReadonlyArgTypes,
+	...ValidArgTypes,
+	...InvalidArgTypes,
+	...HintArgTypes,
+	...LoadingArgTypes,
+	...ModifiersArgTypes,
+	...CountArgTypes,
+	...DebounceArgTypes,
+	...IconArgTypes,
+	...FloatingArgTypes,
 	minlength: {
 		type: 'number',
 		description:
@@ -349,15 +382,6 @@ export const InputTextareaArgTypes = {
 			type: 'text',
 		},
 	},
-	floating: {
-		type: 'boolean',
-		description: 'If true the label will be floating',
-		table: {
-			defaultValue: {
-				summary: false,
-			},
-		},
-	},
 }
 
 export const CheckboxRadioArgTypes = {