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

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

@@ -1,180 +1,257 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { testButton } from './Button.test'
+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/Props/modifiers" />
-
-# VvButton modifiers
-
-Stories of `VvButton` `modifiers`.
-
-## Default
-
-Let's define a story for our `default` button:
+<Meta
+	title="Components/Button/Modifiers"
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
 <Canvas>
-	<Story name="default" play={testButton}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Default" data-testid="button" />`
-			}
+	<Story
+		name="Primary"
+		args={{ label: 'Primary', modifiers: 'primary' }}
+		argTypes={{
+			modifiers: {
+				...argTypes.modifiers,
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<Source language="jsx" code={'<vv-button label="Default" />'} />
-
-## Primary
-
-Let's define a story for our `primary` button:
-
 <Canvas>
 	<Story
-		name="primary"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: ['vv-button--primary']
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Primary" modifiers="primary" />`
-			}
+		name="Secondary"
+		args={{ label: 'Secondary', modifiers: 'secondary' }}
+		argTypes={{
+			modifiers: {
+				...argTypes.modifiers,
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-## Secondary
-
-Let's define a story for our `secondary` button:
-
 <Canvas>
 	<Story
-		name="secondary"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--secondary'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Secondary" modifiers="secondary" />`
-			}
+		name="Danger"
+		args={{ label: 'Danger', modifiers: 'danger' }}
+		argTypes={{
+			modifiers: {
+				...argTypes.modifiers,
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-## Danger
-
-Let's define a story for our `danger` button:
-
 <Canvas>
 	<Story
-		name="danger"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--danger'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Danger" modifiers="danger" />`
-			}
+		name="Ghost"
+		args={{ label: 'Ghost', modifiers: 'ghost' }}
+		argTypes={{
+			modifiers: {
+				...argTypes.modifiers,
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-## Ghost
-
-Let's define a story for our `ghost` button:
-
 <Canvas>
 	<Story
-		name="ghost"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--ghost'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Ghost" modifiers="ghost" />`
-			}
+		name="Link"
+		args={{ label: 'Link', modifiers: 'link' }}
+		argTypes={{
+			modifiers: {
+				...argTypes.modifiers,
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-## Text
-
-Let's define a story for our `text` button:
-
 <Canvas>
 	<Story
-		name="text"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--text'
-			})
-		}}>
-		{() => {
+		name="Static light"
+		args={{ label: 'Static light', modifiers: 'static-light' }}
+		argTypes={{
+			modifiers: {
+				...argTypes.modifiers,
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{(args) => {
 			return {
 				components: { VvButton },
-				template: `<vv-button label="Text" modifiers="text" />`
+				backgrounds: {
+					default: 'dark',
+				},
+				setup() {
+					return { args }
+				},
+				template: `
+				<div class="bg-black p-md">
+					<vv-button v-bind="args" />
+				</div>
+				`,
 			}
 		}}
 	</Story>
 </Canvas>
 
-## Static Light
-
-Let's define a story for our `static-light` button:
-
 <Canvas>
 	<Story
-		name="static-light"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--static-light'
-			})
-		}}>
-		{() => {
+		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'
+					default: 'dark',
+				},
+				setup() {
+					return { args }
 				},
 				template: `
-					<div class="bg-black p-16">
-						<vv-button label="Static Light" modifiers="static-light" />
-					</div>
-					`
+				<div class="bg-white p-md">
+					<vv-button v-bind="args" />
+				</div>
+				`,
 			}
 		}}
 	</Story>
 </Canvas>
 
-## Static Dark
+<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>
 
-Let's define a story for our `static-dark` button:
+<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="static-dark"
-		play={async (ctx) => {
-			testButton(ctx, {
-				className: 'vv-button--static-dark'
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Static Dark" modifiers="static-dark" />`
-			}
+		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,123 +1,111 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { within, userEvent } from '@storybook/testing-library'
+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" />
-
-# VvButton slots
-
-Stories of `VvButton` with `slot`.
-
-## Slot default
-
-Let's define a story for our button with `default` slot.
+<Meta title="Components/Button/Slots" args={defaultArgs} argTypes={argTypes} />
 
 <Canvas>
-	<Story name="slot-default">
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button>
-						Override all button content with
-						<span class="font-bold">Slot default</span>
-						<span
-							class="iconify"
-							data-icon="ant-design:search-outlined"></span>
-					</vv-button>`
-			}
+	<Story
+		name="Default"
+		argTypes={{
+			default: {
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		args={{
+			default: 'Default <em class="italic">slot!</em>',
+		}}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<Source
-	language="jsx"
-	code={`<vv-button>
-	Override all button content with
-	<span class="font-bold">Slot default</span>
-	<span class="iconify" data-icon="ant-design:search-outlined"></span>
-</vv-button>`}
-/>
-
-## Slot before
-
-Let's define a story for our button with `before` slot.
-
 <Canvas>
-	<Story name="slot-before">
-		{() => {
+	<Story
+		name="Before"
+		play={defaultTest}
+		args={{
+			label: 'Before slot',
+		}}
+		argTypes={{
+			before: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{(args) => {
 			return {
-				components: { VvButton },
-				template: `<vv-button label="Slot before">
-						<template #before>
-							Add before content with
-						</template>
-					</vv-button>`
+				setup() {
+					return { args }
+				},
+				components: { VvButton, VvBadge },
+				template: `<vv-button v-bind="args">
+							<template #before>
+								<vv-badge value="12" modifiers="danger" />
+							</template>
+						</vv-button>`,
 			}
 		}}
 	</Story>
 </Canvas>
 
-<Source
-	language="jsx"
-	code={`<vv-button label="Slot before">
-	<template #before>
-		Add before content with
-	</template>
-</vv-button>`}
-/>
-
-## Slot after
-
-Let's define a story for our button with `after` slot.
-
 <Canvas>
-	<Story name="slot-after">
-		{() => {
+	<Story
+		name="After"
+		play={defaultTest}
+		args={{
+			label: 'After slot',
+		}}
+		argTypes={{
+			after: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+	>
+		{(args) => {
 			return {
-				components: { VvButton },
-				template: `<vv-button label="Slot after">
-						<template #after>
-							Add after content
-						</template>
-					</vv-button>`
+				setup() {
+					return { args }
+				},
+				components: { VvButton, VvBadge },
+				template: `<vv-button v-bind="args">
+							<template #after>
+								<vv-badge value="12" modifiers="danger" />
+							</template>
+						</vv-button>`,
 			}
 		}}
 	</Story>
 </Canvas>
 
-<Source
-	language="jsx"
-	code={`<vv-button label="Slot after">
-	<template #after>
-		Add after content
-	</template>
-</vv-button>`}
-/>
-
-## Slot label
-
-Let's define a story for our button with `label` slot.
-
 <Canvas>
-	<Story name="slot-label">
-		{() => {
+	<Story
+		name="Label"
+		args={{
+			icon: 'add',
+		}}
+	>
+		{(args) => {
 			return {
 				components: { VvButton },
-				template: `<vv-button label="Slot label">
-						<template #label>
-							<span class="font-bold">Label slot!</span>
-						</template>
-					</vv-button>`
+				setup() {
+					return { args }
+				},
+				template: `<vv-button v-bind="args">
+							<template #label>
+								Label <em class="italic">slot!</em>
+							</template>
+						</vv-button>`,
 			}
 		}}
 	</Story>
 </Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-button label="Slot label">
-	<template #label>
-		<span class="font-bold">Label slot!</span>
-	</template>
-</vv-button>`}
-/>

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

@@ -0,0 +1,75 @@
+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/State" args={defaultArgs} argTypes={argTypes} />
+
+<Canvas>
+	<Story
+		name="Active"
+		args={{
+			active: true,
+			label: 'Active button',
+		}}
+		argTypes={{
+			active: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={async (ctx) => {
+			defaultTest(ctx, {
+				className: 'vv-button--active',
+			})
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Pressed"
+		args={{
+			pressed: true,
+			label: 'Pressed button',
+			modifiers: 'action-quiet',
+		}}
+		argTypes={{
+			pressed: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={async (ctx) => {
+			defaultTest(ctx, {
+				className: 'vv-button--pressed',
+			})
+		}}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Disabled"
+		args={{
+			disabled: true,
+			label: 'Disabled button',
+		}}
+		argTypes={{
+			disabled: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>