From 6a8fb0a053f5a0d20ddc309d0024b61ca2b8eb7e Mon Sep 17 00:00:00 2001
From: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
Date: Thu, 14 Jul 2022 08:17:24 -0700
Subject: [PATCH] Storybook icon documentation (#3023)
* created common/icons page
* updated icon documentation
* updated icon organization
* update organization and some descriptions
* updated icon stories
---
libs/components/src/stories/icons.stories.mdx | 188 ++++++++++++++++++
1 file changed, 188 insertions(+)
create mode 100644 libs/components/src/stories/icons.stories.mdx
diff --git a/libs/components/src/stories/icons.stories.mdx b/libs/components/src/stories/icons.stories.mdx
new file mode 100644
index 00000000000..516fc090705
--- /dev/null
+++ b/libs/components/src/stories/icons.stories.mdx
@@ -0,0 +1,188 @@
+
+
+import { Meta } from "@storybook/addon-docs/";
+
+
+
+# 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 |
+| -------------------------------------------- | ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| | bwi-ban | option or feature not available. Example: send maximum access count was reached |
+| | 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. |
+| | 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. |
+| | bwi-exclamation-circle | deprecated error icon; use bwi-error |
+| | bwi-exclamation-triangle | warning; used in warning callouts, banners, and toasts. Use with warning color variable. |
+| | bwi-info-circle | information; used in info callouts, banners, and toasts. Use with info color variable. |
+| | bwi-question-circle | link to help documentation or hover tooltip |
+| | bwi-spinner | loading |
+
+## Bitwarden Objects
+
+| Icon | bwi-name | Usage |
+| ----------------------------------- | --------------- | --------------------------------------------------- |
+| | bwi-business | organization or vault for Free, Teams or Enterprise |
+| | bwi-collection | collection |
+| | bwi-credit-card | card item type |
+| | bwi-family | family vault or organization |
+| | bwi-folder | folder |
+| | bwi-globe | login item type |
+| | bwi-id-card | identity item type |
+| | bwi-send | send action or feature |
+| | bwi-send-f | - |
+| | bwi-sticky-note | secure note item type |
+| | bwi-users | user group |
+| | bwi-vault | general vault |
+
+## Actions
+
+| Icon | bwi-name | Usage |
+| ------------------------------------- | ----------------- | -------------------------------------------- |
+| | bwi-check-circle | check if password has been exposed |
+| | bwi-check-square | select all action |
+| | bwi-clone | copy to clipboard action |
+| | bwi-close | close action |
+| | bwi-cog | settings |
+| | bwi-cog-f | settings |
+| | bwi-cogs | deprecated; do not use in app. |
+| | bwi-download | download or export |
+| | bwi-envelope | action related to emailing a user |
+| | bwi-external-link | open in new window or popout |
+| | bwi-eye | show icon for password fields |
+| | bwi-eye-slash | hide icon for password fields |
+| | bwi-files | clone action / duplicate an item |
+| | bwi-generate | generate action in edit item forms |
+| | bwi-generate-f | generate feature or action |
+| | bwi-lock | lock vault action |
+| | bwi-lock-f | - |
+| | bwi-minus-circle | remove action |
+| | bwi-minus-square | unselect all action |
+| | bwi-paste | paste from clipbaord action |
+| | bwi-pencil-square | edit action |
+| | bwi-play | start or play action |
+| | bwi-plus | new or add option in contained buttons/links |
+| | bwi-plus-circle | new or add option in text buttons/links |
+| | bwi-plus-square | - |
+| | bwi-refresh | "re"-action; such as refresh or regenerate |
+| | bwi-refresh-tab | - |
+| | bwi-save | alternate download action |
+| | bwi-save-changes | save changes action |
+| | bwi-search | search action |
+| | bwi-share | - |
+| | bwi-share-arrow | - |
+| | bwi-share-square | avoid using; use external-link instead |
+| | bwi-sign-in | sign-in action |
+| | bwi-sign-out | sign-out action |
+| | bwi-star | favorite action |
+| | bwi-star-f | favorited / unfavorite action |
+| | bwi-stop | stop action |
+| | bwi-trash | delete action or trash area |
+| | bwi-undo | restore action |
+| | bwi-unlock | unlocked |
+
+## Directional and Menu Indicators
+
+| Icon | bwi-name | Usage |
+| ------------------------------------------ | ---------------------- | ------------------------------------------------------- |
+| | bwi-angle-down | drop down or expandable options |
+| | bwi-angle-left | - |
+| | bwi-angle-right | collapsed section that can be expanded |
+| | bwi-arrow-circle-down | table sort order |
+| | bwi-arrow-circle-left | - |
+| | bwi-arrow-circle-right | - |
+| | bwi-arrow-circle-up | table sort order |
+| | bwi-caret-down | - |
+| | bwi-caret-right | - |
+| | bwi-chevron-up | - |
+| | bwi-dbl-angle-left | - |
+| | bwi-dbl-angle-right | - |
+| | bwi-ellipsis-h | more options menu horizontal; used in mobile list items |
+| | bwi-ellipsis-v | more optioins menu vertical; used primarily in tables |
+| | bwi-filter | Product switcher |
+| | bwi-hamburger | navigation indicator |
+| | bwi-list | toggle list/grid view |
+| | bwi-list-alt | view item action in extension |
+| | bwi-long-arrow-right | - |
+| | bwi-numbered-list | toggle numbered list view |
+
+## Misc Objects
+
+| Icon | bwi-name | Usage |
+| ----------------------------------------- | --------------------- | ---------------------------------------------- |
+| | bwi-bank | - |
+| | bwi-billing | billing options |
+| | bwi-bitcoin | crypto |
+| | bwi-bolt | deprecated "danger" icon |
+| | bwi-bookmark | bookmark or save related actions |
+| | bwi-browser | web browser |
+| | bwi-bug | test or debug action |
+| | bwi-camera | actions related to camera use |
+| | bwi-chain-broken | unlink action |
+| | bwi-chat | - |
+| | bwi-cli | cli client or code |
+| | bwi-clock | use for time based actions or views |
+| | bwi-cut | cut or omit actions |
+| | bwi-dashboard | statuses or dashboard views |
+| | bwi-desktop | desktop client |
+| | bwi-dollar | account credit |
+| | bwi-file | file related objects or actions |
+| | bwi-file-pdf | PDF related object or actions |
+| | bwi-file-text | text related objects or actions |
+| | bwi-bw-folder-open-f1 | - |
+| | bwi-folder-closed-f | - |
+| | bwi-folder-open | - |
+| | bwi-frown | - |
+| | bwi-hashtag | link to specific id |
+| | bwi-key | key or password related objects or actions |
+| | bwi-learning | learning center |
+| | bwi-lightbulb | - |
+| | bwi-link | link action |
+| | bwi-mobile | mobile client |
+| | bwi-money | - |
+| | bwi-paperclip | attachments |
+| | bwi-pencil | editing |
+| | bwi-provider | relates to provider or provider portal |
+| | bwi-providers | - |
+| | bwi-puzzle | - |
+| | bwi-rocket | - |
+| | bwi-rss | - |
+| | bwi-server | - |
+| | bwi-shield | - |
+| | bwi-sitemap | - |
+| | bwi-sliders | reporting or filtering |
+| | bwi-square | - |
+| | bwi-tag | labels |
+| | bwi-thumb-tack | - |
+| | bwi-thumbs-up | - |
+| | bwi-universal-access | use for accessiblity related actions |
+| | bwi-user | relates to current user or organization member |
+| | bwi-user-circle | - |
+| | bwi-user-f | - |
+| | bwi-wrench | tools or aditional configuration options |
+
+## Platforms and Logos
+
+| Icon | bwi-name | Usage |
+| --------------------------------- | ------------- | ---------------------------- |
+| | bwi-android | android support |
+| | bwi-apple | apple/IOS support |
+| | bwi-chrome | chrome support |
+| | bwi-discourse | community forum |
+| | bwi-edge | edge support |
+| | bwi-facebook | link to our facebook page |
+| | bwi-firefox | support for firefox |
+| | bwi-github | link to our github page |
+| | bwi-google | link to our google page |
+| | bwi-linkedin | link to our linkedIn page |
+| | bwi-linux | linux support |
+| | bwi-opera | support for Opera |
+| | bwi-paypal | PayPal |
+| | bwi-reddit | link to our reddit community |
+| | bwi-safari | safari support |
+| | bwi-twitter | link to our twitter page |
+| | bwi-windows | support for windows |
+| | bwi-youtube | link to our youtube page |