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

package/src/stories/Progress/Progress.stories.mdx

@@ -1,23 +1,20 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvProgress from '../../components/VvProgress/VvProgress.vue'
-import { progressTest, indeterminateTest } from './ProgressTest.js'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvProgressProps } from '../../components/VvProgress/VvProgress'
+import VvProgress from '@/components/VvProgress/VvProgress.vue'
+import { propsToObject } from '@/utils/ObjectUtilities'
+import { VvProgressProps } from '@/components/VvProgress'
+import { progressTest, indeterminateTest } from './Progress.test'
 
 <Meta
 	title="Components/Progress"
 	component={VvProgress}
 	args={{
-		...ObjectUtilities.propsToObject(VvProgressProps)
+		...propsToObject(VvProgressProps)
 	}}
 	argTypes={{
 		value: {
-			defaultValue: 30
-		},
-		max: {
-			defaultValue: 100
-		},
-		determinate: false
+			defaultValue: undefined,
+			control: { type: 'number', min: 0, max: 1, step: 0.1 }
+		}
 	}}
 />
 

package/src/stories/Progress/{ProgressTest.js → Progress.test.js}

@@ -1,17 +1,16 @@
-import { expect } from '@storybook/jest'
+import { expect } from '@/test/expect'
 import { within } from '@storybook/testing-library'
-import { toHaveNoViolations, axe } from 'jest-axe'
 
 async function progressTest({ canvasElement }) {
 	const progress = await within(canvasElement).findByRole('progressbar')
 	expect(progress).toHaveClass('vv-progress')
-	await accessibilityTest(progress)
+	await expect(progress).toHaveNoViolations()
 }
 
 async function indeterminateTest({ canvasElement }) {
 	const progress = await within(canvasElement).findByRole('progressbar')
 	await classTest(progress, ['vv-progress', 'vv-progress--indeterminate'])
-	await accessibilityTest(progress)
+	await expect(progress).toHaveNoViolations()
 }
 
 async function classTest(progress, classNames = []) {
@@ -20,9 +19,4 @@ async function classTest(progress, classNames = []) {
 	})
 }
 
-async function accessibilityTest(element) {
-	expect.extend(toHaveNoViolations)
-	expect(await axe(element)).toHaveNoViolations()
-}
-
-export { progressTest, indeterminateTest, classTest, accessibilityTest }
+export { progressTest, indeterminateTest, classTest }

package/src/stories/Progress/ProgressDeterminate.stories.mdx

@@ -1,5 +1,5 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvProgress from '../../components/VvProgress/VvProgress.vue'
+import VvProgress from '@/components/VvProgress/VvProgress.vue'
 import { Template } from './Progress.stories.mdx'
 
 <Meta title="Components/Progress/Props" component={VvProgress} />
@@ -9,11 +9,8 @@ import { Template } from './Progress.stories.mdx'
 Stories of `VvProgress`.
 Let's define a story for our `determinate` progress with `max` and `value`:
 
-<Story name="determinate" args={{ determinate: true, max: '100', value: '25' }}>
+<Story name="determinate" args={{ determinate: true, max: 100, value: 25 }}>
 	{Template.bind({})}
 </Story>
 
-<Source
-	language="html"
-	code={`<vv-progress max="100" value="25" determinate />`}
-/>
+<Source language="html" code={`<vv-progress max="100" value="25" />`} />

package/src/stories/Radio/Radio.stories.mdx

@@ -1,10 +1,10 @@
 import { Canvas, Meta, Story, Source, ArgsTable } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { radioTest } from './Radio.test'
 
 <Meta
