bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 22:03:36 +00:00
Code Issues Releases Wiki Activity

PM-17068-Implement Docs for Lit Storybook Instance (#12912)

Browse Source 
* PM-17068 -add mdx path to lit main file - Add button docs

* temp remove meta to fix main storybook

* cipher docs composed

* icons doc

* notification docs composed

* convert to hidden files

* isolate hidden files

* isolate docs within hidden folder and change doc files to not be hidden for build
This commit is contained in:
Daniel Riera
2025-01-31 15:54:00 -05:00
committed by GitHub
parent ca53ecccd0
commit 1d712124bc
12 changed files with 739 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,7 @@ const getAbsolutePath = (value: string): string =>
dirname(require.resolve(join(value, "package.json"))); dirname(require.resolve(join(value, "package.json")));
const config: StorybookConfig = { 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: [ addons: [
getAbsolutePath("@storybook/addon-links"), getAbsolutePath("@storybook/addon-links"),
getAbsolutePath("@storybook/addon-essentials"), getAbsolutePath("@storybook/addon-essentials"),

64
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/action-button.mdx Normal file
View File

@@ -0,0 +1,64 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./action-button.lit-stories";
<Meta title="Components/Buttons/Action Button" of={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.
<Primary />
<Controls />
## 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 `<button>` element is used, which is natively recognized by assistive technologies.
### Focus Management
- Ensure proper focus management when interacting with the button, especially when navigating using
a keyboard.
### Visual Feedback
- The button provides clear visual states for hover and disabled states:
- **Hover:** Changes background color, border color, and text contrast.
- **Disabled:** Muted background and text colors with no pointer events.

64
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/badge-button.mdx Normal file
View File

@@ -0,0 +1,64 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./badge-button.lit-stories";
<Meta title="Components/Buttons/Badge Button" of={stories} />
## Badge Button
The `BadgeButton` component is a compact, styled button built using the `lit` library and styled
with `@emotion/css`. It is designed to display concise text and supports themes, click event
handling, and a disabled state. The component is optimized for accessibility and responsive design.
<Primary />
<Controls />
## 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 badge 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 badge 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 `BadgeButton` 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 `<button>` element is used, which is natively recognized by assistive technologies.
### Focus Management
- Ensure proper focus management when interacting with the button, especially when navigating using
a keyboard.
### Visual Feedback
- The button provides clear visual states for hover and disabled states:
- **Hover:** Changes background color, border color, and text contrast.
- **Disabled:** Muted background and text colors with no pointer events.

70
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/body.mdx Normal file
View File

@@ -0,0 +1,70 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./body.lit-stories";
<Meta title="Components/Notifications/Notification Body" of={stories} />
## Notification Body
The `NotificationBody` component displays a detailed notification with a list of associated ciphers,
notification type, and styling based on the selected theme. It is a flexible component for
presenting actionable information.
<Primary />
<Controls />
## Props
| **Prop** | **Type** | **Required** | **Description** |
| ------------------ | ------------------ | ------------ | --------------------------------------------------------------------------------------------------------- |
| `ciphers` | `CipherData[]` | Yes | An array of cipher data objects. Each cipher includes metadata such as ID, name, type, and login details. |
| `notificationType` | `NotificationType` | Yes | Specifies the type of notification, such as `add`, `change`, `unlock`, or `fileless-import`. |
| `theme` | `Theme` | Yes | Defines the theme used for styling the notification. Must match the `Theme` enum. |
---
## Usage Example
```tsx
import { NotificationBody } from "../../notification/body";
import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
<NotificationBody
ciphers={[
{
id: "1",
name: "Example Cipher",
type: "Login",
favorite: false,
reprompt: "None",
icon: {
imageEnabled: true,
image: "",
fallbackImage: "https://example.com/fallback.png",
icon: "icon-class",
},
login: { username: "user@example.com", passkey: null },
},
]}
notificationType="add"
theme={ThemeTypes.Dark}
/>;
```
### Accessibility (WCAG) Compliance
The NotificationBody component is designed to be accessible and adheres to WCAG guidelines:
## Screen Reader Compatibility
- Ciphers are presented with clear labeling to ensure context for assistive technologies.
- Icons include fallback options for better accessibility.
## Visual Feedback
- `notificationType` adjusts the visual presentation for contextually relevant feedback.
### Notes
- ciphers: Ensure the array includes well-defined cipher objects to avoid rendering issues.
- notificationType: This prop influences the messaging and appearance of the notification body.

83
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-action.mdx Normal file
View File

@@ -0,0 +1,83 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./cipher-action.lit-stories";
<Meta title="Components/Ciphers/Cipher Action" of={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.
<Primary />
<Controls />
## 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);
};
<CipherAction
handleAction={handleAction}
notificationType={NotificationTypes.Change}
theme={ThemeTypes.Dark}
/>;
```

90
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-icon.mdx Normal file
View File

@@ -0,0 +1,90 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./cipher-icon.lit-stories";
<Meta title="Components/Ciphers/Cipher Icon" of={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.
<Primary />
<Controls />
## 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 `<img>` element, which is semantically
appropriate for external graphics.
- If no `uri` is provided, the default icon is wrapped in a `<span>`, 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 `<img>` 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";
<CipherIcon
color="blue"
size="32px"
theme={ThemeTypes.Light}
uri="https://example.com/icon.png"
/>;
```
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.

81
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/cipher-indicator-icon.mdx Normal file
View File

@@ -0,0 +1,81 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./cipher-indicator-icon.lit-stories";
<Meta title="Components/Ciphers/Cipher Indicator Icon" of={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.
<Primary />
<Controls />
## Props
| **Prop** | **Type** | **Required** | **Description** |
| --------------- | --------- | ------------ | ----------------------------------------------------------------------- |
| `isBusinessOrg` | `boolean` | No | Displays the business organization icon when set to `true`. |
| `isFamilyOrg` | `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:
- `isBusinessOrg`: A boolean that, when `true`, displays the business icon.
- `isFamilyOrg`: 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 `<svg>` 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";
<CipherInfoIndicatorIcons
isBusinessOrg={true}
isFamilyOrg={false}
theme={ThemeTypes.Dark}
/>;
```
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 isBusinessOrg nor isFamilyOrg is set to true, the component renders nothing. This
behavior should be handled by the parent component.

55
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/close-button.mdx Normal file
View File

@@ -0,0 +1,55 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./close-button.lit-stories";
<Meta title="Components/Buttons/Close Button" of={stories} />
## Close Button
The `CloseButton` component is a lightweight, themeable button used for closing notifications or
dismissing elements. It is built using the `lit` library, styled with `@emotion/css`, and integrates
a close icon for visual clarity. The component is designed to be intuitive and accessible.
<Primary />
<Controls />
## Props
| **Prop** | **Type** | **Required** | **Description** |
| ------------------------- | -------------------- | ------------ | ----------------------------------------------------------- |
| `handleCloseNotification` | `(e: Event) => void` | Yes | The function to execute when the button is clicked. |
| `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:
- `handleCloseNotification`: A function that handles the click event for closing.
- `theme`: The theme to style the button (must be a valid `Theme`).
## Accessibility (WCAG) Compliance
The `CloseButton` 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 button uses a semantic `<button>` element, ensuring it is natively recognized by assistive
technologies.
### Focus Management
- Ensure the button receives proper focus, especially when navigating using a keyboard.
### Visual Feedback
- The button provides hover feedback by changing the border color for better user interaction.

61
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/edit-button.mdx Normal file
View File

@@ -0,0 +1,61 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./edit-button.lit-stories";
<Meta title="Components/Buttons/Edit Button" of={stories} />
## Edit Button
The `EditButton` component is a small, themeable button that integrates an editable pencil icon to
represent edit functionality. It is built using the `lit` library and styled with `@emotion/css`.
The component supports themes, click events, and a disabled state, making it ideal for use in forms
or settings where inline editing is required.
<Primary />
<Controls />
## Props
| **Prop** | **Type** | **Required** | **Description** |
| -------------- | -------------------------- | ------------ | ----------------------------------------------------------- |
| `buttonAction` | `(e: Event) => void` | Yes | The function to execute when the button is clicked. |
| `buttonText` | `string` | Yes | The text displayed as the button's tooltip. |
| `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 as a tooltip for 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 `EditButton` 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 `<button>` element is used, which is natively recognized by assistive technologies.
### Focus Management
- Ensure the button receives proper focus, especially when navigating using a keyboard.
### Visual Feedback
- The button provides hover feedback by changing the border color for better user interaction.

45
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/footer.mdx Normal file
View File

@@ -0,0 +1,45 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./footer.lit-stories";
<Meta title="Components/Notifications/Notification Footer" of={stories} />
## Notification Footer
The `NotificationFooter` component is used to display a footer for notifications, allowing dynamic
customization based on the `theme` and `notificationType`.
<Primary />
<Controls />
## Props
| **Prop** | **Type** | **Required** | **Description** |
| ------------------ | ------------------ | ------------ | -------------------------------------------------------------------------------------------------- |
| `notificationType` | `NotificationType` | Yes | The type of notification footer to display. Options: `add`, `change`, `unlock`, `fileless-import`. |
| `theme` | `Theme` | Yes | Defines the theme of the notification footer. Must match the `Theme` enum. |
---
## Usage Example
```tsx
import { NotificationFooter } from "../../notification/footer";
import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
<NotificationFooter notificationType="add" theme={ThemeTypes.Dark} />;
```
## Accessibility (WCAG) Compliance
The `NotificationFooter` component has been designed with accessibility in mind:
### Screen Reader Compatibility
- Ensures that the notification type and relevant information are accessible to assistive
technologies.
## Visual Feedback
- The theme prop dynamically adjusts colors and contrast for light and dark modes.
- Provides clear visual separation to enhance readability.

56
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/header.mdx Normal file
View File

@@ -0,0 +1,56 @@
import { Meta, Controls, Primary } from "@storybook/addon-docs";
import * as stories from "./header.lit-stories";
<Meta title="Components/Notifications/Notification Header" of={stories} />
## Notification Header
The `NotificationHeader` component is used to display a notification banner with a message, theme,
and an optional close button. This component is versatile and can be styled dynamically based on the
`theme` and other provided props.
<Primary />
<Controls />
## Props
| **Prop** | **Type** | **Required** | **Description** |
| ------------------------- | -------------------- | ------------ | ------------------------------------------------------------------- |
| `message` | `string` | Yes | The text message to be displayed in the notification. |
| `standalone` | `boolean` | No | Determines if the notification is displayed independently. |
| `theme` | `Theme` | Yes | Defines the theme of the notification. Must match the `Theme` enum. |
| `handleCloseNotification` | `(e: Event) => void` | No | A callback function triggered when the close button is clicked. |
---
## Usage Example
```tsx
import { NotificationHeader } from "../../notification/header";
import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
<NotificationHeader
message="This is a sample notification."
standalone={true}
theme={ThemeTypes.Dark}
handleCloseNotification={() => console.log("Notification closed!")}
/>;
```
## Accessibility (WCAG) Compliance
The `NotificationHeader` component is designed with accessibility in mind:
### Screen Reader Compatibility
- The message is rendered in a way that ensures visibility to assistive technologies.
### Visual Feedback
- The theme prop dynamically adjusts colors and contrast for light and dark modes.
- The component provides clear visual separation to ensure readability in all themes.
### Notes
- If handleCloseNotification is not provided, the close button will not trigger any action.

69
apps/browser/src/autofill/content/components/lit-stories/.lit-docs/icons.mdx Normal file
View File

@@ -0,0 +1,69 @@
import { Meta, Controls } from "@storybook/addon-docs";
import * as stories from "./icons.lit-stories";
<Meta title="Components/Icons/Icons" of={stories} />
## Icon Stories
The `Icons` component suite demonstrates various icon components styled dynamically based on props
like size, color, and theme. Each story is an example of how a specific icon can be rendered.
<Controls />
### Icons
| | |
| ------------------------- | ------------------ |
| `AngleDownIcon` | `FolderIcon` |
| `BusinessIcon` | `GlobeIcon` |
| `BrandIcon` | `PartyHornIcon` |
| `CloseIcon` | `PencilSquareIcon` |
| `ExclamationTriangleIcon` | `ShieldIcon` |
| `FamilyIcon` | `UserIcon` |
## Props
| **Prop** | **Type** | **Required** | **Description** |
| ---------- | --------- | ------------ | --------------------------------------------------------------------------------- |
| `iconLink` | `URL` | No | Defines an external URL associated with the icon, prop exclusive to `Brand Icon`. |
| `color` | `string` | No | Sets the color of the icon. |
| `disabled` | `boolean` | No | Disables the icon visually and functionally. |
| `theme` | `Theme` | Yes | Defines the theme used to style the icons. Must match the `Theme` enum. |
| `size` | `number` | Yes | Sets the width and height of the icon in pixels. |
---
## Standard Icon Usage Example
```tsx
import { AngleDownIcon } from "./Icons";
import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
<AngleDownIcon size={50} color="#000000" theme={ThemeTypes.Light} />;
```
## Brand Icon Usage Example
```tsx
import { BrandIconContainer } from "./Icons";
import { ThemeTypes } from "@bitwarden/common/platform/enums/theme-type.enum";
<BrandIconContainer
size={50}
color="#000000"
theme={ThemeTypes.Light}
iconLink="https://bitwarden.com"
/>;
```
## Accessibility (WCAG) Compliance
Icons in this suite are designed with accessibility and usability in mind:
### Screen Reader Compatibility
- Icons are rendered as `<svg>` elements.
### Visual Feedback
- The `disabled` prop adjusts the icon's visual appearance, ensuring clarity.