@volverjs/ui-vue 0.0.1-beta.11

package/src/props/index.ts

@@ -0,0 +1,84 @@
+export const ValidProps = {
+	valid: Boolean,
+	validLabel: [String, Array]
+}
+
+export const ErrorProps = {
+	error: Boolean,
+	errorLabel: [String, Array]
+}
+
+export const LoadingProps = {
+	loading: Boolean,
+	loadingLabel: String
+}
+
+export const DisabledProps = {
+	disabled: Boolean
+}
+
+export const ReadonlyProps = {
+	readonly: Boolean
+}
+
+export const ModifiersProps = {
+	modifiers: [String, Array]
+}
+
+export const HintProps = {
+	hintLabel: { type: String, default: '' }
+}
+
+export const OptionsProps = {
+	/**
+	 * Lista delle radio options
+	 */
+	options: { type: Array, default: () => [] },
+	/**
+	 * Se options è un array di oggetti, optionLabel = nome del campo da utilizzare come label oppure una funzione per ricavare la label
+	 */
+	optionLabel: { type: [String, Function], default: () => 'label' },
+	/**
+	 * Se options è un array di oggetti, optionValue = nome del campo da utilizzare come value oppure una funzione per ricavare il value
+	 */
+	optionValue: { type: [String, Function], default: () => 'value' }
+}
+
+export const LimitProps = {
+	/**
+	 * Conteggio caratteri
+	 * @description
+	 * Se false, non mostrare il conteggio caratteri
+	 * Se true, mostra quanti caratteri ho digitato sin ora e qualì'è la maxlength.
+	 * Se true e maxlength > 0, mostra quanti caratteri ho digitato sin ora e qualì'è la maxlength.
+	 * Se "countdown", mostra quanti caratteri mancano per raggiungere la maxlength.
+	 */
+	limit: {
+		type: [Boolean, String],
+		default: false,
+		validator: (value: string) => [true, false, 'countdown'].includes(value)
+	}
+}
+
+export const InputProps = {
+	id: String,
+	name: { type: String, required: true },
+	autocomplete: { type: String, default: 'off' },
+	autofocus: Boolean,
+	minlength: Number,
+	maxlength: Number,
+	label: String,
+	placeholder: String,
+	required: Boolean,
+	disabled: Boolean,
+	readonly: Boolean
+}
+
+export const DebounceProps = {
+	/**
+	 * Debounce time (millisecondi)
+	 * @descrition
+	 * Tempo che deve passare dall'ultima battuta prima che modelValue venga aggiornato.
+	 */
+	debounce: Number
+}

package/src/stories/Accordion/Accordion.stories.mdx

