125 lines
2.4 KiB
Vue
125 lines
2.4 KiB
Vue
<script setup>
|
|
defineProps({
|
|
iconClass: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
badgeIconClass: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
tone: {
|
|
type: String,
|
|
default: "neutral",
|
|
},
|
|
badgeTone: {
|
|
type: String,
|
|
default: "neutral",
|
|
},
|
|
label: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
testId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<span
|
|
class="system-status-module-indicator"
|
|
:class="`is-${tone}`"
|
|
role="img"
|
|
:aria-label="label"
|
|
:title="label"
|
|
:data-testid="testId || undefined"
|
|
>
|
|
<span class="system-status-module-indicator__icon" aria-hidden="true">
|
|
<i :class="iconClass"></i>
|
|
</span>
|
|
<span
|
|
v-if="badgeIconClass"
|
|
class="system-status-module-indicator__badge"
|
|
:class="`is-${badgeTone}`"
|
|
aria-hidden="true"
|
|
>
|
|
<i :class="badgeIconClass"></i>
|
|
</span>
|
|
</span>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.system-status-module-indicator {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 2.15rem;
|
|
height: 2.15rem;
|
|
border: 1px solid currentColor;
|
|
border-radius: 999px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
color: #64748b;
|
|
cursor: help;
|
|
transition: background-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
|
|
}
|
|
|
|
.system-status-module-indicator:hover,
|
|
.system-status-module-indicator:focus-visible {
|
|
background: #ffffff;
|
|
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.12);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.system-status-module-indicator__icon {
|
|
font-size: 0.98rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.system-status-module-indicator__badge {
|
|
position: absolute;
|
|
right: -0.22rem;
|
|
bottom: -0.18rem;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 2px solid #ffffff;
|
|
border-radius: 999px;
|
|
background: #64748b;
|
|
color: #ffffff;
|
|
font-size: 0.56rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.system-status-module-indicator.is-ok {
|
|
color: #166534;
|
|
background: rgba(22, 163, 74, 0.1);
|
|
}
|
|
|
|
.system-status-module-indicator.is-down {
|
|
color: #b91c1c;
|
|
background: rgba(220, 38, 38, 0.1);
|
|
}
|
|
|
|
.system-status-module-indicator.is-degraded {
|
|
color: #b45309;
|
|
background: rgba(245, 158, 11, 0.12);
|
|
}
|
|
|
|
.system-status-module-indicator__badge.is-ok {
|
|
background: #16a34a;
|
|
}
|
|
|
|
.system-status-module-indicator__badge.is-down {
|
|
background: #dc2626;
|
|
}
|
|
|
|
.system-status-module-indicator__badge.is-degraded {
|
|
background: #d97706;
|
|
}
|
|
</style>
|