[PM-2276] Upgrade Storybook to v7 (#5258)

libs/components/src/async-actions/standalone.mdx

@@ -0,0 +1,62 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Component Library/Async Actions/Standalone/Documentation" />
+
+# Standalone Async Actions
+
+These directives should be used when building a standalone button that triggers a long running task
+in the background, eg. Refresh buttons. For non-submit buttons that are associated with forms see
+[Async Actions In Forms](?path=/story/component-library-async-actions-in-forms-documentation--page).
+
+## Usage
+
+Adding async actions to standalone buttons requires the following 2 steps
+
+### 1. Add a handler to your `Component`
+
+A handler is a function that returns a promise or an observable. Functions that return `void` are
+also supported which is useful because `return;` can be used to abort an action.
+
+**NOTE:** Defining the handlers as arrow-functions assigned to variables is mandatory if the handler
+needs access to the parent component using the variable `this`.
+
+**NOTE:** Handlers do not need to check if any previous requests have finished because the
+directives have built in protection against users attempting to trigger new actions before the
+previous ones have finished.
+
+#### Example using promises
+
+```ts
+@Component({...})
+class PromiseExampleComponent {
+  handler = async () => {
+    await this.apiService.post(/* ... */);
+  };
+}
+```
+
+#### Example using observables
+
+```ts
+@Component({...})
+class Component {
+  handler = () => {
+    return this.apiService.post$(/* ... */);
+  };
+}
+```
+
+### 2. Add directive to the DOM element
+
+Add the `bitAction` directive and supply the handler defined in step 1.
+
+**NOTE:** The `directive` is defined using the input syntax: `[input]="handler"`. This is different
+from how click handlers are usually defined with the output syntax `(click)="handler()"`.
+
+**NOTE:** `[bitAction]` is used instead of `(click)`. Using both is not supported.
+
+```html
+<button bitButton [bitAction]="handler">Do action</button>
+
+<button bitIconButton="bwi-trash" [bitAction]="handler"></button>`;
+```