-	title="Components/RadioButton"
+	title="Components/Radio"
 	argTypes={{
 		onClick: { action: 'click', table: { disable: true } },
 		onChange: { action: 'change', table: { disable: true } },
@@ -21,42 +21,36 @@ export const Template = (args, { argTypes }) => ({
 		return { args }
 	},
 	data: () => ({ ckValue: args.modelValue }),
-	template: `
-        <div class="flex flex-row justify-between">
-			<vv-radio v-bind="args" v-model:modelValue="ckValue"/>
-			<strong >Valore selez: {{ckValue}} </strong> 
-		</div>
-        `
+	template: `<vv-radio v-bind="args" v-model="ckValue"/><div>Selected value: {{ckValue}}</div>`
 })
 
 # VvRadio
 
 A radio allows the user to select one option.
 
-<Source language="jsx" code={'<vv-radio/>'} />
+<Source language="jsx" code={'<vv-radio label="option" :value="{ a: 1 }" />'} />
 
 <Canvas>
 	<Story
 		name="vv-radio"
+		play={radioTest}
 		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'o1',
+			label: 'Option',
+			name: 'radio',
 			disabled: false,
-			modelValue: null,
 			value: { a: 1 }
 		}}
 		argTypes={{
 			id: {
-				description: 'Id input element.',
+				description: 'Input id',
 				table: { category: 'Attributes' }
 			},
 			name: {
-				description: 'Nome input element',
+				description: 'Input name',
 				table: { category: 'Attributes' }
 			},
 			value: {
-				description: 'Valore input element',
+				description: 'Input value',
 				table: { category: 'Attributes' }
 			}
 		}}>

package/src/stories/Radio/Radio.test.ts

@@ -0,0 +1,52 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { expect } from '@/test/expect'
+
+export async function radioTest(
+	data: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		slotContent = null
+	}: ComponentConfig = {}
+) {
+	const radio =
+		(document.getElementById(data.args.id) as HTMLInputElement) ||
+		(document.getElementsByClassName(
+			'vv-radio__input'
+		)[0] as HTMLInputElement)
+
+	expect(radio).toHaveClass('vv-radio__input')
+	className && expect(radio).toHaveClass(className)
+
+	if (isClickDisabled) {
+		await expect(radio).not.toBeClicked()
+	} else {
+		await expect(radio).toBeClicked()
+		expect(radio.checked).toBe(true)
+	}
+	data.args.name && expect(radio.name).toEqual(data.args.name)
+	const label = radio.parentElement
+	expect(label).toHaveClass('vv-radio')
+	expect(label?.innerText).toEqual(
+		slotContent ? slotContent : data.args.label
+	)
+	data.args.error && expect(label).toHaveClass('vv-radio--invalid')
+	expect(radio && label).toHaveNoViolations()
+}
+
+export async function hintLabelTest(data: PlayAttributes) {
+	const label = document.getElementsByClassName('vv-radio')[0] as HTMLElement
+	const propLabel: string | string[] =
+		data.args.hintLabel || data.args.errorLabel
+	const hintLabel = label.lastElementChild as HTMLElement
+	expect(hintLabel).toHaveClass('vv-radio__hint')
+	// test hint label based on his type
+	if (typeof propLabel == 'string') {
+		expect(hintLabel.innerText).toEqual(propLabel)
+	}
+	if (Array.isArray(propLabel)) {
+		propLabel.forEach((label) => {
+			expect(hintLabel.innerHTML).toContain(label)
+		})
+	}
+}

package/src/stories/Radio/RadioDisabled.stories.mdx

@@ -1,12 +1,10 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './Radio.stories.mdx'
 
 <Meta
-	title="Components/RadioButton/Disabled"
+	title="Components/Radio/Disabled"
 	args={{
 		modelValue: null
 	}}
@@ -19,9 +17,8 @@ import { Template } from './Radio.stories.mdx'
 	<Story
 		name="Disabled"
 		args={{
-			id: 1,
-			label: 'opzione 1',
-			name: 'ck1',
+			label: 'Option',
+			name: 'radio-disabled',
 			disabled: true,
 			value: 1
 		}}>

package/src/stories/Radio/RadioError.stories.mdx

@@ -1,12 +1,10 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './Radio.stories.mdx'
 
 <Meta
-	title="Components/RadioButton/Error"
+	title="Components/Radio/Error"
 	args={{
 		modelValue: null
 	}}
@@ -15,32 +13,15 @@ import { Template } from './Radio.stories.mdx'
 
 # Error
 
-<Canvas>
-	<Story
-		name="Invalid"
-		args={{
-			id: 6,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck6',
-			modelValue: false,
-			error: true
-		}}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-# Error with message
-
 <Canvas>
 	<Story
 		name="Error with message"
 		args={{
-			id: 7,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck7',
+			label: 'Accept terms and conditions',
+			name: 'radio-error',
 			modelValue: false,
 			error: true,
-			errorLabel: 'Sbagliato!'
+			errorLabel: 'Error label'
 		}}>
 		{Template.bind({})}
 	</Story>
