mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(editor): Update callout component design (#5126)

Browse source 
feat(design-system): Update callout component design
This commit is contained in:
Alex Grozav 2023-01-13 13:31:15 +02:00 committed by GitHub
parent c2eb519398
commit d2d481f12e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/design-system/src/components/N8nCallout/Callout.stories.ts
View file

@ -64,9 +64,7 @@ export const defaultCallout = template.bind({});
defaultCallout.args = { defaultCallout.args = {
theme: 'success', theme: 'success',
default: ` default: `
<n8n-text size="small" >
This is a default callout. This is a default callout.
</n8n-text>
`, `,
}; };
@ -75,9 +73,7 @@ customCallout.args = {
theme: 'custom', theme: 'custom',
icon: 'code-branch', icon: 'code-branch',
default: ` default: `
<n8n-text size="small" >
This is a custom callout. This is a custom callout.
</n8n-text>
`, `,
actions: ` actions: `
<n8n-link size="small"> <n8n-link size="small">
@ -91,9 +87,7 @@ secondaryCallout.args = {
theme: 'secondary', theme: 'secondary',
icon: 'thumbtack', icon: 'thumbtack',
default: ` default: `
<n8n-text size="small">
This data is pinned. This data is pinned.
</n8n-text>
`, `,
actions: ` actions: `
<n8n-link theme="secondary" size="small" :bold="true" :underline="true"> <n8n-link theme="secondary" size="small" :bold="true" :underline="true">

8
packages/design-system/src/components/N8nCallout/Callout.vue
View file

@ -4,7 +4,10 @@
<div :class="$style.icon"> <div :class="$style.icon">
<n8n-icon :icon="getIcon" :size="theme === 'secondary' ? 'medium' : 'large'" /> <n8n-icon :icon="getIcon" :size="theme === 'secondary' ? 'medium' : 'large'" />
</div> </div>
<slot />&nbsp; <n8n-text size="small">
<slot />
</n8n-text>
&nbsp;
<slot name="actions" /> <slot name="actions" />
</div> </div>
@ -14,6 +17,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import N8nText from '../N8nText';
import N8nIcon from '../N8nIcon'; import N8nIcon from '../N8nIcon';
const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = { const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
@ -26,6 +30,7 @@ const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
export default Vue.extend({ export default Vue.extend({
name: 'n8n-callout', name: 'n8n-callout',
components: { components: {
N8nText,
N8nIcon, N8nIcon,
}, },
props: { props: {
@ -69,6 +74,7 @@ export default Vue.extend({
.message-section { .message-section {
display: flex; display: flex;
align-items: center;
} }
.info, .info,

70
packages/design-system/src/components/N8nCallout/__tests__/__snapshots__/Callout.spec.ts.snap
View file

@ -1,79 +1,93 @@
// Vitest Snapshot v1 // Vitest Snapshot v1
exports[`components > N8nCallout > should render additional slots correctly 1`] = ` exports[`components > N8nCallout > should render additional slots correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _custom_lpicq_17\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _custom_qeab1_18\\">
<div class=\\"_message-section_lpicq_12\\"> <div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_lpicq_41\\"> <div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
</div> </div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp; <n8n-link-stub size=\\"small\\">Do something!</n8n-link-stub> <n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp; <n8n-link-stub size=\\"small\\">Do something!</n8n-link-stub>
</div> </div>
<n8n-link-stub theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link-stub> <n8n-link-stub theme=\\"secondary\\" size=\\"small\\" bold=\\"true\\" underline=\\"true\\" to=\\"https://n8n.io\\">Learn more</n8n-link-stub>
</div>" </div>"
`; `;
exports[`components > N8nCallout > should render custom theme correctly 1`] = ` exports[`components > N8nCallout > should render custom theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _custom_lpicq_17\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _custom_qeab1_18\\">
<div class=\\"_message-section_lpicq_12\\"> <div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_lpicq_41\\"> <div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"code-branch\\" size=\\"large\\"></n8n-icon-stub>
</div> </div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp; <n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div> </div>
</div>" </div>"
`; `;
exports[`components > N8nCallout > should render danger theme correctly 1`] = ` exports[`components > N8nCallout > should render danger theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _danger_lpicq_35\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _danger_qeab1_36\\">
<div class=\\"_message-section_lpicq_12\\"> <div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_lpicq_41\\"> <div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"times-circle\\" size=\\"large\\"></n8n-icon-stub>
</div> </div>
<n8n-text-stub size=\\"small\\">This is a danger callout.</n8n-text-stub>&nbsp; <n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a danger callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div> </div>
</div>" </div>"
`; `;
exports[`components > N8nCallout > should render info theme correctly 1`] = ` exports[`components > N8nCallout > should render info theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _info_lpicq_16\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _info_qeab1_17\\">
<div class=\\"_message-section_lpicq_12\\"> <div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_lpicq_41\\"> <div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"info-circle\\" size=\\"large\\"></n8n-icon-stub>
</div> </div>
<n8n-text-stub size=\\"small\\">This is an info callout.</n8n-text-stub>&nbsp; <n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is an info callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div> </div>
</div>" </div>"
`; `;
exports[`components > N8nCallout > should render secondary theme correctly 1`] = ` exports[`components > N8nCallout > should render secondary theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _secondary_lpicq_45\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _secondary_qeab1_46\\">
<div class=\\"_message-section_lpicq_12\\"> <div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_lpicq_41\\"> <div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"info-circle\\" size=\\"medium\\"></n8n-icon-stub>
</div> </div>
<n8n-text-stub size=\\"small\\">This is a secondary callout.</n8n-text-stub>&nbsp; <n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a secondary callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div> </div>
</div>" </div>"
`; `;
exports[`components > N8nCallout > should render success theme correctly 1`] = ` exports[`components > N8nCallout > should render success theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _success_lpicq_29\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _success_qeab1_30\\">
<div class=\\"_message-section_lpicq_12\\"> <div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_lpicq_41\\"> <div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"check-circle\\" size=\\"large\\"></n8n-icon-stub>
</div> </div>
<n8n-text-stub size=\\"small\\">This is a success callout.</n8n-text-stub>&nbsp; <n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a success callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div> </div>
</div>" </div>"
`; `;
exports[`components > N8nCallout > should render warning theme correctly 1`] = ` exports[`components > N8nCallout > should render warning theme correctly 1`] = `
"<div role=\\"alert\\" class=\\"n8n-callout _callout_lpicq_1 _warning_lpicq_23\\"> "<div role=\\"alert\\" class=\\"n8n-callout _callout_qeab1_1 _warning_qeab1_24\\">
<div class=\\"_message-section_lpicq_12\\"> <div class=\\"_message-section_qeab1_12\\">
<div class=\\"_icon_lpicq_41\\"> <div class=\\"_icon_qeab1_42\\">
<n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub> <n8n-icon-stub icon=\\"exclamation-triangle\\" size=\\"large\\"></n8n-icon-stub>
</div> </div>
<n8n-text-stub size=\\"small\\">This is a warning callout.</n8n-text-stub>&nbsp; <n8n-text-stub size=\\"small\\" tag=\\"span\\">
<n8n-text-stub size=\\"small\\" tag=\\"span\\">This is a warning callout.</n8n-text-stub>
</n8n-text-stub> &nbsp;
</div> </div>
</div>" </div>"
`; `;