refactor(editor): Create N8nCheckbox Vue component (#3678)

* ✨ Implementing N8nCheckbox Vue component

* ✨ Added checkbox support to N8nFormInput component

* 👌 Updating n8n-checkbox component so it supports indeterminate state and input event

* 💄 Adding the `labelSize` property to the `N8nCheckbox` component

packages/design-system/src/components/N8nCheckbox/Checkbox.stories.ts

@@ -0,0 +1,36 @@
+/* tslint:disable:variable-name */
+import N8nCheckbox from "./Checkbox.vue";
+import { StoryFn } from '@storybook/vue';
+import { action } from '@storybook/addon-actions';
+
+export default {
+	title: 'Atoms/Checkbox',
+	component: N8nCheckbox,
+};
+
+const methods = {
+	onInput: action('input'),
+	onFocus: action('focus'),
+	onChange: action('change'),
+};
+
+const DefaultTemplate: StoryFn = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		N8nCheckbox,
+	},
+	data: () => ({
+		isChecked: false,
+	}),
+	template: '<n8n-checkbox v-model="isChecked" v-bind="$props" @input="onInput"></n8n-checkbox>',
+	methods,
+});
+
+export const Default = DefaultTemplate.bind({});
+Default.args = {
+	label: 'This is a default checkbox',
+	tooltipText: 'Checkbox tooltip',
+	disabled: false,
+	indeterminate: false,
+	size: 'small',
+};

packages/design-system/src/components/N8nCheckbox/Checkbox.vue

@@ -0,0 +1,66 @@
+<template>
+	<el-checkbox
+		v-bind="$props"
+		:disabled="disabled"
+		:indeterminate="indeterminate"
+		:value="value"
+		@change="onChange"
+	>
+		<n8n-input-label
+			:label="label"
+			:tooltipText="tooltipText"
+			:bold="false"
+			:size="labelSize"
+		></n8n-input-label>
+	</el-checkbox>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import ElCheckbox from 'element-ui/lib/checkbox';
+import N8nInputLabel from '../N8nInputLabel';
+
+export default Vue.extend({
+	name: 'n8n-checkbox',
+	components: {
+		ElCheckbox,
+		N8nInputLabel,
+	},
+	props: {
+		label: {
+			type: String,
+			required: true,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		tooltipText: {
+			type: String,
+			required: false,
+		},
+		indeterminate: {
+			type: Boolean,
+			default: false,
+		},
+		value: {
+			type: Boolean,
+			default: false,
+		},
+		labelSize: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium'].includes(value),
+		},
+	},
+	methods: {
+		onChange(e) {
+			this.$emit("input", e);
+		},
+	}
+});
+</script>
+
+<style lang="scss" module>
+</style>

packages/design-system/src/components/N8nCheckbox/index.ts

@@ -0,0 +1,3 @@
+import N8nCheckbox from './Checkbox.vue';
+
+export default N8nCheckbox;

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -1,5 +1,12 @@
 <template>
-	<n8n-input-label :label="label" :tooltipText="tooltipText" :required="required && showRequiredAsterisk">
+	<n8n-checkbox
+		v-if="type === 'checkbox'"
+		v-bind="$props"
+		@input="onInput"
+		@focus="onFocus"
+		ref="input"
+	></n8n-checkbox>
+	<n8n-input-label v-else :label="label" :tooltipText="tooltipText" :required="required && showRequiredAsterisk">
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
 			<slot v-if="hasDefaultSlot"></slot>
 			<n8n-select
@@ -56,6 +63,7 @@ import N8nInput from '../N8nInput';
 import N8nSelect from '../N8nSelect';
 import N8nOption from '../N8nOption';
 import N8nInputLabel from '../N8nInputLabel';
+import N8nCheckbox from '../N8nCheckbox';
 
 import { getValidationError, VALIDATORS } from './validators';
 import { Rule, RuleGroup, IValidator } from "../../types";
@@ -70,6 +78,7 @@ export default mixins(Locale).extend({
 		N8nInputLabel,
 		N8nOption,
 		N8nSelect,
+		N8nCheckbox,
 	},
 	data() {
 		return {
@@ -135,6 +144,12 @@ export default mixins(Locale).extend({
 		focusInitially: {
 			type: Boolean,
 		},
+		labelSize: {
+			type: String,
+			default: 'medium',
+			validator: (value: string): boolean =>
+				['small', 'medium'].includes(value),
+		},
 	},
 	mounted() {
 		this.$emit('validate', !this.validationError);

packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js

@@ -68,6 +68,15 @@ FormInputs.args = {
 				],
 			},
 		},
+		{
+			name: 'agree',
+			properties: {
+			  type: 'checkbox',
+			  label: 'Signup for newsletter Signup for newsletter Signup for newsletter vSignup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter v vSignup for newsletter Signup for newsletter Signup for newsletter Signup for newsletter',
+			  labelSize: 'small',
+			  tooltipText: 'Check this if you agree to be contacted by our marketing team Check this if you agree to be contacted by our marketing team Check this if you agree to be contacted by our marketing team Check this if you agree to be contacted by our marketing team'
+			}
+		  }
 	],
 };