From 43ff4bcef283b4cc2ce670a37686dabe312d0677 Mon Sep 17 00:00:00 2001
From: mathieuRA <contact@mathieu-raisin.fr>
Date: Wed, 18 Sep 2024 17:29:27 +0200
Subject: [PATCH] feat(web-core): new Info component

---
 .../stories/web-core/info/ui-info.story.vue   | 19 +++++++
 .../web-core/lib/components/info/UiInfo.vue   | 51 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/info/ui-info.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/info/UiInfo.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/info/ui-info.story.vue b/@xen-orchestra/lite/src/stories/web-core/info/ui-info.story.vue
new file mode 100644
index 00000000000..4de644cd813
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/info/ui-info.story.vue
@@ -0,0 +1,19 @@
+<template>
+  <ComponentStory
+    v-slot="{ properties, settings }"
+    :params="[
+      prop('status').enum('info', 'success', 'warning', 'danger').required().preset('info').widget(),
+      slot(),
+      setting('defaultSlot').widget(text()).preset('message'),
+    ]"
+  >
+    <UiInfo v-bind="properties">{{ settings.defaultSlot }}</UiInfo>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import { prop, setting, slot } from '@/libs/story/story-param'
+import { text } from '@/libs/story/story-widget'
+import UiInfo from '@core/components/info/UiInfo.vue'
+</script>
diff --git a/@xen-orchestra/web-core/lib/components/info/UiInfo.vue b/@xen-orchestra/web-core/lib/components/info/UiInfo.vue
new file mode 100644
index 00000000000..12e08a71312
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/info/UiInfo.vue
@@ -0,0 +1,51 @@
+<!-- v2 -->
+<template>
+  <div class="vts-ui-info">
+    <UiIcon class="icon" :color :icon />
+    <p class="message"><slot /></p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import UiIcon from '@core/components/icon/UiIcon.vue'
+import type { IconColor } from '@core/types/color.type'
+import {
+  faCheckCircle,
+  faExclamationCircle,
+  faInfoCircle,
+  faXmarkCircle,
+  type IconDefinition,
+} from '@fortawesome/free-solid-svg-icons'
+import { computed } from 'vue'
+
+type Props = {
+  status: 'info' | 'success' | 'warning' | 'danger'
+}
+const props = defineProps<Props>()
+
+const states: Record<Props['status'], { icon: IconDefinition; color: IconColor }> = {
+  info: { icon: faInfoCircle, color: 'normal' },
+  success: { icon: faCheckCircle, color: 'success' },
+  warning: { icon: faExclamationCircle, color: 'warning' },
+  danger: { icon: faXmarkCircle, color: 'danger' },
+}
+
+const icon = computed(() => states[props.status].icon)
+const color = computed(() => states[props.status].color)
+</script>
+
+<style lang="postcss" scoped>
+.vts-ui-info {
+  align-items: center;
+  display: flex;
+  gap: 0.8rem;
+}
+
+.icon {
+  font-size: 1.6rem;
+}
+
+.message {
+  font-size: 1.2rem;
+}
+</style>