@volverjs/ui-vue 0.0.1-beta.2

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

@@ -0,0 +1,62 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+
+<Meta title="Components/Button/Props/loading" />
+
+# VvButton loading
+
+Stories of `VvButton` with `loading`.
+
+## Loading
+
+Let's define a story for our `loading` button.
+
+<Canvas>
+	<Story name="loading">
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Loading" loading />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button loading />'} />
+
+## Loading icon
+
+Let's define a story for `loading-icon`
+
+<Canvas>
+	<Story name="loading-icon">
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button loading-icon="reload" loading />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button loading-icon="reload" loading />'} />
+
+## Loading label
+
+Let's define a story for `loading-label`
+
+<Canvas>
+	<Story name="loading-label">
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button loading-label="Caricamento..." loading />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={'<vv-button loading-label="Caricamento..." loading />'}
+/>

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

@@ -0,0 +1,194 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import { buttonTest, classTest } from './test.js'
+
+<Meta title="Components/Button/Props/modifiers" />
+
+# VvButton modifiers
+
+Stories of `VvButton` `modifiers`.
+
+## Default
+
+Let's define a story for our `default` button:
+
+<Canvas>
+	<Story name="default" play={buttonTest}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Default" data-testid="button" />`
+			}
+		}}
+	</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={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'primary'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Primary" modifiers="primary" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Secondary
+
+Let's define a story for our `secondary` button:
+
+<Canvas>
+	<Story
+		name="secondary"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'secondary'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Secondary" modifiers="secondary" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Danger
+
+Let's define a story for our `danger` button:
+
+<Canvas>
+	<Story
+		name="danger"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'danger'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Danger" modifiers="danger" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Ghost
+
+Let's define a story for our `ghost` button:
+
+<Canvas>
+	<Story
+		name="ghost"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'ghost'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Ghost" modifiers="ghost" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Text
+
+Let's define a story for our `text` button:
+
+<Canvas>
+	<Story
+		name="text"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'text'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Text" modifiers="text" />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Static Light
+
+Let's define a story for our `static-light` button:
+
+<Canvas>
+	<Story
+		name="static-light"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'static-light'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				backgrounds: {
+					default: 'dark'
+				},
+				template: `
+					<div class="bg-black p-16">
+						<vv-button label="Static Light" modifiers="static-light" />
+					</div>
+					`
+			}
+		}}
+	</Story>
+</Canvas>
+
+## Static Dark
+
+Let's define a story for our `static-dark` button:
+
+<Canvas>
+	<Story
+		name="static-dark"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'static-dark'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Static Dark" modifiers="static-dark" />`
+			}
+		}}
+	</Story>
+</Canvas>

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

@@ -0,0 +1,123 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import { within, userEvent } from '@storybook/testing-library'
+
+<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.
+
+<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>
+</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">
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Slot before">
+						<template #before>
+							Add before content with
+						</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">
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Slot after">
+						<template #after>
+							Add after content
+						</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">
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Slot label">
+						<template #label>
+							<span class="font-bold">Label slot!</span>
+						</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/ButtonVariant.stories.mdx

