@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

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

@@ -1,43 +1,153 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { testButtonWithIconLeft, testButtonWithIconOnly } from './Button.test'
+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/Props/icon" />
-
-# VvButton icon
-
-Stories of `VvButton` with `icon`.
-
-## Icon and text
-
-Let's define a story for our text `icon` button.
+<Meta title="Components/Button/Icon" args={defaultArgs} argTypes={argTypes} />
 
 <Canvas>
-	<Story name="icon-left" play={testButtonWithIconLeft}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Like" icon="heart" />`
-			}
+	<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>
 
-<Source language="jsx" code={'<vv-button label="Icon left" icon="heart" />'} />
-
-## Icon only
+<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>
 
-Let's define a story for our `icon` only button.
+<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="icon-only" play={testButtonWithIconOnly}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button icon="heart" rounded />`
-			}
+	<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>
 
-<Source language="jsx" code={'<vv-button icon="heart" rounded />'} />
+<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,125 +1,72 @@
-import { Canvas, Meta, Story, Source } from '@storybook/addon-docs'
-import VvButton from '../../components/VvButton/VvButton.vue'
-import { testButtonLink } from './Button.test'
+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" />
-
-# VvButton link
-
-Stories of `VvButton` with `link`.
-
-## Button link text
-
-<Canvas>
-	<Story
-		name="link-text"
-		play={async (ctx) =>
-			testButtonLink(ctx, {
-				className: 'vv-button--text'
-			})
-		}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Link text" href="https://google.it" target="_blank" modifiers="text" @click="$event.preventDefault()" />`
-			}
-		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-button label="Link text" href="https://google.it" target="_blank" variant="text" />`}
-/>
-
-## Button link text disabled
+<Meta title="Components/Button/Link" args={defaultArgs} argTypes={argTypes} />
 
 <Canvas>
 	<Story
-		name="link-text-disabled"
-		play={(ctx) =>
-			testButtonLink(ctx, {
-				isClickDisabled: true,
-				className: 'vv-button--disabled'
-			})
-		}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Link text disabled" href="https://google.it" target="_blank" variant="text" disabled />`
-			}
+		name="Href"
+		args={{
+			icon: 'arrow-right',
+			iconPosition: 'right',
+			label: 'Link button',
+			href: 'https://volverjs.github.io/style',
+			target: '_blank',
 		}}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-button label="Link text disabled" href="https://google.it" target="_blank" variant="text" disabled />`}
-/>
-
-## Button link
-
-<Canvas>
-	<Story name="button-link" play={(ctx) => testButtonLink(ctx)}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Button link" href="https://google.it" target="_blank" icon="charm:link-external" icon-position="right" @click="$event.preventDefault()" />`
-			}
+		argTypes={{
+			href: {
+				...argTypes.href,
+				control: {
+					disable: true,
+				},
+			},
+			target: {
+				...argTypes.target,
+				control: {
+					disable: true,
+				},
+			},
 		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
 	</Story>
 </Canvas>
 
-<Source
-	language="jsx"
-	code={`<vv-button
-	label="Button link"
-	href="https://google.it"
-	target="_blank"
-	icon="charm:link-external"
-	icon-position="right"
-/>`}
-/>
-
-## Button link disabled
-
 <Canvas>
 	<Story
-		name="button-link-disabled"
-		play={(ctx) =>
-			testButtonLink(ctx, {
-				isClickDisabled: true,
-				className: 'vv-button--disabled'
-			})
-		}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Button link" href="https://google.it" target="_blank" disabled />`
-			}
+		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>
-
-<Source
-	language="jsx"
-	code={`<vv-button label="Button link" href="https://google.it" target="_blank" disabled />`}
-/>
-
-## Router-link
-
-export const Template = () => ({
-	components: { VvButton },
-	template: `<vv-button label="Router link" to="/test" variant="text" />`
-})
-
-<Canvas>
-	<Story name="router-link" args={{}} play={(ctx) => testButtonLink(ctx)}>
-		{RouterLinkStory}
-	</Story>
-</Canvas>
-
-<Source
-	language="jsx"
-	code={`<vv-button label="Router link" to="/" variant="text" />`}
-/>

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

@@ -1,81 +1,108 @@
-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 { Template } from './Button.stories.mdx'
+import { defaultTest } from './Button.test'
+import { argTypes, defaultArgs } from './Button.settings'
 
-<Meta title="Components/Button/Props/loading" />
-
-# VvButton loading
-
-Stories of `VvButton` with `loading`.
-
-## Loading
-
-Let's define a story for our `loading` button.
+<Meta
+	title="Components/Button/Loading"
+	args={defaultArgs}
+	argTypes={argTypes}
+/>
 
 <Canvas>
 	<Story
-		name="loading"
-		play={async (ctx) => {
-			testButton(ctx, {
-				isClickDisabled: true
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button label="Loading" loading />`
-			}
+		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>
 
-<Source language="jsx" code={'<vv-button loading />'} />
-
-## Loading icon
-
-Let's define a story for `loading-icon`
-
 <Canvas>
 	<Story
-		name="loading-icon"
-		play={async (ctx) => {
-			testButton(ctx, {
-				isClickDisabled: true
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button loading-icon="reload" loading />`
-			}
+		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>
 
-<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"
-		play={async (ctx) => {
-			testButton(ctx, {
-				isClickDisabled: true
-			})
-		}}>
-		{() => {
-			return {
-				components: { VvButton },
-				template: `<vv-button loading-label="Caricamento..." loading />`
-			}
+		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>
-
-<Source
-	language="jsx"
-	code={'<vv-button loading-label="Caricamento..." loading />'}
-/>