From 13c143eb6df41457fbd361674f2063b983a0e077 Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Fri, 5 May 2023 09:25:29 +0200
Subject: [PATCH] fix(editor): Update and add design system checkbox component
 to Editor (#6178)

* fix(editor): Update and add design system checkbox component to Editor

* test(editor): Test Checkbox design system component
---
 .../src/components/N8nCheckbox/Checkbox.vue   |   4 +-
 .../N8nCheckbox/__tests__/Checkbox.spec.ts    |  31 ++++
 .../__snapshots__/Checkbox.spec.ts.snap       | 158 ++++++++++++++++++
 .../design-system/src/components/index.ts     |   1 +
 packages/design-system/src/plugin.ts          |   2 +
 5 files changed, 194 insertions(+), 2 deletions(-)
 create mode 100644 packages/design-system/src/components/N8nCheckbox/__tests__/Checkbox.spec.ts
 create mode 100644 packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap

diff --git a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
index 28b704ecceeab..1568aea764c73 100644
--- a/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
+++ b/packages/design-system/src/components/N8nCheckbox/Checkbox.vue
@@ -8,7 +8,9 @@
 		:value="value"
 		@change="onChange"
 	>
+		<slot></slot>
 		<n8n-input-label
+			v-if="label"
 			:label="label"
 			:tooltipText="tooltipText"
 			:bold="false"
@@ -32,7 +34,6 @@ export default defineComponent({
 	props: {
 		label: {
 			type: String,
-			required: true,
 		},
 		disabled: {
 			type: Boolean,
@@ -40,7 +41,6 @@ export default defineComponent({
 		},
 		tooltipText: {
 			type: String,
-			required: false,
 		},
 		indeterminate: {
 			type: Boolean,
diff --git a/packages/design-system/src/components/N8nCheckbox/__tests__/Checkbox.spec.ts b/packages/design-system/src/components/N8nCheckbox/__tests__/Checkbox.spec.ts
new file mode 100644
index 0000000000000..0ec4f9166002c
--- /dev/null
+++ b/packages/design-system/src/components/N8nCheckbox/__tests__/Checkbox.spec.ts
@@ -0,0 +1,31 @@
+import { render } from '@testing-library/vue';
+import N8nCheckbox from '../Checkbox.vue';
+
+describe('components', () => {
+	describe('N8nCheckbox', () => {
+		it('should render without label and child content', () => {
+			const { container } = render(N8nCheckbox);
+			expect(container).toMatchSnapshot();
+		});
+
+		it('should render with label', () => {
+			const { container } = render(N8nCheckbox, { props: { label: 'Checkbox' } });
+			expect(container).toMatchSnapshot();
+		});
+
+		it('should render with child', () => {
+			const { container } = render(N8nCheckbox, {
+				slots: { default: '<strong>Bold text</strong>' },
+			});
+			expect(container).toMatchSnapshot();
+		});
+
+		it('should render with both child and label', () => {
+			const { container } = render(N8nCheckbox, {
+				props: { label: 'Checkbox' },
+				slots: { default: '<strong>Bold text</strong>' },
+			});
+			expect(container).toMatchSnapshot();
+		});
+	});
+});
diff --git a/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
new file mode 100644
index 0000000000000..9a7a248acca0d
--- /dev/null
+++ b/packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap
@@ -0,0 +1,158 @@
+// Vitest Snapshot v1
+
+exports[`components > N8nCheckbox > should render with both child and label 1`] = `
+<div>
+  <label
+    class="el-checkbox n8n-checkbox n8nCheckbox"
+    labelsize="medium"
+  >
+    <span
+      class="el-checkbox__input"
+    >
+      <span
+        class="el-checkbox__inner"
+      />
+      <input
+        aria-hidden="false"
+        class="el-checkbox__original"
+        type="checkbox"
+        value="Checkbox"
+      />
+    </span>
+    <span
+      class="el-checkbox__label"
+    >
+      <strong>
+        Bold text
+      </strong>
+      <div
+        class="container"
+      >
+        <label
+          class="n8n-input-label inputLabel heading medium"
+        >
+          <div
+            class="title"
+          >
+            <span
+              class="n8n-text size-medium regular"
+            >
+               Checkbox 
+              <!---->
+            </span>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </label>
+      </div>
+      <!---->
+    </span>
+  </label>
+</div>
+`;
+
+exports[`components > N8nCheckbox > should render with child 1`] = `
+<div>
+  <label
+    class="el-checkbox n8n-checkbox n8nCheckbox"
+    labelsize="medium"
+  >
+    <span
+      class="el-checkbox__input"
+    >
+      <span
+        class="el-checkbox__inner"
+      />
+      <input
+        aria-hidden="false"
+        class="el-checkbox__original"
+        type="checkbox"
+        value=""
+      />
+    </span>
+    <span
+      class="el-checkbox__label"
+    >
+      <strong>
+        Bold text
+      </strong>
+      <!---->
+      <!---->
+    </span>
+  </label>
+</div>
+`;
+
+exports[`components > N8nCheckbox > should render with label 1`] = `
+<div>
+  <label
+    class="el-checkbox n8n-checkbox n8nCheckbox"
+    labelsize="medium"
+  >
+    <span
+      class="el-checkbox__input"
+    >
+      <span
+        class="el-checkbox__inner"
+      />
+      <input
+        aria-hidden="false"
+        class="el-checkbox__original"
+        type="checkbox"
+        value="Checkbox"
+      />
+    </span>
+    <span
+      class="el-checkbox__label"
+    >
+      <div
+        class="container"
+      >
+        <label
+          class="n8n-input-label inputLabel heading medium"
+        >
+          <div
+            class="title"
+          >
+            <span
+              class="n8n-text size-medium regular"
+            >
+               Checkbox 
+              <!---->
+            </span>
+          </div>
+          <!---->
+          <!---->
+          <!---->
+        </label>
+      </div>
+      <!---->
+    </span>
+  </label>
+</div>
+`;
+
+exports[`components > N8nCheckbox > should render without label and child content 1`] = `
+<div>
+  <label
+    class="el-checkbox n8n-checkbox n8nCheckbox"
+    labelsize="medium"
+  >
+    <span
+      class="el-checkbox__input"
+    >
+      <span
+        class="el-checkbox__inner"
+      />
+      <input
+        aria-hidden="false"
+        class="el-checkbox__original"
+        type="checkbox"
+        value=""
+      />
+    </span>
+    <!---->
+  </label>
+</div>
+`;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index 22683c0296de4..32fdfd9e0cf7c 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -47,3 +47,4 @@ export { default as N8nUserSelect } from './N8nUserSelect';
 export { default as N8nUsersList } from './N8nUsersList';
 export { default as N8nResizeWrapper } from './N8nResizeWrapper';
 export { default as N8nRecycleScroller } from './N8nRecycleScroller';
+export { default as N8nCheckbox } from './N8nCheckbox';
diff --git a/packages/design-system/src/plugin.ts b/packages/design-system/src/plugin.ts
index 0a9a47021014b..71d7ff4df772d 100644
--- a/packages/design-system/src/plugin.ts
+++ b/packages/design-system/src/plugin.ts
@@ -50,6 +50,7 @@ import {
 	N8nUsersList,
 	N8nResizeWrapper,
 	N8nRecycleScroller,
+	N8nCheckbox,
 } from './components';
 
 export const N8nPlugin: PluginObject<{}> = {
@@ -103,5 +104,6 @@ export const N8nPlugin: PluginObject<{}> = {
 		app.component('n8n-user-select', N8nUserSelect);
 		app.component('n8n-resize-wrapper', N8nResizeWrapper);
 		app.component('n8n-recycle-scroller', N8nRecycleScroller);
+		app.component('n8n-checkbox', N8nCheckbox);
 	},
 };