[CL-988] Update no items component to status lockup design

apps/browser/src/autofill/popup/fido2/fido2.component.html

@@ -51,7 +51,8 @@ <h2 bitTypography="h6">{{ "chooseCipherForPasskeySave" | i18n }}</h2>
               }
             }
             @if (!displayedCiphers.length) {
-              <bit-no-items [icon]="noResultsIcon">
+              <bit-status-lockup>
+                <bit-svg slot="graphic" [content]="noResultsIcon"></bit-svg>
                 <ng-container slot="title">{{
                   (hasSearched ? "noItemsMatchSearch" : "noMatchingLoginsForSite") | i18n
                 }}</ng-container>
@@ -69,7 +70,7 @@ <h2 bitTypography="h6">{{ "chooseCipherForPasskeySave" | i18n }}</h2>
                 >
                   {{ (hasSearched ? "multiSelectClearAll" : "savePasskeyNewLogin") | i18n }}
                 </button>
-              </bit-no-items>
+              </bit-status-lockup>
             }
           </bit-section>
         }
@@ -101,7 +102,8 @@ <h2 bitTypography="h6">{{ "chooseCipherForPasskeySave" | i18n }}</h2>
                 ></app-fido2-cipher-row>
               }
             } @else {
-              <bit-no-items [icon]="noResultsIcon">
+              <bit-status-lockup>
+                <bit-svg slot="graphic" [content]="noResultsIcon"></bit-svg>
                 <ng-container slot="title">{{
                   (hasSearched ? "noItemsMatchSearch" : "noMatchingLoginsForSite") | i18n
                 }}</ng-container>
@@ -118,7 +120,7 @@ <h2 bitTypography="h6">{{ "chooseCipherForPasskeySave" | i18n }}</h2>
                 >
                   {{ (hasSearched ? "multiSelectClearAll" : "savePasskeyNewLogin") | i18n }}
                 </button>
-              </bit-no-items>
+              </bit-status-lockup>
             }
           </bit-section>
         }

apps/browser/src/autofill/popup/fido2/fido2.component.ts

@@ -37,10 +37,11 @@ import {
   ButtonModule,
   DialogService,
   ItemModule,
-  NoItemsModule,
+  StatusLockupComponent,
   SearchModule,
   SectionComponent,
   SectionHeaderComponent,
+  SvgComponent,
 } from "@bitwarden/components";
 import { PasswordRepromptService } from "@bitwarden/vault";
 
