add correct icon check, moved some conditional logic to a computed prop

Author: BradleySchapf

design-library/src/components/BccBadge/BccBadge.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { BCC_CONTEXTS } from "@/composables/contexts";
 import type { VueComponent } from "@/types";
+import { computed, defineProps, withDefaults } from "vue";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     icon?: VueComponent;
     iconRight?: boolean | VueComponent;
@@ -19,20 +20,23 @@ withDefaults(
     context: "neutral",
   }
 );
+
+const shouldShowRightIcon = computed(() => {
+  return (props.iconRight && typeof props.iconRight !== 'boolean') || (props.icon && props.iconRight === true)
+})
 </script>
 
 <template>
   <div class="bcc-badge" :class="[BCC_CONTEXTS[context], contrast, size, { bordered }]">
     <component
-      v-if="icon && !iconRight"
+      v-if="icon && iconRight !== true"
       :is="icon"
       class="bcc-badge-icon order-1"
     />
     <span class="order-2 empty:hidden"><slot></slot></span>
     <component
       v-if="shouldShowRightIcon"
-      v-if="rightIconComponent"
-      :is="rightIconComponent"
+      :is="typeof iconRight !== 'boolean' ? iconRight : icon"
       class="bcc-badge-icon order-3"
     />
   </div>