xref: /openbmc/webui-vue/src/components/Global/StatusIcon.vue (revision 7d6b44cb263da09e575c7cb28cab88c1eb339c7b) 
1<template>
2  <span :class="['status-icon', status]">
3    <icon-info v-if="status === 'info'" />
4    <icon-success v-else-if="status === 'success'" />
5    <icon-warning v-else-if="status === 'warning'" />
6    <icon-danger v-else-if="status === 'danger'" />
7    <icon-secondary v-else />
8  </span>
9</template>
10
11<script>
12import IconInfo from '@carbon/icons-vue/es/information--filled/20';
13import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20';
14import IconWarning from '@carbon/icons-vue/es/warning--filled/20';
15import IconError from '@carbon/icons-vue/es/error--filled/20';
16import IconMisuse from '@carbon/icons-vue/es/misuse/20';
17
18export default {
19  name: 'StatusIcon',
20  components: {
21    IconInfo: IconInfo,
22    iconSuccess: IconCheckmark,
23    iconDanger: IconMisuse,
24    iconSecondary: IconError,
25    iconWarning: IconWarning,
26  },
27  props: {
28    status: {
29      type: String,
30      default: '',
31    },
32  },
33};
34</script>
35
36<style lang="scss" scoped>
37@import '@/assets/styles/bmc/helpers/_index.scss';
38@import '@/assets/styles/bootstrap/_helpers.scss';
39
40.status-icon {
41  vertical-align: text-bottom;
42
43  &.info {
44    color: theme-color('info');
45  }
46  &.success {
47    color: theme-color('success');
48  }
49  &.danger {
50    color: theme-color('danger');
51  }
52  &.secondary {
53    color: gray('600');
54    transform: rotate(-45deg);
55  }
56  &.warning {
57    color: theme-color('warning');
58  }
59
60  svg {
61    fill: currentColor;
62  }
63}
64</style>
65