@volverjs/ui-vue 0.0.6-beta.7 → 0.0.7-beta.1

package/src/stories/ButtonGroup/ButtonGroupToggle.stories.mdx

@@ -1,73 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvButtonGroup from '@/components/VvButtonGroup/VvButtonGroup.vue'
-import { Template } from './ButtonGroup.stories.mdx'
-import { defaultArgs, argTypes } from './ButtonGroup.settings'
-import { defaultTest } from './ButtonGroup.test'
-
-<Meta
-	title="Components/ButtonGroup/Toggle"
-	component={VvButtonGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{ toggle: true }}
-		argTypes={{
-			toggle: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Multiple"
-		args={{ toggle: true, multiple: true }}
-		argTypes={{
-			toggle: {
-				control: {
-					disable: true,
-				},
-			},
-			multiple: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Unselectable"
-		args={{ toggle: true, unselectable: false }}
-		argTypes={{
-			toggle: {
-				control: {
-					disable: true,
-				},
-			},
-			unselectable: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Card/Card.stories.mdx

@@ -1,40 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCard from '@/components/VvCard/VvCard.vue'
-import { defaulTest } from './Card.test'
-import { defaultArgs, argTypes } from './Card.settings'
-
-<Meta
-	title="Components/Card"
-	component={VvCard}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvCard },
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `
-        <vv-card v-bind="args" data-testId="card">
-			<template #default v-if="args.default"><div v-html="args.default"></div></template>
-			<template #header v-if="args.header"><div v-html="args.header"></div></template>
-			<template #content v-if="args.content"><div v-html="args.content"></div></template>
-			<template #footer v-if="args.footer"><div v-html="args.footer"></div></template>
-        </vv-card>
-    `,
-})
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaulTest}
-		args={{
-			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/Card/CardSlots.stories.mdx

@@ -1,98 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCard from '@/components/VvCard/VvCard.vue'
-import { defaulTest } from './Card.test'
-import { defaultArgs, argTypes } from './Card.settings'
-import { Template } from './Card.stories.mdx'
-
-<Meta
-	title="Components/Card/Slots"
-	component={VvCard}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaulTest}
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args) => {
-			return {
-				components: { VvCard },
-				setup() {
-					return {
-						args,
-					}
-				},
-				template: /*html*/ `
-					<vv-card v-bind="args" class="max-w-max" data-testId="card">
-						<picture>
-							<img class="aspect-photo h-300" src="https://unsplash.it/300" alt="Card picture"/>
-						</picture>
-					</vv-card>
-				`,
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Header"
-		play={defaulTest}
-		args={{
-			header: 'Header <em class="italic">slot!</em>',
-		}}
-		argTypes={{
-			header: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Content"
-		play={defaulTest}
-		argTypes={{
-			content: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Footer"
-		play={defaulTest}
-		args={{
-			footer: 'Footer <em class="italic">slot!</em>',
-		}}
-		argTypes={{
-			footer: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Checkbox/Checkbox.stories.mdx

@@ -1,164 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-import { defaultArgs, argTypes } from './Checkbox.settings'
-import { defaultTest } from './Checkbox.test'
-
-<Meta
-	title="Components/Checkbox"
-	component={VvCheckbox}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvCheckbox },
-	setup() {
-		return { args }
-	},
-	data: () => ({ inputValue: args.uncheckedValue }),
-	template: /*html*/ `
-		<vv-checkbox v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-			<template #default v-if="args.default"><span v-html="args.default"></span></template>
-			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-		</vv-checkbox>
-		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Disabled"
-		play={defaultTest}
-		args={{ disabled: true }}
-		argTypes={{
-			disabled: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Readonly"
-		play={defaultTest}
-		args={{ readonly: true }}
-		argTypes={{
-			readonly: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Switch"
-		play={defaultTest}
-		args={{ switch: true }}
-		argTypes={{
-			switch: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Invalid"
-		play={defaultTest}
-		args={{
-			invalid: true,
-			invalidLabel: 'You must accept terms and conditions',
-			label: 'Accept terms and conditions',
-		}}
-		argTypes={{
-			invalid: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Valid"
-		play={defaultTest}
-		args={{
-			valid: true,
-			validLabel: 'Thank you for accepting terms and conditions',
-			label: 'Accept terms and conditions',
-		}}
-		argTypes={{
-			valid: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Indeterminate"
-		play={defaultTest}
-		args={{
-			indeterminate: true,
-		}}
-		argTypes={{
-			indeterminate: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Hint"
-		play={defaultTest}
-		args={{
-			hintLabel: 'Please accept terms and conditions',
-		}}
-		argTypes={{
-			hintLabel: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Checkbox/CheckboxBinary.stories.mdx

@@ -1,68 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-import { defaultTest } from './Checkbox.test'
-import { defaultArgs, argTypes } from './Checkbox.settings'
-import { Template } from './Checkbox.stories.mdx'
-
-<Meta
-	title="Components/Checkbox/Binary"
-	component={VvCheckbox}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="True / false"
-		play={defaultTest}
-		argTypes={{
-			value: {
-				...argTypes.value,
-				control: {
-					disable: true,
-				},
-			},
-			uncheckedValue: {
-				...argTypes.uncheckedValue,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			label: 'Accept terms and conditions',
-			value: true,
-			uncheckedValue: false,
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Yes / no"
-		play={defaultTest}
-		argTypes={{
-			value: {
-				...argTypes.value,
-				control: {
-					disable: true,
-				},
-			},
-			uncheckedValue: {
-				...argTypes.uncheckedValue,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			label: 'Accept terms and conditions',
-			value: 'Yes',
-			uncheckedValue: 'No',
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Checkbox/CheckboxSlots.stories.mdx

@@ -1,46 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs'
-import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
-import { defaultTest } from './Checkbox.test'
-import { defaultArgs, argTypes } from './Checkbox.settings'
-import { Template } from './Checkbox.stories.mdx'
-
-<Meta
-	title="Components/Checkbox/Slots"
-	component={VvCheckbox}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{ default: 'Default <em class="italic">slot!</em>' }}
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Hint"
-		play={defaultTest}
-		args={{ hint: 'Hint <em class="italic">slot!</em>' }}
-		argTypes={{
-			hint: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroup.stories.mdx

@@ -1,135 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
-import { defaultArgs, argTypes } from './CheckboxGroup.settings'
-import { defaultTest } from './CheckboxGroup.test'
-
-<Meta
-	title="Components/CheckboxGroup"
-	component={VvCheckboxGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvCheckboxGroup },
-	setup() {
-		return { args }
-	},
-	data: () => ({ inputValue: undefined }),
-	template: /*html*/ `
-		<vv-checkbox-group v-bind="args" v-model="inputValue" :data-testData="inputValue" data-testId="element">
-			<template #default v-if="args.default"><span v-html="args.default"></span></template>
-			<template #hint v-if="args.hint"><span v-html="args.hint"></span></template>
-		</vv-checkbox-group>
-		<div>Value: <span data-testId="value">{{inputValue}}</span></div> 
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Disabled"
-		play={defaultTest}
-		args={{ disabled: true }}
-		argTypes={{
-			disabled: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Readonly"
-		play={defaultTest}
-		args={{ readonly: true }}
-		argTypes={{
-			readonly: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Vertical"
-		play={defaultTest}
-		args={{ vertical: true }}
-		argTypes={{
-			vertical: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Invalid"
-		play={defaultTest}
-		args={{ invalid: true, invalidLabel: 'This field is required.' }}
-		argTypes={{
-			invalid: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Valid"
-		play={defaultTest}
-		args={{ valid: true, validLabel: 'Selected response is valid.' }}
-		argTypes={{
-			valid: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Hint"
-		play={defaultTest}
-		args={{ hintLabel: 'Please fill the input above.' }}
-		argTypes={{
-			hint: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/CheckboxGroup/CheckboxGroupOptions.stories.mdx

@@ -1,100 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs'
-import VvCheckboxGroup from '@/components/VvCheckboxGroup/VvCheckboxGroup.vue'
-import { Template } from './CheckboxGroup.stories.mdx'
-import { defaultArgs, argTypes } from './CheckboxGroup.settings'
-import { defaultTest } from './CheckboxGroup.test'
-
-<Meta
-	title="Components/CheckboxGroup/Options"
-	component={VvCheckboxGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Array of Objects"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			options: [
-				{ value: 'first', label: 'First' },
-				{ value: 'second', label: 'Second' },
-				{ value: 'third', label: 'Third' },
-			],
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Option label key"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			labelKey: 'name',
-			options: [
-				{ value: 'first', name: 'First' },
-				{ value: 'second', name: 'Second' },
-				{ value: 'third', name: 'Third' },
-			],
-		}}
-		argTypes={{
-			labelKey: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Option value key"
-		play={defaultTest}
-		argTypes={{
-			options: {
-				...argTypes.options,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			valueKey: 'id',
-			options: [
-				{ id: 'first', label: 'First' },
-				{ id: 'second', label: 'Second' },
-				{ id: 'third', label: 'Third' },
-			],
-		}}
-		argTypes={{
-			options: {
-				valueKey: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>