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.status-icon {
34  vertical-align: text-bottom;
35  &.success {
36    fill: theme-color('success');
37  }
38  &.danger {
39    fill: theme-color('danger');
40  }
41  &.secondary {
42    fill: gray('600');
43
44    svg {
45      transform: rotate(-45deg);
46    }
47  }
48  &.warning {
49    fill: theme-color('warning');
50  }
51}
52</style>
53