@@ -52,12 +33,11 @@ import { Template } from './Radio.stories.mdx'
 	<Story
 		name="Error with messages"
 		args={{
-			id: 8,
-			label: 'Voglio acquistare questa enciclopedia!',
-			name: 'ck8',
+			label: 'Accept terms and conditions',
+			name: 'radio-error',
 			modelValue: false,
 			error: true,
-			errorLabel: ['Sbagliato!', 'Mona!']
+			errorLabel: ['First error', 'Second error']
 		}}>
 		{Template.bind({})}
 	</Story>

package/src/stories/Radio/RadioHintLabel.stories.mdx

@@ -1,12 +1,11 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
 import { action } from '@storybook/addon-actions'
-
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './Radio.stories.mdx'
+import { hintLabelTest } from './Radio.test'
 
 <Meta
-	title="Components/RadioButton/HintLabel"
+	title="Components/Radio/HintLabel"
 	args={{
 		modelValue: null
 	}}
@@ -18,11 +17,11 @@ import { Template } from './Radio.stories.mdx'
 <Canvas>
 	<Story
 		name="HintLabel"
+		play={hintLabelTest}
 		args={{
-			id: 1,
-			label: 'opzione 1',
+			label: 'Option 1',
+			hintLabel: 'Lorem ipsum dolor sit amet',
 			name: 'ck1',
-			disabled: true,
 			value: 1
 		}}>
 		{Template.bind({})}

package/src/stories/Radio/RadioSlots.stories.mdx

@@ -1,16 +1,18 @@
 import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-
-<Meta title="Components/RadioButton/Slots" component={VvRadio} />
+<Meta title="Components/Radio/Slots" component={VvRadio} />
 
 # Slot default
 
-Slot default define the content of RadioButton
+Slot default define the content of Radio
 
 <Source
 	language="jsx"
-	code={'<vv-radio name="r1" value="1">My content</vv-radio>'}
+	code={`
+<vv-radio name="option" :value="1">Option 1</vv-radio>
+<vv-radio name="option" :value="2">Option 2</vv-radio>
+<vv-radio name="option" :value="3">Option 3</vv-radio>`}
 />
 
 <Canvas>
@@ -18,10 +20,22 @@ Slot default define the content of RadioButton
 		{() => {
 			return {
 				components: { VvRadio },
+				data() {
+					return {
+						option: 1
+					}
+				},
 				template: `
-					<vv-radio name="r1" value="1">
-						My content
+					<vv-radio v-model="option" name="option" :value="1">
+						Option 1
+					</vv-radio>
+					<vv-radio v-model="option" name="option" :value="2">
+						Option 2
+					</vv-radio>
+					<vv-radio v-model="option" name="option" :value="3">
+						Option 3
 					</vv-radio>
+					<div>Selected: {{ option }}</div>
                     `
 			}
 		}}

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

@@ -1,9 +1,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 { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup" component={VvRadioGroup} />
 
@@ -15,15 +13,13 @@ export const Template = (args, { argTypes }) => ({
 	},
 	data: () => ({ selected: args.modelValue || null }),
 	template: `
-		<div class="flex flex-row justify-between">
-            <vv-radio-group role="radiogroup" v-bind="args" v-model:modelValue="selected">
-                <template v-slot:hint>
-                    <p>Ciao sono un hint di default. Piacere.</p>
-                </template> 
-            </vv-radio-group>
-            <strong v-if="selected">Selezione: {{selected}} </strong> 
-        </div>
-        `
+		<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+			<template v-slot:hint>
+				<p>Lorem ipsum dolor sit amet</p>
+			</template> 
+		</vv-radio-group>
+		<strong v-if="selected">Selected options: {{selected}} </strong> 
+    `
 })
 
 # VvRadioGroup
@@ -38,15 +34,14 @@ A group of radios.
 		play={radioGroupTest}
 		args={{
 			name: 'radio',
-			label: 'Prova',
+			label: 'Test',
 			vertical: false,
 			disabled: false,
 			readonly: false,
 			options: [],
 			optionLabel: 'label',
 			optionValue: 'value',
-			hintLabel: 'Ciccio',
-			role: 'radiogroup'
+			hintLabel: 'Lorem ipsum dolor sit amet'
 		}}>
 		{(args) => {
 			return {
@@ -56,18 +51,16 @@ A group of radios.
 					return { args }
 				},
 				template: `
-                    <div class="flex flex-row justify-between">
-                        <vv-radio-group v-bind="args" v-model:modelValue="selected">
-                            <vv-radio id="radio_opt1" name="opts" value="1">Opt 1</vv-radio>
-                            <vv-radio id="radio_opt2" name="opts" value="2">Opt 2</vv-radio>
-                            <vv-radio id="o3" name="opts" value="3">Opt 3</vv-radio>
-                        </vv-radio-group>
-                        <strong v-if="selected">Opzione selezionato: {{selected}} </strong> 
-                    </div>
-                    `
+					<vv-radio-group v-model="selected" v-bind="args" data-testId="radiogroup">
+						<vv-radio id="radio_opt1" name="opts" value="1">Option 1</vv-radio>
+						<vv-radio id="radio_opt2" name="opts" value="2">Option 2</vv-radio>
+						<vv-radio id="o3" name="opts" value="3">Option 3</vv-radio>
+					</vv-radio-group>
+					<strong v-if="selected">Selected options: {{selected}} </strong> 
+    			`
 			}
 		}}
 	</Story>
 </Canvas>
 
