Merge branch 'main' into auth/pm-8221/route-user-to-email-otp-entry-c…

…lients

.github/renovate.json

@@ -4,13 +4,9 @@
   "enabledManagers": ["cargo", "github-actions", "npm"],
   "packageRules": [
     {
-      "groupName": "gh minor",
+      "groupName": "github-action minor",
       "matchManagers": ["github-actions"],
-      "matchUpdateTypes": ["minor", "patch"]
-    },
-    {
-      "matchManagers": ["github-actions"],
-      "commitMessagePrefix": "[deps] BRE:"
+      "matchUpdateTypes": ["minor"]
     },
     {
       "matchManagers": ["cargo"],
@@ -86,6 +82,7 @@
         "prettier",
         "prettier-plugin-tailwindcss",
         "rimraf",
+        "@storybook/web-components-webpack5",
         "tabbable",
         "tldts",
         "wait-on"
@@ -210,10 +207,10 @@
         "eslint-plugin-storybook",
         "eslint-plugin-tailwindcss",
         "husky",
-        "jest-extended",
         "jest-junit",
         "jest-mock-extended",
         "jest-preset-angular",
+        "jest-diff",
         "lint-staged",
         "ts-jest"
       ],

apps/browser/src/_locales/en/messages.json

@@ -4013,6 +4013,9 @@
   "passkeyRemoved": {
     "message": "Passkey removed"
   },
+  "autofillSuggestions": {
+    "message": "Autofill suggestions"
+  },
   "itemSuggestions": {
     "message": "Suggested items"
   },
@@ -4592,12 +4595,6 @@
   "textSends": {
     "message": "Text Sends"
   },
-  "bitwardenNewLook": {
-    "message": "Bitwarden has a new look!"
-  },
-  "bitwardenNewLookDesc": {
-    "message": "It's easier and more intuitive than ever to autofill and search from the Vault tab. Take a look around!"
-  },
   "accountActions": {
     "message": "Account actions"
   },

apps/browser/src/auth/popup/settings/account-security.component.html

@@ -20,7 +20,7 @@ <h2 bitTypography="h6">{{ "unlockMethods" | i18n }}</h2>
             {{ biometricUnavailabilityReason }}
           </bit-hint>
         </bit-form-control>
-        <bit-form-control class="tw-pl-5" *ngIf="this.form.value.biometric">
+        <bit-form-control class="tw-pl-5" *ngIf="this.form.value.biometric && showAutoPrompt">
           <input
             bitCheckbox
             id="autoBiometricsPrompt"

apps/browser/src/auth/popup/settings/account-security.component.ts

@@ -29,6 +29,7 @@ import { PolicyService } from "@bitwarden/common/admin-console/abstractions/poli
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
+import { DeviceType } from "@bitwarden/common/enums";
 import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
@@ -106,6 +107,7 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
   hasVaultTimeoutPolicy = false;
   biometricUnavailabilityReason: string;
   showChangeMasterPass = true;
+  showAutoPrompt = true;
 
   form = this.formBuilder.group({
     vaultTimeout: [null as VaultTimeout | null],
@@ -141,6 +143,11 @@ export class AccountSecurityComponent implements OnInit, OnDestroy {
   ) {}
 
   async ngOnInit() {
+    // Firefox popup closes when unfocused by biometrics, blocking all unlock methods
+    if (this.platformUtilsService.getDevice() === DeviceType.FirefoxExtension) {
+      this.showAutoPrompt = false;
+    }
+
     const hasMasterPassword = await this.userVerificationService.hasMasterPassword();
     this.showMasterPasswordOnClientRestartOption = hasMasterPassword;
     const maximumVaultTimeoutPolicy = this.policyService.get$(PolicyType.MaximumVaultTimeout);

apps/browser/src/autofill/content/components/.lit-storybook/main.ts

@@ -0,0 +1,67 @@
+import { dirname, join } from "path";
+import path from "path";
+import type { StorybookConfig } from "@storybook/web-components-webpack5";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import remarkGfm from "remark-gfm";
+
+const getAbsolutePath = (value: string): string =>
+  dirname(require.resolve(join(value, "package.json")));
+
+const config: StorybookConfig = {
+  stories: ["../lit-stories/**/*.lit-stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-a11y"),
+    getAbsolutePath("@storybook/addon-designs"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+  ],
+  framework: {
+    name: getAbsolutePath("@storybook/web-components-webpack5"),
+    options: {
+      legacyRootApi: true,
+    },
+  },
+  core: {
+    disableTelemetry: true,
+  },
+  env: (existingConfig) => ({
+    ...existingConfig,
+    FLAGS: JSON.stringify({}),
+  }),
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        new TsconfigPathsPlugin({
+          configFile: path.resolve(__dirname, "../../../../../tsconfig.json"),
+        }),
+      ] as any;
+    }
+
+    if (config.module && config.module.rules) {
+      config.module.rules.push({
+        test: /\.(ts|tsx)$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: require.resolve("ts-loader"),
+          },
+        ],
+      });
+    }
+    return config;
+  },
+  docs: {},
+};
+
+export default config;

