[EC-457] Component library icon buttons

libs/components/src/banner/banner.component.html

@@ -1,5 +1,5 @@
 <div
-  class="tw-flex tw-items-center tw-gap-2 tw-py-2.5 tw-px-4 tw-text-contrast"
+  class="tw-flex tw-items-center tw-gap-2 tw-py-2.5 tw-px-4 tw-pr-2.5 tw-text-contrast"
   [ngClass]="bannerClass"
   [attr.role]="useAlertRole ? 'status' : null"
   [attr.aria-live]="useAlertRole ? 'polite' : null"
@@ -8,7 +8,12 @@
   <span class="tw-grow tw-text-base">
     <ng-content></ng-content>
   </span>
-  <button class="tw-border-0 tw-bg-transparent tw-p-0 tw-text-contrast" (click)="onClose.emit()">
-    <i class="bwi bwi-close tw-text-sm" *ngIf="icon" aria-hidden="true"></i>
-  </button>
+  <button
+    bitIconButton="bwi-close"
+    buttonType="contrast"
+    size="default"
+    (click)="onClose.emit()"
+    [attr.title]="'close' | i18n"
+    [attr.aria-label]="'close' | i18n"
+  ></button>
 </div>

libs/components/src/banner/banner.component.spec.ts

@@ -1,5 +1,10 @@
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { SharedModule } from "../shared/shared.module";
+import { I18nMockService } from "../utils/i18n-mock.service";
+
 import { BannerComponent } from "./banner.component";
 
 describe("BannerComponent", () => {
@@ -8,7 +13,17 @@ describe("BannerComponent", () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [SharedModule],
       declarations: [BannerComponent],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () =>
+            new I18nMockService({
+              close: "Close",
+            }),
+        },
+      ],
     }).compileComponents();
 
     fixture = TestBed.createComponent(BannerComponent);

libs/components/src/banner/banner.module.ts

@@ -1,10 +1,13 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
 
+import { IconButtonModule } from "../icon-button";
+import { SharedModule } from "../shared/shared.module";
+
 import { BannerComponent } from "./banner.component";
 
 @NgModule({
-  imports: [CommonModule],
+  imports: [CommonModule, SharedModule, IconButtonModule],
   exports: [BannerComponent],
   declarations: [BannerComponent],
 })

libs/components/src/banner/banner.stories.ts

@@ -1,19 +1,43 @@
-import { Meta, Story } from "@storybook/angular";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
+import { IconButtonModule } from "../icon-button";
+import { SharedModule } from "../shared/shared.module";
+import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { BannerComponent } from "./banner.component";
 
 export default {
   title: "Component Library/Banner",
   component: BannerComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [SharedModule, IconButtonModule],
+      providers: [
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              close: "Close",
+            });
+          },
+        },
+      ],
+    }),
+  ],
   args: {
     bannerType: "warning",
   },
+  argTypes: {
+    onClose: { action: "onClose" },
+  },
 } as Meta;
 
 const Template: Story<BannerComponent> = (args: BannerComponent) => ({
   props: args,
   template: `
-    <bit-banner [bannerType]="bannerType">Content Really Long Text Lorem Ipsum Ipsum Ipsum <button>Button</button></bit-banner>
+    <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">Content Really Long Text Lorem Ipsum Ipsum Ipsum <button>Button</button></bit-banner>
   `,
 });
 

libs/components/src/button/button.directive.ts

@@ -9,8 +9,6 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "!tw-text-contrast",
     "hover:tw-bg-primary-700",
     "hover:tw-border-primary-700",
-    "focus:tw-bg-primary-700",
-    "focus:tw-border-primary-700",
   ],
   secondary: [
     "tw-bg-transparent",
@@ -19,9 +17,6 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "hover:tw-bg-secondary-500",
     "hover:tw-border-secondary-500",
     "hover:!tw-text-contrast",
-    "focus:tw-bg-secondary-500",
-    "focus:tw-border-secondary-500",
-    "focus:!tw-text-contrast",
   ],
   danger: [
     "tw-bg-transparent",
@@ -30,9 +25,6 @@ const buttonStyles: Record<ButtonTypes, string[]> = {
     "hover:tw-bg-danger-500",
     "hover:tw-border-danger-500",
     "hover:!tw-text-contrast",
-    "focus:tw-bg-danger-500",
-    "focus:tw-border-danger-500",
-    "focus:!tw-text-contrast",
   ],
 };
 
@@ -55,10 +47,10 @@ export class ButtonDirective {
       "disabled:tw-border-secondary-100",
       "disabled:!tw-text-main",
       "focus:tw-outline-none",
-      "focus:tw-ring",
-      "focus:tw-ring-offset-2",
-      "focus:tw-ring-primary-700",
-      "focus:tw-z-10",
+      "focus-visible:tw-ring",
+      "focus-visible:tw-ring-offset-2",
+      "focus-visible:tw-ring-primary-700",
+      "focus-visible:tw-z-10",
     ]
       .concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
       .concat(buttonStyles[this.buttonType ?? "secondary"]);

libs/components/src/dialog/dialog.module.ts

@@ -1,6 +1,7 @@
 import { DialogModule as CdkDialogModule } from "@angular/cdk/dialog";
 import { NgModule } from "@angular/core";
 
+import { IconButtonModule } from "../icon-button";
 import { SharedModule } from "../shared";
 
 import { DialogService } from "./dialog.service";
