mirror of
https://github.com/bitwarden/browser.git
synced 2024-11-22 11:45:59 +01:00
Storybook icon documentation (#3023)
* created common/icons page * updated icon documentation * updated icon organization * update organization and some descriptions * updated icon stories
This commit is contained in:
Danielle Flinn
GitHub
parent
7fb3b9cdc8
commit
6a8fb0a053
188
libs/components/src/stories/icons.stories.mdx
Normal file
188
libs/components/src/stories/icons.stories.mdx
Normal file
@ -0,0 +1,188 @@
|
||||
<!-- Iconography.stories.mdx -->
|
||||
|
||||
import { Meta } from "@storybook/addon-docs/";
|
||||
|
||||
<Meta title="Common/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-ban"></i> | bwi-ban | option or feature not available. Example: send maximum access count was reached |
|
||||
| <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-circle"></i> | bwi-exclamation-circle | deprecated error icon; use bwi-error |
|
||||
| <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 |
|
||||
|
||||
## 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-check-square"></i> | bwi-check-square | select all action |
|
||||
| <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-cogs"></i> | bwi-cogs | deprecated; do not use in app. |
|
||||
| <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-f"></i> | bwi-lock-f | - |
|
||||
| <i class="bwi bwi-minus-circle"></i> | bwi-minus-circle | remove action |
|
||||
| <i class="bwi bwi-minus-square"></i> | bwi-minus-square | unselect all action |
|
||||
| <i class="bwi bwi-paste"></i> | bwi-paste | paste from clipbaord action |
|
||||
| <i class="bwi bwi-pencil-square"></i> | bwi-pencil-square | edit action |
|
||||
| <i class="bwi bwi-play"></i> | bwi-play | start or play action |
|
||||
| <i class="bwi bwi-plus"></i> | bwi-plus | 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-plus-square"></i> | bwi-plus-square | - |
|
||||
| <i class="bwi bwi-refresh"></i> | bwi-refresh | "re"-action; such as refresh or regenerate |
|
||||
| <i class="bwi bwi-refresh-tab"></i> | bwi-refresh-tab | - |
|
||||
| <i class="bwi bwi-save"></i> | bwi-save | alternate download action |
|
||||
| <i class="bwi bwi-save-changes"></i> | bwi-save-changes | save changes action |
|
||||
| <i class="bwi bwi-search"></i> | bwi-search | search action |
|
||||
| <i class="bwi bwi-share"></i> | bwi-share | - |
|
||||
| <i class="bwi bwi-share-arrow"></i> | bwi-share-arrow | - |
|
||||
| <i class="bwi bwi-share-square"></i> | bwi-share-square | avoid using; use external-link instead |
|
||||
| <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-stop"></i> | bwi-stop | stop 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 | drop down or expandable options |
|
||||
| <i class="bwi bwi-angle-left"></i> | bwi-angle-left | - |
|
||||
| <i class="bwi bwi-angle-right"></i> | bwi-angle-right | collapsed section that can be expanded |
|
||||
| <i class="bwi bwi-arrow-circle-down"></i> | bwi-arrow-circle-down | table sort order |
|
||||
| <i class="bwi bwi-arrow-circle-left"></i> | bwi-arrow-circle-left | - |
|
||||
| <i class="bwi bwi-arrow-circle-right"></i> | bwi-arrow-circle-right | - |
|
||||
| <i class="bwi bwi-arrow-circle-up"></i> | bwi-arrow-circle-up | table sort order |
|
||||
| <i class="bwi bwi-caret-down"></i> | bwi-caret-down | - |
|
||||
| <i class="bwi bwi-caret-right"></i> | bwi-caret-right | - |
|
||||
| <i class="bwi bwi-chevron-up"></i> | bwi-chevron-up | - |
|
||||
| <i class="bwi bwi-dbl-angle-left"></i> | bwi-dbl-angle-left | - |
|
||||
| <i class="bwi bwi-dbl-angle-right"></i> | bwi-dbl-angle-right | - |
|
||||
| <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 optioins 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-long-arrow-right"></i> | bwi-long-arrow-right | - |
|
||||
| <i class="bwi bwi-numbered-list"></i> | bwi-numbered-list | toggle numbered list view |
|
||||
|
||||
## Misc Objects
|
||||
|
||||
| Icon | bwi-name | Usage |
|
||||
| ----------------------------------------- | --------------------- | ---------------------------------------------- |
|
||||
| <i class="bwi bwi-bank"></i> | bwi-bank | - |
|
||||
| <i class="bwi bwi-billing"></i> | bwi-billing | billing options |
|
||||
| <i class="bwi bwi-bitcoin"></i> | bwi-bitcoin | crypto |
|
||||
| <i class="bwi bwi-bolt"></i> | bwi-bolt | deprecated "danger" icon |
|
||||
| <i class="bwi bwi-bookmark"></i> | bwi-bookmark | bookmark or save related actions |
|
||||
| <i class="bwi bwi-browser"></i> | bwi-browser | 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-chain-broken"></i> | bwi-chain-broken | unlink action |
|
||||
| <i class="bwi bwi-chat"></i> | bwi-chat | - |
|
||||
| <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-cut"></i> | bwi-cut | cut or omit actions |
|
||||
| <i class="bwi bwi-dashboard"></i> | bwi-dashboard | statuses or dashboard views |
|
||||
| <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-pdf"></i> | bwi-file-pdf | PDF related object or actions |
|
||||
| <i class="bwi bwi-file-text"></i> | bwi-file-text | text related objects or actions |
|
||||
| <i class="bwi bwi-bw-folder-open-f1"></i> | bwi-bw-folder-open-f1 | - |
|
||||
| <i class="bwi bwi-folder-closed-f"></i> | bwi-folder-closed-f | - |
|
||||
| <i class="bwi bwi-folder-open"></i> | bwi-folder-open | - |
|
||||
| <i class="bwi bwi-frown"></i> | bwi-frown | - |
|
||||
| <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-learning"></i> | bwi-learning | learning center |
|
||||
| <i class="bwi bwi-lightbulb"></i> | bwi-lightbulb | - |
|
||||
| <i class="bwi bwi-link"></i> | bwi-link | link action |
|
||||
| <i class="bwi bwi-mobile"></i> | bwi-mobile | mobile client |
|
||||
| <i class="bwi bwi-money"></i> | bwi-money | - |
|
||||
| <i class="bwi bwi-paperclip"></i> | bwi-paperclip | attachments |
|
||||
| <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-providers"></i> | bwi-providers | - |
|
||||
| <i class="bwi bwi-puzzle"></i> | bwi-puzzle | - |
|
||||
| <i class="bwi bwi-rocket"></i> | bwi-rocket | - |
|
||||
| <i class="bwi bwi-rss"></i> | bwi-rss | - |
|
||||
| <i class="bwi bwi-server"></i> | bwi-server | - |
|
||||
| <i class="bwi bwi-shield"></i> | bwi-shield | - |
|
||||
| <i class="bwi bwi-sitemap"></i> | bwi-sitemap | - |
|
||||
| <i class="bwi bwi-sliders"></i> | bwi-sliders | reporting or filtering |
|
||||
| <i class="bwi bwi-square"></i> | bwi-square | - |
|
||||
| <i class="bwi bwi-tag"></i> | bwi-tag | labels |
|
||||
| <i class="bwi bwi-thumb-tack"></i> | bwi-thumb-tack | - |
|
||||
| <i class="bwi bwi-thumbs-up"></i> | bwi-thumbs-up | - |
|
||||
| <i class="bwi bwi-universal-access"></i> | bwi-universal-access | use for accessiblity related actions |
|
||||
| <i class="bwi bwi-user"></i> | bwi-user | relates to current user or organization member |
|
||||
| <i class="bwi bwi-user-circle"></i> | bwi-user-circle | - |
|
||||
| <i class="bwi bwi-user-f"></i> | bwi-user-f | - |
|
||||
| <i class="bwi bwi-wrench"></i> | bwi-wrench | tools or aditional 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-chrome"></i> | bwi-chrome | chrome support |
|
||||
| <i class="bwi bwi-discourse"></i> | bwi-discourse | community forum |
|
||||
| <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-linkedin"></i> | bwi-linkedin | link to our linkedIn page |
|
||||
| <i class="bwi bwi-linux"></i> | bwi-linux | linux support |
|
||||
| <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-twitter"></i> | bwi-twitter | link to our twitter page |
|
||||
| <i class="bwi bwi-windows"></i> | bwi-windows | support for windows |
|
||||
| <i class="bwi bwi-youtube"></i> | bwi-youtube | link to our youtube page |
|
||||
Loading…
Reference in New Issue
Block a user