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

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

@@ -1,6 +1,7 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvButton from '../../components/VvButton/VvButton.vue'
 import { testButton } from './Button.test'
+import { Template } from './Button.stories.mdx'
 
 <Meta title="Components/Button/Props/modifiers" />
 
@@ -13,13 +14,8 @@ Stories of `VvButton` `modifiers`.
 Let's define a story for our `default` button:
 
 <Canvas>
-	<Story name="default" play={testButton}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Default" data-testid="button" />`
-			}
-		}}
+	<Story name="default" play={testButton} args={{ label: 'Default' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -36,13 +32,9 @@ Let's define a story for our `primary` button:
 			testButton(ctx, {
 				className: ['vv-button--primary']
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Primary" modifiers="primary" />`
-			}
 		}}
+		args={{ label: 'Primary', modifiers: 'primary' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -57,13 +49,9 @@ Let's define a story for our `secondary` button:
 			testButton(ctx, {
 				className: 'vv-button--secondary'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Secondary" modifiers="secondary" />`
-			}
 		}}
+		args={{ label: 'Secondary', modifiers: 'secondary' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -78,13 +66,9 @@ Let's define a story for our `danger` button:
 			testButton(ctx, {
 				className: 'vv-button--danger'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Danger" modifiers="danger" />`
-			}
 		}}
+		args={{ label: 'Danger', modifiers: 'danger' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -99,34 +83,26 @@ Let's define a story for our `ghost` button:
 			testButton(ctx, {
 				className: 'vv-button--ghost'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Ghost" modifiers="ghost" />`
-			}
 		}}
+		args={{ label: 'Ghost', modifiers: 'ghost' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
 ## Text
 
-Let's define a story for our `text` button:
+Let's define a story for our `link` button:
 
 <Canvas>
 	<Story
-		name="text"
+		name="link"
 		play={async (ctx) => {
 			testButton(ctx, {
-				className: 'vv-button--text'
+				className: 'vv-button--link'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Text" modifiers="text" />`
-			}
 		}}
+		args={{ label: 'Link', modifiers: 'link' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
@@ -169,12 +145,93 @@ Let's define a story for our `static-dark` button:
 			testButton(ctx, {
 				className: 'vv-button--static-dark'
 			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Static Dark" modifiers="static-dark" />`
-			}
 		}}
+		args={{ label: 'Static Dark', modifiers: 'static-dark' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Block
+
+Let's define a story for our `block` button:
+
+<Canvas>
+	<Story
+		name="block"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--block'
+			})
+		}}
+		args={{ label: 'Block', modifiers: 'block' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Rounded
+
+Let's define a story for our `rounded` button:
+
+<Canvas>
+	<Story
+		name="rounded"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--rounded'
+			})
+		}}
+		args={{ label: 'Rounded', modifiers: 'rounded' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## 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'
+			})
+		}}
+		args={{ label: 'Full-bleed', modifiers: 'full-bleed' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## Action
+
+Let's define a story for our `action` button:
+
+<Canvas>
+	<Story
+		name="action"
+		play={async (ctx) => {
+			testButton(ctx, {
+				className: 'vv-button--action'
+			})
+		}}
+		args={{ label: 'Action', modifiers: 'action' }}>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+## 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'
+			})
+		}}
+		args={{ label: 'Action-quiet', modifiers: 'action-quiet' }}>
+		{Template.bind()}
 	</Story>
 </Canvas>

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

@@ -0,0 +1,30 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+
+<Meta title="Components/Button/Props/selected" />
+
+## 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" modifiers="action" selected />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={'<vv-button label="Action" modifiers="action" selected />'}
+/>

package/src/stories/ButtonGroup/ButtonGroupAction.stories.mdx

@@ -25,7 +25,7 @@ A VvButtonGroup with the `action` prop
 				components: { VvButton, VvButtonGroup },
 				template: `
 					<div class="flex flex-col">
-						<vv-button-group action class="mt-22">
+						<vv-button-group modifiers="action" class="mt-22">
                             <vv-button>Button 1</vv-button>
                             <vv-button id="btn2">Button 2</vv-button>
                             <vv-button>Button 3</vv-button>
@@ -60,7 +60,7 @@ A VvButtonGroup with the `action`, `toggle` and `compact` props
 				},
 				template: `
 					<div class="flex">
-						<vv-button-group v-model:modelValue="modelValue" action toggle compact class="mt-22">
+						<vv-button-group v-model:modelValue="modelValue" :modifiers="['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" />

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