apps/browser/src/autofill/content/components/lit-stories/buttons/action-button.lit-stories.ts

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { ActionButton } from "../../buttons/action-button";
+
+type Args = {
+  buttonText: string;
+  disabled: boolean;
+  theme: Theme;
+  buttonAction: (e: Event) => void;
+};
+
+export default {
+  title: "Components/Buttons/Action Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => ActionButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

apps/browser/src/autofill/content/components/lit-stories/buttons/badge-button.lit-stories.ts

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { BadgeButton } from "../../buttons/badge-button";
+
+type Args = {
+  buttonAction: (e: Event) => void;
+  buttonText: string;
+  disabled?: boolean;
+  theme: Theme;
+};
+
+export default {
+  title: "Components/Buttons/Badge Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => BadgeButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

apps/browser/src/autofill/content/components/lit-stories/buttons/close-button.lit-stories.ts

@@ -0,0 +1,29 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CloseButton } from "../../buttons/close-button";
+
+type Args = {
+  handleCloseNotification: (e: Event) => void;
+  theme: Theme;
+};
+export default {
+  title: "Components/Buttons/Close Button",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    handleCloseNotification: { control: false },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    handleCloseNotification: () => {
+      alert("Close button clicked!");
+    },
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => CloseButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

apps/browser/src/autofill/content/components/lit-stories/buttons/edit-button.lit-stories.ts

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { EditButton } from "../../buttons/edit-button";
+
+type Args = {
+  buttonAction: (e: Event) => void;
+  buttonText: string;
+  disabled?: boolean;
+  theme: Theme;
+};
+export default {
+  title: "Components/Buttons/Edit Button",
+  argTypes: {
+    buttonText: { control: "text" },
+    disabled: { control: "boolean" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonAction: { control: false },
+  },
+  args: {
+    buttonText: "Click Me",
+    disabled: false,
+    theme: ThemeTypes.Light,
+    buttonAction: () => alert("Clicked"),
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => EditButton({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { NotificationTypes } from "../../../../notification/abstractions/notification-bar";
+import { CipherAction } from "../../cipher/cipher-action";
+
+type Args = {
+  handleAction?: (e: Event) => void;
+  notificationType: typeof NotificationTypes.Change | typeof NotificationTypes.Add;
+  theme: Theme;
+};
+export default {
+  title: "Components/Ciphers/Cipher Action",
+  argTypes: {
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    notificationType: {
+      control: "select",
+      options: [NotificationTypes.Change, NotificationTypes.Add],
+    },
+    handleAction: { control: false },
+  },
+  args: {
+    theme: ThemeTypes.Light,
+    notificationType: NotificationTypes.Change,
+    handleAction: () => {
+      alert("Action triggered!");
+    },
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => CipherAction({ ...args });
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};

apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-icon.lit-stories.ts

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from "@storybook/web-components";
+import { html } from "lit";
+
+import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
+
+import { CipherIcon } from "../../cipher/cipher-icon";
+
+type Args = {
+  color: string;
+  size: string;
+  theme: Theme;
+  uri?: string;
+};
+
+export default {
+  title: "Components/Ciphers/Cipher Icon",
+  argTypes: {
+    color: { control: "color" },
+    size: { control: "text" },
+    theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    uri: { control: "text" },
+  },
+  args: {
+    size: "50px",
+    theme: ThemeTypes.Light,
+    uri: "",
+  },
+} as Meta<Args>;
+
+const Template = (args: Args) => {
+  return html`
+    <div style="width: ${args.size}; height: ${args.size}; overflow: hidden;">
+      ${CipherIcon({ ...args })}
+    </div>
+  `;
+};
+
+export const Default: StoryObj<Args> = {
+  render: Template,
+};