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