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

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

@@ -1,153 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { defaultTest } from './Button.test'
-import { Template } from './Button.stories.mdx'
-import { argTypes, defaultArgs } from './Button.settings'
-
-<Meta title="Components/Button/Icon" args={defaultArgs} argTypes={argTypes} />
-
-<Canvas>
-	<Story
-		name="Top"
-		args={{
-			icon: 'add',
-			iconPosition: 'top',
-			label: 'Button with top icon',
-			modifiers: 'ghost',
-		}}
-		argTypes={{
-			iconPosition: {
-				...argTypes.iconPosition,
-				control: {
-					disable: true,
-				},
-			},
-			icon: {
-				...argTypes.icon,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Right"
-		args={{
-			icon: 'add',
-			iconPosition: 'right',
-			label: 'Button with right icon',
-		}}
-		argTypes={{
-			iconPosition: {
-				...argTypes.iconPosition,
-				control: {
-					disable: true,
-				},
-			},
-			icon: {
-				...argTypes.icon,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Bottom"
-		args={{
-			icon: 'add',
-			iconPosition: 'bottom',
-			label: 'Button with bottom icon',
-			modifiers: 'ghost',
-		}}
-		argTypes={{
-			iconPosition: {
-				...argTypes.iconPosition,
-				control: {
-					disable: true,
-				},
-			},
-			icon: {
-				...argTypes.icon,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Left"
-		args={{
-			icon: 'add',
-			label: 'Button with left icon',
-		}}
-		argTypes={{
-			iconPosition: {
-				...argTypes.iconPosition,
-				control: {
-					disable: true,
-				},
-			},
-			icon: {
-				...argTypes.icon,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="No label"
-		args={{
-			icon: 'add',
-			label: '',
-			ariaLabel: 'Add new item',
-			modifiers: 'rounded',
-		}}
-		argTypes={{
-			iconPosition: {
-				...argTypes.iconPosition,
-				control: {
-					disable: true,
-				},
-			},
-			icon: {
-				...argTypes.icon,
-				control: {
-					disable: true,
-				},
-			},
-			label: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,72 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { defaultTest } from './Button.test'
-import { Template } from './Button.stories.mdx'
-import { argTypes, defaultArgs } from './Button.settings'
-
-<Meta title="Components/Button/Link" args={defaultArgs} argTypes={argTypes} />
-
-<Canvas>
-	<Story
-		name="Href"
-		args={{
-			icon: 'arrow-right',
-			iconPosition: 'right',
-			label: 'Link button',
-			href: 'https://volverjs.github.io/style',
-			target: '_blank',
-		}}
-		argTypes={{
-			href: {
-				...argTypes.href,
-				control: {
-					disable: true,
-				},
-			},
-			target: {
-				...argTypes.target,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Href Disabled"
-		args={{
-			icon: 'arrow-right',
-			iconPosition: 'right',
-			label: 'Link button',
-			href: 'https://volverjs.github.io/style',
-			target: '_blank',
-			disabled: true,
-		}}
-		argTypes={{
-			href: {
-				...argTypes.href,
-				control: {
-					disable: true,
-				},
-			},
-			target: {
-				...argTypes.target,
-				control: {
-					disable: true,
-				},
-			},
-			disabled: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,108 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import { Template } from './Button.stories.mdx'
-import { defaultTest } from './Button.test'
-import { argTypes, defaultArgs } from './Button.settings'
-
-<Meta
-	title="Components/Button/Loading"
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Default"
-		args={{
-			loading: true,
-		}}
-		argTypes={{
-			loadingLabel: {
-				...argTypes.loadingLabel,
-				control: {
-					disable: true,
-				},
-			},
-			loadingIcon: {
-				...argTypes.loadingIcon,
-				control: {
-					disable: true,
-				},
-			},
-			loading: {
-				...argTypes.loading,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Icon"
-		args={{
-			loadingIcon: 'reload',
-			loading: true,
-		}}
-		argTypes={{
-			loadingLabel: {
-				...argTypes.loadingLabel,
-				control: {
-					disable: true,
-				},
-			},
-			loadingIcon: {
-				...argTypes.loadingIcon,
-				control: {
-					disable: true,
-				},
-			},
-			loading: {
-				...argTypes.loading,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Label"
-		args={{
-			loadingLabel: 'Reloading...',
-			loading: true,
-		}}
-		argTypes={{
-			loadingLabel: {
-				...argTypes.loadingLabel,
-				control: {
-					disable: true,
-				},
-			},
-			loadingIcon: {
-				...argTypes.loadingIcon,
-				control: {
-					disable: true,
-				},
-			},
-			loading: {
-				...argTypes.loading,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,257 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import { Template } from './Button.stories.mdx'
-import { defaultTest } from './Button.test'
-import { argTypes, defaultArgs } from './Button.settings'
-
-<Meta
-	title="Components/Button/Modifiers"
-	args={defaultArgs}
-	argTypes={argTypes}
-/>
-
-<Canvas>
-	<Story
-		name="Primary"
-		args={{ label: 'Primary', modifiers: 'primary' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Secondary"
-		args={{ label: 'Secondary', modifiers: 'secondary' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Danger"
-		args={{ label: 'Danger', modifiers: 'danger' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Ghost"
-		args={{ label: 'Ghost', modifiers: 'ghost' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Link"
-		args={{ label: 'Link', modifiers: 'link' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Static light"
-		args={{ label: 'Static light', modifiers: 'static-light' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{(args) => {
-			return {
-				components: { VvButton },
-				backgrounds: {
-					default: 'dark',
-				},
-				setup() {
-					return { args }
-				},
-				template: /*html*/ `
-				<div class="bg-black p-md">
-					<vv-button v-bind="args" data-testId="element" />
-				</div>
-				`,
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Static dark"
-		args={{ label: 'Static dark', modifiers: 'static-dark' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{(args) => {
-			return {
-				components: { VvButton },
-				backgrounds: {
-					default: 'dark',
-				},
-				setup() {
-					return { args }
-				},
-				template: /*html*/ `
-				<div class="bg-white p-md">
-					<vv-button v-bind="args" data-testId="element" />
-				</div>
-				`,
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Block"
-		args={{ label: 'Block', modifiers: 'block' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Rounded"
-		args={{ label: 'Rounded', modifiers: 'rounded' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Full bleed"
-		args={{ label: 'Full bleed', modifiers: 'full-bleed' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Action"
-		args={{ label: 'Action', modifiers: 'action' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Action quiet"
-		args={{ label: 'Action quiet', modifiers: 'action-quiet' }}
-		argTypes={{
-			modifiers: {
-				...argTypes.modifiers,
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		play={defaultTest}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>

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

@@ -1,116 +0,0 @@
-import { Canvas, Meta, Story } from '@storybook/addon-docs'
-import VvButton from '@/components/VvButton/VvButton.vue'
-import VvBadge from '@/components/VvBadge/VvBadge.vue'
-import { Template } from './Button.stories.mdx'
-import { defaultTest } from './Button.test'
-import { argTypes, defaultArgs } from './Button.settings'
-
-<Meta title="Components/Button/Slots" args={defaultArgs} argTypes={argTypes} />
-
-<Canvas>
-	<Story
-		name="Default"
-		argTypes={{
-			default: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-		args={{
-			default: 'Default <em class="italic">slot!</em>',
-		}}
-	>
-		{Template.bind()}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Before"
-		play={defaultTest}
-		args={{
-			label: 'Before slot',
-		}}
-		argTypes={{
-			before: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args) => {
-			return {
-				setup() {
-					return { args }
-				},
-				components: { VvButton, VvBadge },
-				template: /*html*/ `
-					<vv-button v-bind="args" data-testId="element">
-						<template #before>
-							<vv-badge value="12" modifiers="danger" />
-						</template>
-					</vv-button>`,
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="After"
-		play={defaultTest}
-		args={{
-			label: 'After slot',
-		}}
-		argTypes={{
-			after: {
-				control: {
-					disable: true,
-				},
-			},
-		}}
-	>
-		{(args) => {
-			return {
-				setup() {
-					return { args }
-				},
-				components: { VvButton, VvBadge },
-				template: /*html*/ `
-					<vv-button v-bind="args" data-testId="element">
-						<template #after>
-							<vv-badge value="12" modifiers="danger" />
-						</template>
-					</vv-button>
-				`,
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Canvas>
-	<Story
-		name="Label"
-		args={{
-			icon: 'add',
-		}}
-	>
-		{(args) => {
-			return {
-				components: { VvButton },
-				setup() {
-					return { args }
-				},
-				template: /*html*/ `
-					<vv-button v-bind="args" data-testId="element">
-						<template #label>
-							Label <em class="italic">slot!</em>
-						</template>
-					</vv-button>
-				`,
-			}
-		}}
-	</Story>
-</Canvas>