@volverjs/ui-vue 0.0.1-beta.2

package/src/stories/AccordionGroup/accordionGroupTest.js

@@ -0,0 +1,51 @@
+import { expect } from '@storybook/jest'
+import { within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function accordionGroupTest({ canvasElement }) {
+	const accordionGroup = await within(canvasElement).findByTestId(
+		'accordion-group'
+	)
+	const accordion1 = await within(canvasElement).findByTestId('accordion-1')
+	await accordion1.firstChild.click()
+	const accordions = accordionGroup.children
+	Array.from(accordions).forEach((accordion, index) => {
+		const title = accordion.firstChild
+		const content = accordion.lastChild
+		if (index == 0) {
+			expect(title.ariaExpanded).toBe('true')
+			expect(content.ariaHidden).toBe('false')
+		} else {
+			expect(title.ariaExpanded).toBe('false')
+			expect(content.ariaHidden).toBe('true')
+		}
+	})
+	accessibilityTest(accordionGroup)
+}
+
+async function itemsTest({ canvasElement }) {
+	const accordionGroup = await within(canvasElement).findByTestId(
+		'accordion-group'
+	)
+	accordionGroup.children[0].click()
+	const selected = await within(canvasElement).findByTestId('selected')
+	expect(selected.innerText).toBe('selected: [ "a-1" ]')
+	await accordionGroup.children[1].click()
+	expect(selected.innerText).toBe('selected: [ "a-1", "a-2" ]')
+	accessibilityTest(accordionGroup)
+}
+
+async function accordionTest({ canvasElement }) {
+	const accordion1 = await within(canvasElement).findByTestId('accordion-1')
+	accordion1.firstChild.click()
+	const selected = await within(canvasElement).findByTestId('selected')
+	expect(selected.innerText).toBe('selected: accordion 1')
+	accessibilityTest(accordion1)
+}
+
+async function accessibilityTest(element) {
+	expect.extend(toHaveNoViolations)
+	expect(await axe(element)).toHaveNoViolations()
+}
+
+export { accordionGroupTest, itemsTest, accordionTest }

package/src/stories/Badge/Badge.stories.mdx

@@ -0,0 +1,38 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvBadge from '../../components/VvBadge/VvBadge.vue'
+import testBadgeVariant from './BadgeTest.js'
+import testDangerBadge from './BadgeTest.js'
+
+<Meta
+	title="Components/Badge"
+	component={VvBadge}
+	argTypes={{
+		value: {
+			defaultValue: '14',
+			control: { type: 'text' }
+		},
+		color: {
+			control: {
+				type: 'select',
+				options: ['', 'black', 'danger', 'success', 'warning']
+			}
+		}
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvBadge },
+	setup() {
+		return { args }
+	},
+	template: `<vv-badge v-bind="args" />`
+})
+
+# VvBadge
+
+Stories of `VvBadge`.
+Let's define a story for our playground `badge`:
+
+<Story name="vv-badge" args={{}}>
+	{Template.bind({})}
+</Story>

package/src/stories/Badge/BadgeColor.stories.mdx

