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

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/ButtonGroup/ButtonGroupAction.stories.mdx

@@ -1,83 +0,0 @@
-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" component={VvButtonGroup} />
-
-# Action
-
-A VvButtonGroup with the `action` prop
-
-<Canvas>
-	<Story
-		name="action"
-		play={(ctx) =>
-			buttonGroupTest({
-				...ctx,
-				functions: [classTest],
-				className: 'action'
-			})
-		}>
-		{() => {
-			return {
-				components: { VvButton, VvButtonGroup },
-				template: `
-					<div class="flex flex-col">
-						<vv-button-group action 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>
-
-# Action toggle compact
-
-A VvButtonGroup with the `action`, `toggle` and `compact` props
-
-<Canvas>
-	<Story
-		name="action-toggle-compact"
-		play={(ctx) =>
-			buttonGroupTest({
-				...ctx,
-				functions: [classTest]
-			})
-		}>
-		{() => {
-			return {
-				components: { VvButton, VvButtonGroup },
-				data() {
-					return {
-						modelValue: ''
-					}
-				},
-				template: `
-					<div class="flex">
-						<vv-button-group v-model:modelValue="modelValue" action toggle compact class="mt-22">
-                            <vv-button name="first" icon="akar-icons:copy" label="First" />
-                            <vv-button name="second" icon="akar-icons:pencil" label="Second" />
-                            <vv-button name="third" icon="akar-icons:trash-bin" label="Third" />
-                        </vv-button-group>
-						<div class="mt-auto ml-xl">Value: {{ modelValue }}</div>
-					</div>
-                    `
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="html"
-	code={`<vv-button-group v-model:modelValue="modelValue" action toggle compact>
-	<vv-button name="first" icon="akar-icons:copy" label="First" />
-	<vv-button name="second" icon="akar-icons:pencil" label="Second" />
-	<vv-button name="third" icon="akar-icons:trash-bin" label="Third" />
-</vv-button-group>`}
-/>

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

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

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

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

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

@@ -1,61 +0,0 @@
-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/ButtonGroupVertical.stories.mdx

@@ -1,38 +0,0 @@
-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/CardVariant.stories.mdx

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