Merge branch 'master' into PM-2135-beeep-refactor-and-refresh-web-user-verification-components

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

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

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

@@ -14,6 +14,7 @@ export class BadgeListComponent implements OnChanges {
 
   @Input() badgeType: BadgeTypes = "primary";
   @Input() items: string[] = [];
+  @Input() truncate = true;
 
   @Input()
   get maxItems(): number | undefined {

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

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

libs/components/src/badge/badge.directive.ts

@@ -26,11 +26,12 @@ const hoverStyles: Record<BadgeTypes, string[]> = {
 export class BadgeDirective {
   @HostBinding("class") get classList() {
     return [
-      "tw-inline",
+      "tw-inline-block",
       "tw-py-0.5",
       "tw-px-1.5",
       "tw-font-bold",
       "tw-text-center",
+      "tw-align-text-top",
       "!tw-text-contrast",
       "tw-rounded",
       "tw-border-none",
@@ -44,14 +45,19 @@ export class BadgeDirective {
       "focus:tw-ring-primary-700",
     ]
       .concat(styles[this.badgeType])
-      .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : []);
+      .concat(this.hasHoverEffects ? hoverStyles[this.badgeType] : [])
+      .concat(this.truncate ? ["tw-truncate", "tw-max-w-40"] : []);
+  }
+  @HostBinding("attr.title") get title() {
+    return this.truncate ? this.el.nativeElement.textContent.trim() : null;
   }
 
   @Input() badgeType: BadgeTypes = "primary";
+  @Input() truncate = true;
 
   private hasHoverEffects = false;
 
-  constructor(el: ElementRef<Element>) {
+  constructor(private el: ElementRef<HTMLElement>) {
     this.hasHoverEffects = el?.nativeElement?.nodeName != "SPAN";
   }
 }

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

@@ -14,6 +14,7 @@ export default {
   ],
   args: {
     badgeType: "primary",
+    truncate: false,
   },
   parameters: {
     design: {
@@ -29,11 +30,11 @@ export const Primary: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType">Badge</span>
+      <span class="tw-text-main">Span </span><span bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge containing lengthy text</span>
       <br><br>
-      <span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType">Badge</a>
+      <span class="tw-text-main">Link </span><a href="#" bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</a>
       <br><br>
-      <span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType">Badge</button>
+      <span class="tw-text-main">Button </span><button bitBadge [badgeType]="badgeType" [truncate]="truncate">Badge</button>
     `,
   }),
 };
@@ -72,3 +73,10 @@ export const Info: Story = {
     badgeType: "info",
   },
 };
+
+export const Truncated: Story = {
+  ...Primary,
+  args: {
+    truncate: true,
+  },
+};

libs/components/src/no-items/no-items.component.ts

@@ -1,4 +1,4 @@
-import { Component } from "@angular/core";
+import { Component, Input } from "@angular/core";
 
 import { Icons } from "..";
 
@@ -10,5 +10,5 @@ import { Icons } from "..";
   templateUrl: "./no-items.component.html",
 })
 export class NoItemsComponent {
-  protected icon = Icons.Search;
+  @Input() icon = Icons.Search;
 }

libs/components/src/table/cell.directive.ts

@@ -1,10 +1,10 @@
-import { HostBinding, Directive } from "@angular/core";
+import { Directive, HostBinding } from "@angular/core";
 
 @Directive({
   selector: "th[bitCell], td[bitCell]",
 })
 export class CellDirective {
   @HostBinding("class") get classList() {
-    return ["tw-p-3", "tw-align-middle"];
+    return ["tw-p-3"];
   }
 }

libs/components/src/table/row.directive.ts

@@ -4,7 +4,7 @@ import { Directive, HostBinding, Input } from "@angular/core";
   selector: "tr[bitRow]",
 })
 export class RowDirective {
-  @Input() alignContent: "top" | "middle" | "bottom" | "baseline" = "baseline";
+  @Input() alignContent: "top" | "middle" | "bottom" | "baseline" = "middle";
 
   get alignmentClass(): string {
     switch (this.alignContent) {

libs/components/src/table/table.stories.ts

@@ -1,5 +1,5 @@
 import { ScrollingModule } from "@angular/cdk/scrolling";
-import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
 
 import { countries } from "../form/countries";
 
@@ -62,7 +62,7 @@ export const Default: Story = {
     `,
   }),
   args: {
-    alignRowContent: "baseline",
+    alignRowContent: "middle",
   },
 };