mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-02-02 07:01:30 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

* test(editor): Test Checkbox design system component
This commit is contained in:
Csaba Tuncsik 2023-05-05 09:25:29 +02:00 committed by GitHub
parent b0a1899e71
commit 13c143eb6d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 194 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/design-system/src/components/N8nCheckbox/Checkbox.vue
View file

@ -8,7 +8,9 @@
:value="value" :value="value"
@change="onChange" @change="onChange"
> >
<slot></slot>
<n8n-input-label <n8n-input-label
v-if="label"
:label="label" :label="label"
:tooltipText="tooltipText" :tooltipText="tooltipText"
:bold="false" :bold="false"
@ -32,7 +34,6 @@ export default defineComponent({
props: { props: {
label: { label: {
type: String, type: String,
required: true,
}, },
disabled: { disabled: {
type: Boolean, type: Boolean,
@ -40,7 +41,6 @@ export default defineComponent({
}, },
tooltipText: { tooltipText: {
type: String, type: String,
required: false,
}, },
indeterminate: { indeterminate: {
type: Boolean, type: Boolean,

31
packages/design-system/src/components/N8nCheckbox/__tests__/Checkbox.spec.ts Normal file
View file

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

158
packages/design-system/src/components/N8nCheckbox/__tests__/__snapshots__/Checkbox.spec.ts.snap Normal file
View file

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

1
packages/design-system/src/components/index.ts
View file

@ -47,3 +47,4 @@ export { default as N8nUserSelect } from './N8nUserSelect';
export { default as N8nUsersList } from './N8nUsersList'; export { default as N8nUsersList } from './N8nUsersList';
export { default as N8nResizeWrapper } from './N8nResizeWrapper'; export { default as N8nResizeWrapper } from './N8nResizeWrapper';
export { default as N8nRecycleScroller } from './N8nRecycleScroller'; export { default as N8nRecycleScroller } from './N8nRecycleScroller';
export { default as N8nCheckbox } from './N8nCheckbox';

2
packages/design-system/src/plugin.ts
View file

@ -50,6 +50,7 @@ import {
N8nUsersList, N8nUsersList,
N8nResizeWrapper, N8nResizeWrapper,
N8nRecycleScroller, N8nRecycleScroller,
N8nCheckbox,
} from './components'; } from './components';
export const N8nPlugin: PluginObject<{}> = { export const N8nPlugin: PluginObject<{}> = {
@ -103,5 +104,6 @@ export const N8nPlugin: PluginObject<{}> = {
app.component('n8n-user-select', N8nUserSelect); app.component('n8n-user-select', N8nUserSelect);
app.component('n8n-resize-wrapper', N8nResizeWrapper); app.component('n8n-resize-wrapper', N8nResizeWrapper);
app.component('n8n-recycle-scroller', N8nRecycleScroller); app.component('n8n-recycle-scroller', N8nRecycleScroller);
app.component('n8n-checkbox', N8nCheckbox);
}, },
}; };