| Yoshie Muranaka | dc04feb | 2019-12-04 08:41:22 -0800 | [diff] [blame] | 1 | <template> |
| 2 | <span :class="['status-icon', status]"> |
| 3 | <icon-success v-if="status === 'success'" /> |
| 4 | <icon-danger v-else-if="status === 'danger'" /> |
| 5 | <icon-secondary v-else /> |
| 6 | </span> |
| 7 | </template> |
| 8 | |
| 9 | <script> |
| Derick Montague | e2fd156 | 2019-12-20 13:26:53 -0600 | [diff] [blame^] | 10 | import IconCheckmark from '@carbon/icons-vue/es/checkmark--filled/20'; |
| 11 | import IconWarning from '@carbon/icons-vue/es/warning--filled/20'; |
| 12 | import IconError from '@carbon/icons-vue/es/error--filled/20'; |
| Yoshie Muranaka | dc04feb | 2019-12-04 08:41:22 -0800 | [diff] [blame] | 13 | |
| 14 | export default { |
| Derick Montague | e2fd156 | 2019-12-20 13:26:53 -0600 | [diff] [blame^] | 15 | name: 'StatusIcon', |
| 16 | props: ['status'], |
| Yoshie Muranaka | dc04feb | 2019-12-04 08:41:22 -0800 | [diff] [blame] | 17 | components: { |
| 18 | iconSuccess: IconCheckmark, |
| 19 | iconDanger: IconWarning, |
| 20 | iconSecondary: IconError |
| 21 | } |
| 22 | }; |
| 23 | </script> |
| 24 | |
| 25 | <style lang="scss" scoped> |
| 26 | .status-icon { |
| 27 | vertical-align: text-bottom; |
| 28 | &.success { |
| 29 | fill: $success; |
| 30 | } |
| 31 | &.danger { |
| 32 | fill: $danger; |
| 33 | } |
| 34 | &.secondary { |
| 35 | fill: $secondary; |
| 36 | } |
| 37 | } |
| 38 | </style> |