@volverjs/ui-vue 0.0.6-beta.3 → 0.0.6-beta.5

package/src/stories/Tab/Tab.stories.mdx

@@ -0,0 +1,65 @@
+import { Meta, Story, Canvas } from '@storybook/addon-docs'
+import VvTab from '@/components/VvTab/VvTab.vue'
+import { defaultArgs, defaultArgTypes } from './Tab.settings'
+import { defaultTest } from './Tab.test'
+
+<Meta
+	title="Components/Tab"
+	component={VvTab}
+	args={defaultArgs}
+	argTypes={defaultArgTypes}
+/>
+
+export const Template = (args) => ({
+	components: { VvTab },
+	setup() {
+		return { args }
+	},
+	template: /* html */ `
+		<div class="m-md w-1/2">
+			<vv-tab v-bind="args" data-testId="element">
+				<template #tab-item_0>
+					<span class="text-20 font-semibold">Tab 1</span>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+						vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+						ultricies vehicula ut id elit. Morbi leo risus, porta ac
+						consectetur ac, vestibulum at eros. Praesent commodo cursus
+						magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+						Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+						elit libero, a pharetra augue.
+					</p>
+				</template>
+				<template #tab-item_1>
+					<span class="text-20 font-semibold">Tab 2</span>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+						vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+						ultricies vehicula ut id elit. Morbi leo risus, porta ac
+						consectetur ac, vestibulum at eros. Praesent commodo cursus
+						magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+						Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+						elit libero, a pharetra augue.
+					</p>
+				</template>
+				<template #tab-3>
+					<span class="text-20 font-semibold">Tab 3</span>
+					<p>
+						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
+						vitae elit libero, a pharetra augue. Nullam id dolor id nibh
+						ultricies vehicula ut id elit. Morbi leo risus, porta ac
+						consectetur ac, vestibulum at eros. Praesent commodo cursus
+						magna, vel scelerisque nisl consectetur et. Donec sed odio dui.
+						Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae
+						elit libero, a pharetra augue.
+					</p>
+				</template>
+			</vv-tab>
+		</div>`,
+})
+
+<Canvas>
+	<Story name="Default" play={defaultTest}>
+		{Template.bind()}
+	</Story>
+</Canvas>

package/src/stories/Tab/Tab.test.ts

@@ -0,0 +1,37 @@
+import type { PlayAttributes } from '@/test/types'
+import { expect } from '@/test/expect'
+import { within, userEvent } from '@storybook/testing-library'
+
+export async function defaultTest({ canvasElement, args }: PlayAttributes) {
+	const element = (await within(canvasElement).findByTestId(
+		'element',
+	)) as HTMLElement
+
+	if (!args.items || !args.items?.length) {
+		throw new Error('No items passed')
+	}
+
+	// check children number the same of items prop
+	const childrenEls = element.getElementsByClassName('vv-nav')[0]
+	expect(childrenEls?.children[0].children.length).toEqual(args.items?.length)
+
+	// take firse and second elements
+	const firstEl = await element.getElementsByTagName('a')?.[0]
+	const secondEl = await element.getElementsByTagName('router-link')?.[1]
+	// check they have not current class
+	const secondElHasCurrentClass = secondEl.classList.contains('current')
+	const firstElHasCurrentClass = firstEl.classList.contains('current')
+
+	await expect(firstElHasCurrentClass).toBe(false)
+	await expect(secondElHasCurrentClass).toBe(false)
+	// click first item and check "current" css class
+	await userEvent.click(firstEl)
+	await expect(firstEl).toHaveClass('current')
+
+	// check tab content to include "Tab 1"
+	const tabPanelEl = element.getElementsByClassName('vv-tab__panel')?.[0]
+	await expect(tabPanelEl.innerHTML.includes('Tab 1')).toBe(true)
+
+	// check accessibility
+	await expect(element).toHaveNoViolations()
+}

package/src/types/group.d.ts

@@ -23,12 +23,14 @@ export interface InputGroupState extends GroupState {
  * State shared in a group of buttons
  */
 export interface ButtonGroupState extends GroupState {
-	modelValue: Ref<string | Array<string> | undefined>
+	modelValue: Ref<
+		string | number | boolean | (string | number | boolean)[] | undefined
+	>
 	disabled: Ref<boolean>
 	toggle: Ref<boolean>
 	multiple: Ref<boolean>
 	unselectable: Ref<boolean>
-	itemModifiers?: Ref<string | Array<string> | undefined>
+	modifiers: Ref<string | string[] | undefined>
 }
 
 /**
@@ -37,6 +39,6 @@ export interface ButtonGroupState extends GroupState {
 export interface AccordionGroupState extends GroupState {
 	collapse: Ref<boolean>
 	disabled: Ref<boolean>
-	modifiers: Ref<Array<string> | string | undefined>
+	modifiers: Ref<string[] | string | undefined>
 	not: Ref<boolean>
 }