From 5c8611cb9a8116c32256af6ea8f94c34efcfe7d3 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Thu, 8 Jul 2021 19:36:08 +0200
Subject: [PATCH] refactor components

---
 packages/editor-ui/src/components/Badge.vue   | 49 +++++++++++++++++
 .../editor-ui/src/components/VersionCard.vue  | 53 +++++++------------
 .../src/components/WarningTooltip.vue         | 15 ++++++
 3 files changed, 82 insertions(+), 35 deletions(-)
 create mode 100644 packages/editor-ui/src/components/Badge.vue
 create mode 100644 packages/editor-ui/src/components/WarningTooltip.vue

diff --git a/packages/editor-ui/src/components/Badge.vue b/packages/editor-ui/src/components/Badge.vue
new file mode 100644
index 0000000000..0c61c95b61
--- /dev/null
+++ b/packages/editor-ui/src/components/Badge.vue
@@ -0,0 +1,49 @@
+<template functional>
+  <span>
+    <el-tag
+      v-if="props.type === 'danger'"
+      type="danger"
+      size="small"
+      :class="`${$style['danger']} ${$style['badge']}`"
+    >
+      {{ props.text }}
+    </el-tag>
+    <el-tag
+      v-else-if="props.type === 'warning'"
+      size="small"
+      :class="`${$style['warning']} ${$style['badge']}`"
+    >
+      {{ props.text }}
+    </el-tag>
+  </span>
+</template>
+
+<script lang="ts">
+export default {
+  props: ["text", "type"],
+};
+</script>
+
+<style lang="scss" module>
+.badge {
+  font-size: 11px;
+  line-height: 18px;
+  max-height: 18px;
+  font-weight: 400;
+  display: flex;
+  align-items: center;
+  padding: 2px 4px;
+}
+
+.danger {
+  color: $--version-card-security-badge-color;
+  background-color: $--version-card-security-badge-background-color;
+  border-color: $--version-card-security-badge-border-color;
+}
+
+.warning {
+  background-color: $--version-card-breaking-change-background-color;
+  color: $--version-card-breaking-change-color;
+  border: none;
+}
+</style>
\ No newline at end of file
diff --git a/packages/editor-ui/src/components/VersionCard.vue b/packages/editor-ui/src/components/VersionCard.vue
index f6d72a3145..27717e948b 100644
--- a/packages/editor-ui/src/components/VersionCard.vue
+++ b/packages/editor-ui/src/components/VersionCard.vue
@@ -5,12 +5,21 @@
 				<div :class="$style.name">
 					Version {{version.name}}
 				</div>
-				<el-tooltip effect="light" content=" " placement="top" v-if="version.hasSecurityIssue">
-					<div slot="content">This version has a security issue.<br/>It is listed here for completeness.</div>
-					<font-awesome-icon :class="$style['security-flag']" icon="exclamation-triangle"></font-awesome-icon>
-				</el-tooltip>
-				<el-tag type="danger" v-if="version.hasSecurityFix" size="small" :class="`${$style['security-update']} ${$style['badge']}`">Security update</el-tag>
-				<el-tag v-if="version.hasBreakingChange" size="small" :class="`${$style['breaking-change']} ${$style['badge']}`">Breaking changes</el-tag>
+				<WarningTooltip v-if="version.hasSecurityIssue">
+					<template>
+						This version has a security issue.<br/>It is listed here for completeness.
+					</template>
+				</WarningTooltip>
+				<Badge
+					v-if="version.hasSecurityFix"
+					text="Security update"
+					type="danger"
+				/>
+				<Badge
+					v-if="version.hasSecurityFix"
+					text="Breaking changes"
+					type="warning"
+				/>
 			</div>
 			<div :class="$style.released">
 				Released&nbsp;<TimeAgo :date="version.createdAt" />
@@ -34,10 +43,12 @@ import Vue from 'vue';
 import NodeIcon from './NodeIcon.vue';
 import { IVersion } from '@/Interface';
 import TimeAgo from './TimeAgo.vue';
+import Badge from './Badge.vue';
+import WarningTooltip from './WarningTooltip.vue';
 
 
 export default Vue.extend({
-	components: { NodeIcon, TimeAgo },
+	components: { NodeIcon, TimeAgo, Badge, WarningTooltip },
 	name: 'UpdatesPanel',
 	props: ['version'],
 	computed: {
@@ -115,32 +126,4 @@ export default Vue.extend({
 	.expanded {
 		grid-row-gap: 8px;
 	}
-
-	.badge {
-		font-size: 11px;
-		line-height: 18px;
-		max-height: 18px;
-		font-weight: 400;
-		display: flex;
-		align-items: center;
-		padding: 2px 4px;
-	}
-
-	.security-update {
-		color: $--version-card-security-badge-color;
-		background-color: $--version-card-security-badge-background-color;
-		border-color: $--version-card-security-badge-border-color;
-	}
-
-	.breaking-change {
-		background-color: $--version-card-breaking-change-background-color;
-		color: $--version-card-breaking-change-color;
-		border: none;
-	}
-
-	.security-flag {
-		font-size: 14px;
-		height: 18px;
-		color: $--version-card-security-flag-color;
-	}
 </style>
diff --git a/packages/editor-ui/src/components/WarningTooltip.vue b/packages/editor-ui/src/components/WarningTooltip.vue
new file mode 100644
index 0000000000..75b3a2a702
--- /dev/null
+++ b/packages/editor-ui/src/components/WarningTooltip.vue
@@ -0,0 +1,15 @@
+<template functional>
+	<el-tooltip effect="light" content=" " placement="top" >
+		<div slot="content"><slot /></div>
+		<font-awesome-icon :class="$style['icon']" icon="exclamation-triangle"></font-awesome-icon>
+	</el-tooltip>
+</template>
+
+
+<style lang="scss" module>
+	.icon {
+		font-size: 14px;
+		height: 18px;
+		color: $--version-card-security-flag-color;
+	}
+</style>
\ No newline at end of file