| Derick Montague | caaf7ba | 2020-10-09 11:17:48 -0500 | [diff] [blame] | 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> |
| 12 | import IconInfo from '@carbon/icons-vue/es/information--filled/20'; |
| 13 | import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20'; |
| 14 | import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; |
| 15 | import IconError from '@carbon/icons-vue/es/error--filled/20'; |
| 16 | import IconMisuse from '@carbon/icons-vue/es/misuse/20'; |
| 17 | |
| 18 | export 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 "src/assets/styles/bmc/helpers"; |
| 38 | @import "src/assets/styles/bootstrap/helpers"; |
| 39 | .status-icon { |
| 40 | vertical-align: text-bottom; |
| 41 | &.info { |
| 42 | fill: theme-color('info'); |
| 43 | } |
| 44 | &.success { |
| 45 | fill: theme-color('success'); |
| 46 | } |
| 47 | &.danger { |
| 48 | fill: theme-color('danger'); |
| 49 | } |
| 50 | &.secondary { |
| 51 | fill: gray('600'); |
| 52 | |
| 53 | svg { |
| 54 | transform: rotate(-45deg); |
| 55 | } |
| 56 | } |
| 57 | &.warning { |
| 58 | fill: theme-color('warning'); |
| 59 | } |
| 60 | } |
| 61 | </style> |