-
-
-
-
@@ -14,37 +21,30 @@ import Vue from 'vue';
import N8nIcon from '../N8nIcon';
import N8nText from '../N8nText';
+const CALLOUT_DEFAULT_ICONS = {
+ info: 'info-circle',
+ success: 'check-circle',
+ warning: 'exclamation-triangle',
+ danger: 'times-circle',
+};
+
export default Vue.extend({
name: 'n8n-callout',
components: {
N8nIcon,
- N8nText
+ N8nText,
},
props: {
theme: {
type: String,
required: true,
validator: (value: string): boolean =>
- ['info', 'success', 'warning', 'danger', 'custom'].includes(value),
- },
- message: {
- type: String,
- required: true
+ ['info', 'success', 'secondary', 'warning', 'danger', 'custom'].includes(value),
},
icon: {
type: String,
default: 'info-circle'
- }
- },
- data() {
- return {
- defaultIcons: {
- 'info': 'info-circle',
- 'success': 'check-circle',
- 'warning': 'exclamation-triangle',
- 'danger': 'times-circle',
- }
- }
+ },
},
computed: {
classes(): string[] {
@@ -54,50 +54,65 @@ export default Vue.extend({
];
},
getIcon(): string {
- if(this.theme === 'custom') {
- return this.icon;
+ if (Object.keys(CALLOUT_DEFAULT_ICONS).includes(this.theme)) {
+ return CALLOUT_DEFAULT_ICONS[this.theme];
}
- return this.defaultIcons[this.theme];
+
+ return this.icon;
},
}
});
diff --git a/packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts b/packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts
deleted file mode 100644
index 0c7a315e19..0000000000
--- a/packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-import N8nCallout from './Callout.vue';
-import { StoryFn } from '@storybook/vue';
-import N8nLink from '../N8nLink';
-import N8nText from '../N8nText';
-
-export default {
- title: 'Atoms/Callout',
- component: N8nCallout,
- argTypes: {
- theme: {
- control: {
- type: 'select',
- options: ['info', 'secondary', 'success', 'warning', 'danger', 'custom'],
- },
- },
- message: {
- control: {
- type: 'text',
- },
- },
- icon: {
- control: {
- type: 'text',
- },
- },
- },
- parameters: {
- design: {
- type: 'figma',
- url: 'https://www.figma.com/file/tPpJvbrnHbP8C496cYuwyW/Node-pinning?node-id=15%3A5777',
- },
- },
-};
-
-const template: StoryFn = (args, { argTypes }) => ({
- props: Object.keys(argTypes),
- components: {
- N8nLink,
- N8nText,
- N8nCallout,
- },
- template: `
-
- ${args.default}
-
- ${args.actions}
-
-
- ${args.trailingContent}
-
-
- `,
-});
-
-export const customCallout = template.bind({});
-customCallout.args = {
- theme: 'custom',
- icon: 'code-branch',
- default: `
-
- This is a callout.
-
- `,
- actions: `
-
- Do something!
-
- `,
-};
-
-export const secondaryCallout = template.bind({});
-secondaryCallout.args = {
- theme: 'secondary',
- icon: 'thumbtack',
- default: `
-
- This data is pinned.
-
- `,
- actions: `
-
- Unpin
-
- `,
- trailingContent: `
-
- Learn more
-
- `,
-};
diff --git a/packages/design-system/src/components/N8nCallout/__tests__/Callout.spec.ts b/packages/design-system/src/components/N8nCallout/__tests__/Callout.spec.ts
index 1740989427..799812eebf 100644
--- a/packages/design-system/src/components/N8nCallout/__tests__/Callout.spec.ts
+++ b/packages/design-system/src/components/N8nCallout/__tests__/Callout.spec.ts
@@ -2,106 +2,94 @@ import { render } from '@testing-library/vue';
import N8nCallout from '../Callout.vue';
describe('components', () => {
- describe('N8NCallout', () => {
- describe('props', () => {
- it('should render info theme correctly', () => {
- const wrapper = render(N8nCallout, {
- props: {
- theme: 'info',
- message: 'This is an info callout.',
- },
- stubs: [
- 'n8n-icon',
- 'n8n-text',
- ],
- });
- expect(wrapper.html()).toMatchSnapshot();
- });
- it('should render success theme correctly', () => {
- const wrapper = render(N8nCallout, {
- props: {
- theme: 'success',
- message: 'This is an success callout.',
- },
- stubs: [
- 'n8n-icon',
- 'n8n-text',
- ],
- });
- expect(wrapper.html()).toMatchSnapshot();
- });
- it('should render warning theme correctly', () => {
- const wrapper = render(N8nCallout, {
- props: {
- theme: 'warning',
- message: 'This is an warning callout.',
- },
- stubs: [
- 'n8n-icon',
- 'n8n-text',
- ],
- });
- expect(wrapper.html()).toMatchSnapshot();
- });
- it('should render danger theme correctly', () => {
- const wrapper = render(N8nCallout, {
- props: {
- theme: 'danger',
- message: 'This is an danger callout.',
- },
- stubs: [
- 'n8n-icon',
- 'n8n-text',
- ],
- });
- expect(wrapper.html()).toMatchSnapshot();
- });
- it('should render custom theme correctly', () => {
- const wrapper = render(N8nCallout, {
- props: {
- theme: 'custom',
- message: 'This is an custom callout.',
- icon: 'code',
- },
- stubs: [
- 'n8n-icon',
- 'n8n-text',
- ],
- });
- expect(wrapper.html()).toMatchSnapshot();
+ describe('N8nCallout', () => {
+ it('should render info theme correctly', () => {
+ const wrapper = render(N8nCallout, {
+ props: {
+ theme: 'info',
+ },
+ stubs: [ 'n8n-icon', 'n8n-text' ],
+ slots: {
+ default: '
This is an info callout.',
+ },
});
+ expect(wrapper.html()).toMatchSnapshot();
});
- describe('content', () => {
- it('should render custom HTML content correctly', () => {
- const wrapper = render(N8nCallout, {
- props: {
- theme: 'custom',
- message: 'This is an HTML callout.
Read more',
- icon: 'code',
- },
- stubs: [
- 'n8n-icon',
- 'n8n-text',
- ],
- });
- expect(wrapper.html()).toMatchSnapshot();
+ it('should render success theme correctly', () => {
+ const wrapper = render(N8nCallout, {
+ props: {
+ theme: 'success',
+ },
+ stubs: [ 'n8n-icon', 'n8n-text' ],
+ slots: {
+ default: '
This is a success callout.',
+ },
});
- it('should pass props to text component correctly', () => {
- const wrapper = render(N8nCallout, {
- props: {
- theme: 'warning',
- message: 'This is a callout.',
- bold: true,
- align: 'center',
- tag: 'p',
- },
- stubs: [
- 'n8n-icon',
- 'n8n-text',
- ],
- });
- expect(wrapper.html()).toMatchSnapshot();
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ it('should render warning theme correctly', () => {
+ const wrapper = render(N8nCallout, {
+ props: {
+ theme: 'warning',
+ },
+ stubs: [ 'n8n-icon', 'n8n-text' ],
+ slots: {
+ default: '
This is a warning callout.',
+ },
});
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ it('should render danger theme correctly', () => {
+ const wrapper = render(N8nCallout, {
+ props: {
+ theme: 'danger',
+ },
+ stubs: [ 'n8n-icon', 'n8n-text' ],
+ slots: {
+ default: '
This is a danger callout.',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ it('should render secondary theme correctly', () => {
+ const wrapper = render(N8nCallout, {
+ props: {
+ theme: 'secondary',
+ },
+ stubs: [ 'n8n-icon', 'n8n-text' ],
+ slots: {
+ default: '
This is a secondary callout.',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ it('should render custom theme correctly', () => {
+ const wrapper = render(N8nCallout, {
+ props: {
+ theme: 'custom',
+ icon: 'code-branch',
+ },
+ stubs: [ 'n8n-icon', 'n8n-text' ],
+ slots: {
+ default: '
This is a secondary callout.',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+ it('should render additional slots correctly', () => {
+ const wrapper = render(N8nCallout, {
+ props: {
+ theme: 'custom',
+ icon: 'code-branch',
+ },
+ stubs: [ 'n8n-icon', 'n8n-text', 'n8n-link' ],
+ slots: {
+ default: '
This is a secondary callout.',
+ actions: '
Do something!',
+ trailingContent: '
Learn more',
+ },
+ });
+ expect(wrapper.html()).toMatchSnapshot();
});
});
});
diff --git a/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap b/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
index db3b1dfacb..b71ea8250c 100644
--- a/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
+++ b/packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
@@ -1,78 +1,79 @@
// Vitest Snapshot v1
-exports[`components > N8NCallout > content > should pass props to text component correctly 1`] = `
-"
-
-
+exports[`components > N8nCallout > should render additional slots correctly 1`] = `
+"
+
+
+
+
+
This is a secondary callout. Do something!
-
- This is a callout.
+ Learn more
+
"
+`;
+
+exports[`components > N8nCallout > should render custom theme correctly 1`] = `
+"
+
+
+
+
+
This is a secondary callout.
"
`;
-exports[`components > N8NCallout > content > should render custom HTML content correctly 1`] = `
-"
-
-
-
-
-
This is an HTML callout. Read more
+exports[`components > N8nCallout > should render danger theme correctly 1`] = `
+"
+
+
+
+
+
This is a danger callout.
"
`;
-exports[`components > N8NCallout > props > should render custom theme correctly 1`] = `
-"
-
-
-
-
-
This is an custom callout.
+exports[`components > N8nCallout > should render info theme correctly 1`] = `
+"
+
+
+
+
+
This is an info callout.
"
`;
-exports[`components > N8NCallout > props > should render danger theme correctly 1`] = `
-"
-
-
-
-
-
This is an danger callout.
+exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
+"
+
+
+
+
+
This is a secondary callout.
"
`;
-exports[`components > N8NCallout > props > should render info theme correctly 1`] = `
-"
-
-
-
-
-
This is an info callout.
+exports[`components > N8nCallout > should render success theme correctly 1`] = `
+"
+
+
+
+
+
This is a success callout.
"
`;
-exports[`components > N8NCallout > props > should render success theme correctly 1`] = `
-"
-
-
-
-
- This is an success callout.
-
-
"
-`;
-
-exports[`components > N8NCallout > props > should render warning theme correctly 1`] = `
-"
-
-
-
-
-
This is an warning callout.
+exports[`components > N8nCallout > should render warning theme correctly 1`] = `
+"
+
+
+
+
+
This is a warning callout.
"
`;
diff --git a/packages/design-system/src/components/N8nPanelCallout/PanelCallout.stories.js b/packages/design-system/src/components/N8nPanelCallout/PanelCallout.stories.js
deleted file mode 100644
index 5b500e10ab..0000000000
--- a/packages/design-system/src/components/N8nPanelCallout/PanelCallout.stories.js
+++ /dev/null
@@ -1,107 +0,0 @@
-import N8nPanelCallout from './PanelCallout.vue';
-import { StoryFn } from '@storybook/vue';
-import N8nLink from '../N8nLink';
-import N8nText from '../N8nText';
-
-export default {
- title: 'Atoms/Callout',
- component: N8nPanelCallout,
- argTypes: {
- theme: {
- control: {
- type: 'select',
- options: ['info', 'secondary', 'success', 'warning', 'danger', 'custom'],
- },
- },
- message: {
- control: {
- type: 'text',
- },
- },
- icon: {
- control: {
- type: 'text',
- },
- },
- },
- parameters: {
- design: {
- type: 'figma',
- url: 'https://www.figma.com/file/tPpJvbrnHbP8C496cYuwyW/Node-pinning?node-id=15%3A5777',
- },
- },
-};
-
-const template = (args, { argTypes }) => ({
- props: Object.keys(argTypes),
- components: {
- N8nLink,
- N8nText,
- N8nPanelCallout,
- },
- template: `
-
- ${args.default}
-
- ${args.actions}
-
-
- ${args.trailingContent}
-
-
- `,
-});
-
-export const customCallout = template.bind({});
-customCallout.args = {
- theme: 'custom',
- icon: 'code-branch',
- default: `
-
- This is a callout.
-
- `,
- actions: `
-
- Do something!
-
- `,
-};
-
-export const secondaryCallout = template.bind({});
-secondaryCallout.args = {
- theme: 'secondary',
- icon: 'thumbtack',
- default: `
-
- This data is pinned.
-
- `,
- actions: `
-
- Unpin
-
- `,
- trailingContent: `
-
- Learn more
-
- `,
-};
diff --git a/packages/design-system/src/components/N8nPanelCallout/PanelCallout.vue b/packages/design-system/src/components/N8nPanelCallout/PanelCallout.vue
deleted file mode 100644
index c55cdbc508..0000000000
--- a/packages/design-system/src/components/N8nPanelCallout/PanelCallout.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-
-
-
-
-
-
-
diff --git a/packages/design-system/src/components/N8nPanelCallout/index.ts b/packages/design-system/src/components/N8nPanelCallout/index.ts
deleted file mode 100644
index 8ada19c2f3..0000000000
--- a/packages/design-system/src/components/N8nPanelCallout/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import N8nPanelCallout from './PanelCallout.vue';
-
-export default N8nPanelCallout;
diff --git a/packages/design-system/src/components/index.ts b/packages/design-system/src/components/index.ts
index a0d2487308..57c4356ef1 100644
--- a/packages/design-system/src/components/index.ts
+++ b/packages/design-system/src/components/index.ts
@@ -41,7 +41,6 @@ import N8nBadge from './N8nBadge';
import N8nButton from './N8nButton';
import { N8nElButton } from './N8nButton/overrides';
import N8nCallout from './N8nCallout';
-import N8nPanelCallout from './N8nPanelCallout';
import N8nCard from './N8nCard';
import N8nFormBox from './N8nFormBox';
import N8nFormInput from './N8nFormInput';
@@ -86,7 +85,6 @@ export {
N8nButton,
N8nElButton,
N8nCallout,
- N8nPanelCallout,
N8nCard,
N8nHeading,
N8nFormBox,
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 99d57758fe..0c682876d5 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1,6 +1,6 @@
-
-
+
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 354857d0c0..07c750cc6c 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -51,7 +51,6 @@ import {
N8nButton,
N8nElButton,
N8nCallout,
- N8nPanelCallout,
N8nCard,
N8nIcon,
N8nIconButton,
@@ -94,7 +93,6 @@ Vue.use(N8nAvatar);
Vue.component('n8n-button', N8nButton);
Vue.component('el-button', N8nElButton);
Vue.component('n8n-callout', N8nCallout);
-Vue.component('n8n-panel-callout', N8nPanelCallout);
Vue.component('n8n-card', N8nCard);
Vue.component('n8n-form-box', N8nFormBox);
Vue.component('n8n-form-inputs', N8nFormInputs);
diff --git a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
index 9e09585387..0b5cc79c8a 100644
--- a/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
+++ b/packages/editor-ui/src/views/SettingsCommunityNodesView.vue
@@ -10,15 +10,15 @@
@click="openInstallModal"
/>
-
+
+
+