Mocks i18n for at risk notification and creates storybook story.

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",

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;

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;
 }

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: () => {

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;