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

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,15 +34,13 @@ export default defineComponent({
 	props: {
 		label: {
 			type: String,
-			required: true,
 		},
 		disabled: {
 			type: Boolean,
 			default: false,
 		},
 		tooltipText: {
 			type: String,
-			required: false,
 		},
 		indeterminate: {
 			type: Boolean,

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();
+		});
+	});
+});

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>
+`;

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';

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);
 	},
 };