[CL-160] Rename BadgeType to BadgeVariant (#7244)

We're establishing a common language for the Component Library. As part of this work we're renaming componentType to variant. Starting with badges.

libs/components/src/badge-list/badge-list.component.html

@@ -1,11 +1,11 @@
 <div class="tw-inline-flex tw-gap-2">
   <ng-container *ngFor="let item of filteredItems; let last = last">
-    <span bitBadge [badgeType]="badgeType" [truncate]="truncate">
+    <span bitBadge [variant]="variant" [truncate]="truncate">
       {{ item }}
     </span>
     <span class="tw-sr-only" *ngIf="!last || isFiltered">, </span>
   </ng-container>
-  <span *ngIf="isFiltered" bitBadge [badgeType]="badgeType">
+  <span *ngIf="isFiltered" bitBadge [variant]="variant">
     {{ "plusNMore" | i18n: (items.length - filteredItems.length).toString() }}
   </span>
 </div>

libs/components/src/badge-list/badge-list.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input, OnChanges } from "@angular/core";
 
-import { BadgeTypes } from "../badge";
+import { BadgeVariant } from "../badge";
 
 @Component({
   selector: "bit-badge-list",
@@ -12,7 +12,7 @@ export class BadgeListComponent implements OnChanges {
   protected filteredItems: string[] = [];
   protected isFiltered = false;
 
-  @Input() badgeType: BadgeTypes = "primary";
+  @Input() variant: BadgeVariant = "primary";
   @Input() items: string[] = [];
   @Input() truncate = true;
 

libs/components/src/badge-list/badge-list.stories.ts

@@ -28,7 +28,7 @@ export default {
     }),
   ],
   args: {
-    badgeType: "primary",
+    variant: "primary",
     truncate: false,
   },
   parameters: {
@@ -45,12 +45,12 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <bit-badge-list [badgeType]="badgeType" [maxItems]="maxItems" [items]="items" [truncate]="truncate"></bit-badge-list>
+      <bit-badge-list [variant]="variant" [maxItems]="maxItems" [items]="items" [truncate]="truncate"></bit-badge-list>
     `,
   }),
 
   args: {
-    badgeType: "info",
+    variant: "info",
     maxItems: 3,
     items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"],
     truncate: false,
@@ -60,7 +60,7 @@ export const Default: Story = {
 export const Truncated: Story = {
   ...Default,
   args: {
-    badgeType: "info",
+    variant: "info",
     maxItems: 3,
     items: ["Badge 1", "Badge 2 containing lengthy text", "Badge 3", "Badge 4", "Badge 5"],
     truncate: true,