@@ -10,11 +11,11 @@ import { DialogTitleContainerDirective } from "./directives/dialog-title-contain
 import { SimpleDialogComponent } from "./simple-dialog/simple-dialog.component";
 
 @NgModule({
-  imports: [SharedModule, CdkDialogModule],
+  imports: [SharedModule, IconButtonModule, CdkDialogModule],
   declarations: [
     DialogCloseDirective,
-    DialogComponent,
     DialogTitleContainerDirective,
+    DialogComponent,
     SimpleDialogComponent,
   ],
   exports: [CdkDialogModule, DialogComponent, SimpleDialogComponent],

libs/components/src/dialog/dialog/dialog.component.html

@@ -3,19 +3,19 @@
   class="tw-my-4 tw-flex tw-max-h-screen tw-flex-col tw-overflow-hidden tw-rounded tw-border tw-border-solid tw-border-secondary-300 tw-bg-text-contrast tw-text-main"
 >
   <div
-    class="tw-flex tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
+    class="tw-flex tw-items-center tw-gap-4 tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300 tw-p-4"
   >
     <h1 bitDialogTitleContainer class="tw-mb-0 tw-grow tw-text-lg tw-uppercase">
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h1>
     <button
+      bitIconButton="bwi-close"
+      buttonType="main"
+      size="default"
       bitDialogClose
-      class="tw-border-0 tw-bg-transparent tw-p-0"
-      title="{{ 'close' | i18n }}"
-      attr.aria-label="{{ 'close' | i18n }}"
-    >
-      <i class="bwi bwi-close tw-text-xs tw-font-bold tw-text-main" aria-hidden="true"></i>
-    </button>
+      [attr.title]="'close' | i18n"
+      [attr.aria-label]="'close' | i18n"
+    ></button>
   </div>
 
   <div class="tw-overflow-y-auto tw-p-4 tw-pb-8">

libs/components/src/dialog/dialog/dialog.stories.ts

@@ -3,6 +3,7 @@ import { Meta, moduleMetadata, Story } from "@storybook/angular";
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 
 import { ButtonModule } from "../../button";
+import { IconButtonModule } from "../../icon-button";
 import { SharedModule } from "../../shared";
 import { I18nMockService } from "../../utils/i18n-mock.service";
 import { DialogCloseDirective } from "../directives/dialog-close.directive";
@@ -15,7 +16,7 @@ export default {
   component: DialogComponent,
   decorators: [
     moduleMetadata({
-      imports: [SharedModule, ButtonModule],
+      imports: [ButtonModule, SharedModule, IconButtonModule],
       declarations: [DialogTitleContainerDirective, DialogCloseDirective],
       providers: [
         {
@@ -38,6 +39,9 @@ export default {
       url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library",
     },
   },
+  argTypes: {
+    onClose: { action: "onClose" },
+  },
 } as Meta;
 
 const Template: Story<DialogComponent> = (args: DialogComponent) => ({
@@ -46,9 +50,16 @@ const Template: Story<DialogComponent> = (args: DialogComponent) => ({
   <bit-dialog [dialogSize]="dialogSize">
     <span bitDialogTitle>{{title}}</span>
     <span bitDialogContent>Dialog body text goes here.</span>
-    <div bitDialogFooter class="tw-flex tw-flex-row tw-gap-2">
+    <div bitDialogFooter class="tw-flex tw-items-center tw-flex-row tw-gap-2">
       <button bitButton buttonType="primary">Save</button>
       <button bitButton buttonType="secondary">Cancel</button>
+      <button
+        class="tw-ml-auto"
+        bitIconButton="bwi-trash"
+        buttonType="danger"
+        size="default"
+        title="Delete"
+        aria-label="Delete"></button>
     </div>
   </bit-dialog>
   `,

libs/components/src/dialog/simple-dialog.service.stories.ts

@@ -2,9 +2,15 @@ import { DialogModule, DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
+import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
+
 import { ButtonModule } from "../button";
+import { IconButtonModule } from "../icon-button";
+import { SharedModule } from "../shared/shared.module";
+import { I18nMockService } from "../utils/i18n-mock.service";
 
 import { DialogService } from "./dialog.service";
+import { DialogComponent } from "./dialog/dialog.component";
 import { DialogCloseDirective } from "./directives/dialog-close.directive";
 import { DialogTitleContainerDirective } from "./directives/dialog-title-container.directive";
 import { SimpleDialogComponent } from "./simple-dialog/simple-dialog.component";
@@ -60,13 +66,24 @@ export default {
   decorators: [
     moduleMetadata({
       declarations: [
+        DialogComponent,
+        StoryDialogContentComponent,
         DialogCloseDirective,
-        SimpleDialogComponent,
         DialogTitleContainerDirective,
-        StoryDialogContentComponent,
+        SimpleDialogComponent,
+      ],
+      imports: [SharedModule, IconButtonModule, ButtonModule, DialogModule],
+      providers: [
+        DialogService,
+        {
+          provide: I18nService,
+          useFactory: () => {
+            return new I18nMockService({
+              close: "Close",
+            });
+          },
+        },
       ],
-      imports: [ButtonModule, DialogModule],
-      providers: [DialogService],
     }),
   ],
   parameters: {

libs/components/src/dialog/simple-dialog/simple-dialog.stories.ts

@@ -1,6 +1,7 @@
 import { Meta, moduleMetadata, Story } from "@storybook/angular";
 
 import { ButtonModule } from "../../button";
+import { SharedModule } from "../../shared";
 import { DialogTitleContainerDirective } from "../directives/dialog-title-container.directive";
 
 import { IconDirective, SimpleDialogComponent } from "./simple-dialog.component";
@@ -10,7 +11,7 @@ export default {
   component: SimpleDialogComponent,
   decorators: [
     moduleMetadata({
-      imports: [ButtonModule],
+      imports: [ButtonModule, SharedModule],
       declarations: [IconDirective, DialogTitleContainerDirective],
     }),
   ],