-
{{ "loginInitiated" | i18n }}
+
{{ "logInRequestSent" | i18n }}
diff --git a/apps/browser/src/auth/popup/register.component.ts b/apps/browser/src/auth/popup/register.component.ts
index f8a332f0fd1f..50475b2204dc 100644
--- a/apps/browser/src/auth/popup/register.component.ts
+++ b/apps/browser/src/auth/popup/register.component.ts
@@ -13,9 +13,7 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
import { DialogService, ToastService } from "@bitwarden/components";
-import { PasswordGenerationServiceAbstraction } from "@bitwarden/generator-legacy";
import { KeyService } from "@bitwarden/key-management";
@Component({
@@ -34,9 +32,7 @@ export class RegisterComponent extends BaseRegisterComponent {
i18nService: I18nService,
keyService: KeyService,
apiService: ApiService,
- stateService: StateService,
platformUtilsService: PlatformUtilsService,
- passwordGenerationService: PasswordGenerationServiceAbstraction,
environmentService: EnvironmentService,
logService: LogService,
auditService: AuditService,
@@ -51,9 +47,7 @@ export class RegisterComponent extends BaseRegisterComponent {
i18nService,
keyService,
apiService,
- stateService,
platformUtilsService,
- passwordGenerationService,
environmentService,
logService,
auditService,
diff --git a/apps/browser/src/auth/popup/two-factor-auth-duo.component.ts b/apps/browser/src/auth/popup/two-factor-auth-duo.component.ts
index 53aedc7a5f37..687dc6839298 100644
--- a/apps/browser/src/auth/popup/two-factor-auth-duo.component.ts
+++ b/apps/browser/src/auth/popup/two-factor-auth-duo.component.ts
@@ -27,9 +27,6 @@ import { FormFieldModule } from "../../../../../libs/components/src/form-field";
import { LinkModule } from "../../../../../libs/components/src/link";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
-import { I18nPipe } from "../../../../../libs/components/src/shared/i18n.pipe";
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line no-restricted-imports
import { TypographyModule } from "../../../../../libs/components/src/typography";
import { ZonedMessageListenerService } from "../../platform/browser/zoned-message-listener.service";
@@ -50,7 +47,6 @@ import { ZonedMessageListenerService } from "../../platform/browser/zoned-messag
AsyncActionsModule,
FormsModule,
],
- providers: [I18nPipe],
})
export class TwoFactorAuthDuoComponent
extends TwoFactorAuthDuoBaseComponent
diff --git a/apps/browser/src/auth/popup/two-factor-auth-email.component.ts b/apps/browser/src/auth/popup/two-factor-auth-email.component.ts
index 723152adfaba..7afe1eb889ec 100644
--- a/apps/browser/src/auth/popup/two-factor-auth-email.component.ts
+++ b/apps/browser/src/auth/popup/two-factor-auth-email.component.ts
@@ -23,9 +23,6 @@ import { FormFieldModule } from "../../../../../libs/components/src/form-field";
import { LinkModule } from "../../../../../libs/components/src/link";
// FIXME: remove `src` and fix import
// eslint-disable-next-line no-restricted-imports
-import { I18nPipe } from "../../../../../libs/components/src/shared/i18n.pipe";
-// FIXME: remove `src` and fix import
-// eslint-disable-next-line no-restricted-imports
import { TypographyModule } from "../../../../../libs/components/src/typography";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
@@ -46,7 +43,6 @@ import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
AsyncActionsModule,
FormsModule,
],
- providers: [I18nPipe],
})
export class TwoFactorAuthEmailComponent extends TwoFactorAuthEmailBaseComponent implements OnInit {
private dialogService = inject(DialogService);
diff --git a/apps/browser/src/auth/popup/two-factor.component.ts b/apps/browser/src/auth/popup/two-factor.component.ts
index a2f9cd9d0fc9..43230bd23f43 100644
--- a/apps/browser/src/auth/popup/two-factor.component.ts
+++ b/apps/browser/src/auth/popup/two-factor.component.ts
@@ -33,7 +33,7 @@ import { BrowserApi } from "../../platform/browser/browser-api";
import { ZonedMessageListenerService } from "../../platform/browser/zoned-message-listener.service";
import BrowserPopupUtils from "../../platform/popup/browser-popup-utils";
-import { closeTwoFactorAuthPopout } from "./utils/auth-popout-window";
+import { closeTwoFactorAuthWebAuthnPopout } from "./utils/auth-popout-window";
@Component({
selector: "app-two-factor",
@@ -171,7 +171,7 @@ export class TwoFactorComponent extends BaseTwoFactorComponent implements OnInit
// We don't need this window anymore because the intent is for the user to be left
// on the web vault screen which tells them to continue in the browser extension (sidebar or popup)
- await closeTwoFactorAuthPopout();
+ await closeTwoFactorAuthWebAuthnPopout();
};
}
});
diff --git a/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts b/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts
index 9e7d69fad974..deb71f73cd6a 100644
--- a/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts
+++ b/apps/browser/src/auth/popup/utils/auth-popout-window.spec.ts
@@ -7,8 +7,9 @@ import {
openUnlockPopout,
closeUnlockPopout,
openSsoAuthResultPopout,
- openTwoFactorAuthPopout,
- closeTwoFactorAuthPopout,
+ openTwoFactorAuthWebAuthnPopout,
+ closeTwoFactorAuthWebAuthnPopout,
+ closeSsoAuthResultPopout,
} from "./auth-popout-window";
describe("AuthPopoutWindow", () => {
@@ -97,22 +98,30 @@ describe("AuthPopoutWindow", () => {
});
});
- describe("openTwoFactorAuthPopout", () => {
- it("opens a window that facilitates two factor authentication", async () => {
- await openTwoFactorAuthPopout({ data: "data", remember: "remember" });
+ describe("closeSsoAuthResultPopout", () => {
+ it("closes the SSO authentication result popout window", async () => {
+ await closeSsoAuthResultPopout();
+
+ expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.ssoAuthResult);
+ });
+ });
+
+ describe("openTwoFactorAuthWebAuthnPopout", () => {
+ it("opens a window that facilitates two factor authentication via WebAuthn", async () => {
+ await openTwoFactorAuthWebAuthnPopout({ data: "data", remember: "remember" });
expect(openPopoutSpy).toHaveBeenCalledWith(
"popup/index.html#/2fa;webAuthnResponse=data;remember=remember",
- { singleActionKey: AuthPopoutType.twoFactorAuth },
+ { singleActionKey: AuthPopoutType.twoFactorAuthWebAuthn },
);
});
});
- describe("closeTwoFactorAuthPopout", () => {
- it("closes the two-factor authentication window", async () => {
- await closeTwoFactorAuthPopout();
+ describe("closeTwoFactorAuthWebAuthnPopout", () => {
+ it("closes the two-factor authentication WebAuthn window", async () => {
+ await closeTwoFactorAuthWebAuthnPopout();
- expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.twoFactorAuth);
+ expect(closeSingleActionPopoutSpy).toHaveBeenCalledWith(AuthPopoutType.twoFactorAuthWebAuthn);
});
});
});
diff --git a/apps/browser/src/auth/popup/utils/auth-popout-window.ts b/apps/browser/src/auth/popup/utils/auth-popout-window.ts
index 5a0e577807f2..8d6e7fa92cd7 100644
--- a/apps/browser/src/auth/popup/utils/auth-popout-window.ts
+++ b/apps/browser/src/auth/popup/utils/auth-popout-window.ts
@@ -6,7 +6,7 @@ import BrowserPopupUtils from "../../../platform/popup/browser-popup-utils";
const AuthPopoutType = {
unlockExtension: "auth_unlockExtension",
ssoAuthResult: "auth_ssoAuthResult",
- twoFactorAuth: "auth_twoFactorAuth",
+ twoFactorAuthWebAuthn: "auth_twoFactorAuthWebAuthn",
} as const;
const extensionUnlockUrls = new Set([
chrome.runtime.getURL("popup/index.html#/lock"),
@@ -60,26 +60,37 @@ async function openSsoAuthResultPopout(resultData: { code: string; state: string
}
/**
- * Opens a window that facilitates two-factor authentication.
+ * Closes the SSO authentication result popout window.
+ */
+async function closeSsoAuthResultPopout() {
+ await BrowserPopupUtils.closeSingleActionPopout(AuthPopoutType.ssoAuthResult);
+}
+
+/**
+ * Opens a popout that facilitates two-factor authentication via WebAuthn.
*
- * @param twoFactorAuthData - The data from the two-factor authentication.
+ * @param twoFactorAuthWebAuthnData - The data to send ot the popout via query param.
+ * It includes the WebAuthn response and whether to save the 2FA remember me token or not.
*/
-async function openTwoFactorAuthPopout(twoFactorAuthData: { data: string; remember: string }) {
- const { data, remember } = twoFactorAuthData;
+async function openTwoFactorAuthWebAuthnPopout(twoFactorAuthWebAuthnData: {
+ data: string;
+ remember: string;
+}) {
+ const { data, remember } = twoFactorAuthWebAuthnData;
const params =
`webAuthnResponse=${encodeURIComponent(data)};` + `remember=${encodeURIComponent(remember)}`;
const twoFactorUrl = `popup/index.html#/2fa;${params}`;
await BrowserPopupUtils.openPopout(twoFactorUrl, {
- singleActionKey: AuthPopoutType.twoFactorAuth,
+ singleActionKey: AuthPopoutType.twoFactorAuthWebAuthn,
});
}
/**
* Closes the two-factor authentication popout window.
*/
-async function closeTwoFactorAuthPopout() {
- await BrowserPopupUtils.closeSingleActionPopout(AuthPopoutType.twoFactorAuth);
+async function closeTwoFactorAuthWebAuthnPopout() {
+ await BrowserPopupUtils.closeSingleActionPopout(AuthPopoutType.twoFactorAuthWebAuthn);
}
export {
@@ -87,6 +98,7 @@ export {
openUnlockPopout,
closeUnlockPopout,
openSsoAuthResultPopout,
- openTwoFactorAuthPopout,
- closeTwoFactorAuthPopout,
+ closeSsoAuthResultPopout,
+ openTwoFactorAuthWebAuthnPopout,
+ closeTwoFactorAuthWebAuthnPopout,
};
diff --git a/apps/browser/src/autofill/background/abstractions/notification.background.ts b/apps/browser/src/autofill/background/abstractions/notification.background.ts
index ed9d8e6d84b5..1b989283112f 100644
--- a/apps/browser/src/autofill/background/abstractions/notification.background.ts
+++ b/apps/browser/src/autofill/background/abstractions/notification.background.ts
@@ -31,16 +31,10 @@ interface AddUnlockVaultQueueMessage extends NotificationQueueMessage {
type: "unlock";
}
-interface AddRequestFilelessImportQueueMessage extends NotificationQueueMessage {
- type: "fileless-import";
- importType?: string;
-}
-
type NotificationQueueMessageItem =
| AddLoginQueueMessage
| AddChangePasswordQueueMessage
- | AddUnlockVaultQueueMessage
- | AddRequestFilelessImportQueueMessage;
+ | AddUnlockVaultQueueMessage;
type LockedVaultPendingNotificationsData = {
commandToRetry: {
@@ -122,7 +116,6 @@ export {
AddChangePasswordQueueMessage,
AddLoginQueueMessage,
AddUnlockVaultQueueMessage,
- AddRequestFilelessImportQueueMessage,
NotificationQueueMessageItem,
LockedVaultPendingNotificationsData,
AdjustNotificationBarMessageData,
diff --git a/apps/browser/src/autofill/background/notification.background.ts b/apps/browser/src/autofill/background/notification.background.ts
index 5c6ff3c2c8c5..a091256b28d7 100644
--- a/apps/browser/src/autofill/background/notification.background.ts
+++ b/apps/browser/src/autofill/background/notification.background.ts
@@ -14,6 +14,7 @@ import {
} from "@bitwarden/common/autofill/constants";
import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
import { UserNotificationSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/user-notification-settings.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { NeverDomains } from "@bitwarden/common/models/domain/domain-service";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { ServerConfig } from "@bitwarden/common/platform/abstractions/config/server-config";
@@ -24,6 +25,7 @@ import { ThemeStateService } from "@bitwarden/common/platform/theming/theme-stat
import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
import { CipherType } from "@bitwarden/common/vault/enums";
+import { buildCipherIcon } from "@bitwarden/common/vault/icon/build-cipher-icon";
import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
@@ -31,13 +33,13 @@ import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
import { openUnlockPopout } from "../../auth/popup/utils/auth-popout-window";
import { BrowserApi } from "../../platform/browser/browser-api";
import { openAddEditVaultItemPopout } from "../../vault/popup/utils/vault-popout-window";
+import { NotificationCipherData } from "../content/components/cipher/types";
import { NotificationQueueMessageType } from "../enums/notification-queue-message-type.enum";
import { AutofillService } from "../services/abstractions/autofill.service";
import {
AddChangePasswordQueueMessage,
AddLoginQueueMessage,
- AddRequestFilelessImportQueueMessage,
AddUnlockVaultQueueMessage,
ChangePasswordMessageData,
AddLoginMessageData,
@@ -81,6 +83,8 @@ export default class NotificationBackground {
bgGetExcludedDomains: () => this.getExcludedDomains(),
bgGetActiveUserServerConfig: () => this.getActiveUserServerConfig(),
getWebVaultUrlForNotification: () => this.getWebVaultUrl(),
+ notificationRefreshFlagValue: () => this.getNotificationFlag(),
+ bgGetDecryptedCiphers: () => this.getNotificationCipherData(),
};
private activeUserId$ = this.accountService.activeAccount$.pipe(map((a) => a?.id));
@@ -131,6 +135,40 @@ export default class NotificationBackground {
return await firstValueFrom(this.domainSettingsService.neverDomains$);
}
+ /**
+ *
+ * Gets the current active tab and retrieves all decrypted ciphers
+ * for the tab's URL. It constructs and returns an array of `NotificationCipherData` objects.
+ * If no active tab or URL is found, it returns an empty array.
+ *
+ * @returns {Promise
}
+ */
+
+ async getNotificationCipherData(): Promise {
+ const [currentTab, showFavicons, env] = await Promise.all([
+ BrowserApi.getTabFromCurrentWindow(),
+ firstValueFrom(this.domainSettingsService.showFavicons$),
+ firstValueFrom(this.environmentService.environment$),
+ ]);
+ const iconsServerUrl = env.getIconsUrl();
+ const decryptedCiphers = await this.cipherService.getAllDecryptedForUrl(currentTab.url);
+
+ return decryptedCiphers.map((view) => {
+ const { id, name, reprompt, favorite, login } = view;
+ return {
+ id,
+ name,
+ type: CipherType.Login,
+ reprompt,
+ favorite,
+ icon: buildCipherIcon(iconsServerUrl, view, showFavicons),
+ login: login && {
+ username: login.username,
+ },
+ };
+ });
+ }
+
/**
* Gets the active user server config from the config service.
*/
@@ -138,6 +176,15 @@ export default class NotificationBackground {
return await firstValueFrom(this.configService.serverConfig$);
}
+ /**
+ * Gets the current value of the notification refresh feature flag
+ * @returns Promise indicating if the feature is enabled
+ */
+ async getNotificationFlag(): Promise {
+ const flagValue = await this.configService.getFeatureFlag(FeatureFlag.NotificationRefresh);
+ return flagValue;
+ }
+
private async getAuthStatus() {
return await firstValueFrom(this.authService.activeAccountStatus$);
}
@@ -201,11 +248,6 @@ export default class NotificationBackground {
case NotificationQueueMessageType.AddLogin:
typeData.removeIndividualVault = await this.removeIndividualVault();
break;
- case NotificationQueueMessageType.RequestFilelessImport:
- typeData.importType = (
- notificationQueueMessage as AddRequestFilelessImportQueueMessage
- ).importType;
- break;
}
await BrowserApi.tabSendMessageData(tab, "openNotificationBar", {
@@ -399,25 +441,6 @@ export default class NotificationBackground {
}
}
- /**
- * Sets up a notification to request a fileless import when the user
- * attempts to trigger an import from a third party website.
- *
- * @param tab - The tab that we are sending the notification to
- * @param importType - The type of import that is being requested
- */
- async requestFilelessImport(tab: chrome.tabs.Tab, importType: string) {
- const currentAuthStatus = await this.getAuthStatus();
- if (currentAuthStatus !== AuthenticationStatus.Unlocked || this.notificationQueue.length) {
- return;
- }
-
- const loginDomain = Utils.getDomain(tab.url);
- if (loginDomain) {
- await this.pushRequestFilelessImportToQueue(loginDomain, tab, importType);
- }
- }
-
private async pushChangePasswordToQueue(
cipherId: string,
loginDomain: string,
@@ -456,36 +479,6 @@ export default class NotificationBackground {
await this.sendNotificationQueueMessage(tab, message);
}
- /**
- * Pushes a request to start a fileless import to the notification queue.
- * This will display a notification bar to the user, prompting them to
- * start the import.
- *
- * @param loginDomain - The domain of the tab that we are sending the notification to
- * @param tab - The tab that we are sending the notification to
- * @param importType - The type of import that is being requested
- */
- private async pushRequestFilelessImportToQueue(
- loginDomain: string,
- tab: chrome.tabs.Tab,
- importType?: string,
- ) {
- this.removeTabFromNotificationQueue(tab);
- const launchTimestamp = new Date().getTime();
- const message: AddRequestFilelessImportQueueMessage = {
- type: NotificationQueueMessageType.RequestFilelessImport,
- domain: loginDomain,
- tab,
- launchTimestamp,
- expires: new Date(launchTimestamp + 0.5 * 60000), // 30 seconds
- wasVaultLocked: false,
- importType,
- };
- this.notificationQueue.push(message);
- await this.checkNotificationQueue(tab);
- this.removeTabFromNotificationQueue(tab);
- }
-
/**
* Saves a cipher based on the message sent from the notification bar. If the vault
* is locked, the message will be added to the notification queue and the unlock
diff --git a/apps/browser/src/autofill/content/components/.lit-storybook/main.ts b/apps/browser/src/autofill/content/components/.lit-storybook/main.ts
index 9e2da59d992c..9068bbfc27d6 100644
--- a/apps/browser/src/autofill/content/components/.lit-storybook/main.ts
+++ b/apps/browser/src/autofill/content/components/.lit-storybook/main.ts
@@ -1,14 +1,14 @@
-import { dirname, join } from "path";
-import path from "path";
+import path, { dirname, join } from "path";
+
import type { StorybookConfig } from "@storybook/web-components-webpack5";
-import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
import remarkGfm from "remark-gfm";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
const getAbsolutePath = (value: string): string =>
dirname(require.resolve(join(value, "package.json")));
const config: StorybookConfig = {
- stories: ["../lit-stories/**/*.lit-stories.@(js|jsx|ts|tsx)"],
+ stories: ["../lit-stories/**/*.lit-stories.@(js|jsx|ts|tsx)", "../lit-stories/**/*.mdx"],
addons: [
getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"),
diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-info.ts b/apps/browser/src/autofill/content/components/cipher/cipher-info.ts
index de374b44a97a..6ff32353938c 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-info.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-info.ts
@@ -6,10 +6,10 @@ import { Theme } from "@bitwarden/common/platform/enums";
import { themes, typography } from "../../../content/components/constants/styles";
import { CipherInfoIndicatorIcons } from "./cipher-indicator-icons";
-import { CipherData } from "./types";
+import { NotificationCipherData } from "./types";
// @TODO support other cipher types (card, identity, notes, etc)
-export function CipherInfo({ cipher, theme }: { cipher: CipherData; theme: Theme }) {
+export function CipherInfo({ cipher, theme }: { cipher: NotificationCipherData; theme: Theme }) {
const { name, login } = cipher;
return html`
diff --git a/apps/browser/src/autofill/content/components/cipher/cipher-item.ts b/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
index 651c20cac3a4..96b44d2c0cc3 100644
--- a/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
+++ b/apps/browser/src/autofill/content/components/cipher/cipher-item.ts
@@ -12,7 +12,7 @@ import {
import { CipherAction } from "./cipher-action";
import { CipherIcon } from "./cipher-icon";
import { CipherInfo } from "./cipher-info";
-import { CipherData } from "./types";
+import { NotificationCipherData } from "./types";
const cipherIconWidth = "24px";
@@ -22,7 +22,7 @@ export function CipherItem({
notificationType,
theme = ThemeTypes.Light,
}: {
- cipher: CipherData;
+ cipher: NotificationCipherData;
handleAction?: (e: Event) => void;
notificationType?: NotificationType;
theme: Theme;
diff --git a/apps/browser/src/autofill/content/components/cipher/types.ts b/apps/browser/src/autofill/content/components/cipher/types.ts
index acdee756570a..ff29f9b559f1 100644
--- a/apps/browser/src/autofill/content/components/cipher/types.ts
+++ b/apps/browser/src/autofill/content/components/cipher/types.ts
@@ -1,6 +1,4 @@
-// FIXME: Remove when updating file. Eslint update
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const CipherTypes = {
+export const CipherTypes = {
Login: 1,
SecureNote: 2,
Card: 3,
@@ -9,9 +7,7 @@ const CipherTypes = {
type CipherType = (typeof CipherTypes)[keyof typeof CipherTypes];
-// FIXME: Remove when updating file. Eslint update
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const CipherRepromptTypes = {
+export const CipherRepromptTypes = {
None: 0,
Password: 1,
} as const;
@@ -25,13 +21,16 @@ export type WebsiteIconData = {
icon: string;
};
-export type CipherData = {
+type BaseCipherData = {
id: string;
name: string;
- type: CipherType;
+ type: CipherTypeValue;
reprompt: CipherRepromptType;
favorite: boolean;
icon: WebsiteIconData;
+};
+
+export type CipherData = BaseCipherData & {
accountCreationFieldType?: string;
login?: {
username: string;
@@ -46,3 +45,9 @@ export type CipherData = {
username?: string;
};
};
+
+export type NotificationCipherData = BaseCipherData & {
+ login?: {
+ username: string;
+ };
+};
diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx
new file mode 100644
index 000000000000..d3c1968b32f9
--- /dev/null
+++ b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx
@@ -0,0 +1,64 @@
+import { Meta, Controls, Primary } from "@storybook/addon-docs";
+
+import * as stories from "./action-button.lit-stories";
+
+
+
+## Action Button
+
+The `ActionButton` component is a customizable button built using the `lit` library and styled with
+`@emotion/css`. This component supports themes, handles click events, and includes a disabled state.
+It is designed with accessibility and responsive design in mind.
+
+
+
+
+## Props
+
+| **Prop** | **Type** | **Required** | **Description** |
+| -------------- | -------------------------- | ------------ | ----------------------------------------------------------- |
+| `buttonAction` | `(e: Event) => void` | Yes | The function to execute when the button is clicked. |
+| `buttonText` | `string` | Yes | The text to display on the button. |
+| `disabled` | `boolean` (default: false) | No | Disables the button when set to `true`. |
+| `theme` | `Theme` | Yes | The theme to style the button. Must match the `Theme` enum. |
+
+## Installation and Setup
+
+1. Ensure you have the necessary dependencies installed:
+
+ - `lit`: Used to render the component.
+ - `@emotion/css`: Used for styling the component.
+
+2. Pass the required props to the component when rendering:
+ - `buttonAction`: A function that handles the click event.
+ - `buttonText`: The text displayed on the button.
+ - `disabled` (optional): A boolean indicating whether the button is disabled.
+ - `theme`: The theme to style the button (must be a valid `Theme`).
+
+## Accessibility (WCAG) Compliance
+
+The `ActionButton` component follows the
+[W3C ARIA button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/). Below is a breakdown of
+key accessibility considerations:
+
+### Keyboard Accessibility
+
+- The button supports keyboard interaction through the `@click` event.
+- Users can activate the button using the `Enter` or `Space` key.
+
+### Screen Reader Compatibility
+
+- The `title` attribute is dynamically set to the button's text (`buttonText`), ensuring it is read
+ by screen readers.
+- The semantic `