From 02587300d7248402e28754b7c4de08825833a81b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastian=20Czech?= <czechsebastian@icloud.com>
Date: Wed, 20 Nov 2024 09:51:18 +0100
Subject: [PATCH] feat(xo-6): locales migration

---
 .../web-core/ui/card/ui-card-item.story.vue   | 64 +++++++++++++++++++
 .../components/ui/card-item/UiCardItem.vue    | 48 ++++++++++++++
 2 files changed, 112 insertions(+)
 create mode 100644 @xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue
 create mode 100644 @xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue

diff --git a/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue
new file mode 100644
index 00000000000..516ca5036d4
--- /dev/null
+++ b/@xen-orchestra/lite/src/stories/web-core/ui/card/ui-card-item.story.vue
@@ -0,0 +1,64 @@
+<template>
+  <ComponentStory v-slot="{ properties }" :params="[prop('horizontal').bool().widget()]">
+    <UiCard class="card">
+      <UiCardItem v-bind="properties">
+        Uuid
+        <template #content>
+          <div>71df26a2-678a-49c7-8232-8ebcac4987ab</div>
+        </template>
+        <template #actions>
+          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+        </template>
+      </UiCardItem>
+      <UiCardItem v-bind="properties">
+        network Name
+        <template #content>
+          <UiObjectLink route="`/vm/test/console`">
+            <template #icon>
+              <UiComplexIcon size="medium">
+                <VtsIcon :icon="faNetworkWired" accent="current" />
+                <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+              </UiComplexIcon>
+            </template>
+            Network Name
+          </UiObjectLink>
+        </template>
+        <template #actions>
+          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+        </template>
+      </UiCardItem>
+      <UiCardItem v-bind="properties">
+        Status
+        <template #content>
+          <VtsIcon accent="success" :icon="faCircle" :overlay-icon="faCheck" />
+          <div>Connected</div>
+        </template>
+        <template #actions>
+          <UiButtonIcon :icon="faCopy" size="small" accent="info" />
+          <UiButtonIcon :icon="faEllipsis" size="small" accent="info" />
+        </template>
+      </UiCardItem>
+    </UiCard>
+  </ComponentStory>
+</template>
+
+<script lang="ts" setup>
+import ComponentStory from '@/components/component-story/ComponentStory.vue'
+import UiCard from '@/components/ui/UiCard.vue'
+import { prop } from '@/libs/story/story-param'
+import VtsIcon from '@core/components/icon/VtsIcon.vue'
+import UiButtonIcon from '@core/components/ui/button-icon/UiButtonIcon.vue'
+import UiCardItem from '@core/components/ui/card-item/UiCardItem.vue'
+import UiComplexIcon from '@core/components/ui/complex-icon/UiComplexIcon.vue'
+import UiObjectLink from '@core/components/ui/object-link/UiObjectLink.vue'
+import { faCheck, faCircle, faCopy, faEllipsis, faNetworkWired } from '@fortawesome/free-solid-svg-icons'
+</script>
+
+<style lang="postcss" scoped>
+.card {
+  width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+</style>
diff --git a/@xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue b/@xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue
new file mode 100644
index 00000000000..c14794bf61c
--- /dev/null
+++ b/@xen-orchestra/web-core/lib/components/ui/card-item/UiCardItem.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="ui-card-item typo p3-regular">
+    <div class="title">
+      <slot />
+    </div>
+    <div class="content">
+      <slot name="content" />
+    </div>
+    <div v-if="slots.actions" class="actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  icon?: any
+}>()
+
+const slots = defineSlots<{
+  default(): any
+  content(): any
+  actions?(): any
+}>()
+</script>
+
+<style lang="postcss" scoped>
+.ui-card-item {
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+  width: 100%;
+
+  .content {
+    display: flex;
+    gap: 0.8rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .actions {
+    display: flex;
+    gap: 0.8rem;
+    margin-left: auto;
+  }
+}
+</style>