@@ -28,7 +28,7 @@ A VvButtonGroup with the `action-quiet` prop
 				components: { VvButton, VvButtonGroup },
 				template: `
 					<div class="flex flex-col">
-						<vv-button-group action-quiet>
+						<vv-button-group modifiers="action-quiet">
                             <vv-button>Button 1</vv-button>
                             <vv-button>Button 2</vv-button>
                             <vv-button>Button 3</vv-button>
@@ -42,7 +42,7 @@ A VvButtonGroup with the `action-quiet` prop
 
 <Source
 	language="html"
-	code={`<vv-button-group action-quiet>
+	code={`<vv-button-group modifiers="action-quiet">
 	<vv-button>Button 1</vv-button>
 	<vv-button>Button 2</vv-button>
 	<vv-button>Button 3</vv-button>

package/src/stories/ButtonGroup/ButtonGroupBlock.stories.mdx

@@ -27,7 +27,7 @@ A VvButtonGroup with the <strong>block</strong> prop will be render with <strong
 				components: { VvButton, VvButtonGroup },
 				template: `
 					<div class="flex flex-col">
-						<vv-button-group block class="mt-22">
+						<vv-button-group modifiers="block" class="mt-22">
                             <vv-button>Button 1</vv-button>
                             <vv-button id="btn2">Button 2</vv-button>
                             <vv-button>Button 3</vv-button>

package/src/stories/ButtonGroup/ButtonGroupRounded.stories.mdx

@@ -26,7 +26,7 @@ A VvButtonGroup with the <strong>rounded</strong> prop will be render with <stro
 			return {
 				components: { VvButton, VvButtonGroup },
 				template: `
-                        <vv-button-group rounded>
+                        <vv-button-group modifiers="rounded">
                             <vv-button>Button 1</vv-button>
                             <vv-button id="btn2">Button 2</vv-button>
                             <vv-button>Button 3</vv-button>

package/src/stories/RadioGroup/RadioGroupHintLabel.stories.mdx

@@ -3,7 +3,7 @@ import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
 import VvRadio from '../../components/VvRadio/VvRadio.vue'
 
-import { labelTest, radioGroupTest } from './RadioProperty.test.ts'
+import { labelTest } from './RadioProperty.test.ts'
 
 <Meta title="Components/RadioGroup/HintLabel" component={VvRadioGroup} />
 
@@ -12,11 +12,11 @@ import { labelTest, radioGroupTest } from './RadioProperty.test.ts'
 <Canvas>
 	<Story
 		name="HintLabel"
-		play={async ({ canvasElement, args }) => {
-			labelTest(
-				{ canvasElement, args },
-				{ child: 1, propName: 'hintLabel' }
-			)
+		play={async (ctx) => {
+			labelTest(ctx, {
+				child: 1,
+				propName: 'hintLabel'
+			})
 		}}
 		args={{
 			name: 'vv-group-options-hint-label',

package/src/stories/RadioGroup/RadioGroupLabel.stories.mdx

@@ -4,7 +4,7 @@ import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
 import VvRadio from '../../components/VvRadio/VvRadio.vue'
 
 import { Template } from './RadioGroup.stories.mdx'
-import { labelTest } from './RadioPropertyTest.js'
+import { labelTest } from './RadioProperty.test.ts'
 
 <Meta title="Components/RadioGroup/Label" component={VvRadioGroup} />
 
@@ -13,7 +13,12 @@ import { labelTest } from './RadioPropertyTest.js'
 <Canvas>
 	<Story
 		name="Label"
-		play={labelTest}
+		play={async (ctx) => {
+			labelTest(ctx, {
+				chid: 0,
+				propName: 'label'
+			})
+		}}
 		args={{
 			name: 'story-label',
 			options: [

package/src/stories/RadioGroup/RadioGroupOptionLabel.stories.mdx

@@ -3,11 +3,7 @@ import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
 import VvRadio from '../../components/VvRadio/VvRadio.vue'
 
-import {
-	mainOptionsTest,
-	optionsLabelStringTest,
-	optionsLabelFunctionTest
-} from './RadioOptionsTest'
+import { radioOptionsTest } from './RadioOption.test.ts'
 import { Template } from './RadioGroup.stories.mdx'
 
 <Meta title="Components/RadioGroup/OptionLabel" component={VvRadioGroup} />
@@ -19,12 +15,7 @@ Change object prop for label
 <Canvas>
 	<Story
 		name="OptionsLabel - string"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsLabelStringTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
@@ -32,7 +23,8 @@ Change object prop for label
 				{ value: 2, name: 'Pera' },
 				{ value: 3, name: 'Banana' }
 			],
-			optionLabel: 'name'
+			optionLabel: 'name',
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -45,12 +37,7 @@ Use function to define option label
 <Canvas>
 	<Story
 		name="OptionsLabel - function"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsLabelFunctionTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
@@ -58,7 +45,8 @@ Use function to define option label
 				{ value: 2, name: 'Pera' },
 				{ value: 3, name: 'Banana' }
 			],
-			optionLabel: (o) => `Frutto: ${o.name}`
+			optionLabel: (o) => `Frutto: ${o.name}`,
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/RadioGroup/RadioGroupOptionValue.stories.mdx

@@ -3,11 +3,7 @@ import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
 import VvRadio from '../../components/VvRadio/VvRadio.vue'
 
-import {
-	mainOptionsTest,
-	optionsValueStringTest,
-	optionsValueFunctionTest
-} from './RadioOptionsTest.js'
+import { radioOptionsTest } from './RadioOption.test.ts'
 import { Template } from './RadioGroup.stories.mdx'
 
 <Meta title="Components/RadioGroup/OptionsValue" component={VvRadioGroup} />
@@ -19,12 +15,7 @@ Change object prop for value
 <Canvas>
 	<Story
 		name="OptionsValue - string"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsValueStringTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
@@ -32,7 +23,8 @@ Change object prop for value
 				{ qta: 2, label: 'Pera' },
 				{ qta: 3, label: 'Banana' }
 			],
-			optionValue: 'qta'
+			optionValue: 'qta',
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -45,12 +37,7 @@ Use function to define option value
 <Canvas>
 	<Story
 		name="OptionsValue - function"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [optionsValueFunctionTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
@@ -58,7 +45,8 @@ Use function to define option value
 				{ qta: 2, label: 'Pera' },
 				{ qta: 3, label: 'Banana' }
 			],
-			optionValue: (o) => `${o.qta}_${o.label}`
+			optionValue: (o) => `${o.qta}_${o.label}`,
+			role: 'radiogroup'
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/RadioGroup/RadioGroupOptions.stories.mdx

@@ -3,11 +3,7 @@ import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
 import VvRadio from '../../components/VvRadio/VvRadio.vue'
 
-import {
-	mainOptionsTest,
-	radioOptionsTest,
-	arrayOptionsTest
-} from './RadioOptionsTest.js'
+import { radioOptionsTest, arrayOptionsTest } from './RadioOption.test.ts'
 import { Template } from './RadioGroup.stories.mdx'
 
 <Meta title="Components/RadioGroup/Options" component={VvRadioGroup} />
@@ -19,12 +15,7 @@ Check group based on list of object list
 <Canvas>
 	<Story
 		name="Options"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [radioOptionsTest]
-			})
-		}
+		play={radioOptionsTest}
 		args={{
 			name: 'options',
 			options: [
@@ -43,12 +34,7 @@ Check group based on list of object list
 <Canvas>
 	<Story
 		name="Options as Array"
-		play={(ctx) =>
-			mainOptionsTest({
-				...ctx,
-				functions: [arrayOptionsTest]
-			})
-		}
+		play={arrayOptionsTest}
 		args={{
 			name: 'options',
 			options: ['Primo', 'Secondo', 'Terzo']

package/src/stories/RadioGroup/RadioGroupSlots.stories.mdx

@@ -3,7 +3,7 @@ import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import VvRadioGroup from '../../components/VvRadioGroup/VvRadioGroup.vue'
 import VvRadio from '../../components/VvRadio/VvRadio.vue'
 
-import { slotsTest } from './RadioSlotsTest.js'
+import { slotsTest } from './RadioSlots.test.ts'
 
 <Meta title="Components/RadioGroup/Slots" component={VvRadioGroup} />
 
@@ -44,11 +44,10 @@ import { slotsTest } from './RadioSlotsTest.js'
 <Canvas>
 	<Story
 		name="Hint"
-		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement })
-		}}
+		play={slotsTest}
 		args={{
-			name: 'story-slot-hint'
+			name: 'story-slot-hint',
+			role: 'radiogroup'
 		}}>
 		{(args) => {
 			return {
@@ -85,11 +84,12 @@ import { slotsTest } from './RadioSlotsTest.js'
 	<Story
 		name="Valid"
 		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement }, 'valid')
+			slotsTest({ canvasElement }, { className: 'valid' })
 		}}
 		args={{
 			name: 'story-slot-valid',
-			valid: true
+			valid: true,
+			role: 'radiogroup'
 		}}>
 		{(args) => {
 			return {
@@ -126,11 +126,12 @@ import { slotsTest } from './RadioSlotsTest.js'
 	<Story
 		name="Error"
 		play={async ({ canvasElement }) => {
-			slotsTest({ canvasElement }, 'invalid')
+			slotsTest({ canvasElement }, { className: 'invalid' })
 		}}
 		args={{
 			name: 'story-slot-error',
-			error: true
+			error: true,
+			role: 'radiogroup'
 		}}>
 		{(args) => {
 			return {

package/src/stories/RadioGroup/RadioOption.test.ts

@@ -0,0 +1,45 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+import { radioGroupTest } from './RadioProperty.test'
+
+type optionFn = (a: { [key: string]: string }) => string
+
+function getValueToTest(
+	option: { [key: string]: string },
+	key: string | optionFn
+) {
+	return typeof key == 'string' ? `${option[key]}` : `${key(option)}`
+}
+
+async function radioOptionsTest({ canvasElement, ...data }: PlayAttributes) {
+	const radioGroup = await within(canvasElement).findByRole('radiogroup')
+	const radioGroupWrapper = radioGroup.children[0]
+	const optionParamLabel = data.args.optionLabel || 'label'
+	const optionParamValue = data.args.optionValue || 'value'
+	const options: { [key: string]: string }[] = data.args.options
+	options.forEach((option, index: number) => {
+		const radio = radioGroupWrapper.children[index] as HTMLElement
+		const radioValue = radio.children[0]
+		const radioLabel = radio.innerText
+		expect(radioLabel).toEqual(getValueToTest(option, optionParamLabel))
+		expect(radioValue).toEqual(getValueToTest(option, optionParamValue))
+	})
+	radioGroupTest({ canvasElement, ...data })
+}
+
+async function arrayOptionsTest({ canvasElement, ...data }: PlayAttributes) {
+	const radioGroup = await within(canvasElement).findByRole('radiogroup')
+	const radioGroupWrapper = radioGroup.children[0]
+	const options: { [key: string]: string }[] = data.args.options
+	options.forEach((option, index: number) => {
+		const radio = radioGroupWrapper.children[index] as HTMLElement
+		const radioValue = radio.children[0]
+		const radioLabel = radio.innerText
+		expect(radioLabel).toEqual(option)
+		expect(radioValue).toEqual(option)
+	})
+	radioGroupTest({ canvasElement, ...data })
+}
+
+export { radioOptionsTest, arrayOptionsTest }

package/src/stories/RadioGroup/RadioProperty.test.ts

@@ -11,7 +11,7 @@ interface RadioConfig {
 }
 
 async function radioGroupTest(
-	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{ canvasElement }: PlayAttributes = {} as PlayAttributes,
 	{
 		isClickDisabled = false,
 		className = null,
@@ -21,9 +21,9 @@ async function radioGroupTest(
 	const radioGroupParent = await within(canvasElement).findByRole(
 		'radiogroup'
 	)
-	const prefix = data.args.name
-	const radio1 = document.getElementById(`${prefix}_opt1`) as HTMLInputElement
-	const radio2 = document.getElementById(`${prefix}_opt2`) as HTMLInputElement
+	const radios = document.getElementsByClassName('vv-input-radio__input')
+	const radio1 = radios[0] as HTMLInputElement
+	const radio2 = radios[1] as HTMLInputElement
 	expect(radioGroupParent).toHaveClass('vv-input-radio-group')
 	if (!isVertical) {
 		expect(radioGroupParent).toHaveClass([

package/src/stories/RadioGroup/RadioSlots.test.ts

@@ -0,0 +1,29 @@
+import type { PlayAttributes } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+import { radioGroupTest } from './RadioProperty.test'
+
+interface RadioConfig {
+	className?: string
+}
+
+async function slotsTest(
+	{ canvasElement, ...args }: PlayAttributes = {} as PlayAttributes,
+	{ className }: RadioConfig = {} as RadioConfig
+) {
+	const radioGroupParent = await within(canvasElement).findByRole(
+		'radiogroup'
+	)
+	const slot = radioGroupParent.lastElementChild as HTMLElement
+	expect(slot).toHaveClass('vv-input-radio-group__hint')
+	expect(slot.innerText).toBeTruthy()
+	if (className) {
+		expect(radioGroupParent).toHaveClass(
+			`vv-input-radio-group--${className}`
+		)
+	}
+	expect(slot).toHaveNoViolations()
+	await radioGroupTest({ canvasElement, ...args })
+}
+
+export { slotsTest }