test(editor): Add first frontend unit-test and update notice component design (#3166)

* ✨ Added basic Vue 2 + Vite.js setup.

* 🚧 Improved typescript support.

* ✨ Added N8nNotice component to design system with stories and unit tests.

* ✨ Migrated design system build to Vite.js.

* ♻️ Updated typescript definitions. Moved some interface types to remove reliance from design system on editor-ui user and validation types.

* ♻️ Changed prop name from type to theme. Updated truncation props.

* ♻️ Moved user response types back. Added n8n-notice component to editor-ui.

* 🐛 Fixed global vitest types.

* ✨ Added this. vue type extension to editor-ui

* ♻️ Removed circular import.

* ✅ Fixed failing n8n-notice tests.

* feat: Added support for notice truncation via typeOptions.

* ✨ Updated warning color variables and notice warning colors.

* 🐛 Fixed n8n-notice parameter input spacing.

packages/design-system/src/components/N8nNotice/Notice.vue

@@ -0,0 +1,150 @@
+<template>
+	<div :id="id" :class="classes" role="alert">
+		<div class="notice-content">
+			<n8n-text size="small">
+				<slot>
+					<span
+						:class="expanded ? $style['expanded'] : $style['truncated']"
+						:id="`${id}-content`"
+						role="region"
+						v-html="sanitizedContent"
+					/>
+					<span v-if="canTruncate">
+						<a
+							role="button"
+							:aria-controls="`${id}-content`"
+							:aria-expanded="canTruncate && !expanded ? 'false' : 'true'"
+							@click="toggleExpanded"
+						>
+							{{ t(expanded ? 'notice.showLess' : 'notice.showMore') }}
+						</a>
+					</span>
+				</slot>
+			</n8n-text>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import sanitizeHtml from 'sanitize-html';
+import N8nText from "../../components/N8nText";
+import Locale from "../../mixins/locale";
+import {uid} from "../../utils";
+
+const DEFAULT_TRUNCATION_MAX_LENGTH = 150;
+
+export default Vue.extend({
+	name: 'n8n-notice',
+	directives: {},
+	mixins: [
+		Locale,
+	],
+	props: {
+		id: {
+			type: String,
+			default: () => uid('notice'),
+		},
+		theme: {
+			type: String,
+			default: 'warning',
+		},
+		truncateAt: {
+			type: Number,
+			default: 150,
+		},
+		truncate: {
+			type: Boolean,
+			default: false,
+		},
+		content: {
+			type: String,
+			default: '',
+		},
+	},
+	components: {
+		N8nText,
+	},
+	data() {
+		return {
+			expanded: false,
+		};
+	},
+	computed: {
+		classes(): string[] {
+			return [
+				'notice',
+				this.$style['notice'],
+				this.$style[this.theme],
+			];
+		},
+		canTruncate(): boolean {
+			return this.truncate && this.content.length > this.truncateAt;
+		},
+		truncatedContent(): string {
+			if (!this.canTruncate || this.expanded) {
+				return this.content;
+			}
+
+			return this.content.slice(0, this.truncateAt as number) + '...';
+		},
+		sanitizedContent(): string {
+			return sanitizeHtml(this.truncatedContent);
+		},
+	},
+	methods: {
+		toggleExpanded() {
+			this.expanded = !this.expanded;
+		},
+	},
+});
+</script>
+
+<style lang="scss" module>
+.notice {
+	display: flex;
+	color: var(--custom-font-black);
+	margin: 0;
+	padding: var(--spacing-xs);
+	background-color: var(--background-color);
+	border-width: 1px 1px 1px 7px;
+	border-style: solid;
+	border-color: var(--border-color);
+	border-radius: var(--border-radius-small);
+
+	a {
+		font-weight: var(--font-weight-bold);
+	}
+}
+
+.warning {
+	--border-color: var(--color-warning-tint-1);
+	--background-color: var(--color-warning-tint-2);
+}
+
+.danger {
+	--border-color: var(--color-danger-tint-1);
+	--background-color: var(--color-danger-tint-2);
+}
+
+.success {
+	--border-color: var(--color-success-tint-1);
+	--background-color: var(--color-success-tint-2);
+}
+
+.info {
+	--border-color: var(--color-info-tint-1);
+	--background-color: var(--color-info-tint-2);
+}
+
+.expanded {
+	+ span {
+		margin-top: var(--spacing-4xs);
+		display: block;
+	}
+}
+
+.truncated {
+	display: inline;
+}
+</style>