From 94b09ef43892c8bf6338b82e7e63c521664c0025 Mon Sep 17 00:00:00 2001
From: Miles Blackwood <mrobinson@bitwarden.com>
Date: Tue, 13 May 2025 10:55:02 -0400
Subject: [PATCH] Mocks i18n for at risk notification and creates storybook
 story.

---
 .../components/lit-stories/mock-data.ts       |  4 ++
 .../container.lit-stories.ts                  | 49 +++++++++++++++++++
 .../at-risk-password/container.ts             |  4 +-
 .../notification/at-risk-password/footer.ts   |  2 +-
 .../content/components/notification/footer.ts |  2 +-
 5 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts

diff --git a/apps/browser/src/autofill/content/components/lit-stories/mock-data.ts b/apps/browser/src/autofill/content/components/lit-stories/mock-data.ts
index d134db3ca6f..601fcae675f 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/mock-data.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/mock-data.ts
@@ -103,6 +103,10 @@ export const mockTasks = [
 
 export const mockI18n = {
   appName: "Bitwarden",
+  atRiskPassword: "At-risk password",
+  atRiskNavigatePrompt: "Navigate",
+  atRiskChangePrompt: "Change",
+  changePassword: "Change password",
   close: "Close",
   collection: "Collection",
   folder: "Folder",
diff --git a/apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts
new file mode 100644
index 00000000000..e66edc5122f
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/notification/at-risk-notification/container.lit-stories.ts
@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { ThemeTypes } from "@bitwarden/common/platform/enums";
+
+import { NotificationTypes } from "../../../../../notification/abstractions/notification-bar";
+import {
+  AtRiskNotification,
+  AtRiskNotificationProps,
+} from "../../../notification/at-risk-password/container";
+import { mockI18n, mockBrowserI18nGetMessage } from "../../mock-data";
+
+export default {
+  title: "Components/Notifications/AtRiskNotification",
+  argTypes: {
+    error: { control: "text" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    type: { control: "select", options: [NotificationTypes.AtRiskPassword] },
+  },
+  args: {
+    error: "",
+    type: NotificationTypes.AtRiskPassword,
+    theme: ThemeTypes.Light,
+    handleCloseNotification: () => alert("Close notification action triggered"),
+    params: {
+      passwordChangeUri: "https://webtests.dev", // Remove to see "navigate" version of notification
+      organizationName: "Acme Co.",
+    },
+    i18n: mockI18n,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/LEhqLAcBPY8uDKRfU99n9W/Autofill-notification-redesign?node-id=485-20160&m=dev",
+    },
+  },
+} as Meta<AtRiskNotificationProps>;
+
+const Template = (args: AtRiskNotificationProps) => AtRiskNotification({ ...args });
+
+export const Default: StoryObj<AtRiskNotificationProps> = {
+  render: Template,
+};
+
+window.chrome = {
+  ...window.chrome,
+  i18n: {
+    getMessage: mockBrowserI18nGetMessage,
+  },
+} as typeof chrome;
diff --git a/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts b/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts
index 957a3028d78..161c0885ff2 100644
--- a/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/container.ts
@@ -48,7 +48,7 @@ export function AtRiskNotification({
           passwordChangeUri ? "atRiskChangePrompt" : "atRiskNavigatePrompt",
           organizationName,
         ),
-      })};
+      })}
       ${AtRiskNotificationFooter({
         i18n,
         theme,
@@ -59,5 +59,5 @@ export function AtRiskNotification({
 }
 
 function getHeaderMessage(i18n: I18n, type?: NotificationType) {
-  return type === NotificationTypes.AtRiskPassword ? i18n.changePassword : undefined;
+  return type === NotificationTypes.AtRiskPassword ? i18n.atRiskPassword : undefined;
 }
diff --git a/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts b/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts
index 8848922242b..30b7567a48b 100644
--- a/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/at-risk-password/footer.ts
@@ -19,7 +19,7 @@ export function AtRiskNotificationFooter({
   theme,
   passwordChangeUri,
 }: AtRiskNotificationFooterProps) {
-  return html`<div class=${notificationFooterStyles({ theme })}>
+  return html`<div class=${notificationFooterStyles({ isChangeNotification: false })}>
     ${passwordChangeUri &&
     ActionButton({
       handleClick: () => {
diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts
index ba9a2b2f3a6..655fcafcc81 100644
--- a/apps/browser/src/autofill/content/components/notification/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/footer.ts
@@ -61,7 +61,7 @@ export const displayFlex = css`
   display: flex;
 `;
 
-const notificationFooterStyles = ({
+export const notificationFooterStyles = ({
   isChangeNotification,
 }: {
   isChangeNotification: boolean;