@volverjs/ui-vue 0.0.6-beta.6 → 0.0.6

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

@@ -1,45 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { defaultTest } from './Accordion.test'
-import { defaultArgs, argTypes } from './Accordion.settings'
-
-<Meta
-	title="Components/Accordion"
-	component={VvAccordion}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvAccordion },
-	data() {
-		return {
-			open: false,
-		}
-	},
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `
-		<vv-accordion data-testId="element" v-bind="args" v-model="open">
-			<template #summary v-if="args.summary"><div v-html="args.summary"></div></template>
-			<template #default v-if="args.default"><div v-html="args.default"></div></template>
-		</vv-accordion>
-		<div class="mt-24">
-			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ open }}</span>
-		</div>
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Not" play={defaultTest} args={{ not: true }}>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,58 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { Template } from './Accordion.stories.mdx'
-import { defaultTest } from './Accordion.test'
-import { defaultArgs, argTypes } from './Accordion.settings'
-
-<Meta
-	title="Components/Accordion/Slots"
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{
-			default: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Details</strong>`,
-		}}
-		argTypes={{
-			content: {
-				control: {
-					disable: true,
-				},
-			},
-			summary: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Summary"
-		play={defaultTest}
-		args={{
-			summary: `<strong data-testId="slot" class="font-bold text-brand-darken-1">Custom Summary</strong>`,
-		}}
-		argTypes={{
-			title: {
-				control: {
-					disable: true,
-				},
-			},
-			details: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,58 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
-
-<Meta
-	title="Components/AccordionGroup"
-	component={VvAccordionGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvAccordionGroup },
-	setup() {
-		return { args }
-	},
-	data() {
-		return {
-			selected: null,
-		}
-	},
-	template: /*html*/ `
-		<vv-accordion-group data-testId="element" v-bind="args" v-model="selected" />
-		<div class="mt-24">
-			{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
-		</div>
-	`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Not" play={defaultTest} args={{ not: true }}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Collapse" play={defaultTest} args={{ collapse: true }}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Collapse Not"
-		play={defaultTest}
-		args={{ collapse: true, not: true }}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,59 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvAccordionGroup from '@/components/VvAccordionGroup/VvAccordionGroup.vue'
-import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-import { defaultTest } from './AccordionGroup.test'
-import { defaultArgs, argTypes } from './AccordionGroup.settings'
-
-<Meta
-	title="Components/AccordionGroup/Slots"
-	component={VvAccordionGroup}
-	args={defaultArgs}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		argTypes={{
-			items: {
-				...argTypes.items,
-				control: {
-					disable: true,
-				},
-			},
-			default: {
-				...argTypes.items,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args, { argTypes }) => {
-			return {
-				props: Object.keys(argTypes),
-				components: { VvAccordionGroup, VvAccordion },
-				setup() {
-					return { args }
-				},
-				data() {
-					return {
-						selected: '',
-						content:
-							'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis diam, tempor non sem ut, suscipit gravida mi.',
-					}
-				},
-				template: /*html*/ `
-					<vv-accordion-group data-testId="element" v-bind="args" v-model="selected">
-						<vv-accordion name="a-1" data-testId="a-1" title="Details 1" :content="content" />
-						<vv-accordion name="a-2" title="Details 2" :content="content" />
-						<vv-accordion name="a-3" title="Details 3" :content="content" />
-					</vv-accordion-group>
-					<div class="mt-24"  >
-						Opened: <span data-testId="value">{{ selected }}</span>
-					</div>
-				`,
-			}
-		}}
-	</Story>
-</Canvas>

package/src/stories/Avatar/Avatar.stories.mdx

@@ -1,40 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultArgs, argTypes } from './Avatar.settings'
-import { defaultTest } from './Avatar.test'
-
-<Meta
-	title="Components/Avatar"
-	component={VvAvatar}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args) => ({
-	components: { VvAvatar },
-	setup() {
-		return { args }
-	},
-	template: /* html */ `
-		<div class="m-md">
-			<vv-avatar v-bind="args" data-testId="element">
-				<template v-if="args.default">{{ args.default }}</template>
-			</vv-avatar>
-		</div>`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Image"
-		play={defaultTest}
-		args={{ imgSrc: 'https://i.pravatar.cc/300' }}
-	>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Avatar/AvatarBadge.stories.mdx

@@ -1,41 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import { defaultArgs, argTypes } from './Avatar.settings'
-import { defaultTest } from './Avatar.test'
-
-<Meta
-	title="Components/Avatar/Badge"
-	component={VvAvatar}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args) => ({
-	components: { VvAvatar, VvBadge },
-	setup() {
-		return { args }
-	},
-	template: /* html */ `
-		<div class="m-md">
-			<vv-avatar v-bind="args" data-testId="element">
-				{{ args.default }}
-                <sup>
-                    <vv-badge :modifiers="['danger', 'rounded']">99+</vv-badge>
-                </sup>
-			</vv-avatar>
-		</div>`,
-})
-
-<Canvas>
-	<Story
-		name="Badge"
-		play={defaultTest}
-		args={{
-			default: 'MR',
-			modifiers: 'lg',
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Avatar/AvatarModifiers.stories.mdx

@@ -1,87 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultArgs, argTypes } from './Avatar.settings'
-import { defaultTest } from './Avatar.test'
-import { Template } from './Avatar.stories.mdx'
-
-<Meta
-	title="Components/Avatar/Modifiers"
-	component={VvAvatar}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story name="Small" play={defaultTest} args={{ modifiers: '' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Medium" play={defaultTest} args={{ modifiers: 'md' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Large" play={defaultTest} args={{ modifiers: 'lg' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Rounded"
-		play={defaultTest}
-		args={{ modifiers: 'rounded', default: 'MR' }}
-	>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Square"
-		play={defaultTest}
-		args={{ modifiers: ['square', 'md'] }}
-	>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Bordered"
-		play={defaultTest}
-		args={{ modifiers: ['bordered', 'md'], default: 'MR' }}
-	>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Ring"
-		play={defaultTest}
-		args={{ modifiers: ['ring', 'md'], default: 'MR' }}
-	>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="CustomColors"
-		play={defaultTest}
-		args={{ modifiers: ['accent', 'md'], default: 'MR' }}
-		argTypes={{
-			...argTypes,
-			modifiers: {
-				...argTypes.modifiers,
-				options: [...argTypes.modifiers.options, 'accent'],
-			},
-		}}
-	>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Avatar/AvatarSlotDefault.stories.mdx

@@ -1,29 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-import { defaultArgs, argTypes } from './Avatar.settings'
-import { defaultTest } from './Avatar.test'
-import { Template } from './Avatar.stories.mdx'
-
-<Meta
-	title="Components/Avatar/Slots"
-	component={VvAvatar}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{ default: 'MR' }}
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/AvatarGroup/AvatarGroup.stories.mdx

@@ -1,30 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
-import { defaultArgs, argTypes } from './AvatarGroup.settings'
-import { defaultTest } from './AvatarGroup.test'
-
-<Meta
-	title="Components/AvatarGroup"
-	component={VvAvatarGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args) => ({
-	components: { VvAvatarGroup },
-	setup() {
-		return { args }
-	},
-	template: /* html */ `
-		<div class="m-md">
-			<vv-avatar-group v-bind="args" data-testId="element">
-				<template v-if="args.default">{{ args.default }}</template>
-			</vv-avatar-group>
-		</div>`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/AvatarGroup/AvatarGroupModifiers.stories.mdx

@@ -1,24 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs'
-import VvAvatarGroup from '@/components/VvAvatarGroup/VvAvatarGroup.vue'
-import { defaultArgs, argTypes } from './AvatarGroup.settings'
-import { defaultTest } from './AvatarGroup.test'
-import { Template } from './AvatarGroup.stories.mdx'
-
-<Meta
-	title="Components/AvatarGroup/Modifiers"
-	component={VvAvatarGroup}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story name="Tight" play={defaultTest} args={{ modifiers: 'tight' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story name="Relaxed" play={defaultTest} args={{ modifiers: 'relaxed' }}>
-		{Template.bind({})}
-	</Story>
-</Canvas>

package/src/stories/Badge/Badge.stories.mdx

@@ -1,51 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import { defaultTest } from './Badge.test'
-import { defaultArgs, argTypes } from './Badge.settings'
-
-<Meta
-	title="Components/Badge"
-	component={VvBadge}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvBadge },
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `
-		<vv-badge v-bind="args">
-			<template #default v-if="args.default"><span v-html="args.default"></span></template>	
-		</vv-badge>`,
-})
-
-<Canvas>
-	<Story name="Default" args={{ value: '14' }} play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Dot"
-		args={{ value: '' }}
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-			value: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

package/src/stories/Badge/BadgeSlots.stories.mdx

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

package/src/stories/Breadcrumb/Breadcrumb.stories.mdx

@@ -1,50 +0,0 @@
-import { Meta, Story } from '@storybook/addon-docs'
-import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
-import { defaultTest } from './Breadcrumb.test'
-import { defaultArgs, argTypes } from './Breadcrumb.settings'
-
-<Meta
-	title="Components/Breadcrumb"
-	component={VvBreadcrumb}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	components: { VvBreadcrumb },
-	setup() {
-		return { args }
-	},
-	template: /*html*/ `
-		<div class="bg-surface p-lg">
-			<vv-breadcrumb v-bind="args" />
-		</div>`,
-})
-
-<Canvas>
-	<Story
-		name="Default"
-		play={defaultTest}
-		args={{}}
-		render={Template.bind()}
-	/>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Multiline"
-		play={defaultTest}
-		args={{
-			modifiers: 'multiline',
-		}}
-		argTypes={{
-			modifiers: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		render={Template.bind()}
-	/>
-</Canvas>

package/src/stories/Breadcrumb/BreadcrumbSlots.stories.mdx

@@ -1,43 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvBreadcrumb from '@/components/VvBreadcrumb/VvBreadcrumb.vue'
-import VvIcon from '@/components/VvIcon/VvIcon.vue'
-import { defaultTest } from './Breadcrumb.test'
-import { defaultArgs, argTypes } from './Breadcrumb.settings'
-
-<Meta
-	title="Components/Breadcrumb/Slots"
-	component={VvBreadcrumb}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Label"
-		play={(args) => defaultTest(args, true)}
-		argTypes={{
-			label: {
-				table: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args) => {
-			return {
-				setup() {
-					return { args }
-				},
-				components: { VvBreadcrumb, VvIcon },
-				template: /*html*/ `
-					<VvBreadcrumb v-bind="args">
-						<template #label="{route, index}">
-							<VvIcon v-if="index === 0" name="home" :aria-label="route.label"  />
-							<template v-else>{{ route.label }}</template>
-						</template>
-					</VvBreadcrumb>
-            	`,
-			}
-		}}
-	</Story>
-</Canvas>

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

@@ -1,35 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { defaultTest } from './Button.test'
-import { argTypes, defaultArgs } from './Button.settings'
-
-<Meta
-	title="Components/Button"
-	component={VvButton}
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-export const Template = (args, { argTypes }) => ({
-	props: Object.keys(argTypes),
-	data() {
-		return { currentValue: undefined }
-	},
-	setup() {
-		return { args }
-	},
-	components: { VvButton },
-	template: /*html*/ `
-		<vv-button v-bind="args" v-model="currentValue" name="my-button" data-testId="element">
-			<template #before v-if="args.before"><div v-html="args.before"></div></template>
-			<template #default v-if="args.default"><div v-html="args.default"></div></template>
-			<template #after v-if="args.after"><div v-html="args.after"></div></template>
-		</vv-button>
-		<div v-if="args.toggle" class="mt-md">Value: {{ currentValue }}</div>`,
-})
-
-<Canvas>
-	<Story name="Default" play={defaultTest}>
-		{Template.bind()}
-	</Story>
-</Canvas>