-<ArgsTable of={VvCheckGroup} />
+<ArgsTable of={VvRadioGroup} />

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

@@ -0,0 +1,139 @@
+import type { PlayAttributes, ComponentConfig } from '@/test/types'
+import { within } from '@storybook/testing-library'
+import { expect } from '@/test/expect'
+
+async function radioGroupTest(
+	{ canvasElement }: PlayAttributes = {} as PlayAttributes,
+	{
+		isClickDisabled = false,
+		className = null,
+		isVertical = false
+	}: ComponentConfig = {}
+) {
+	const radioGroupParent = await within(canvasElement).findByTestId(
+		'radiogroup'
+	)
+	const radios = document.getElementsByClassName('vv-radio__input')
+	const radio1 = radios[0] as HTMLInputElement
+	const radio2 = radios[1] as HTMLInputElement
+	expect(radioGroupParent).toHaveClass('vv-radio-group')
+	if (!isVertical) {
+		expect(radioGroupParent).toHaveClass(['vv-radio-group--horizontal'])
+	} else {
+		expect(radioGroupParent).not.toHaveClass('vv-radio--horizontal')
+	}
+	if (className) {
+		expect(radioGroupParent).toHaveClass(className)
+	}
+	if (isClickDisabled) {
+		await expect(radio1).not.toBeClicked()
+		expect(radio1.parentElement).toHaveClass('vv-radio--disabled')
+	} else {
+		await expect(radio1).toBeClicked()
+		radioCheck(radio1, true)
+		radioCheck(radio2, false)
+	}
+	expect(radioGroupParent).toHaveNoViolations()
+}
+
+async function labelTest(
+	{ canvasElement, ...data }: PlayAttributes = {} as PlayAttributes,
+	{ child = 0, propName = '' }: ComponentConfig = {}
+) {
+	const radioGroupParent = await within(canvasElement).findByTestId(
+		'radiogroup'
+	)
+	const labelInnerHTML = radioGroupParent.children[child].innerHTML
+	const propLabel = data.args[propName]
+	expect(labelInnerHTML).toBeTruthy()
+	expect(propLabel).toBeTruthy()
+	expect(labelInnerHTML).toEqual(propLabel)
+	await radioGroupTest({ canvasElement, ...data })
+}
+
+async function readonlyTest(
+	{ canvasElement }: PlayAttributes = {} as PlayAttributes
+) {
+	const radioGroup = (await within(canvasElement).findByTestId(
+		'radiogroup'
+	)) as HTMLDivElement
+	const radios = [...radioGroup.getElementsByClassName('vv-radio')]
+	radios.forEach((radio) => {
+		expect(radio).toHaveClass('vv-radio--readonly')
+	})
+}
+
+async function radioCheck(radio: HTMLInputElement, value: boolean) {
+	expect(radio.checked).toBe(value)
+}
+
+async function slotsTest(
+	{ canvasElement, ...args }: PlayAttributes = {} as PlayAttributes,
+	{ className }: ComponentConfig = {} as ComponentConfig
+) {
+	const radioGroupParent = await within(canvasElement).findByTestId(
+		'radiogroup'
+	)
+	const slot = radioGroupParent.lastElementChild as HTMLElement
+	expect(slot).toHaveClass('vv-radio-group__hint')
+	expect(slot.innerText).toBeTruthy()
+	if (className) {
+		expect(radioGroupParent).toHaveClass(`vv-radio-group--${className}`)
+	}
+	expect(slot).toHaveNoViolations()
+	await radioGroupTest({ canvasElement, ...args })
+}
+
+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).findByTestId('radiogroup')
+	const radioGroupWrapper = radioGroup.children[0]
+	const optionParamLabel = (data.args.optionLabel || 'label') as
+		| string
+		| optionFn
+	const optionParamValue = (data.args.optionValue || 'value') as
+		| string
+		| optionFn
+	const options = data.args.options as Record<string, string>[]
+	options.forEach((option, index: number) => {
+		const radio = radioGroupWrapper.children[index] as HTMLElement
+		const radioInput = radio.children[0] as HTMLInputElement
+		const radioText = radio.innerText
+		expect(radioText).toEqual(getValueToTest(option, optionParamLabel))
+		expect(radioInput.value).toEqual(
+			getValueToTest(option, optionParamValue)
+		)
+	})
+	radioGroupTest({ canvasElement, ...data })
+}
+
+async function arrayOptionsTest({ canvasElement, ...data }: PlayAttributes) {
+	const radioGroup = await within(canvasElement).findByTestId('radiogroup')
+	const radioGroupWrapper = radioGroup.children[0]
+	const options = data.args.options as Record<string, string>[]
+	options.forEach((option, index: number) => {
+		const radio = radioGroupWrapper.children[index] as HTMLElement
+		const radioInput = radio.children[0] as HTMLInputElement
+		const radioText = radio.innerText
+		expect(radioInput.value).toEqual(option)
+		expect(radioText).toEqual(option)
+	})
+	radioGroupTest({ canvasElement, ...data })
+}
+
+export {
+	radioGroupTest,
+	labelTest,
+	readonlyTest,
+	slotsTest,
+	radioOptionsTest,
+	arrayOptionsTest
+}

