From a847190f3312539281cb9f4aedb5da527eff7fde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <miloradfilipovic19@gmail.com>
Date: Mon, 11 Jul 2022 23:34:45 +0200
Subject: [PATCH] refactor(editor): Create N8nCheckbox Vue component (#3678)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ 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
---
 .../N8nCheckbox/Checkbox.stories.ts           | 36 ++++++++++
 .../src/components/N8nCheckbox/Checkbox.vue   | 66 +++++++++++++++++++
 .../src/components/N8nCheckbox/index.ts       |  3 +
 .../src/components/N8nFormInput/FormInput.vue | 17 ++++-
 .../N8nFormInputs/FormInputs.stories.js       |  9 +++
 5 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 packages/design-system/src/components/N8nCheckbox/Checkbox.stories.ts
 create mode 100644 packages/design-system/src/components/N8nCheckbox/Checkbox.vue
 create mode 100644 packages/design-system/src/components/N8nCheckbox/index.ts

diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.stories.ts b/packages/design-system/src/components/N8nCheckbox/Checkbox.stories.ts
new file mode 100644
index 0000000000..a253cba7ac
--- /dev/null
+++ b/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',
+};
diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
new file mode 100644
index 0000000000..88c4c31780
--- /dev/null
+++ b/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>
diff --git a/packages/design-system/src/components/N8nCheckbox/index.ts b/packages/design-system/src/components/N8nCheckbox/index.ts
new file mode 100644
index 0000000000..a60ee7eb39
--- /dev/null
+++ b/packages/design-system/src/components/N8nCheckbox/index.ts
@@ -0,0 +1,3 @@
+import N8nCheckbox from './Checkbox.vue';
+
+export default N8nCheckbox;
diff --git a/packages/design-system/src/components/N8nFormInput/FormInput.vue b/packages/design-system/src/components/N8nFormInput/FormInput.vue
index e81476f2d1..659368f09d 100644
--- a/packages/design-system/src/components/N8nFormInput/FormInput.vue
+++ b/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);
diff --git a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js b/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js
index e736bec3f0..3f8b588511 100644
--- a/packages/design-system/src/components/N8nFormInputs/FormInputs.stories.js
+++ b/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'
+			}
+		  }
 	],
 };