PM-18215 Create UI for confirmation notification message (bitwarden#13364)

* PM-18215 wip

* update storybook url

* optional errors and storybook args

* type safety

* Update apps/browser/src/autofill/content/components/icons/warning.ts

Co-authored-by: Jonathan Prusik <[email protected]>

* updated svg to remove dark or light

---------

Co-authored-by: Jonathan Prusik <[email protected]>

Author: dan-livefront

apps/browser/src/autofill/content/components/icons/index.ts

@@ -10,3 +10,4 @@ export { PartyHorn } from "./party-horn";
 export { PencilSquare } from "./pencil-square";
 export { Shield } from "./shield";
 export { User } from "./user";
+export { Warning } from "./warning";

apps/browser/src/autofill/content/components/icons/party-horn.ts

@@ -0,0 +1,23 @@
+import { html } from "lit";
+
+// This icon has static multi-colors for each theme
+export function Warning() {
+  return html`
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 40 36">
+      <path
+        fill="#FFBF00"
+        d="M15.944 2.483c1.81-3.111 6.303-3.111 8.111 0l15.302 26.319c1.819 3.127-.438 7.049-4.055 7.049H4.698c-3.617 0-5.874-3.922-4.055-7.05L15.944 2.484Z"
+      />
+      <path
+        fill="#0E3781"
+        fill-rule="evenodd"
+        d="M37.735 29.745 22.433 3.425c-1.085-1.866-3.781-1.866-4.866 0L2.265 29.746c-1.091 1.876.263 4.23 2.433 4.23h30.604c2.17 0 3.524-2.354 2.433-4.23ZM24.055 2.483c-1.808-3.111-6.302-3.111-8.11 0L.643 28.802c-1.819 3.127.438 7.049 4.055 7.049h30.604c3.617 0 5.874-3.922 4.055-7.05L24.055 2.484Z"
+        clip-rule="evenodd"
+      />
+      <path
+        fill="#0E3781"
+        d="M21.876 28.345a1.876 1.876 0 1 1-3.752 0 1.876 1.876 0 0 1 3.752 0ZM17.24 11.976a.47.47 0 0 1 .467-.519h4.586c.279 0 .496.242.466.52l-1.307 12.196a.47.47 0 0 1-.466.42h-1.972a.47.47 0 0 1-.466-.42L17.24 11.976Z"
+      />
+    </svg>
+  `;
+}

apps/browser/src/autofill/content/components/icons/warning.ts

@@ -0,0 +1,41 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
+
+import { NotificationConfirmationBody } from "../../notification/confirmation";
+
+type Args = {
+  buttonText: string;
+  confirmationMessage: string;
+  handleClick: () => void;
+  theme: Theme;
+  error: string;
+};
+
+export default {
+  title: "Components/Notifications/Notification Confirmation Body",
+  argTypes: {
+    error: { control: "text" },
+    buttonText: { control: "text" },
+    confirmationMessage: { control: "text" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+  },
+  args: {
+    error: "",
+    buttonText: "View",
+    confirmationMessage: "[item name] updated in Bitwarden.",
+    theme: ThemeTypes.Light,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/design/LEhqLAcBPY8uDKRfU99n9W/Autofill-notification-redesign?node-id=485-20160&m=dev",
+    },
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => NotificationConfirmationBody({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

apps/browser/src/autofill/content/components/lit-stories/notification/confirmation.lit-stories.ts

@@ -0,0 +1,54 @@
+import { css } from "@emotion/css";
+import { html } from "lit";
+
+import { Theme } from "@bitwarden/common/platform/enums";
+
+import { themes } from "../constants/styles";
+
+export function NotificationConfirmationMessage({
+  buttonText,
+  confirmationMessage,
+  handleClick,
+  theme,
+}: {
+  buttonText: string;
+  confirmationMessage: string;
+  handleClick: (e: Event) => void;
+  theme: Theme;
+}) {
+  return html`
+    <span title=${confirmationMessage} class=${notificationConfirmationMessageStyles(theme)}
+      >${confirmationMessage}
+      <a
+        title=${buttonText}
+        class=${notificationConfirmationButtonTextStyles(theme)}
+        @click=${handleClick}
+        >${buttonText}</a
+      ></span
+    >
+  `;
+}
+
+const baseTextStyles = css`
+  flex-grow: 1;
+  overflow-x: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  line-height: 24px;
+  white-space: nowrap;
+  font-family: "DM Sans", sans-serif;
+  font-size: 16px;
+`;
+
+const notificationConfirmationMessageStyles = (theme: Theme) => css`
+  ${baseTextStyles}
+  color: ${themes[theme].text.main};
+  font-weight: 400;
+`;
+
+const notificationConfirmationButtonTextStyles = (theme: Theme) => css`
+  ${baseTextStyles}
+  color: ${themes[theme].primary[600]};
+  font-weight: 700;
+  cursor: pointer;
+`;

apps/browser/src/autofill/content/components/notification/confirmation-message.ts

@@ -0,0 +1,58 @@
+import createEmotion from "@emotion/css/create-instance";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums";
+
+import { themes } from "../constants/styles";
+import { PartyHorn, Warning } from "../icons";
+
+import { NotificationConfirmationMessage } from "./confirmation-message";
+
+export const componentClassPrefix = "notification-confirmation-body";
+
+const { css } = createEmotion({
+  key: componentClassPrefix,
+});
+
+export function NotificationConfirmationBody({
+  buttonText,
+  error,
+  confirmationMessage,
+  theme = ThemeTypes.Light,
+}: {
+  error?: string;
+  buttonText: string;
+  confirmationMessage: string;
+  theme: Theme;
+}) {
+  const IconComponent = !error ? PartyHorn : Warning;
+  return html`
+    <div class=${notificationConfirmationBodyStyles({ theme })}>
+      <div class=${iconContainerStyles(error)}>${IconComponent({ theme })}</div>
+      ${confirmationMessage && buttonText
+        ? NotificationConfirmationMessage({
+            handleClick: () => {},
+            confirmationMessage,
+            theme,
+            buttonText,
+          })
+        : null}
+    </div>
+  `;
+}
+
+const iconContainerStyles = (error?: string) => css`
+  > svg {
+    width: ${!error ? "50px" : "40px"};
+    height: fit-content;
+  }
+`;
+const notificationConfirmationBodyStyles = ({ theme }: { theme: Theme }) => css`
+  gap: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: ${themes[theme].background.alt};
+  padding: 12px;
+  white-space: nowrap;
+`;