@@ -0,0 +1,223 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import VvButton from '../../components/VvButton/VvButton.vue'
+import { within, userEvent } from '@storybook/testing-library'
+import { buttonTest, classTest, cssTest, disableTest } from './test.js'
+
+<Meta title="Components/Button/Variant" />
+
+# VvButton variant
+
+Stories of `VvButton` default `variant`.
+
+## Block
+
+Let's define a story for our `block` button.
+Create block level button that span the full width of a parent.
+
+<Canvas>
+	<Story
+		name="block"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest, cssTest],
+				className: 'block',
+				cssString: 'display: block'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Block" block />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Block" block />'} />
+
+## Rounded
+
+Let's define a story for our `rounded` button:
+
+<Canvas>
+	<Story
+		name="rounded"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest, cssTest],
+				className: 'rounded',
+				cssString: 'border-radius: 9999px'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Rounded" rounded />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Rounded" rounded />'} />
+
+## Full-bleed
+
+Let's define a story for our `full-bleed` button:
+
+<Canvas>
+	<Story
+		name="full-bleed"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'full-bleed'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<div class="flex gap-4">
+						<vv-button label="Full bleed" full-bleed />
+					</div>`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={`<div class="flex gap-4">
+	<vv-button label="Full bleed" full-bleed />
+</div>`}
+/>
+
+## Disabled
+
+Let's define a story for our `disabled` button.
+
+<Canvas>
+	<Story
+		name="disabled"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [cssTest, disableTest],
+				cssString: 'cursor: not-allowed'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Disabled" disabled />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Disabled" disabled />'} />
+
+## Active
+
+Let's define a story for our `active` button.
+
+<Canvas>
+	<Story
+		name="active"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'active'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Active" active />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Active" active />'} />
+
+## Action
+
+Let's define a story for our `action` button.
+
+<Canvas>
+	<Story
+		name="action"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'action'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Action" action />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Action" action />'} />
+
+## Action Selected
+
+Let's define a story for our `action` `selected` button.
+
+<Canvas>
+	<Story
+		name="selected"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'selected'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Action Selected" action selected />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source language="jsx" code={'<vv-button label="Action" action selected />'} />
+
+## Action quiet
+
+Let's define a story for our `action-quiet` button.
+
+<Canvas>
+	<Story
+		name="action-quiet"
+		play={(ctx) =>
+			buttonTest({
+				...ctx,
+				functions: [classTest],
+				className: 'selected'
+			})
+		}>
+		{() => {
+			return {
+				components: { VvButton },
+				template: `<vv-button label="Action quiet" action-quiet />`
+			}
+		}}
+	</Story>
+</Canvas>
+
+<Source
+	language="jsx"
+	code={'<vv-button label="Action quiet" action-quiet />'}
+/>

package/src/stories/Button/test.js

@@ -0,0 +1,41 @@
+import { expect } from '@storybook/jest'
+import { userEvent, within } from '@storybook/testing-library'
+import { toHaveNoViolations, axe } from 'jest-axe'
+
+async function buttonTest({ canvasElement, functions, ...args }) {
+	const button = await within(canvasElement).findByRole('button')
+	await userEvent.click(button)
+
+	if (functions) {
+		functions.forEach(async (func) => {
+			await func({ button: button, ...args })
+		})
+	}
+
+	// Accessibility Test
+	expect.extend(toHaveNoViolations)
+	expect(await axe(button)).toHaveNoViolations()
+}
+
+async function classTest({ button, className = null }) {
+	if (className) {
+		expect(button).toHaveClass(`vv-button--${className}`)
+	}
+}
+
+async function cssTest({ button, cssString = null }) {
+	if (cssString) {
+		expect(button).toHaveStyle(cssString)
+	}
+}
+async function disableTest({ button }) {
+	expect(button).toBeDisabled()
+}
+
+async function propertyTest({ button, properties = [] }) {
+	properties.forEach((property) => {
+		expect(button).toHaveProperty(property)
+	})
+}
+
+export { buttonTest, classTest, cssTest, disableTest, propertyTest }

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

@@ -0,0 +1,39 @@
+import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
+import ObjectUtilities from '../../utils/ObjectUtilities'
+
+import VvButton from '../../components/VvButton/VvButton.vue'
+import VvButtonGroup from '../../components/VvButtonGroup/VvButtonGroup.vue'
+import { VvButtonGroupProps } from '../../components/VvButtonGroup/VvButtonGroup'
+
+<Meta
+	title="Components/ButtonGroup"
+	component={VvButtonGroup}
+	args={{ ...ObjectUtilities.propsToObject(VvButtonGroupProps) }}
+/>
+
+export const Template = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { VvButton, VvButtonGroup },
+	setup() {
+		return { args }
+	},
+	template: `
+        <vv-button-group v-bind="args">
+            <vv-button name="1a">Button 1</vv-button>
+            <vv-button name="2b">Button 2</vv-button>
+            <vv-button name="3c">Button 3</vv-button>
+        </vv-button-group>
+        `
+})
+
+# VvButtonGroup
+
+A button group is a grouping of buttons whose actions are related to each other.
+
+<Source language="jsx" code={'<vv-button></vv-button>'} />
+
+<Canvas>
+	<Story name="vv-button-group" args={{ vertical: false, compact: false }}>
+		{Template.bind({})}
+	</Story>
+</Canvas>