From ad8d6629761d38ca60ac55b2c26c4e988e72b104 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= Date: Tue, 2 Aug 2022 10:36:11 +0200 Subject: [PATCH] refactor(editor): Unify Callout components (#3798) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ Implemented a single Callout component * ✔️ Updating test snapshots and fixing lint warnings --- .../src/components/N8nActionBox/ActionBox.vue | 38 +++- .../components/N8nCallout/Callout.stories.ts | 78 +++++++- .../src/components/N8nCallout/Callout.vue | 127 ++++++------ .../N8nCallout/N8nCallout.stories.ts | 107 ----------- .../N8nCallout/__tests__/Callout.spec.ts | 180 ++++++++---------- .../__snapshots__/Callout.spec.ts.snap | 105 +++++----- .../N8nPanelCallout/PanelCallout.stories.js | 107 ----------- .../N8nPanelCallout/PanelCallout.vue | 115 ----------- .../src/components/N8nPanelCallout/index.ts | 3 - .../design-system/src/components/index.ts | 2 - packages/editor-ui/src/components/RunData.vue | 4 +- packages/editor-ui/src/plugins/components.ts | 2 - .../src/views/SettingsCommunityNodesView.vue | 18 +- 13 files changed, 320 insertions(+), 566 deletions(-) delete mode 100644 packages/design-system/src/components/N8nCallout/N8nCallout.stories.ts delete mode 100644 packages/design-system/src/components/N8nPanelCallout/PanelCallout.stories.js delete mode 100644 packages/design-system/src/components/N8nPanelCallout/PanelCallout.vue delete mode 100644 packages/design-system/src/components/N8nPanelCallout/index.ts diff --git a/packages/design-system/src/components/N8nActionBox/ActionBox.vue b/packages/design-system/src/components/N8nActionBox/ActionBox.vue index 7cf3a25b4f..e8e0b4c585 100644 --- a/packages/design-system/src/components/N8nActionBox/ActionBox.vue +++ b/packages/design-system/src/components/N8nActionBox/ActionBox.vue @@ -4,14 +4,26 @@ {{ props.heading }}
- + + +
- + + + @@ -23,6 +35,12 @@ import N8nCallout from '../N8nCallout'; export default { name: 'n8n-action-box', + components: { + N8nButton, + N8nHeading, + N8nText, + N8nCallout, + }, props: { heading: { type: String, @@ -44,12 +62,6 @@ export default { type: String, }, }, - components: { - N8nButton, - N8nHeading, - N8nText, - N8nCallout, - }, }; @@ -79,4 +91,10 @@ export default { color: var(--color-text-base); margin-bottom: var(--spacing-xl); } + +.callout { + width: 100%; + text-align: left; +} + diff --git a/packages/design-system/src/components/N8nCallout/Callout.stories.ts b/packages/design-system/src/components/N8nCallout/Callout.stories.ts index 04bb81626d..ea7f49b43c 100644 --- a/packages/design-system/src/components/N8nCallout/Callout.stories.ts +++ b/packages/design-system/src/components/N8nCallout/Callout.stories.ts @@ -1,6 +1,9 @@ import N8nCallout from './Callout.vue'; +import N8nLink from '../N8nLink'; +import N8nText from '../N8nText'; import { StoryFn } from '@storybook/vue'; + export default { title: 'Atoms/Callout', component: N8nCallout, @@ -8,7 +11,7 @@ export default { theme: { control: { type: 'select', - options: ['info', 'success', 'warning', 'danger', 'custom'], + options: ['info', 'secondary', 'success', 'warning', 'danger', 'custom'], }, }, message: { @@ -22,19 +25,84 @@ export default { }, }, }, + 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: ``, + template: ` + + ${args.default} + + + + `, }); -export const callout = template.bind({}); -callout.args = { +export const defaultCallout = template.bind({}); +defaultCallout.args = { + theme: 'success', + default: ` + + This is a default callout. + + `, +}; + +export const customCallout = template.bind({}); +customCallout.args = { theme: 'custom', icon: 'code-branch', - message: 'This is a callout. Read more.', + default: ` + + This is a custom 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/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue index f64f8b3a9f..979fb4f63d 100644 --- a/packages/design-system/src/components/N8nCallout/Callout.vue +++ b/packages/design-system/src/components/N8nCallout/Callout.vue @@ -1,11 +1,18 @@ @@ -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} - - - - `, -}); - -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} - - - - `, -}); - -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" />
- +
+ +