mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-01-12 05:17:28 -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

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

@ -64,9 +64,7 @@ export const defaultCallout = template.bind({});
defaultCallout.args = {
theme: 'success',
default: `
<n8n-text size="small" >
This is a default callout.
</n8n-text>
This is a default callout.
`,
};
@ -75,9 +73,7 @@ customCallout.args = {
theme: 'custom',
icon: 'code-branch',
default: `
<n8n-text size="small" >
This is a custom callout.
</n8n-text>
This is a custom callout.
`,
actions: `
<n8n-link size="small">
@ -91,9 +87,7 @@ secondaryCallout.args = {
theme: 'secondary',
icon: 'thumbtack',
default: `
<n8n-text size="small">
This data is pinned.
</n8n-text>
This data is pinned.
`,
actions: `
<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">
<n8n-icon :icon="getIcon" :size="theme === 'secondary' ? 'medium' : 'large'" />
</div>
<slot />&nbsp;
<n8n-text size="small">
<slot />
</n8n-text>
&nbsp;
<slot name="actions" />
</div>
@ -14,6 +17,7 @@
<script lang="ts">
import Vue from 'vue';
import N8nText from '../N8nText';
import N8nIcon from '../N8nIcon';
const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
@ -26,6 +30,7 @@ const CALLOUT_DEFAULT_ICONS: { [key: string]: string } = {
export default Vue.extend({
name: 'n8n-callout',
components: {
N8nText,
N8nIcon,
},
props: {
@ -69,6 +74,7 @@ export default Vue.extend({
.message-section {
display: flex;
align-items: center;
}
.info,

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

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