From d2d481f12e1777a60ee5411c8cdac50b1dfc3ee3 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Fri, 13 Jan 2023 13:31:15 +0200
Subject: [PATCH] feat(editor): Update callout component design (#5126)

feat(design-system): Update callout component design
---
 .../components/N8nCallout/Callout.stories.ts  | 12 +---
 .../src/components/N8nCallout/Callout.vue     |  8 ++-
 .../__snapshots__/Callout.spec.ts.snap        | 70 +++++++++++--------
 3 files changed, 52 insertions(+), 38 deletions(-)

diff --git a/packages/design-system/src/components/N8nCallout/Callout.stories.ts b/packages/design-system/src/components/N8nCallout/Callout.stories.ts
index bb9df493d5..48ccdafa77 100644
--- a/packages/design-system/src/components/N8nCallout/Callout.stories.ts
+++ b/packages/design-system/src/components/N8nCallout/Callout.stories.ts
@@ -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">
diff --git a/packages/design-system/src/components/N8nCallout/Callout.vue b/packages/design-system/src/components/N8nCallout/Callout.vue
index f901d8ad59..b349863d25 100644
--- a/packages/design-system/src/components/N8nCallout/Callout.vue
+++ b/packages/design-system/src/components/N8nCallout/Callout.vue
@@ -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,
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 ba1bd01f97..a0198b4b12 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,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>"
 `;