mirror of
https://github.com/bitwarden/browser
synced 2025-12-16 16:23:44 +00:00
[CL-333] Icon Refresh Feature Branch (#14298)
* [CL-571] Update icons to new fileset and metaphors (#14163) * [CL-518] Convert icons docs to stories (#14299) * [CL-574] Update inline autofill icons (#14379) --------- Co-authored-by: William Martin <contact@willmartian.com>
This commit is contained in:
Vicki League
GitHub
@@ -1,168 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
|
||||
<Meta title="Documentation/Icons" />
|
||||
|
||||
# Iconography
|
||||
|
||||
Avoid using icons to convey information unless paired with meaningful, clear text. If an icon must
|
||||
be used and text cannot be displayed visually along with the icon, use an `aria-label` to provide
|
||||
the text to screen readers, and a `title` attribute to provide the text visually through a tool tip.
|
||||
Note: this pattern should only be followed for very common iconography such as, a settings cog icon
|
||||
or an options menu icon.
|
||||
|
||||
## Status Indicators
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| -------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| <i class="bwi bwi-check"></i> | bwi-check | confirmation action (Example: "confirm member"), successful confirmation (toast or callout), or shows currently selected option in a menu. Use with success color variable if applicable. |
|
||||
| <i class="bwi bwi-error"></i> | bwi-error | error; used in form field error states and error toasts, banners, and callouts. Do not use as a close or clear icon. Use with danger color variable. |
|
||||
| <i class="bwi bwi-exclamation-triangle"></i> | bwi-exclamation-triangle | warning; used in warning callouts, banners, and toasts. Use with warning color variable. |
|
||||
| <i class="bwi bwi-info-circle"></i> | bwi-info-circle | information; used in info callouts, banners, and toasts. Use with info color variable. |
|
||||
| <i class="bwi bwi-question-circle"></i> | bwi-question-circle | link to help documentation or hover tooltip |
|
||||
| <i class="bwi bwi-spinner"></i> | bwi-spinner | loading |
|
||||
|
||||
## Bitwarden Objects
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ----------------------------------- | --------------- | --------------------------------------------------- |
|
||||
| <i class="bwi bwi-business"></i> | bwi-business | organization or vault for Free, Teams or Enterprise |
|
||||
| <i class="bwi bwi-collection"></i> | bwi-collection | collection |
|
||||
| <i class="bwi bwi-credit-card"></i> | bwi-credit-card | card item type |
|
||||
| <i class="bwi bwi-family"></i> | bwi-family | family vault or organization |
|
||||
| <i class="bwi bwi-folder"></i> | bwi-folder | folder |
|
||||
| <i class="bwi bwi-globe"></i> | bwi-globe | login item type |
|
||||
| <i class="bwi bwi-id-card"></i> | bwi-id-card | identity item type |
|
||||
| <i class="bwi bwi-send"></i> | bwi-send | send action or feature |
|
||||
| <i class="bwi bwi-send-f"></i> | bwi-send-f | - |
|
||||
| <i class="bwi bwi-sticky-note"></i> | bwi-sticky-note | secure note item type |
|
||||
| <i class="bwi bwi-users"></i> | bwi-users | user group |
|
||||
| <i class="bwi bwi-vault"></i> | bwi-vault | general vault |
|
||||
| <i class="bwi bwi-vault-f"></i> | bwi-vault-f | general vault |
|
||||
|
||||
## Actions
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| -------------------------------------- | ------------------ | -------------------------------------------- |
|
||||
| <i class="bwi bwi-check-circle"></i> | bwi-check-circle | check if password has been exposed |
|
||||
| <i class="bwi bwi-clone"></i> | bwi-clone | copy to clipboard action |
|
||||
| <i class="bwi bwi-close"></i> | bwi-close | close action |
|
||||
| <i class="bwi bwi-cog"></i> | bwi-cog | settings |
|
||||
| <i class="bwi bwi-cog-f"></i> | bwi-cog-f | settings |
|
||||
| <i class="bwi bwi-download"></i> | bwi-download | download or export |
|
||||
| <i class="bwi bwi-envelope"></i> | bwi-envelope | action related to emailing a user |
|
||||
| <i class="bwi bwi-external-link"></i> | bwi-external-link | open in new window or popout |
|
||||
| <i class="bwi bwi-eye"></i> | bwi-eye | show icon for password fields |
|
||||
| <i class="bwi bwi-eye-slash"></i> | bwi-eye-slash | hide icon for password fields |
|
||||
| <i class="bwi bwi-files"></i> | bwi-files | clone action / duplicate an item |
|
||||
| <i class="bwi bwi-generate"></i> | bwi-generate | generate action in edit item forms |
|
||||
| <i class="bwi bwi-generate-f"></i> | bwi-generate-f | generate feature or action |
|
||||
| <i class="bwi bwi-lock"></i> | bwi-lock | lock vault action |
|
||||
| <i class="bwi bwi-lock-encrypted"></i> | bwi-lock-encrypted | - |
|
||||
| <i class="bwi bwi-lock-f"></i> | bwi-lock-f | - |
|
||||
| <i class="bwi bwi-minus-circle"></i> | bwi-minus-circle | remove action |
|
||||
| <i class="bwi bwi-pencil-square"></i> | bwi-pencil-square | edit action |
|
||||
| <i class="bwi bwi-popout"></i> | bwi-popout | popout action |
|
||||
| <i class="bwi bwi-plus"></i> | bwi-plus | new or add option in contained buttons/links |
|
||||
| <i class="bwi bwi-plus-f"></i> | bwi-plus-f | new or add option in contained buttons/links |
|
||||
| <i class="bwi bwi-plus-circle"></i> | bwi-plus-circle | new or add option in text buttons/links |
|
||||
| <i class="bwi bwi-refresh"></i> | bwi-refresh | "re"-action; such as refresh or regenerate |
|
||||
| <i class="bwi bwi-save"></i> | bwi-save | alternate download action |
|
||||
| <i class="bwi bwi-search"></i> | bwi-search | search action |
|
||||
| <i class="bwi bwi-share"></i> | bwi-share | - |
|
||||
| <i class="bwi bwi-sign-in"></i> | bwi-sign-in | sign-in action |
|
||||
| <i class="bwi bwi-sign-out"></i> | bwi-sign-out | sign-out action |
|
||||
| <i class="bwi bwi-star"></i> | bwi-star | favorite action |
|
||||
| <i class="bwi bwi-star-f"></i> | bwi-star-f | favorited / unfavorite action |
|
||||
| <i class="bwi bwi-trash"></i> | bwi-trash | delete action or trash area |
|
||||
| <i class="bwi bwi-undo"></i> | bwi-undo | restore action |
|
||||
| <i class="bwi bwi-unlock"></i> | bwi-unlock | unlocked |
|
||||
|
||||
## Directional and Menu Indicators
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ------------------------------------- | ----------------- | ------------------------------------------------------- |
|
||||
| <i class="bwi bwi-angle-down"></i> | bwi-angle-down | closed dropdown or open expandable section |
|
||||
| <i class="bwi bwi-angle-left"></i> | bwi-angle-left | - |
|
||||
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | closed expandable section |
|
||||
| <i class="bwi bwi-angle-up"></i> | bwi-angle-up | open dropdown |
|
||||
| <i class="bwi bwi-back"></i> | bwi-back | back arrow |
|
||||
| <i class="bwi bwi-down-solid"></i> | bwi-down-solid | table sort order |
|
||||
| <i class="bwi bwi-ellipsis-h"></i> | bwi-ellipsis-h | more options menu horizontal; used in mobile list items |
|
||||
| <i class="bwi bwi-ellipsis-v"></i> | bwi-ellipsis-v | more options menu vertical; used primarily in tables |
|
||||
| <i class="bwi bwi-filter"></i> | bwi-filter | Product switcher |
|
||||
| <i class="bwi bwi-hamburger"></i> | bwi-hamburger | navigation indicator |
|
||||
| <i class="bwi bwi-list"></i> | bwi-list | toggle list/grid view |
|
||||
| <i class="bwi bwi-list-alt"></i> | bwi-list-alt | view item action in extension |
|
||||
| <i class="bwi bwi-numbered-list"></i> | bwi-numbered-list | toggle numbered list view |
|
||||
| <i class="bwi bwi-up-down-btn"></i> | bwi-up-down-btn | table sort order |
|
||||
| <i class="bwi bwi-up-solid"></i> | bwi-up-solid | table sort order |
|
||||
|
||||
## Misc Objects
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ---------------------------------------- | -------------------- | ---------------------------------------------- |
|
||||
| <i class="bwi bwi-billing"></i> | bwi-billing | billing options |
|
||||
| <i class="bwi bwi-bitcoin"></i> | bwi-bitcoin | crypto |
|
||||
| <i class="bwi bwi-browser"></i> | bwi-browser | web browser |
|
||||
| <i class="bwi bwi-browser-alt"></i> | bwi-browser-alt | web browser |
|
||||
| <i class="bwi bwi-bug"></i> | bwi-bug | test or debug action |
|
||||
| <i class="bwi bwi-camera"></i> | bwi-camera | actions related to camera use |
|
||||
| <i class="bwi bwi-cli"></i> | bwi-cli | cli client or code |
|
||||
| <i class="bwi bwi-clock"></i> | bwi-clock | use for time based actions or views |
|
||||
| <i class="bwi bwi-community"></i> | bwi-community | - |
|
||||
| <i class="bwi bwi-desktop"></i> | bwi-desktop | desktop client |
|
||||
| <i class="bwi bwi-dollar"></i> | bwi-dollar | account credit |
|
||||
| <i class="bwi bwi-file"></i> | bwi-file | file related objects or actions |
|
||||
| <i class="bwi bwi-file-text"></i> | bwi-file-text | text related objects or actions |
|
||||
| <i class="bwi bwi-hashtag"></i> | bwi-hashtag | link to specific id |
|
||||
| <i class="bwi bwi-key"></i> | bwi-key | key or password related objects or actions |
|
||||
| <i class="bwi bwi-link"></i> | bwi-link | link action |
|
||||
| <i class="bwi bwi-mobile"></i> | bwi-mobile | mobile client |
|
||||
| <i class="bwi bwi-msp"></i> | bwi-msp | - |
|
||||
| <i class="bwi bwi-paperclip"></i> | bwi-paperclip | attachments |
|
||||
| <i class="bwi bwi-passkey"></i> | bwi-passkey | passkey |
|
||||
| <i class="bwi bwi-pencil"></i> | bwi-pencil | editing |
|
||||
| <i class="bwi bwi-provider"></i> | bwi-provider | relates to provider or provider portal |
|
||||
| <i class="bwi bwi-puzzle"></i> | bwi-puzzle | - |
|
||||
| <i class="bwi bwi-shield"></i> | bwi-shield | - |
|
||||
| <i class="bwi bwi-sliders"></i> | bwi-sliders | reporting or filtering |
|
||||
| <i class="bwi bwi-tag"></i> | bwi-tag | labels |
|
||||
| <i class="bwi bwi-totp-codes"></i> | bwi-totp-codes | - |
|
||||
| <i class="bwi bwi-totp-codes-alt"></i> | bwi-totp-codes-alt | - |
|
||||
| <i class="bwi bwi-totp-codes-alt2"></i> | bwi-totp-codes-alt2 | - |
|
||||
| <i class="bwi bwi-universal-access"></i> | bwi-universal-access | use for accessibility related actions |
|
||||
| <i class="bwi bwi-user"></i> | bwi-user | relates to current user or organization member |
|
||||
| <i class="bwi bwi-user-monitor"></i> | bwi-user-monitor | - |
|
||||
| <i class="bwi bwi-wireless"></i> | bwi-wireless | - |
|
||||
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or additional configuration options |
|
||||
|
||||
## Platforms and Logos
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ---------------------------------- | -------------- | ---------------------------- |
|
||||
| <i class="bwi bwi-android"></i> | bwi-android | android support |
|
||||
| <i class="bwi bwi-apple"></i> | bwi-apple | apple/IOS support |
|
||||
| <i class="bwi bwi-brave"></i> | bwi-brave | - |
|
||||
| <i class="bwi bwi-chrome"></i> | bwi-chrome | chrome support |
|
||||
| <i class="bwi bwi-discourse"></i> | bwi-discourse | community forum |
|
||||
| <i class="bwi bwi-duckduckgo"></i> | bwi-duckduckgo | - |
|
||||
| <i class="bwi bwi-edge"></i> | bwi-edge | edge support |
|
||||
| <i class="bwi bwi-facebook"></i> | bwi-facebook | link to our facebook page |
|
||||
| <i class="bwi bwi-firefox"></i> | bwi-firefox | support for firefox |
|
||||
| <i class="bwi bwi-github"></i> | bwi-github | link to our github page |
|
||||
| <i class="bwi bwi-google"></i> | bwi-google | link to our google page |
|
||||
| <i class="bwi bwi-instagram"></i> | bwi-instagram | link to our Instagram page |
|
||||
| <i class="bwi bwi-linkedin"></i> | bwi-linkedin | link to our linkedIn page |
|
||||
| <i class="bwi bwi-linux"></i> | bwi-linux | linux support |
|
||||
| <i class="bwi bwi-mastodon"></i> | bwi-mastodon | link to our Mastodon page |
|
||||
| <i class="bwi bwi-opera"></i> | bwi-opera | support for Opera |
|
||||
| <i class="bwi bwi-paypal"></i> | bwi-paypal | PayPal |
|
||||
| <i class="bwi bwi-reddit"></i> | bwi-reddit | link to our reddit community |
|
||||
| <i class="bwi bwi-safari"></i> | bwi-safari | safari support |
|
||||
| <i class="bwi bwi-twitch"></i> | bwi-twitch | link to our Twitch page |
|
||||
| <i class="bwi bwi-twitter"></i> | bwi-twitter | link to our twitter page |
|
||||
| <i class="bwi bwi-tor"></i> | bwi-tor | - |
|
||||
| <i class="bwi bwi-vivaldi"></i> | bwi-vivaldi | - |
|
||||
| <i class="bwi bwi-windows"></i> | bwi-windows | support for windows |
|
||||
| <i class="bwi bwi-x-twitter"></i> | bwi-x-twitter | x version of twitter |
|
||||
| <i class="bwi bwi-youtube"></i> | bwi-youtube | link to our youtube page |
|
||||
413
libs/components/src/stories/icons/icon-data.ts
Normal file
413
libs/components/src/stories/icons/icon-data.ts
Normal file
@@ -0,0 +1,413 @@
|
||||
const statusIndicators = [
|
||||
{
|
||||
id: "bwi-check",
|
||||
usage:
|
||||
"confirmation action (Example: 'confirm member'), successful confirmation (toast or callout), or shows currently selected option in a menu. Use with success color variable if applicable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-error",
|
||||
usage:
|
||||
"error; used in form field error states and error toasts, banners, and callouts. Do not use as a close or clear icon. Use with danger color variable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-exclamation-triangle",
|
||||
usage:
|
||||
"warning; used in warning callouts, banners, and toasts. Use with warning color variable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-info-circle",
|
||||
usage: "information; used in info callouts, banners, and toasts. Use with info color variable.",
|
||||
},
|
||||
{
|
||||
id: "bwi-question-circle",
|
||||
usage: "link to help documentation or hover tooltip",
|
||||
},
|
||||
{
|
||||
id: "bwi-spinner",
|
||||
usage: "loading",
|
||||
},
|
||||
];
|
||||
|
||||
const bitwardenObjects = [
|
||||
{
|
||||
id: "bwi-business",
|
||||
usage: "organization or vault for Free, Teams or Enterprise",
|
||||
},
|
||||
{
|
||||
id: "bwi-collection",
|
||||
usage: "collection",
|
||||
},
|
||||
{
|
||||
id: "bwi-collection-shared",
|
||||
usage: "collection",
|
||||
},
|
||||
{
|
||||
id: "bwi-credit-card",
|
||||
usage: "card item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-family",
|
||||
usage: "family vault or organization",
|
||||
},
|
||||
{
|
||||
id: "bwi-folder",
|
||||
usage: "folder",
|
||||
},
|
||||
{
|
||||
id: "bwi-globe",
|
||||
usage: "login item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-id-card",
|
||||
usage: "identity item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-send",
|
||||
usage: "send action or feature",
|
||||
},
|
||||
{
|
||||
id: "bwi-sticky-note",
|
||||
usage: "secure note item type",
|
||||
},
|
||||
{
|
||||
id: "bwi-users",
|
||||
usage: "user group",
|
||||
},
|
||||
{
|
||||
id: "bwi-vault",
|
||||
usage: "general vault",
|
||||
},
|
||||
];
|
||||
|
||||
const actions = [
|
||||
{
|
||||
id: "bwi-archive",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-check-circle",
|
||||
usage: "check if password has been exposed",
|
||||
},
|
||||
{
|
||||
id: "bwi-clone",
|
||||
usage: "copy to clipboard action",
|
||||
},
|
||||
{
|
||||
id: "bwi-close",
|
||||
usage: "close action",
|
||||
},
|
||||
{
|
||||
id: "bwi-cog",
|
||||
usage: "settings",
|
||||
},
|
||||
{
|
||||
id: "bwi-cog-f",
|
||||
usage: "settings",
|
||||
},
|
||||
{
|
||||
id: "bwi-download",
|
||||
usage: "download or ",
|
||||
},
|
||||
{
|
||||
id: "bwi-envelope",
|
||||
usage: "action related to emailing a user",
|
||||
},
|
||||
{
|
||||
id: "bwi-external-link",
|
||||
usage: "open in new window or popout",
|
||||
},
|
||||
{
|
||||
id: "bwi-eye",
|
||||
usage: "show icon for password fields",
|
||||
},
|
||||
{
|
||||
id: "bwi-eye-slash",
|
||||
usage: "hide icon for password fields",
|
||||
},
|
||||
{
|
||||
id: "bwi-files",
|
||||
usage: "clone action / duplicate an item",
|
||||
},
|
||||
{
|
||||
id: "bwi-generate",
|
||||
usage: "generate action in edit item forms",
|
||||
},
|
||||
{
|
||||
id: "bwi-import",
|
||||
usage: "import a file",
|
||||
},
|
||||
{
|
||||
id: "bwi-lock",
|
||||
usage: "lock vault action",
|
||||
},
|
||||
{
|
||||
id: "bwi-lock-encrypted",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-lock-f",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-minus-circle",
|
||||
usage: "remove action",
|
||||
},
|
||||
{
|
||||
id: "bwi-pencil-square",
|
||||
usage: "edit action",
|
||||
},
|
||||
{
|
||||
id: "bwi-popout",
|
||||
usage: "popout action",
|
||||
},
|
||||
{
|
||||
id: "bwi-plus",
|
||||
usage: "new or add option in contained buttons/links",
|
||||
},
|
||||
{
|
||||
id: "bwi-plus-circle",
|
||||
usage: "new or add option in text buttons/links",
|
||||
},
|
||||
{
|
||||
id: "bwi-refresh",
|
||||
usage: '"re"-action; such as refresh or regenerate',
|
||||
},
|
||||
{
|
||||
id: "bwi-search",
|
||||
usage: "search action",
|
||||
},
|
||||
{
|
||||
id: "bwi-share",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-sign-in",
|
||||
usage: "sign-in action",
|
||||
},
|
||||
{
|
||||
id: "bwi-sign-out",
|
||||
usage: "sign-out action",
|
||||
},
|
||||
{
|
||||
id: "bwi-star",
|
||||
usage: "favorite action",
|
||||
},
|
||||
{
|
||||
id: "bwi-star-f",
|
||||
usage: "favorited / unfavorite action",
|
||||
},
|
||||
{
|
||||
id: "bwi-trash",
|
||||
usage: "delete action or trash area",
|
||||
},
|
||||
{
|
||||
id: "bwi-undo",
|
||||
usage: "restore action",
|
||||
},
|
||||
{
|
||||
id: "bwi-unlock",
|
||||
usage: "unlocked",
|
||||
},
|
||||
];
|
||||
|
||||
const directionalMenuIndicators = [
|
||||
{
|
||||
id: "bwi-angle-down",
|
||||
usage: "closed dropdown or open expandable section",
|
||||
},
|
||||
{
|
||||
id: "bwi-angle-left",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-angle-right",
|
||||
usage: "closed expandable section",
|
||||
},
|
||||
{
|
||||
id: "bwi-angle-up",
|
||||
usage: "open dropdown",
|
||||
},
|
||||
{
|
||||
id: "bwi-down-solid",
|
||||
usage: "table sort order",
|
||||
},
|
||||
{
|
||||
id: "bwi-drag-and-drop",
|
||||
usage: "drag and drop handle",
|
||||
},
|
||||
{
|
||||
id: "bwi-ellipsis-h",
|
||||
usage: "more options menu horizontal; used in mobile list items",
|
||||
},
|
||||
{
|
||||
id: "bwi-ellipsis-v",
|
||||
usage: "more options menu vertical; used primarily in tables",
|
||||
},
|
||||
{
|
||||
id: "bwi-filter",
|
||||
usage: "Product switcher",
|
||||
},
|
||||
{
|
||||
id: "bwi-list",
|
||||
usage: "toggle list/grid view",
|
||||
},
|
||||
{
|
||||
id: "bwi-list-alt",
|
||||
usage: "view item action in extension",
|
||||
},
|
||||
{
|
||||
id: "bwi-numbered-list",
|
||||
usage: "toggle numbered list view",
|
||||
},
|
||||
{
|
||||
id: "bwi-up-down-btn",
|
||||
usage: "table sort order",
|
||||
},
|
||||
{
|
||||
id: "bwi-up-solid",
|
||||
usage: "table sort order",
|
||||
},
|
||||
];
|
||||
|
||||
const miscObjects = [
|
||||
{
|
||||
id: "bwi-bell",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-billing",
|
||||
usage: "billing options",
|
||||
},
|
||||
{
|
||||
id: "bwi-browser",
|
||||
usage: "web browser",
|
||||
},
|
||||
{
|
||||
id: "bwi-browser-alt",
|
||||
usage: "web browser",
|
||||
},
|
||||
{
|
||||
id: "bwi-brush",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-bug",
|
||||
usage: "test or debug action",
|
||||
},
|
||||
{
|
||||
id: "bwi-camera",
|
||||
usage: "actions related to camera use",
|
||||
},
|
||||
{
|
||||
id: "bwi-cli",
|
||||
usage: "cli client or code",
|
||||
},
|
||||
{
|
||||
id: "bwi-clock",
|
||||
usage: "use for time based actions or views",
|
||||
},
|
||||
{
|
||||
id: "bwi-desktop",
|
||||
usage: "desktop client",
|
||||
},
|
||||
{
|
||||
id: "bwi-dollar",
|
||||
usage: "account credit",
|
||||
},
|
||||
{
|
||||
id: "bwi-file",
|
||||
usage: "file related objects or actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-file-text",
|
||||
usage: "text related objects or actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-hashtag",
|
||||
usage: "link to specific id",
|
||||
},
|
||||
{
|
||||
id: "bwi-key",
|
||||
usage: "key or password related objects or actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-mobile",
|
||||
usage: "mobile client",
|
||||
},
|
||||
{
|
||||
id: "bwi-msp",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-paperclip",
|
||||
usage: "attachments",
|
||||
},
|
||||
{
|
||||
id: "bwi-passkey",
|
||||
usage: "passkey",
|
||||
},
|
||||
{
|
||||
id: "bwi-pencil",
|
||||
usage: "editing",
|
||||
},
|
||||
{
|
||||
id: "bwi-provider",
|
||||
usage: "relates to provider or provider portal",
|
||||
},
|
||||
{
|
||||
id: "bwi-puzzle",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-shield",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-sliders",
|
||||
usage: "reporting or filtering",
|
||||
},
|
||||
{
|
||||
id: "bwi-tag",
|
||||
usage: "labels",
|
||||
},
|
||||
{
|
||||
id: "bwi-universal-access",
|
||||
usage: "use for accessibility related actions",
|
||||
},
|
||||
{
|
||||
id: "bwi-user",
|
||||
usage: "relates to current user or organization member",
|
||||
},
|
||||
{
|
||||
id: "bwi-user-monitor",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-wireless",
|
||||
usage: "-",
|
||||
},
|
||||
{
|
||||
id: "bwi-wrench",
|
||||
usage: "tools or additional configuration options",
|
||||
},
|
||||
];
|
||||
|
||||
const platformsAndLogos = [
|
||||
{
|
||||
id: "bwi-bitcoin",
|
||||
usage: "crypto",
|
||||
},
|
||||
{
|
||||
id: "bwi-paypal",
|
||||
usage: "PayPal",
|
||||
},
|
||||
];
|
||||
|
||||
export const IconStoryData = {
|
||||
platformsAndLogos,
|
||||
actions,
|
||||
bitwardenObjects,
|
||||
statusIndicators,
|
||||
directionalMenuIndicators,
|
||||
miscObjects,
|
||||
};
|
||||
59
libs/components/src/stories/icons/icons.mdx
Normal file
59
libs/components/src/stories/icons/icons.mdx
Normal file
@@ -0,0 +1,59 @@
|
||||
import { Meta, Canvas } from "@storybook/addon-docs";
|
||||
|
||||
import * as stories from "./icons.stories";
|
||||
|
||||
<Meta title="Documentation/Icons" />
|
||||
|
||||
# Iconography
|
||||
|
||||
Bitwarden has a suite of presentational icons available for use, as well as a few helper classes for
|
||||
sizing and rotation.
|
||||
|
||||
Icons use the `bwi` class, as well as an additional `bwi-*` class to indicate which icon will be
|
||||
rendered.
|
||||
|
||||
Example basic usage:
|
||||
|
||||
```
|
||||
<i class="bwi bwi-check"></i>
|
||||
```
|
||||
|
||||
## Accessibility
|
||||
|
||||
Avoid using icons to convey information unless paired with meaningful, clear text. If an icon must
|
||||
be used and text cannot be displayed visually along with the icon, use an `aria-label` to provide
|
||||
the text to screen readers, and a `title` attribute to provide the text visually through a tool tip.
|
||||
Note: this pattern should only be followed for very common iconography such as a settings cog icon
|
||||
or an options menu icon.
|
||||
|
||||
## Status Indicators
|
||||
|
||||
<Canvas of={stories.StatusIcons} />
|
||||
|
||||
## Bitwarden Objects
|
||||
|
||||
<Canvas of={stories.BitwardenObjects} />
|
||||
|
||||
## Actions
|
||||
|
||||
<Canvas of={stories.Actions} />
|
||||
|
||||
## Directional and Menu Indicators
|
||||
|
||||
<Canvas of={stories.DirectionalMenuIndicators} />
|
||||
|
||||
## Misc Objects
|
||||
|
||||
<Canvas of={stories.MiscObjects} />
|
||||
|
||||
## Platforms and Logos
|
||||
|
||||
<Canvas of={stories.PlatformsAndLogos} />
|
||||
|
||||
## Size Variants
|
||||
|
||||
<Canvas of={stories.SizeVariants} />
|
||||
|
||||
## Rotation Variants
|
||||
|
||||
<Canvas of={stories.RotationVariants} />
|
||||
215
libs/components/src/stories/icons/icons.stories.ts
Normal file
215
libs/components/src/stories/icons/icons.stories.ts
Normal file
@@ -0,0 +1,215 @@
|
||||
import { Meta, moduleMetadata } from "@storybook/angular";
|
||||
|
||||
import { TableDataSource, TableModule } from "../../table";
|
||||
|
||||
import { IconStoryData } from "./icon-data";
|
||||
|
||||
type IconWithUsage = {
|
||||
id: string;
|
||||
usage: string;
|
||||
};
|
||||
|
||||
export default {
|
||||
title: "Documentation / Icons",
|
||||
decorators: [
|
||||
moduleMetadata({
|
||||
imports: [TableModule],
|
||||
}),
|
||||
],
|
||||
} as Meta;
|
||||
|
||||
const statusIconData = new TableDataSource<IconWithUsage>();
|
||||
statusIconData.data = IconStoryData.statusIndicators;
|
||||
|
||||
export const StatusIcons = {
|
||||
render: (args: { dataSource: typeof statusIconData }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-table [dataSource]="dataSource">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>Icon</th>
|
||||
<th bitCell>Icon Class</th>
|
||||
<th bitCell>Usage</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body let-rows$>
|
||||
@for (row of rows$ | async; track row.id) {
|
||||
<tr bitRow alignContent="middle">
|
||||
<td bitCell><i class="bwi" [ngClass]="row.id"></i> </td>
|
||||
<td bitCell><code>{{row.id}}</code></td>
|
||||
<td bitCell>{{row.usage}}</td>
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
dataSource: statusIconData,
|
||||
},
|
||||
};
|
||||
|
||||
const bitwardenObjectsData = new TableDataSource<IconWithUsage>();
|
||||
bitwardenObjectsData.data = IconStoryData.bitwardenObjects;
|
||||
|
||||
export const BitwardenObjects = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: bitwardenObjectsData,
|
||||
},
|
||||
};
|
||||
|
||||
const actionsData = new TableDataSource<IconWithUsage>();
|
||||
actionsData.data = IconStoryData.actions;
|
||||
|
||||
export const Actions = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: actionsData,
|
||||
},
|
||||
};
|
||||
|
||||
const directionalMenuIndicatorsData = new TableDataSource<IconWithUsage>();
|
||||
directionalMenuIndicatorsData.data = IconStoryData.directionalMenuIndicators;
|
||||
|
||||
export const DirectionalMenuIndicators = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: directionalMenuIndicatorsData,
|
||||
},
|
||||
};
|
||||
|
||||
const miscObjectsData = new TableDataSource<IconWithUsage>();
|
||||
miscObjectsData.data = IconStoryData.miscObjects;
|
||||
|
||||
export const MiscObjects = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: miscObjectsData,
|
||||
},
|
||||
};
|
||||
|
||||
const platformsAndLogosData = new TableDataSource<IconWithUsage>();
|
||||
platformsAndLogosData.data = IconStoryData.platformsAndLogos;
|
||||
|
||||
export const PlatformsAndLogos = {
|
||||
...StatusIcons,
|
||||
args: {
|
||||
dataSource: platformsAndLogosData,
|
||||
},
|
||||
};
|
||||
|
||||
const sizeData = new TableDataSource<{
|
||||
size: string;
|
||||
usage: string;
|
||||
}>();
|
||||
|
||||
sizeData.data = [
|
||||
{
|
||||
size: "",
|
||||
usage: "default size",
|
||||
},
|
||||
{
|
||||
size: "bwi-sm",
|
||||
usage: "reduce font size to 0.875em",
|
||||
},
|
||||
{
|
||||
size: "bwi-lg",
|
||||
usage: "increase font size to ~1.33em",
|
||||
},
|
||||
{
|
||||
size: "bwi-2x",
|
||||
usage: "increase font size to 2em",
|
||||
},
|
||||
{
|
||||
size: "bwi-3x",
|
||||
usage: "increase font size to 3em",
|
||||
},
|
||||
{
|
||||
size: "bwi-4x",
|
||||
usage: "increase font size to 4em",
|
||||
},
|
||||
{
|
||||
size: "bwi-fw",
|
||||
usage: "set fixed width of ~1.3em and text-align center",
|
||||
},
|
||||
];
|
||||
|
||||
export const SizeVariants = {
|
||||
render: (args: { dataSource: typeof sizeData }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-table [dataSource]="dataSource">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>Icon</th>
|
||||
<th bitCell>Size Class</th>
|
||||
<th bitCell>Class notes</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body let-rows$>
|
||||
@for (row of rows$ | async; track row.size) {
|
||||
<tr bitRow alignContent="middle">
|
||||
<td bitCell><i class="bwi bwi-plus" [ngClass]="row.size"></i> </td>
|
||||
<td bitCell><code>{{row.size}}</code></td>
|
||||
<td bitCell>{{row.usage}}</td>
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
dataSource: sizeData,
|
||||
},
|
||||
};
|
||||
|
||||
const rotationData = new TableDataSource<{
|
||||
class: string;
|
||||
usage: string;
|
||||
}>();
|
||||
|
||||
rotationData.data = [
|
||||
{
|
||||
class: "",
|
||||
usage: "default",
|
||||
},
|
||||
{
|
||||
class: "bwi-rotate-270",
|
||||
usage: "rotate by 270 degrees",
|
||||
},
|
||||
{
|
||||
class: "bwi-spin",
|
||||
usage: "animated spin",
|
||||
},
|
||||
];
|
||||
|
||||
export const RotationVariants = {
|
||||
render: (args: { dataSource: typeof rotationData }) => ({
|
||||
props: args,
|
||||
template: /*html*/ `
|
||||
<bit-table [dataSource]="dataSource">
|
||||
<ng-container header>
|
||||
<tr>
|
||||
<th bitCell>Icon</th>
|
||||
<th bitCell>Size Class</th>
|
||||
<th bitCell>Class notes</th>
|
||||
</tr>
|
||||
</ng-container>
|
||||
<ng-template body let-rows$>
|
||||
@for (row of rows$ | async; track row.class) {
|
||||
<tr bitRow alignContent="middle">
|
||||
<td bitCell><i class="bwi bwi-lock" [ngClass]="row.class"></i> </td>
|
||||
<td bitCell><code>{{row.class}}</code></td>
|
||||
<td bitCell>{{row.usage}}</td>
|
||||
</tr>
|
||||
}
|
||||
</ng-template>
|
||||
</bit-table>
|
||||
`,
|
||||
}),
|
||||
args: {
|
||||
dataSource: rotationData,
|
||||
},
|
||||
};
|
||||
@@ -172,7 +172,7 @@ export class KitchenSinkMainComponent {
|
||||
}
|
||||
|
||||
navItems = [
|
||||
{ icon: "bwi-collection", name: "Password Managers", route: "/" },
|
||||
{ icon: "bwi-collection", name: "Favorites", route: "/" },
|
||||
{ icon: "bwi-collection-shared", name: "Password Managers", route: "/" },
|
||||
{ icon: "bwi-collection-shared", name: "Favorites", route: "/" },
|
||||
];
|
||||
}
|
||||
|
||||
@@ -84,8 +84,13 @@ export const Default: Story = {
|
||||
props: args,
|
||||
template: /* HTML */ `<bit-layout>
|
||||
<bit-side-nav>
|
||||
<bit-nav-group text="Password Managers" icon="bwi-collection" [open]="true">
|
||||
<bit-nav-group text="Favorites" icon="bwi-collection" variant="tree" [open]="true">
|
||||
<bit-nav-group text="Password Managers" icon="bwi-collection-shared" [open]="true">
|
||||
<bit-nav-group
|
||||
text="Favorites"
|
||||
icon="bwi-collection-shared"
|
||||
variant="tree"
|
||||
[open]="true"
|
||||
>
|
||||
<bit-nav-item text="Bitwarden" route="bitwarden"></bit-nav-item>
|
||||
<bit-nav-divider></bit-nav-divider>
|
||||
</bit-nav-group>
|
||||
|
||||
Reference in New Issue
Block a user