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';
14
15export default {
16  name: 'StatusIcon',
17  components: {
18    iconSuccess: IconCheckmark,
19    iconDanger: IconError,
20    iconSecondary: IconError, //TODO: swap with right asset when available
21    iconWarning: IconWarning
22  },
23  props: {
24    status: {
25      type: String,
26      default: ''
27    }
28  }
29};
30</script>
31
32<style lang="scss" scoped>
33@import 'src/assets/styles/helpers';
34
35.status-icon {
36  vertical-align: text-bottom;
37  &.success {
38    fill: theme-color('success');
39  }
40  &.danger {
41    fill: theme-color('danger');
42  }
43  &.secondary {
44    fill: gray('600');
45
46    svg {
47      transform: rotate(-45deg);
48    }
49  }
50  &.warning {
51    fill: theme-color('warning');
52  }
53}
54</style>
55