@@ -0,0 +1,37 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+
+import { accordionTest } from './accordionTest.js'
+
+<Meta
+	title="Components/Accordion"
+	component={VvAccordion}
+	args={{
+		open: false,
+		title: 'Lorem Ipsum',
+		content:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+	}}
+/>
+
+export const Template = (args) => ({
+	components: { VvAccordion },
+	setup() {
+		return { args }
+	},
+	template: `<div class="w-1/2">
+            <vv-accordion data-testId="accordion" v-bind="args" v-model:open="args.open" />
+        </div>
+        `
+})
+
+# VvAccordion
+
+Stories of `VvAccordion`.
+Let's define a story for our playground `accordion`:
+
+<Canvas>
+	<Story name="vv-accordion" play={accordionTest} args={{}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Accordion/AccordionBordered.stories.mdx

@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+import { Template } from './Accordion.stories.mdx'
+import { propsTest } from './accordionTest.js'
+
+<Meta title="Components/Accordion/Props/bordered" />
+
+# VvAccordion bordered
+
+Let's define a story for our `bordered` accordion.
+
+<Canvas>
+	<Story
+		name="bordered"
+		play={async ({ canvasElement }) => {
+			propsTest({ canvasElement }, 'bordered')
+		}}
+		args={{
+			bordered: true,
+			title: 'Accoridon with borders',
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+		}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/Accordion/AccordionIconRight.stories.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+import { propsTest } from './accordionTest.js'
+
+<Meta title="Components/Accordion/Props/icon-right" />
+
+# VvAccordion icon-right
+
+Let's define a story for our `icon-right` accordion.
+
+<Canvas>
+	<Story
+		name="icon-right"
+		play={async ({ canvasElement }) => {
+			propsTest({ canvasElement }, 'marker-right')
+		}}>
+		{() => {
+			return {
+				components: { VvAccordion },
+				data() {
+					return {
+						content:
+							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-accordion data-testid="accordion" title="Icon right" :content="content" icon-right />
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>

package/src/stories/Accordion/AccordionSlots.stories.mdx

@@ -0,0 +1,82 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+import { slotsTest } from './accordionTest.js'
+
+<Meta title="Components/Accordion/Slots" />
+
+# VvAccordion slots
+
+Stories of `VvAccordion` with `slot`.
+
+## Slot header
+
+Let's define a story for our accordion with `header` slot.
+
+<Canvas>
+	<Story name="slot-header" play={slotsTest}>
+		{() => {
+			return {
+				components: { VvAccordion },
+				data() {
+					return {
+						title: 'Slot title',
+						content:
+							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-accordion :content="content"  bordered icon-right>
+							<template #header>
+								<p data-testId="slot" class="text-word-3">{{ title }}</p>
+							</template>
+						</vv-accordion>
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-accordion :content="content" bordered icon-right>
+	<template #header>
+		<p class="text-word-3">Slot title</p>
+	</template>
+</vv-accordion>`}
+/>
+
+## Slot details
+
+Let's define a story for our accordion with `details` slot.
+
+<Canvas>
+	<Story name="slot-details" play={slotsTest}>
+		{() => {
+			return {
+				components: { VvAccordion },
+				data() {
+					return {
+						details:
+							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+					}
+				},
+				template: `<div class="w-1/2">
+						<vv-accordion title="Slot details" bordered icon-right>
+							<template #details>
+								<p data-testId="slot" class='font-light text-word-3'>{{ details }}</p>
+							</template>
+						</vv-accordion>
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-accordion title="Slot details" bordered icon-right>
+	<template #details>
+		<p class='font-light text-word-3'>{{ details }}</p>
+	</template>
+</vv-accordion>`}
+/>

package/src/stories/Accordion/accordionTest.js

@@ -0,0 +1,36 @@
+import { expect } from '@storybook/jest'
+import { within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function accordionTest({ canvasElement, ...data }) {
+	const accordion = await within(canvasElement).findByTestId('accordion')
+	const title = accordion.firstChild
+	expect(accordion).toHaveClass('vv-accordion')
+	expect(title.innerText).toEqual(data.args.title)
+	expect(title).toHaveClass('vv-collapse__summary')
+	expect(accordion.open).toBe(false)
+	title.click()
+	expect(accordion.open).toBeTruthy()
+	const content = accordion.lastChild
+	expect(content).toHaveClass('vv-collapse__content')
+	expect(content.innerText).toEqual(data.args.content)
+	accessibilityTest(accordion)
+}
+
+async function propsTest({ canvasElement }, className) {
+	const accordion = await within(canvasElement).findByTestId('accordion')
+	expect(accordion).toHaveClass(`vv-accordion--${className}`)
+	accessibilityTest(accordion)
+}
+
+async function slotsTest({ canvasElement }) {
+	const slot = await within(canvasElement).findByTestId('slot')
+	expect(slot.innerHTML).toBeTruthy
+}
+
+async function accessibilityTest(element) {
+	expect.extend(toHaveNoViolations)
+	expect(await axe(element)).toHaveNoViolations()
+}
+
+export { accordionTest, propsTest, slotsTest }

package/src/stories/AccordionGroup/Accordion.stories.mdx

@@ -0,0 +1,42 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+import { accordionTest } from './accordionGroupTest.js'
+
+<Meta title="Components/AccordionGroup/Props/accordion" />
+
+# VvAccordionGroup accordion
+
+Stories of `VvAccordionGroup` with `accordion`.
+
+<Canvas>
+	<Story name="accordion" play={accordionTest}>
+		{(args) => ({
+			components: { VvAccordionGroup, VvAccordion },
+			data() {
+				return {
+					selected: '',
+					content:
+						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+				}
+			},
+			template: `<div class="flex">
+					<div class="w-1/2">
+						<vv-accordion-group v-model:modelValue="selected" icon-right bordered accordion>
+							<vv-accordion data-testId="accordion-1" name="accordion 1" title="Details 1" :content="content" />
+							<vv-accordion name="accordion 2" title="Details 2" :content="content" />
+							<vv-accordion name="accordion 3" title="Details 3" :content="content" />
+						</vv-accordion-group>
+					</div>
+					<div data-testId="selected" v-if="selected" class="w-1/2 flex justify-end" >
+						selected: {{ selected }}
+					</div>
+				</div>`
+		})}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-accordion-group v-model:modelValue="accordion" :items="items" icon-right bordered />`}
+/>

package/src/stories/AccordionGroup/AccordionGroup.stories.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs'
+import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
+import VvAccordion from '../../components/VvAccordion/VvAccordion.vue'
+import { accordionGroupTest } from './accordionGroupTest.js'
+
+<Meta
+	title="Components/AccordionGroup"
+	component={VvAccordionGroup}
+	args={{}}
+/>
+
+export const Template = (args) => ({
+	components: { VvAccordionGroup, VvAccordion },
+	data() {
+		return {
+			disabled: false,
+			accordion: '',
+			content:
+				'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+		}
+	},
+	setup() {
+		return { args }
+	},
+	template: `<div class="w-1/2">
+			<vv-accordion-group data-testId="accordion-group" v-bind="args" :disabled="disabled" v-model:modelValue="accordion">
+				<vv-accordion data-testId="accordion-1" title="Details 1" :content="content" />
+				<vv-accordion title="Details 2" :content="content" />
+				<vv-accordion title="Details 3" :content="content" />
+			</vv-accordion-group>
+        </div>`
+})
+
+# VvAccordionGroup
+
+Stories of `VvAccordionGroup`.
+Let's define a story for our playground `accordion-group`:
+
+<Canvas>
+	<Story name="vv-accordion-group" play={accordionGroupTest} args={{}}>
+		{Template.bind({})}
+	</Story>
+</Canvas>

package/src/stories/AccordionGroup/AccordionItems.stories.mdx

@@ -0,0 +1,51 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvAccordionGroup from '../../components/VvAccordionGroup/VvAccordionGroup.vue'
+import { itemsTest } from './accordionGroupTest.js'
+
+<Meta title="Components/AccordionGroup/Props/items" />
+
+# VvAccordionGroup items
+
+Stories of `VvAccordionGroup` with `items`.
+
+<Canvas>
+	<Story name="items" args={{}} play={itemsTest}>
+		{(args) => ({
+			components: { VvAccordionGroup },
+			data() {
+				return {
+					selected: [],
+					content:
+						'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
+					items: [
+						{
+							name: 'a-1',
+							title: 'Details 1',
+							content:
+								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+						},
+						{
+							name: 'a-2',
+							title: 'Details 2',
+							content:
+								'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.'
+						}
+					]
+				}
+			},
+			template: `<div class="flex">
+					<div class="w-1/2">
+						<vv-accordion-group data-testId="accordion-group" v-model:modelValue="selected" :items="items" icon-right bordered />
+					</div>
+					<div data-testId="selected" v-if="selected" class="w-1/2 flex justify-end">
+						selected: {{ selected }}
+					</div>
+				</div>`
+		})}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<vv-accordion-group v-model:modelValue="accordion" :items="items" icon-right bordered />`}
+/>

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,45 @@
+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'
+
+<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>