@@ -0,0 +1,54 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvBadge from '../../components/VvBadge/VvBadge.vue'
+import testBadgeVariant from './BadgeTest.js'
+import testDangerBadge from './BadgeTest.js'
+
+<Meta title="Components/Badge/Props/color" />
+
+# VvBadge color
+
+By default color is `primary` and default options are: `black`, `danger`, `success`, `warning`
+
+<Canvas>
+	<Story name="black" play={testBadgeVariant}>
+		{() => {
+			return {
+				components: { VvBadge },
+				template: `<vv-badge color="black" role="status" value="12" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="danger" play={testBadgeVariant}>
+		{() => {
+			return {
+				components: { VvBadge },
+				template: `<vv-badge color="danger" role="status" value="16" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="success" play={testBadgeVariant}>
+		{() => {
+			return {
+				components: { VvBadge },
+				template: `<vv-badge color="success" role="status" value="10" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story name="warning" play={testBadgeVariant}>
+		{() => {
+			return {
+				components: { VvBadge },
+				template: `<vv-badge color="warning" role="status" value="8" />`
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/Badge/BadgeDot.stories.mdx

@@ -0,0 +1,20 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvBadge from '../../components/VvBadge/VvBadge.vue'
+import VvButton from '../../components/VvButton/VvButton.vue'
+
+<Meta title="Components/Badge/dot" />
+
+# VvBadge dot
+
+Without a value, the badge is a dot
+
+<Canvas>
+	<Story name="dot">
+		{() => {
+			return {
+				components: { VvBadge, VvButton },
+				template: `<vv-badge />`
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/Badge/BadgeTest.js

@@ -0,0 +1,21 @@
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { within } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+
+export const variantTest = async ({ badge, color }) => {
+	expect(badge).toHaveClass(`vv-badge--${color}`)
+}
+
+export const accessibilityTest = async (badge) => {
+	expect.extend(toHaveNoViolations)
+	expect(await axe(badge)).toHaveNoViolations()
+}
+
+// Test Variants function
+export const testBadgeVariant = async ({ canvasElement, name }) => {
+	const badge = await within(canvasElement).findByRole('status')
+	await accessibilityTest(badge)
+	await variantTest({ badge, color: name })
+}
+
+export default testBadgeVariant

package/src/stories/Breadcrumb/Breadcrumb.stories.mdx

@@ -0,0 +1,46 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+// import vueRouter from 'storybook-vue3-router'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvBreadcrumb from '../../components/VvBreadcrumb/VvBreadcrumb.vue'
+import { VvBreadcrumbProps } from '../../components/VvBreadcrumb/VvBreadcrumb'
+
+<Meta
+	title="Components/Breadcrumb"
+	component={VvBreadcrumb}
+	args={{
+		...ObjectUtilities.propsToObject(VvBreadcrumbProps),
+		routes: [
+			{
+				label: 'Home',
+				title: 'Home',
+				href: '/'
+			},
+			{
+				label: 'Library',
+				title: 'Library',
+				href: '/library'
+			},
+			{
+				label: 'Book 1',
+				title: 'Book 1'
+			}
+		]
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvBreadcrumb },
+	setup() {
+		return { args }
+	},
+	template: `<vv-breadcrumb v-bind="args" />`
+})
+
+# VvBreadcrumb
+
+Stories of `VvBreadcrumb`.
+Let's define a story for our playground `breadcrumb`:
+
+<Canvas>
+	<Story name="vv-breadcrumb" args={{}} render={Template.bind()} />
+</Canvas>

package/src/stories/Breadcrumb/BreadcrumbMultiline.stories.mdx

@@ -0,0 +1,41 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvBreadcrumb from '../../components/VvBreadcrumb/VvBreadcrumb.vue'
+import { VvBreadcrumbProps } from '../../components/VvBreadcrumb/VvBreadcrumb'
+import { Template } from './Breadcrumb.stories.mdx'
+
+<Meta
+	title="Components/Breadcrumb/Props/multiline"
+	component={VvBreadcrumb}
+	args={{
+		...ObjectUtilities.propsToObject(VvBreadcrumbProps),
+		multiline: true,
+		routes: [
+			{
+				label: 'Home',
+				title: 'Home',
+				to: '/'
+			},
+			{
+				label: 'Library',
+				title: 'Library',
+				to: '/library'
+			},
+			{
+				label: 'Book 1',
+				title: 'Book 1'
+			}
+		]
+	}}
+/>
+
+# VvBreadcrumb
+
+Stories of `VvBreadcrumb`.
+Let's define a story for our `multiline` `breadcrumb`:
+
+<Canvas>
+	<Story name="multiline" args={{}}>
+		{Template.bind()}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,73 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import { within, userEvent } from '@storybook/testing-library'
+import { axe, toHaveNoViolations } from 'jest-axe'
+import { expect } from '@storybook/jest'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import { VvButtonProps } from '../../components/VvButton/VvButton'
+
+<Meta
+	title="Components/Button"
+	component={VvButton}
+	args={{
+		...ObjectUtilities.propsToObject(VvButtonProps),
+		target: undefined,
+		to: undefined,
+		href: undefined,
+		label: 'Test'
+	}}
+	argTypes={{
+		onClick: { action: 'clicked' },
+		modifiers: {
+			control: {
+				type: 'select',
+				options: [
+					null,
+					'primary',
+					'secondary',
+					'danger',
+					'ghost',
+					'text',
+					'static-light',
+					'static-dark'
+				]
+			}
+		},
+		label: {
+			control: { type: 'text' }
+		},
+		loading: {
+			control: { type: 'boolean' }
+		},
+		disabled: {
+			control: { type: 'boolean' }
+		}
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvButton },
+	setup() {
+		function onClick() {
+			console.log('onClick')
+		}
+		return { args, onClick }
+	},
+	template: `<vv-button v-bind="args" @click="onClick" />`
+})
+
+# VvButton
+
+Stories of `VvButton`.
+Let's define a story for our playground `button`:
+
+<Story
+	name="vv-button"
+	args={{}}
+	play={async ({ args, canvasElement }) => {
+		const canvas = within(canvasElement)
+		await userEvent.click(canvas.getByRole('button'))
+		await expect.extend(toHaveNoViolations)
+	}}>
+	{Template.bind({})}
+</Story>

package/src/stories/Button/ButtonBadge.stories.mdx

@@ -0,0 +1,33 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import VvBadge from '../../components/VvBadge/VvBadge.vue'
+
+<Meta title="Components/Button/badge" />
+
+# VvButton badge
+
+Stories of `VvButton` with `badge`.
+
+<Canvas>
+	<Story name="badge">
+		{() => {
+			return {
+				components: { VvButton, VvBadge },
+				template: `<vv-button label="Badge">
+						<template #after>
+							<vv-badge value="12" color="danger" />
+						</template>
+					</vv-button>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-button label="Badge">
+	<template #after>
+		<vv-badge value="12" color="danger" />
+	</template>
+</vv-button>`}
+/>

package/src/stories/Button/ButtonIcon.stories.mdx

@@ -0,0 +1,51 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import { buttonTest, classTest } from './test.js'
+
+<Meta title="Components/Button/Props/icon" />
+
+# VvButton icon
+
+Stories of `VvButton` with `icon`.
+
+## Icon and text
+
+Let's define a story for our text `icon` button.
+
+<Canvas>
+	<Story name="icon-left" play={buttonTest}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Like" icon="heart" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Icon left" icon="heart" />'} />
+
+## Icon only
+
+Let's define a story for our `icon` only button.
+
+<Canvas>
+	<Story
+		name="icon-only"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'icon-only'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button icon="heart" rounded />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button icon="heart" rounded />'} />

package/src/stories/Button/ButtonIconPosition.stories.mdx

@@ -0,0 +1,103 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import { within, userEvent } from '@storybook/testing-library'
+import { buttonTest, classTest } from './test.js'
+
+<Meta title="Components/Button/Props/icon-position" />
+
+# VvButton icon-position
+
+Stories of `VvButton` with `icon`.
+
+## Icon left (default)
+
+Let's define a story for our text `icon` button.
+
+<Canvas>
+	<Story name="icon-left" play={buttonTest}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Like" icon="heart" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Icon left" icon="heart" />'} />
+
+## Icon right
+
+Let's define a story for our right `icon` button.
+
+<Canvas>
+	<Story
+		name="icon-right"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'reverse'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Icon right" icon="heart" icon-position="right" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={'<vv-button label="Icon right" icon="heart" icon-position="right" />'}
+/>
+
+## Icon top
+
+Let's define a story for our top `icon` button.
+
+<Canvas>
+	<Story name="icon-top" play={buttonTest}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Icon top" icon="heart" icon-position="top" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={'<vv-button label="Icon top" icon="heart" icon-position="top" />'}
+/>
+
+## Icon bottom
+
+Let's define a story for our bottom `icon` button.
+
+<Canvas>
+	<Story
+		name="icon-bottom"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'reverse'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Icon bottom" icon="heart" icon-position="bottom" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={'<vv-button label="Icon top" icon="heart" icon-position="bottom" />'}
+/>

package/src/stories/Button/ButtonLink.stories.mdx

@@ -0,0 +1,156 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+// import vueRouter from 'storybook-vue3-router'
+import {
+	buttonTest,
+	disableTest,
+	cssTest,
+	propertyTest,
+	classTest
+} from './test.js'
+
+<Meta title="Components/Button/Link" />
+
+# VvButton link
+
+Stories of `VvButton` with `link`.
+
+## Button link text
+
+<Canvas>
+	<Story
+		name="link-text"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [propertyTest, classTest],
+				properties: ['target', 'href'],
+				className: 'text'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Link text" href="https://google.it" target="_blank" modifiers="text" @click="$event.preventDefault()" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-button label="Link text" href="https://google.it" target="_blank" variant="text" />`}
+/>
+
+## Button link text disabled
+
+<Canvas>
+	<Story
+		name="link-text-disabled"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [disableTest, cssTest, classTest],
+				cssString: 'cursor: not-allowed',
+				className: 'text'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Link text disabled" href="https://google.it" target="_blank" variant="text" disabled />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-button label="Link text disabled" href="https://google.it" target="_blank" variant="text" disabled />`}
+/>
+
+## Button link
+
+<Canvas>
+	<Story
+		name="button-link"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [propertyTest],
+				properties: ['target', 'href']
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Button link" href="https://google.it" target="_blank" icon="charm:link-external" icon-position="right" @click="$event.preventDefault()" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-button
+	label="Button link"
+	href="https://google.it"
+	target="_blank"
+	icon="charm:link-external"
+	icon-position="right"
+/>`}
+/>
+
+## Button link disabled
+
+<Canvas>
+	<Story
+		name="button-link-disabled"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [disableTest, cssTest],
+				cssString: 'cursor: not-allowed'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Button link" href="https://google.it" target="_blank" disabled />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-button label="Button link" href="https://google.it" target="_blank" disabled />`}
+/>
+
+## Router-link
+
+export const Template = () => ({
+	components: { VvButton },
+	template: `<vv-button label="Router link" to="/test" variant="text" />`
+})
+
+<Canvas>
+	<Story
+		name="router-link"
+		args={{}}
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [propertyTest, classTest],
+				properties: ['href'],
+				className: 'text'
+			})
+		}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-button label="Router link" to="/" variant="text" />`}
+/>