package/src/stories/RadioGroup/RadioGroupDisabled.stories.mdx

@@ -1,10 +1,8 @@
 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 { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Disabled" component={VvRadioGroup} />
 
@@ -21,9 +19,9 @@ import { Template } from './RadioGroup.stories.mdx'
 		args={{
 			name: 'disabled',
 			options: [
-				{ value: 1, label: 'Mela' },
-				{ value: 2, label: 'Pera' },
-				{ value: 3, label: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			],
 			disabled: true,
 			role: 'radiogroup'

package/src/stories/RadioGroup/RadioGroupError.stories.mdx

@@ -1,10 +1,8 @@
 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 { radioGroupTest } from './RadioProperty.test.ts'
+import VvRadioGroup from '@/components/VvRadioGroup/VvRadioGroup.vue'
+import VvRadio from '@/components/VvRadio/VvRadio.vue'
 import { Template } from './RadioGroup.stories.mdx'
+import { radioGroupTest } from './RadioGroup.test'
 
 <Meta title="Components/RadioGroup/Error" component={VvRadioGroup} />
 
@@ -15,19 +13,19 @@ import { Template } from './RadioGroup.stories.mdx'
 		name="Error"
 		play={async (ctx) => {
 			radioGroupTest(ctx, {
-				className: 'vv-input-radio-group--invalid'
+				className: 'vv-radio-group--invalid'
 			})
 		}}
 		args={{
 			name: 'error',
 			options: [
-				{ value: 1, name: 'Mela' },
-				{ value: 2, name: 'Pera' },
-				{ value: 3, name: 'Banana' }
+				{ value: 1, label: 'Option 1' },
+				{ value: 2, label: 'Option 2' },
+				{ value: 3, label: 'Option 3' }
 			],
-			optionLabel: (o) => `Frutto: ${o.name}`,
+			optionLabel: (o) => `${o.name} option`,
 			error: true,
-			errorLabel: ['Errore 1', 'Errore 2'],
+			errorLabel: ['First error', 'Second error'],
 			role: 'radiogroup'
 		}}>
 		{Template.bind({})}