N8N-3750 Redesign button component

packages/design-system/src/components/N8nButton/Button.stories.ts

@@ -0,0 +1,167 @@
+/* tslint:disable:variable-name */
+import N8nButton from './Button.vue';
+import { action } from '@storybook/addon-actions';
+import { StoryFn } from "@storybook/vue";
+
+export default {
+	title: 'Atoms/Button',
+	component: N8nButton,
+	argTypes: {
+		type: {
+			control: 'select',
+			options: ['primary', 'secondary', 'tertiary', 'success', 'warning', 'danger'],
+		},
+		size: {
+			control: {
+				type: 'select',
+				options: ['mini', 'small', 'medium', 'large', 'xlarge'],
+			},
+		},
+		float: {
+			type: 'select',
+			options: ['left', 'right'],
+		},
+	},
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/DxLbnIyMK8X0uLkUguFV4n/n8n-design-system_v1?node-id=5%3A1147',
+		},
+	},
+};
+
+const methods = {
+	onClick: action('click'),
+};
+
+const Template: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: '<n8n-button v-bind="$props" @click="onClick" />',
+	methods,
+});
+
+export const Button = Template.bind({});
+Button.args = {
+	label: 'Button',
+};
+
+const AllSizesTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: `<div>
+		<n8n-button v-bind="$props" size="large" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" @click="onClick" />
+		<n8n-button v-bind="$props" :loading="true" @click="onClick" />
+		<n8n-button v-bind="$props" :disabled="true" @click="onClick" />
+	</div>`,
+	methods,
+});
+
+const AllColorsTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: `<div>
+		<n8n-button v-bind="$props" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" type="danger" @click="onClick" />
+	</div>`,
+	methods,
+});
+
+const AllColorsAndSizesTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nButton,
+	},
+	template: `<div>
+		<n8n-button v-bind="$props" size="large" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" size="large" type="danger" @click="onClick" />
+		<br/>
+		<br/>
+		<n8n-button v-bind="$props" size="medium" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" size="medium" type="danger" @click="onClick" />
+		<br/>
+		<br/>
+		<n8n-button v-bind="$props" size="small" type="primary" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="secondary" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="tertiary" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="success" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="warning" @click="onClick" />
+		<n8n-button v-bind="$props" size="small" type="danger" @click="onClick" />
+	</div>`,
+	methods,
+});
+
+export const Primary = AllSizesTemplate.bind({});
+Primary.args = {
+	type: 'primary',
+	label: 'Button',
+};
+
+export const Secondary = AllSizesTemplate.bind({});
+Secondary.args = {
+	type: 'secondary',
+	label: 'Button',
+};
+
+export const Tertiary = AllSizesTemplate.bind({});
+Tertiary.args = {
+	type: 'tertiary',
+	label: 'Button',
+};
+
+export const Success = AllSizesTemplate.bind({});
+Success.args = {
+	type: 'success',
+	label: 'Button',
+};
+
+export const Warning = AllSizesTemplate.bind({});
+Warning.args = {
+	type: 'warning',
+	label: 'Button',
+};
+
+export const Danger = AllSizesTemplate.bind({});
+Danger.args = {
+	type: 'danger',
+	label: 'Button',
+};
+
+export const Outline = AllColorsAndSizesTemplate.bind({});
+Outline.args = {
+	outline: true,
+	label: 'Button',
+};
+
+export const Text = AllColorsAndSizesTemplate.bind({});
+Text.args = {
+	text: true,
+	label: 'Button',
+};
+
+export const WithIcon = AllSizesTemplate.bind({});
+WithIcon.args = {
+	label: 'Button',
+	icon: 'plus-circle',
+};
+