Merge branch 'master' into feature/org-admin-refresh

libs/components/src/banner/banner.stories.ts

@@ -37,7 +37,10 @@ export default {
 const Template: Story<BannerComponent> = (args: BannerComponent) => ({
   props: args,
   template: `
-    <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">Content Really Long Text Lorem Ipsum Ipsum Ipsum <button>Button</button></bit-banner>
+    <bit-banner [bannerType]="bannerType" (onClose)="onClose($event)">
+        Content Really Long Text Lorem Ipsum Ipsum Ipsum 
+        <button>Button</button>
+    </bit-banner>
   `,
 });
 

libs/components/src/index.ts

@@ -8,6 +8,7 @@ export * from "./form-field";
 export * from "./icon";
 export * from "./icon-button";
 export * from "./menu";
+export * from "./multi-select";
 export * from "./dialog";
 export * from "./link";
 export * from "./tabs";

libs/components/src/multi-select/index.ts

@@ -0,0 +1 @@
+export * from "./multi-select.module";

libs/components/src/stories/Introduction.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 
-<Meta title="Common/Introduction" />
+<Meta title="Documentation/Introduction" />
 
 <style>{`
   .subheading {
@@ -86,7 +86,7 @@ developers to work more efficiently. The primary goal is to ensure a consistent
 different clients and platforms. Currently the primary focus is the web based clients, namely _web_, _browser_ and
 _desktop_.
 
-**Role out status:** we are currently in the process of transitioning the Web Vault to utilize the component library
+**Roll out status:** we are currently in the process of transitioning the Web Vault to utilize the component library
 and the other clients will follow once this work is completed.
 
 <div className="subheading">Configure</div>

libs/components/src/stories/banner-docs.stories.mdx

@@ -0,0 +1,49 @@
+import { Meta, Story } from "@storybook/addon-docs";
+
+<Meta title="Documentation/Banner" />
+
+# Banner
+
+Banners are used for important communication with the user that needs to be seen right away, but has little effect on the experience. Banners appear at the top of the user's screen on page load and persist across all pages a user navigates to.
+
+- They should always be dismissable and never use a timeout. If a user dismisses a banner, it should not reappear during that same active session.
+
+- Use banners sparingly, as they can feel intrusive to the user if they appear unexpectedly. Their effectiveness may decrease if too many are used.
+
+- Avoid stacking multiple banners.
+
+- Banners support a button link (text button).
+
+## Types
+
+Icons should remain consistent across these types. Do not change the icon without consulting designers.
+
+Use the following guidelines to help choose the correct type of banner.
+
+### Premium
+
+<Story id="component-library-banner--premium" />
+
+Used primarily to encourage user to upgrade to premium.
+
+### Info
+
+<Story id="component-library-banner--info" />
+
+Used to communicate release notes, server maintenance or other informative event.
+
+### Warning
+
+<Story id="component-library-banner--warning" />
+
+Used to alert the user of outdated info or versions.
+
+### Danger
+
+<Story id="component-library-banner--danger" />
+
+Rarely used, but may be used to alert users over critical messages or very outdated versions.
+
+## Accessibility
+
+Include `role="status" aria-live="polite"` attributes to ensure screen readers announce the content prior to the test of the page.

libs/components/src/stories/button-docs.stories.mdx

@@ -0,0 +1,73 @@
+import { Meta, Story, Source } from "@storybook/addon-docs";
+
+<Meta title="Documentation/Button" />
+
+# Button
+
+Use buttons for actions in forms, dialogs, and more with support for style, block, icon, and state.
+
+For pairings in the bottom left corner of a page or component, the `primary` call to action will go on the left side of a button group with the `secondary` call to action option on the left.
+
+Pairings in the top right corner of a page, should have the `primary` call to action on the right.
+
+Groups of buttons should have 1rem of spacing between them.
+
+## Choosing the `<a>` or `<button>`
+
+Buttons can use either the `<a>` or `<button>` tags. Choose which based on the action the button takes:
+
+- If navigating to a new page, use `<a>`
+- If taking an action on the current page use `<button>`
+- If the button launches a dialog, use `<button>`
+
+## Submit and async actions
+
+Both submit and async action buttons use a loading button state while an action is taken.
+
+<Story id="component-library-button--loading" />
+
+If your button is preforming a long running task in the background like a server API call, be sure to review the [Async Actions Directive](https://components.bitwarden.com/?path=/story/component-library-async-actions-overview--page).
+
+## Styles
+
+There are 3 main styles for the button: Primary, Secondary, and Danger.
+
+### Primary
+
+<Story id="component-library-button--primary" />
+
+Use the primary button styling for all Primary call to actions. An action is "primary" if it relates to the main purpose of a page. There should never be 2 primary styled buttons next to each other.
+
+### Secondary
+
+<Story id="component-library-button--secondary" />
+
+The secondary styling should be used for secondary calls to action. An action is "secondary" if it relates indirectly to the purpose of a page. There may be multiple secondary buttons next to each other; however, generally there should only be 1 or 2 calls to action per page.
+
+### Danger
+
+<Story id="component-library-button--danger" />
+
+Use the danger styling only in settings when the user may preform a permanent action.
+
+## Disabled UI
+
+Both the disabled and loading states use the default state’s color with a 60% opacity or `tw-opacity-60`.
+
+<Story id="component-library-button--disabled" />
+
+## Block
+
+Typically button widths expand with thier text. In some causes though buttons may need to be block where the width is fixed and the text wraps to 2 lines if exceeding the button’s width.
+
+<Story id="component-library-button--block" />
+
+## Accessibility
+
+### Color contrast
+
+All button styles are WCAG compliant when displayed on `background` and `background-alt` colors. To use a button on a different background, double check that the color contrast is sufficient in both the light and dark themes.
+
+### Loading Buttons
+
+Include an `aria-label` attribute that defaults to “loading” but can be configurable per implementation. On click, the screen reader should announce the `aria-label`. Once the action is compelted, use another messaging pattern to alert the user that the action is complete (example: success toast).

libs/components/src/stories/colors.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs";
 
-<Meta title="Common/Colors" />
+<Meta title="Documentation/Colors" />
 
 export const Row = (name) => (
   <tr class="tw-h-16">

libs/components/src/stories/icons.stories.mdx

@@ -2,7 +2,7 @@
 
 import { Meta } from "@storybook/addon-docs/";
 
-<Meta title="Common/Icons" />
+<Meta title="Documentation/Icons" />
 
 # Iconography
 
@@ -150,6 +150,7 @@ Avoid using icons to convey information unless paired with meaningful, clear tex
 | <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-search-book"></i>       | bwi-search-book       | -                                              |
 | <i class="bwi bwi-server"></i>            | bwi-server            | -                                              |
 | <i class="bwi bwi-shield"></i>            | bwi-shield            | -                                              |
 | <i class="bwi bwi-sitemap"></i>           | bwi-sitemap           | -                                              |