[CL-155] Add support for hiding the close button on banner (#7142)

bitwarden · Dec 8, 2023 · 5a3ac7d · 5a3ac7d
1 parent c4b31c9
commit 5a3ac7d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/libs/components/src/banner/banner.component.html b/libs/components/src/banner/banner.component.html
@@ -9,6 +9,7 @@
     <ng-content></ng-content>
   </span>
   <button
+    *ngIf="showClose"
     type="button"
     bitIconButton="bwi-close"
     buttonType="contrast"

diff --git a/libs/components/src/banner/banner.component.ts b/libs/components/src/banner/banner.component.ts
@@ -17,6 +17,7 @@ export class BannerComponent implements OnInit {
   @Input("bannerType") bannerType: BannerTypes = "info";
   @Input() icon: string;
   @Input() useAlertRole = true;
+  @Input() showClose = true;
 
   @Output() onClose = new EventEmitter<void>();
 

diff --git a/libs/components/src/banner/banner.stories.ts b/libs/components/src/banner/banner.stories.ts
@@ -35,6 +35,7 @@ export default {
   },
   args: {
     bannerType: "warning",
+    showClose: true,
   },
   argTypes: {
     onClose: { action: "onClose" },
@@ -50,7 +51,7 @@ export const Premium: Story = {
   render: (args: BannerComponent) => ({
     props: args,
     template: `
-      <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
+      <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)" [showClose]=showClose>
         Content Really Long Text Lorem Ipsum Ipsum Ipsum
         <button bitLink linkType="contrast">Button</button>
       </bit-banner>
@@ -82,3 +83,10 @@ export const Danger: Story = {
     bannerType: "danger",
   },
 };
+
+export const HideClose: Story = {
+  ...Premium,
+  args: {
+    showClose: false,
+  },
+};