N8N-4069 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'
+			}
+		  }
 	],
 };