@@ -82,12 +83,13 @@ interface ViewData {
     FormsModule,
     ItemModule,
     JslibModule,
-    NoItemsModule,
+    StatusLockupComponent,
     PopupHeaderComponent,
     PopupPageComponent,
     SearchModule,
     SectionComponent,
     SectionHeaderComponent,
+    SvgComponent,
   ],
 })
 export class Fido2Component implements OnInit, OnDestroy {

apps/browser/src/platform/popup/layout/popup-layout.stories.ts

@@ -14,6 +14,7 @@ import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/an
 import {
   GeneratorActive,
   GeneratorInactive,
+  NoResults,
   SendActive,
   SendInactive,
   SettingsActive,
@@ -42,10 +43,11 @@ import {
   I18nMockService,
   IconButtonModule,
   ItemModule,
-  NoItemsModule,
+  StatusLockupComponent,
   SearchModule,
   SectionComponent,
   ScrollLayoutDirective,
+  SvgComponent,
 } from "@bitwarden/components";
 
 import { VaultLoadingSkeletonComponent } from "../../../vault/popup/components/vault-loading-skeleton/vault-loading-skeleton.component";
@@ -723,14 +725,15 @@ export default {
         MockSettingsPageComponent,
         MockVaultPagePoppedComponent,
         MockVaultTablePageComponent,
-        NoItemsModule,
+        StatusLockupComponent,
         VaultComponent,
         ScrollingModule,
         ItemModule,
         SectionComponent,
         IconButtonModule,
         ChipActionComponent,
         VaultLoadingSkeletonComponent,
+        SvgComponent,
       ],
       providers: [
         popupLayoutI18nProvider,
@@ -987,7 +990,10 @@ export const PoppedOut: Story = {
 
 export const CenteredContent: Story = {
   render: (args) => ({
-    props: args,
+    props: {
+      icon: NoResults,
+      ...args,
+    },
     template: /* HTML */ `
       <extension-container>
         <popup-tab-navigation>
@@ -997,10 +1003,11 @@ export const CenteredContent: Story = {
               class="tw-h-full tw-flex tw-items-center tw-justify-center tw-text-main tw-flex-col"
             >
               <h2 bitTypography="h2" class="tw-mb-6">Page with no content</h2>
-              <bit-no-items>
+              <bit-status-lockup>
+                <bit-svg slot="graphic" [content]="icon"></bit-svg>
                 <ng-container slot="title">Before centering a div</ng-container>
                 <ng-container slot="description">One must first center oneself</ng-container>
-              </bit-no-items>
+              </bit-status-lockup>
             </div>
           </popup-page>
         </popup-tab-navigation>

apps/browser/src/tools/popup/send-v2/send-v2.component.html

@@ -20,29 +20,31 @@
     *ngIf="listState === sendState.Empty"
     class="tw-flex tw-flex-col tw-h-full tw-justify-center"
   >
-    <bit-no-items [icon]="noItemIcon" class="tw-text-main">
+    <bit-status-lockup class="tw-text-main">
+      <bit-svg slot="graphic" [content]="noItemIcon"></bit-svg>
       <ng-container slot="title">{{ "sendsTitleNoItems" | i18n }}</ng-container>
-      <ng-container slot="description">
-        <p bitTypography="body2" class="tw-mx-6 tw-mt-2">{{ "sendsBodyNoItems" | i18n }}</p>
-      </ng-container>
+      <div slot="description" class="tw-mx-6">
+        {{ "sendsBodyNoItems" | i18n }}
+      </div>
       <tools-new-send-dropdown
         [hideIcon]="true"
         *ngIf="!sendsDisabled"
         slot="button"
         [buttonType]="'secondary'"
       ></tools-new-send-dropdown>
-    </bit-no-items>
+    </bit-status-lockup>
   </div>
 
   <ng-container *ngIf="listState !== sendState.Empty && !(showSkeletonsLoaders$ | async)">
     <div
       *ngIf="listState === sendState.NoResults"
       class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12"
     >
-      <bit-no-items [icon]="noResultsIcon">
+      <bit-status-lockup>
+        <bit-svg slot="graphic" [content]="noResultsIcon"></bit-svg>
         <ng-container slot="title">{{ "noItemsMatchSearch" | i18n }}</ng-container>
         <ng-container slot="description">{{ "clearFiltersOrTryAnother" | i18n }}</ng-container>
-      </bit-no-items>
+      </bit-status-lockup>
     </div>
     <app-send-list-items-container [headerText]="title | i18n" [sends]="sends$ | async" />
   </ng-container>

apps/browser/src/tools/popup/send-v2/send-v2.component.spec.ts

@@ -22,7 +22,7 @@ import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.s
 import { SendService } from "@bitwarden/common/tools/send/services/send.service.abstraction";
 import { SendType } from "@bitwarden/common/tools/send/types/send-type";
 import { SearchService } from "@bitwarden/common/vault/abstractions/search.service";
-import { ButtonModule, NoItemsModule } from "@bitwarden/components";
+import { ButtonModule, StatusLockupComponent } from "@bitwarden/components";
 import {
   NewSendDropdownComponent,
   SendListItemsContainerComponent,
@@ -77,7 +77,7 @@ describe("SendV2Component", () => {
         JslibModule,
         ReactiveFormsModule,
         ButtonModule,
-        NoItemsModule,
+        StatusLockupComponent,
         NewSendDropdownComponent,
         SendListItemsContainerComponent,
         SendListFiltersComponent,

apps/browser/src/tools/popup/send-v2/send-v2.component.ts

@@ -14,8 +14,8 @@ import { skeletonLoadingDelay } from "@bitwarden/common/vault/utils/skeleton-loa
 import {
   ButtonModule,
   CalloutModule,
-  NoItemsModule,
-  TypographyModule,
+  StatusLockupComponent,
+  SvgComponent,
 } from "@bitwarden/components";
 import {
   NewSendDropdownComponent,
@@ -60,15 +60,15 @@ export type SendState = (typeof SendState)[keyof typeof SendState];
     PopupHeaderComponent,
     PopOutComponent,
     CurrentAccountComponent,
-    NoItemsModule,
+    StatusLockupComponent,
     JslibModule,
     CommonModule,
     ButtonModule,
     NewSendDropdownComponent,
     SendListItemsContainerComponent,
     SendListFiltersComponent,
     SendSearchComponent,
-    TypographyModule,
+    SvgComponent,
     VaultFadeInOutSkeletonComponent,
     VaultLoadingSkeletonComponent,
   ],

apps/browser/src/vault/popup/components/vault/new-item-dropdown/new-item-dropdown.component.spec.ts

@@ -17,7 +17,7 @@ import {
   RestrictedCipherType,
   RestrictedItemTypesService,
 } from "@bitwarden/common/vault/services/restricted-item-types.service";
-import { ButtonModule, DialogService, MenuModule, NoItemsModule } from "@bitwarden/components";
+import { ButtonModule, DialogService, MenuModule } from "@bitwarden/components";
 import { GlobalStateProvider } from "@bitwarden/state";
 import { FakeGlobalStateProvider } from "@bitwarden/state-test-utils";
 
@@ -71,7 +71,6 @@ describe("NewItemDropdownComponent", () => {
         RouterLink,
         ButtonModule,
         MenuModule,
-        NoItemsModule,
         NewItemDropdownComponent,
       ],
       providers: [

apps/browser/src/vault/popup/components/vault/new-item-dropdown/new-item-dropdown.component.ts

@@ -13,13 +13,7 @@ import { CollectionId, OrganizationId } from "@bitwarden/common/types/guid";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { CipherMenuItem, CIPHER_MENU_ITEMS } from "@bitwarden/common/vault/types/cipher-menu-items";
-import {
-  ButtonModule,
-  DialogService,
-  MenuModule,
-  NoItemsModule,
-  TooltipDirective,
-} from "@bitwarden/components";
+import { ButtonModule, DialogService, MenuModule, TooltipDirective } from "@bitwarden/components";
 import { AddEditFolderDialogComponent } from "@bitwarden/vault";
 
 import { BrowserApi } from "../../../../../platform/browser/browser-api";
@@ -37,15 +31,7 @@ export interface NewItemInitialValues {
 @Component({
   selector: "app-new-item-dropdown",
   templateUrl: "new-item-dropdown.component.html",
-  imports: [
-    NoItemsModule,
-    JslibModule,
-    CommonModule,
-    ButtonModule,
-    RouterLink,
-    MenuModule,
-    TooltipDirective,
-  ],
+  imports: [JslibModule, CommonModule, ButtonModule, RouterLink, MenuModule, TooltipDirective],
 })
 export class NewItemDropdownComponent implements OnInit {
   cipherType = CipherType;

apps/browser/src/vault/popup/components/vault/vault.component.html

@@ -14,13 +14,12 @@
   @if (vaultState === VaultStateEnum.Empty) {
     <vault-fade-in-out>
       <div class="tw-flex tw-flex-col tw-h-full tw-justify-center">
-        <bit-no-items [icon]="vaultIcon">
+        <bit-status-lockup>
+          <bit-svg slot="graphic" [content]="vaultIcon"></bit-svg>
           <ng-container slot="title">{{ "yourVaultIsEmpty" | i18n }}</ng-container>
-          <ng-container slot="description">
-            <p bitTypography="body2" class="tw-mx-6 tw-mt-2">
-              {{ "emptyVaultDescription" | i18n }}
-            </p>
-          </ng-container>
+          <div slot="description" class="tw-mx-6">
+            {{ "emptyVaultDescription" | i18n }}
+          </div>
           <a
             slot="button"
             bitButton
@@ -30,7 +29,7 @@
           >
             {{ "newLogin" | i18n }}
           </a>
-        </bit-no-items>
+        </bit-status-lockup>
       </div>
     </vault-fade-in-out>
   }
@@ -114,23 +113,25 @@
   @if (vaultState !== VaultStateEnum.Empty) {
     @if (vaultState === VaultStateEnum.NoResults) {
       <div class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12">
-        <bit-no-items [icon]="noResultsIcon">
+        <bit-status-lockup>
+          <bit-svg slot="graphic" [content]="noResultsIcon"></bit-svg>
           <ng-container slot="title">{{ "noItemsMatchSearch" | i18n }}</ng-container>
           <ng-container slot="description">{{ "clearFiltersOrTryAnother" | i18n }}</ng-container>
-        </bit-no-items>
+        </bit-status-lockup>
       </div>
     }
 
     <!-- For better consistency with screen readers, the role/aria needs to be on an element that isn't dynamic by @if -->
     <div role="status" aria-live="polite">
       @if (vaultState === VaultStateEnum.DeactivatedOrg) {
         <div class="tw-flex tw-flex-col tw-justify-center tw-h-auto tw-pt-12">
-          <bit-no-items [icon]="deactivatedIcon">
+          <bit-status-lockup>
+            <bit-svg slot="graphic" [content]="deactivatedIcon"></bit-svg>
             <ng-container slot="title">
               {{ "organizationIsDeactivated" | i18n }}
             </ng-container>
             <ng-container slot="description">{{ "contactYourOrgAdmin" | i18n }}</ng-container>
-          </bit-no-items>
+          </bit-status-lockup>
         </div>
       }
     </div>

apps/browser/src/vault/popup/components/vault/vault.component.ts

@@ -45,8 +45,9 @@ import { skeletonLoadingDelay } from "@bitwarden/common/vault/utils/skeleton-loa
 import {
   ButtonModule,
   DialogService,
-  NoItemsModule,
+  StatusLockupComponent,
   ScrollLayoutService,
+  SvgComponent,
   ToastService,
   TypographyModule,
   CalloutModule,
@@ -102,7 +103,7 @@ type VaultState = UnionOfValues<typeof VaultState>;
     PopupHeaderComponent,
     PopOutComponent,
     CurrentAccountComponent,
-    NoItemsModule,
+    StatusLockupComponent,
     JslibModule,
     CommonModule,
     AutofillVaultListItemsComponent,
@@ -114,6 +115,7 @@ type VaultState = UnionOfValues<typeof VaultState>;
     AtRiskPasswordCalloutComponent,
     CalloutModule,
     RouterModule,
+    SvgComponent,
     TypographyModule,
     VaultLoadingSkeletonComponent,
     VaultFadeInOutSkeletonComponent,

apps/browser/src/vault/popup/settings/archive.component.html

@@ -107,14 +107,15 @@ <h2 bitTypography="h6">
         </bit-item-group>
       </bit-section>
     } @else {
-      <bit-no-items class="tw-flex tw-h-full tw-items-center tw-justify-center">
+      <bit-status-lockup class="tw-flex tw-h-full tw-items-center tw-justify-center">
+        <bit-svg slot="graphic" [content]="noItemsIcon"></bit-svg>
         <ng-container slot="title">
           {{ "noItemsInArchive" | i18n }}
         </ng-container>
         <ng-container slot="description">
           {{ "noItemsInArchiveDesc" | i18n }}
         </ng-container>
-      </bit-no-items>
+      </bit-status-lockup>
     }
   }
 </popup-page>