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

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

@@ -0,0 +1,45 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvSelect from '../../components/VvSelect/VvSelect.vue'
+import { Template } from './Select.stories.mdx'
+import { VvSelectProps } from '../../components/VvSelect/VvSelect'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+
+<Meta title="Components/Select/Props/native" />
+
+# VvSelect native
+
+Let's define a story for our `native` select.
+
+<Canvas>
+	<Story
+		name="native"
+		args={{
+			...ObjectUtilities.propsToObject(VvSelectProps),
+			maxValues: -1,
+			label: 'Lorem Ipsum',
+			placeholder: 'Placeholder',
+			options: [
+				{
+					label: 'Option 1',
+					value: 1
+				},
+				{
+					label: 'Option 2',
+					value: 2
+				},
+				{
+					label: 'Option 3',
+					value: 3
+				}
+			],
+			native: true,
+			value: ''
+		}}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Source
+	language="html"
+	code={`<vv-select v-model:modelValue="value" :options="options" placeholder="Placeholder" label="Label 1" native />`}
+/>

package/src/stories/stories.scss

@@ -1,35 +1,13 @@
-$zero-specificity-for-utilities: false;
-
-@import '@volverjs/style/scss/reset';
-@import '@volverjs/style/scss/props';
-@import '@volverjs/style/scss/themes/dark';
-@import '@volverjs/style/scss/utilities';
-
-// components
-@import '@volverjs/style/scss/components/vv-accordion';
-@import '@volverjs/style/scss/components/vv-badge';
-@import '@volverjs/style/scss/components/vv-button';
-@import '@volverjs/style/scss/components/vv-button-group';
-@import '@volverjs/style/scss/components/vv-input-checkbox';
-@import '@volverjs/style/scss/components/vv-input-checkbox-group';
-@import '@volverjs/style/scss/components/vv-input-text';
-@import '@volverjs/style/scss/components/vv-progress';
-@import '@volverjs/style/scss/components/vv-input-radio';
-@import '@volverjs/style/scss/components/vv-input-radio-group';
-@import '@volverjs/style/scss/components/vv-dialog';
-@import '@volverjs/style/scss/components/vv-select';
-@import '@volverjs/style/scss/components/vv-dropdown';
-@import '@volverjs/style/scss/components/vv-card';
-@import '@volverjs/style/scss/components/vv-textarea';
-@import '@volverjs/style/scss/components/vv-breadcrumb';
-
+// $zero-specificity-for-utilities: false;
+@use '@volverjs/style/scss';
+@use '@volverjs/style/scss/themes/dark';
 
 //Custom classes for stories
 .vv-textarea {
-    &--variante-1{
+    &--variante-1 {
         --vv-textarea-element-input-color: red;
     }
-    &--variante-2{
+    &--variante-2 {
         --vv-textarea-element-wrapper-background-color: green;
     }
 }

package/src/stories/Button/ButtonVariant.stories.mdx

@@ -1,205 +0,0 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { buttonTest, classTest, cssTest, disableTest } from './test.js'
-import { testButton } from './Button.test'
-
-<Meta title="Components/Button/Variant" />
-
-# VvButton variant
-
-Stories of `VvButton` default `variant`.
-
-## Block
-
-Let's define a story for our `block` button.
-Create block level button that span the full width of a parent.
-
-<Canvas>
-	<Story
-		name="block"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: `vv-button--block`
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Block" block />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Block" block />'} />
-
-## Rounded
-
-Let's define a story for our `rounded` button:
-
-<Canvas>
-	<Story
-		name="rounded"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: `vv-button--rounded`
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Rounded" rounded />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Rounded" rounded />'} />
-
-## Full-bleed
-
-Let's define a story for our `full-bleed` button:
-
-<Canvas>
-	<Story
-		name="full-bleed"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: `vv-button--full-bleed`
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<div class="flex gap-4">
-						<vv-button label="Full bleed" full-bleed />
-					</div>`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<div class="flex gap-4">
-	<vv-button label="Full bleed" full-bleed />
-</div>`}
-/>
-
-## Disabled
-
-Let's define a story for our `disabled` button.
-
-<Canvas>
-	<Story
-		name="disabled"
-		play={async (ctx) => {
-			testButton(ctx, {
-				isClickDisabled: true
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Disabled" disabled />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Disabled" disabled />'} />
-
-## Active
-
-Let's define a story for our `active` button.
-
-<Canvas>
-	<Story
-		name="active"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--active'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Active" active />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Active" active />'} />
-
-## Action
-
-Let's define a story for our `action` button.
-
-<Canvas>
-	<Story
-		name="action"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--action'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Action" action />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Action" action />'} />
-
-## Action Selected
-
-Let's define a story for our `action` `selected` button.
-
-<Canvas>
-	<Story
-		name="selected"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--selected'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Action Selected" action selected />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source language="jsx" code={'<vv-button label="Action" action selected />'} />
-
-## Action quiet
-
-Let's define a story for our `action-quiet` button.
-
-<Canvas>
-	<Story
-		name="action-quiet"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--action-quiet'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Action quiet" action-quiet />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={'<vv-button label="Action quiet" action-quiet />'}
-/>

package/src/stories/Button/test.js

@@ -1,41 +0,0 @@
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function buttonTest({ canvasElement, functions, ...args }) {
-	const button = await within(canvasElement).findByRole('button')
-	await userEvent.click(button)
-
-	if (functions) {
-		functions.forEach(async (func) => {
-			await func({ button: button, ...args })
-		})
-	}
-
-	// Accessibility Test
-	expect.extend(toHaveNoViolations)
-	expect(await axe(button)).toHaveNoViolations()
-}
-
-async function classTest({ button, className = null }) {
-	if (className) {
-		expect(button).toHaveClass(`vv-button--${className}`)
-	}
-}
-
-async function cssTest({ button, cssString = null }) {
-	if (cssString) {
-		expect(button).toHaveStyle(cssString)
-	}
-}
-async function disableTest({ button }) {
-	expect(button).toBeDisabled()
-}
-
-async function propertyTest({ button, properties = [] }) {
-	properties.forEach((property) => {
-		expect(button).toHaveProperty(property)
-	})
-}
-
-export { buttonTest, classTest, cssTest, disableTest, propertyTest }

package/src/stories/Radio/RadioTest.js

@@ -1,90 +0,0 @@
-/* eslint-disable no-console */
-import { expect } from '@storybook/jest'
-import { userEvent } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function disabledTest() {
-	const radioInput = document.getElementById('1')
-	console.log({ radioInput })
-	await expect(radioInput).toHaveClass('vv-input-radio__input--disabled')
-	await expect(radioInput).toBeDisabled()
-	await expect(radioInput).toHaveProperty('disabled')
-	await expect(radioInput).not.toBeChecked()
-	await accessibilityTest(radioInput)
-}
-
-async function invalidTest() {
-	const radioInput = document.getElementById('6')
-	console.log(radioInput.parentElement)
-	await expect(radioInput.parentElement).toHaveClass(
-		'vv-input-radio--invalid'
-	)
-	accessibilityTest(radioInput)
-}
-
-async function errorWithSingleMessageTest() {
-	const radioInput = document.getElementById('7')
-	await expect(radioInput.parentElement).toHaveClass(
-		'vv-input-radio--invalid'
-	)
-	const errorMessage = radioInput.labels[0].childNodes[4].innerHTML
-	expect(errorMessage).toBe('Sbagliato!')
-	accessibilityTest(radioInput)
-}
-
-async function errorWithMultipleMessagesTest() {
-	const radioInput = document.getElementById('8')
-	await expect(radioInput.parentElement).toHaveClass(
-		'vv-input-radio--invalid'
-	)
-	// expect(errorMessage).toBe('Sbagliato!')
-	console.log(radioInput.labels)
-	accessibilityTest(radioInput)
-}
-
-async function switchTest() {
-	const radioInput = document.getElementById('3')
-	await expect(radioInput.parentElement).toHaveClass(
-		'vv-input-checkbox--switch'
-	)
-	userEvent.click(radioInput)
-	await expect(radioInput).toBeChecked()
-	console.log(radioInput.parentElement)
-	accessibilityTest(radioInput)
-}
-
-expect.extend({
-	async toBeChecked(radioInput) {
-		let result = {
-			pass: false,
-			message: `Click event doesn't work`
-		}
-		// await userEvent.click(radioInput)
-		await radioInput.click()
-		if (radioInput.checked) {
-			result = {
-				pass: true,
-				message: `Click event work!`
-			}
-		}
-		return result
-	}
-})
-
-async function classTest(input, classNames = []) {
-	classNames.forEach((cssClass) => {
-		expect(input).toHaveClass(cssClass)
-	})
-}
-
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
-}
-
-export {
-	disabledTest,
-	invalidTest,
-	errorWithSingleMessageTest,
-	errorWithMultipleMessagesTest
-}

package/src/stories/RadioGroup/RadioOptionsTest.js

@@ -1,78 +0,0 @@
-import { expect } from '@storybook/jest'
-
-async function mainOptionsTest({ functions, ...data }) {
-	const options = data.args.options
-	options.forEach((option, index) => {
-		const radio = document.getElementById(`options_opt${index}`)
-		const radioValue = radio._value
-		const radioLabel = radio.parentElement.innerText
-		functions.forEach(async (func) => {
-			await func({ ...data }, index, radioValue, radioLabel)
-		})
-	})
-}
-
-async function radioOptionsTest({ ...data }, index, radioValue, radioLabel) {
-	const optionValue = data.args.options[index].value
-	const optionLabel = data.args.options[index].label
-	expect(optionLabel).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function arrayOptionsTest({ ...data }, index, radioValue, radioLabel) {
-	const optionValue = data.args.options[index]
-	expect(optionValue).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function optionsValueStringTest(
-	{ ...data },
-	index,
-	radioValue,
-	radioLabel
-) {
-	const optionValue = data.args.options[index].qta
-	const optionLabel = data.args.options[index].label
-	expect(optionLabel).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function optionsValueFunctionTest({ ...data }, index, radioValue) {
-	const optionValue = data.args.options[index].qta
-	const optionLabel = data.args.options[index].label
-	const resultValue = `${optionValue}_${optionLabel}`
-	expect(radioValue).toEqual(resultValue)
-}
-
-async function optionsLabelStringTest(
-	{ ...data },
-	index,
-	radioValue,
-	radioLabel
-) {
-	const optionValue = data.args.options[index].value
-	const optionLabel = data.args.options[index].name
-	expect(optionLabel).toEqual(radioLabel)
-	expect(optionValue).toEqual(radioValue)
-}
-
-async function optionsLabelFunctionTest(
-	{ ...data },
-	index,
-	radioValue,
-	radioLabel
-) {
-	const optionLabel = data.args.options[index].name
-	const resultLabel = `Frutto: ${optionLabel}`
-	expect(radioLabel).toEqual(resultLabel)
-}
-
-export {
-	mainOptionsTest,
-	radioOptionsTest,
-	arrayOptionsTest,
-	optionsValueStringTest,
-	optionsValueFunctionTest,
-	optionsLabelStringTest,
-	optionsLabelFunctionTest
-}

package/src/stories/RadioGroup/RadioPropertyTest.js

@@ -1,131 +0,0 @@
-import { expect } from '@storybook/jest'
-import { userEvent, within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function radioGroupTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const radio1 = document.getElementById('o1')
-	const radio2 = document.getElementById('o2')
-	radioCheck(radio1, false)
-	await expect(radio1).toBeClicked()
-	classTest(radioGroupParent, [
-		'vv-input-radio-group',
-		'vv-input-radio-group--horizontal'
-	])
-	classTest(radio1, ['focus-visible', 'vv-input-radio__input--checked'])
-	radioCheck(radio1, true)
-	radioCheck(radio2, false)
-	accessibilityTest(radioGroupParent)
-}
-
-async function disabledTest() {
-	const radio = document.getElementById('disabled_opt0')
-	expect(radio).toHaveClass('vv-input-radio__input--disabled')
-	expect(radio).toBeDisabled()
-	await radioCheck(radio, false)
-	await userEvent.click(radio)
-	await expect(radio).not.toBeClicked()
-	await radioCheck(radio, false)
-	accessibilityTest(radio.parentElement)
-}
-
-async function errorLabelTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	expect(radioGroupParent).toHaveClass('vv-input-radio-group--invalid')
-	accessibilityTest(radioGroupParent)
-}
-
-async function hintLabelTest({ canvasElement, ...data }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const labelInnerHTML = radioGroupParent.lastChild.innerHTML
-	const hintLabel = data.args.hintLabel
-	expect(labelInnerHTML).toBeTruthy()
-	expect(hintLabel).toBeTruthy()
-	expect(labelInnerHTML).toEqual(hintLabel)
-}
-
-async function labelTest({ canvasElement, ...data }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const labelInnerHTML = radioGroupParent.firstChild.innerHTML
-	const hintLabel = data.args.label
-	expect(labelInnerHTML).toBeTruthy()
-	expect(hintLabel).toBeTruthy()
-	expect(labelInnerHTML).toEqual(hintLabel)
-}
-
-async function readonlyTest() {
-	const radios = ['readonly_opt0', 'readonly_opt1', 'readonly_opt2']
-	radios.forEach((radio) => {
-		expect(document.getElementById(radio)).toHaveClass(
-			'vv-input-radio__input--readonly'
-		)
-	})
-}
-
-async function validTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	expect(radioGroupParent).toHaveClass('vv-input-radio-group--valid')
-	accessibilityTest(radioGroupParent)
-}
-
-async function verticalTest({ canvasElement }) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	expect(radioGroupParent).not.toHaveClass('vv-input-radio-group--horizontal')
-}
-
-expect.extend({
-	async toBeClicked(radioInput) {
-		let result = {
-			pass: false,
-			message: `Click event doesn't work`
-		}
-		await userEvent.click(radioInput)
-		await radioInput.click()
-		if (radioInput.checked) {
-			result = {
-				pass: true,
-				message: `Click event work!`
-			}
-		}
-		return result
-	}
-})
-
-async function classTest(input, classNames = []) {
-	classNames.forEach((cssClass) => {
-		expect(input).toHaveClass(cssClass)
-	})
-}
-
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
-}
-
-async function radioCheck(radio, value) {
-	expect(radio.ariaChecked).toBe(`${value}`)
-	expect(radio.checked).toBe(value)
-}
-
-export {
-	radioGroupTest,
-	errorLabelTest,
-	hintLabelTest,
-	labelTest,
-	disabledTest,
-	readonlyTest,
-	validTest,
-	verticalTest
-}

package/src/stories/RadioGroup/RadioSlotsTest.js

@@ -1,20 +0,0 @@
-import { expect } from '@storybook/jest'
-import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
-
-async function slotsTest({ canvasElement }, radioGroup) {
-	const radioGroupParent = await within(canvasElement).findByRole(
-		'radiogroup'
-	)
-	const slot = radioGroupParent.lastElementChild
-	expect(slot).toHaveClass('vv-input-radio-group__hint')
-	expect(slot.innerText).toBeTruthy
-	if (radioGroup) {
-		expect(radioGroupParent).toHaveClass(
-			`vv-input-radio-group--${radioGroup}`
-		)
-	}
-	expect.extend(toHaveNoViolations)
-	expect(await axe(slot)).toHaveNoViolations()
-}
-export { slotsTest }