[PM-18804] generator nudges (#14705)

* added generator spotlight to credential generator component

* moved generator spotlight to browser component and add as slot in libs. update copy for send

* added an aria label for the generator nudge body content

* new copy and styles for browser send will be behind feature flag

* update featureflag call to observable in send-v2

* changed how nudge text is made in credential generator

* added new observable to vault nudges to return specific boolean. Update naming of vault types. update observable calls in credential-generator and send-v2

* update send-v2 and credential generator to use new renamed nudges

* update to create nudge generator spotlight component. using this inside the credential generator for nudge spotlight

* fix imports for Nudge related code

* add libs/angular to storybook

---------

Co-authored-by: Nick Krantz <nick@livefront.com>

libs/vault/src/cipher-form/components/new-item-nudge/new-item-nudge.component.ts

@@ -3,14 +3,13 @@ import { Component, Input, OnInit } from "@angular/core";
 import { firstValueFrom } from "rxjs";
 
 import { NudgesService, NudgeType } from "@bitwarden/angular/vault";
+import { SpotlightComponent } from "@bitwarden/angular/vault/components/spotlight/spotlight.component";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherType } from "@bitwarden/sdk-internal";
 
-import { SpotlightComponent } from "../../../components/spotlight/spotlight.component";
-
 @Component({
   selector: "vault-new-item-nudge",
   templateUrl: "./new-item-nudge.component.html",

libs/vault/src/components/spotlight/spotlight.component.html

@@ -1,37 +0,0 @@
-<div
-  class="tw-rounded-2xl tw-bg-primary-100 tw-border-primary-600 tw-border-solid tw-border tw-p-4 tw-pt-3 tw-flex tw-flex-col tw-gap-2"
->
-  <div class="tw-flex tw-justify-between tw-items-start tw-flex-grow">
-    <div>
-      <h2 bitTypography="h4" class="tw-font-semibold !tw-mb-1">{{ title }}</h2>
-      <p
-        *ngIf="subtitle"
-        class="tw-text-main tw-mb-0"
-        bitTypography="body2"
-        [innerHTML]="subtitle"
-      ></p>
-      <ng-content *ngIf="!subtitle"></ng-content>
-    </div>
-    <button
-      type="button"
-      bitIconButton="bwi-close"
-      size="small"
-      *ngIf="!persistent"
-      (click)="handleDismiss()"
-      [attr.title]="'close' | i18n"
-      [attr.aria-label]="'close' | i18n"
-    ></button>
-  </div>
-
-  <button
-    class="tw-w-full"
-    bitButton
-    type="button"
-    buttonType="primary"
-    *ngIf="buttonText"
-    (click)="handleButtonClick($event)"
-  >
-    {{ buttonText }}
-    <i *ngIf="buttonIcon" [ngClass]="buttonIcon" class="bwi tw-ml-1" aria-hidden="true"></i>
-  </button>
-</div>

libs/vault/src/components/spotlight/spotlight.component.ts

@@ -1,34 +0,0 @@
-import { CommonModule } from "@angular/common";
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-
-import { ButtonModule, IconButtonModule, TypographyModule } from "@bitwarden/components";
-import { I18nPipe } from "@bitwarden/ui-common";
-
-@Component({
-  selector: "bit-spotlight",
-  templateUrl: "spotlight.component.html",
-  standalone: true,
-  imports: [ButtonModule, CommonModule, IconButtonModule, I18nPipe, TypographyModule],
-})
-export class SpotlightComponent {
-  // The title of the component
-  @Input({ required: true }) title: string | null = null;
-  // The subtitle of the component
-  @Input() subtitle?: string | null = null;
-  // The text to display on the button
-  @Input() buttonText?: string;
-  // Wheter the component can be dismissed, if true, the component will not show a close button
-  @Input() persistent = false;
-  // Optional icon to display on the button
-  @Input() buttonIcon: string | null = null;
-  @Output() onDismiss = new EventEmitter<void>();
-  @Output() onButtonClick = new EventEmitter();
-
-  handleButtonClick(event: MouseEvent): void {
-    this.onButtonClick.emit(event);
-  }
-
-  handleDismiss(): void {
-    this.onDismiss.emit();
-  }
-}

libs/vault/src/components/spotlight/spotlight.stories.ts

@@ -1,70 +0,0 @@
-import { moduleMetadata, Meta, StoryObj } from "@storybook/angular";
-
-import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import {
-  ButtonModule,
-  I18nMockService,
-  IconButtonModule,
-  TypographyModule,
-} from "@bitwarden/components";
-
-import { SpotlightComponent } from "./spotlight.component";
-
-const meta: Meta<SpotlightComponent> = {
-  title: "Vault/Spotlight",
-  component: SpotlightComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [ButtonModule, IconButtonModule, TypographyModule],
-      providers: [
-        {
-          provide: I18nService,
-          useFactory: () => {
-            return new I18nMockService({
-              close: "Close",
-            });
-          },
-        },
-      ],
-    }),
-  ],
-  args: {
-    title: "Primary",
-    subtitle: "Callout Text",
-    buttonText: "Button",
-  },
-};
-
-export default meta;
-type Story = StoryObj<SpotlightComponent>;
-
-export const Default: Story = {};
-
-export const WithoutButton: Story = {
-  args: {
-    buttonText: undefined,
-  },
-};
-
-export const Persistent: Story = {
-  args: {
-    persistent: true,
-  },
-};
-
-export const WithButtonIcon: Story = {
-  args: {
-    buttonIcon: "bwi bwi-external-link",
-  },
-  render: (args) => ({
-    props: args,
-    template: `
-      <bit-spotlight
-        [title]="title"
-        [subtitle]="subtitle"
-        buttonText="External Link"
-        buttonIcon="bwi-external-link"
-      ></bit-spotlight>
-    `,
-  }),
-};

libs/vault/src/index.ts

@@ -27,5 +27,3 @@ export { SshImportPromptService } from "./services/ssh-import-prompt.service";
 
 export * from "./abstractions/change-login-password.service";
 export * from "./services/default-change-login-password.service";
-
-export { SpotlightComponent } from "./components/spotlight/spotlight.component";