diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-action.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-action.mdx deleted file mode 100644 index 3b5dcd8797a..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-action.mdx +++ /dev/null @@ -1,83 +0,0 @@ -import { Meta, Controls, Primary } from "@storybook/addon-docs"; - -import * as stories from "./cipher-action.lit-stories"; - - - -## Cipher Action - -The `CipherAction` component is a functional UI element that handles actions related to ciphers in a -secure environment. Built with the `lit` library and styled for consistency across themes, it -provides flexibility and accessibility while supporting various notification types. - - - - -## Props - -| **Prop** | **Type** | **Required** | **Description** | -| ------------------ | --------------------------------------------------- | ------------ | -------------------------------------------------------------- | -| `handleAction` | `(e: Event) => void` | No | Function to execute when an action is triggered. | -| `notificationType` | `NotificationTypes.Change \| NotificationTypes.Add` | Yes | Specifies the type of notification associated with the action. | -| `theme` | `Theme` | Yes | The theme to style the component. Must match the `Theme` enum. | - -## Installation and Setup - -1. Ensure the necessary dependencies are installed: - - - `lit`: Used to render the component. - -2. Pass the required props when rendering the component: - - `handleAction`: Optional function to handle the triggered action. - - `notificationType`: Mandatory type from `NotificationTypes` to define the action context. - - `theme`: The styling theme (must be a valid `Theme` enum value). - -## Accessibility (WCAG) Compliance - -The `CipherAction` component is designed to be accessible, ensuring usability across diverse user -bases. Below are the key considerations for accessibility: - -### Keyboard Accessibility - -- Fully navigable using the keyboard. -- The action can be triggered using the `Enter` or `Space` key for users relying on keyboard - interaction. - -### Screen Reader Compatibility - -- The semantic elements used in the `CipherAction` component ensure that assistive technologies can - interpret the component correctly. -- Text associated with the `notificationType` is programmatically linked, providing clarity for - screen reader users. - -### Focus Management - -- The component includes focus styles to ensure visibility during navigation. -- Proper focus management ensures the component works seamlessly with keyboard navigation. - -### Visual Feedback - -- Provides distinct visual states for different themes and states: - - **Hover:** Adjustments to background, border, and text for enhanced visibility. - - **Active:** Highlights the button with a focus state when activated. - - **Disabled:** Grays out the component to indicate inactivity. - -## Usage Example - -Here's an example of how to integrate the `CipherAction` component: - -```ts -import { CipherAction } from "../../cipher/cipher-action"; -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; -import { NotificationTypes } from "../../../../notification/abstractions/notification-bar"; - -const handleAction = (e: Event) => { - console.log("Cipher action triggered!", e); -}; - -; -``` diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-icon.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-icon.mdx deleted file mode 100644 index a1a94efde7b..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-icon.mdx +++ /dev/null @@ -1,90 +0,0 @@ -import { Meta, Controls, Primary } from "@storybook/addon-docs"; - -import * as stories from "./cipher-icon.lit-stories"; - - - -## Cipher Icon - -The `CipherIcon` component is a versatile icon renderer designed for secure environments. It -dynamically supports custom icons provided via URIs or displays a default icon (`Globe`) styled -based on the theme and provided properties. - - - - -## Props - -| **Prop** | **Type** | **Required** | **Description** | -| -------- | ------------------- | ------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `color` | `string` | Yes | A contextual color override applied when the `uri` is not provided, ensuring consistent styling of the default icon. | -| `size` | `string` | Yes | A valid CSS `width` value representing the width basis of the graphic. The height adjusts to maintain the original aspect ratio of the graphic. | -| `theme` | `Theme` | Yes | The styling theme for the icon, matching the `Theme` enum. | -| `uri` | `string` (optional) | No | A URL to an external graphic. If provided, the component displays this icon. If omitted, a default icon (`Globe`) styled with the provided `color` and `theme`. | - -## Installation and Setup - -1. Ensure the necessary dependencies are installed: - - - `lit`: Renders the component. - - `@emotion/css`: Styles the component. - -2. Pass the necessary props when using the component: - - `color`: Used when no `uri` is provided to style the default icon. - - `size`: Defines the width of the icon. Height maintains aspect ratio. - - `theme`: Specifies the theme for styling. - - `uri` (optional): If provided, this URI is used to display a custom icon. - -## Accessibility (WCAG) Compliance - -The `CipherIcon` component ensures accessible and user-friendly interactions through thoughtful -design: - -### Semantic Rendering - -- When the `uri` is provided, the component renders an `` element, which is semantically - appropriate for external graphics. -- If no `uri` is provided, the default icon is wrapped in a ``, ensuring proper context for - screen readers. - -### Visual Feedback - -- The component visually adjusts based on the `size`, `color`, and `theme`, ensuring the icon - remains clear and legible across different environments. - -### Keyboard and Screen Reader Support - -- Ensure that any container or parent component provides appropriate `alt` text or labeling when - `uri` is used with an `` tag for additional accessibility. - -## Usage Example - -Here's an example of how to integrate the `CipherIcon` component: - -```ts -import { CipherIcon } from "./cipher-icon"; -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; - -; -``` - -This configuration displays a custom icon from the provided URI with a width of 32px, styled for the -light theme. If the URI is omitted, the Globe icon is used as the fallback, colored in blue. - -### Default Styles - -- The default styles ensure responsive and clean design: - -- Width: Defined by the size prop. -- Height: Automatically adjusts to maintain the aspect ratio. -- Fit Content: Ensures the icon does not overflow or distort its container. - -### Notes - -- Always validate the uri provided to ensure it points to a secure and accessible location. -- Use the color and theme props for consistent fallback styling when uri is not provided. diff --git a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-indicator-icon.mdx b/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-indicator-icon.mdx deleted file mode 100644 index 6c338276c02..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-indicator-icon.mdx +++ /dev/null @@ -1,81 +0,0 @@ -import { Meta, Controls, Primary } from "@storybook/addon-docs"; - -import * as stories from "./cipher-indicator-icon.lit-stories"; - - - -## Cipher Info Indicator Icons - -The `CipherInfoIndicatorIcons` component displays a set of icons indicating specific attributes -related to cipher information. It supports business and family organization indicators, styled -dynamically based on the provided theme. - - - - -## Props - -| **Prop** | **Type** | **Required** | **Description** | -| ------------------ | --------- | ------------ | ----------------------------------------------------------------------- | -| `showBusinessIcon` | `boolean` | No | Displays the business organization icon when set to `true`. | -| `showFamilyIcon` | `boolean` | No | Displays the family organization icon when set to `true`. | -| `theme` | `Theme` | Yes | Defines the theme used to style the icons. Must match the `Theme` enum. | - -## Installation and Setup - -1. Ensure the necessary dependencies are installed: - - - `lit`: Renders the component. - - `@emotion/css`: Used for styling. - -2. Pass the required props when using the component: - - `showBusinessIcon`: A boolean that, when `true`, displays the business icon. - - `showFamilyIcon`: A boolean that, when `true`, displays the family icon. - - `theme`: Specifies the theme for styling the icons. - -## Accessibility (WCAG) Compliance - -The `CipherInfoIndicatorIcons` component ensures accessibility and usability through its design: - -### Screen Reader Compatibility - -- Icons are rendered as `` elements, and parent components should provide appropriate labeling - or descriptions to convey their meaning to screen readers. - -### Visual Feedback - -- Icons are styled dynamically based on the `theme` to ensure visual clarity and contrast in all - supported themes. -- The size of the icons is fixed at `12px` in height to maintain a consistent visual appearance. - -## Usage Example - -Here's an example of how to integrate the `CipherInfoIndicatorIcons` component: - -```ts -import { CipherInfoIndicatorIcons } from "./cipher-info-indicator-icons"; -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; - -; -``` - -This example displays the business organization icon, styled for the dark theme, and omits the -family organization icon. - -### Styling Details - -- The component includes the following styles: - -- Icons: Rendered as SVGs with a height of 12px and a width that adjusts to maintain their aspect - ratio. -- Color: Icons are dynamically styled based on the theme, using muted text colors for a subtle - appearance. - -### Notes - -- If neither showBusinessIcon nor showFamilyIcon is set to true, the component renders nothing. This - behavior should be handled by the parent component. diff --git a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts deleted file mode 100644 index 99b7e9e0acb..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-action.lit-stories.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Meta, StoryObj } from "@storybook/web-components"; - -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; - -import { NotificationTypes } from "../../../../notification/abstractions/notification-bar"; -import { CipherAction, CipherActionProps } from "../../cipher/cipher-action"; -import { mockI18n } from "../mock-data"; - -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!"), - i18n: mockI18n, - }, -} as Meta; - -const Template = (args: CipherActionProps) => CipherAction({ ...args }); - -export const Default: StoryObj = { - render: Template, -}; diff --git a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-icon.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-icon.lit-stories.ts deleted file mode 100644 index d0396b013c8..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-icon.lit-stories.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { Meta, StoryObj } from "@storybook/web-components"; -import { html } from "lit"; - -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; - -import { CipherIcon, CipherIconProps } from "../../cipher/cipher-icon"; - -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; - -const Template = (args: CipherIconProps) => { - return html` -
- ${CipherIcon({ ...args })} -
- `; -}; - -export const Default: StoryObj = { - render: Template, -}; diff --git a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icons.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icons.lit-stories.ts deleted file mode 100644 index 7b10aeee8de..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-indicator-icons.lit-stories.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { Meta, StoryObj } from "@storybook/web-components"; -import { html } from "lit"; - -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; - -import { - CipherInfoIndicatorIcons, - CipherInfoIndicatorIconsProps, -} from "../../cipher/cipher-indicator-icons"; -import { OrganizationCategories } from "../../cipher/types"; - -export default { - title: "Components/Ciphers/Cipher Indicator Icons", - argTypes: { - theme: { control: "select", options: [...Object.values(ThemeTypes)] }, - }, - args: { - theme: ThemeTypes.Light, - organizationCategories: [...Object.values(OrganizationCategories)], - }, -} as Meta; - -const Template: StoryObj["render"] = (args) => - html`
${CipherInfoIndicatorIcons({ ...args })}
`; - -export const Default: StoryObj = { - render: Template, -}; diff --git a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-info.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-info.lit-stories.ts deleted file mode 100644 index b56c3193bb8..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-info.lit-stories.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { Meta, StoryObj } from "@storybook/web-components"; - -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; - -import { CipherInfo, CipherInfoProps } from "../../cipher/cipher-info"; -import { mockCiphers } from "../mock-data"; - -export default { - title: "Components/Ciphers/Cipher Info", - argTypes: { - theme: { control: "select", options: [...Object.values(ThemeTypes)] }, - }, - args: { - cipher: mockCiphers[0], - theme: ThemeTypes.Light, - }, -} as Meta; - -const Template = (args: CipherInfoProps) => CipherInfo({ ...args }); - -export const Default: StoryObj = { - render: Template, -}; diff --git a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts index 83b498df7cb..343f36d5e11 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts +++ b/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts @@ -4,6 +4,7 @@ import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; import { themes } from "../../constants/styles"; import { ButtonRow, ButtonRowProps } from "../../rows/button-row"; +import { mockBrowserI18nGetMessage } from "../mock-data"; export default { title: "Components/Rows/Button Row", @@ -15,6 +16,49 @@ export default { window.alert("Button clicked!"); }, }, + selectButtons: [ + { + id: "select-1", + label: "select 1", + options: [ + { + text: "item 1", + value: 1, + }, + { + default: true, + text: "item 2", + value: 2, + }, + { + text: "item 3", + value: 3, + }, + ], + }, + { + id: "select-2", + label: "select 2", + options: [ + { + text: "item a", + value: "a", + }, + { + text: "item b", + value: "b", + }, + { + text: "item c", + value: "c", + }, + { + text: "item d", + value: "d", + }, + ], + }, + ], }, } as Meta; @@ -51,3 +95,10 @@ export const Dark: StoryObj = { }, }, }; + +window.chrome = { + ...window.chrome, + i18n: { + getMessage: mockBrowserI18nGetMessage, + }, +} as typeof chrome; diff --git a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-item.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/rows/cipher-item-row.lit-stories.ts similarity index 62% rename from apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-item.lit-stories.ts rename to apps/browser/src/autofill/content/components/lit-stories/rows/cipher-item-row.lit-stories.ts index 67915db0a7b..59c38c56745 100644 --- a/apps/browser/src/autofill/content/components/lit-stories/ciphers/cipher-item.lit-stories.ts +++ b/apps/browser/src/autofill/content/components/lit-stories/rows/cipher-item-row.lit-stories.ts @@ -3,30 +3,30 @@ import { Meta, StoryObj } from "@storybook/web-components"; import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; import { NotificationTypes } from "../../../../notification/abstractions/notification-bar"; -import { CipherItem, CipherItemProps } from "../../cipher/cipher-item"; +import { CipherItemRow, CipherItemRowProps } from "../../rows/cipher-item-row"; import { mockCiphers, mockI18n } from "../mock-data"; export default { - title: "Components/Ciphers/Cipher Item", + title: "Components/Rows/Cipher Item Row", argTypes: { theme: { control: "select", options: [...Object.values(ThemeTypes)] }, - handleAction: { control: false }, notificationType: { control: "select", - options: [NotificationTypes.Change, NotificationTypes.Add], + options: [...Object.values(NotificationTypes)], }, + handleAction: { control: false }, }, args: { cipher: mockCiphers[0], - theme: ThemeTypes.Light, - notificationType: NotificationTypes.Change, - handleAction: () => alert("Clicked"), i18n: mockI18n, + notificationType: NotificationTypes.Change, + theme: ThemeTypes.Light, + handleAction: () => window.alert("clicked!"), }, -} as Meta; +} as Meta; -const Template = (args: CipherItemProps) => CipherItem({ ...args }); +const Template = (props: CipherItemRowProps) => CipherItemRow({ ...props }); -export const Default: StoryObj = { +export const Default: StoryObj = { render: Template, }; diff --git a/apps/browser/src/autofill/content/components/lit-stories/rows/item-row.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/rows/item-row.lit-stories.ts deleted file mode 100644 index 375b793d016..00000000000 --- a/apps/browser/src/autofill/content/components/lit-stories/rows/item-row.lit-stories.ts +++ /dev/null @@ -1,22 +0,0 @@ -import { Meta, StoryObj } from "@storybook/web-components"; - -import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum"; - -import { ItemRow, ItemRowProps } from "../../rows/item-row"; - -export default { - title: "Components/Rows/Item Row", - argTypes: { - theme: { control: "select", options: [...Object.values(ThemeTypes)] }, - children: { control: "object" }, - }, - args: { - theme: ThemeTypes.Light, - }, -} as Meta; - -const Template = (args: ItemRowProps) => ItemRow({ ...args }); - -export const Default: StoryObj = { - render: Template, -}; diff --git a/apps/browser/src/autofill/content/components/notification/body.ts b/apps/browser/src/autofill/content/components/notification/body.ts index 4d8019b0a55..b1ce7cdba63 100644 --- a/apps/browser/src/autofill/content/components/notification/body.ts +++ b/apps/browser/src/autofill/content/components/notification/body.ts @@ -4,11 +4,10 @@ import { html } from "lit"; import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums"; import { NotificationType } from "../../../notification/abstractions/notification-bar"; -import { CipherItem } from "../cipher"; import { NotificationCipherData } from "../cipher/types"; import { I18n } from "../common-types"; import { scrollbarStyles, spacing, themes, typography } from "../constants/styles"; -import { ItemRow } from "../rows/item-row"; +import { CipherItemRow } from "../rows/cipher-item-row"; export const componentClassPrefix = "notification-body"; @@ -37,15 +36,12 @@ export function NotificationBody({ return html`
${ciphers.map((cipher) => - ItemRow({ + CipherItemRow({ + cipher, theme, - children: CipherItem({ - cipher, - i18n, - notificationType, - theme, - handleAction: handleEditOrUpdateAction, - }), + i18n, + notificationType, + handleAction: handleEditOrUpdateAction, }), )}
diff --git a/apps/browser/src/autofill/content/components/rows/cipher-item-row.ts b/apps/browser/src/autofill/content/components/rows/cipher-item-row.ts new file mode 100644 index 00000000000..0600fc9ac4b --- /dev/null +++ b/apps/browser/src/autofill/content/components/rows/cipher-item-row.ts @@ -0,0 +1,78 @@ +import { css } from "@emotion/css"; +import { html } from "lit"; + +import { Theme } from "@bitwarden/common/platform/enums"; + +import { NotificationType } from "../../../notification/abstractions/notification-bar"; +import { CipherItem } from "../cipher/cipher-item"; +import { NotificationCipherData } from "../cipher/types"; +import { I18n } from "../common-types"; +import { spacing, themes, typography } from "../constants/styles"; + +export type CipherItemRowProps = { + cipher: NotificationCipherData; + i18n: I18n; + notificationType?: NotificationType; + theme: Theme; + handleAction: (e: Event) => void; +}; + +export function CipherItemRow({ + cipher, + i18n, + notificationType, + theme, + handleAction, +}: CipherItemRowProps) { + return html` +
+ ${CipherItem({ + cipher, + i18n, + notificationType, + theme, + handleAction, + })} +
+ `; +} + +const cipherItemRowStyles = ({ theme }: { theme: Theme }) => css` + ${typography.body1} + + gap: ${spacing["2"]}; + display: flex; + align-items: center; + justify-content: space-between; + border-width: 0 0 0.5px 0; + border-style: solid; + border-radius: ${spacing["2"]}; + border-color: ${themes[theme].secondary["300"]}; + background-color: ${themes[theme].background.DEFAULT}; + padding: ${spacing["2"]} ${spacing["3"]}; + min-height: min-content; + max-height: 52px; + overflow-x: hidden; + white-space: nowrap; + color: ${themes[theme].text.main}; + font-weight: 400; + + > div { + :first-child { + flex: 3 3 75%; + min-width: 25%; + } + + :not(:first-child) { + display: flex; + flex-direction: row; + flex-wrap: nowrap; + justify-content: flex-end; + max-width: 25%; + + > button { + max-width: min-content; + } + } + } +`; diff --git a/apps/browser/src/autofill/content/components/rows/item-row.ts b/apps/browser/src/autofill/content/components/rows/item-row.ts deleted file mode 100644 index 8e9a870002e..00000000000 --- a/apps/browser/src/autofill/content/components/rows/item-row.ts +++ /dev/null @@ -1,55 +0,0 @@ -import { css } from "@emotion/css"; -import { html, TemplateResult } from "lit"; - -import { Theme, ThemeTypes } from "@bitwarden/common/platform/enums"; - -import { spacing, themes, typography } from "../../../content/components/constants/styles"; - -export type ItemRowProps = { - theme: Theme; - children: TemplateResult | TemplateResult[]; -}; - -export function ItemRow({ theme = ThemeTypes.Light, children }: ItemRowProps) { - return html`
${children}
`; -} - -export const itemRowStyles = ({ theme }: { theme: Theme }) => css` - ${typography.body1} - - gap: ${spacing["2"]}; - display: flex; - align-items: center; - justify-content: space-between; - border-width: 0 0 0.5px 0; - border-style: solid; - border-radius: ${spacing["2"]}; - border-color: ${themes[theme].secondary["300"]}; - background-color: ${themes[theme].background.DEFAULT}; - padding: ${spacing["2"]} ${spacing["3"]}; - min-height: min-content; - max-height: 52px; - overflow-x: hidden; - white-space: nowrap; - color: ${themes[theme].text.main}; - font-weight: 400; - - > div { - :first-child { - flex: 3 3 75%; - min-width: 25%; - } - - :not(:first-child) { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-end; - max-width: 25%; - - > button { - max-width: min-content; - } - } - } -`;