web: Testing and documenting the simple things

This commit adds unit tests for the Alerts and EmptyState elements. It includes a new
test/documentation feature; elements can now be fully documented with text description and active
controls.

It *removes* the `babel` imports entirely.  Either we don't need them, or the components that do
need them are importing them automatically.

[An outstanding bug in WebDriverIO](https://github.com/webdriverio/webdriverio/issues/12056)
unfortunately means that the tests cannot be run in parallel for the time being.While one test is
running, the compiler for other tests becomes unreliable. They're currently working on this issue.
I have set the `maxInstances` to **1**.

I have updated the `<ak-alert>` component just a bit, providing an attribute alternative to the
`Level` property; now instead of passing it a `<ak-alert level=${Levels.Warning}>` properties, you
can just say `<ak-alert warning>` and it'll work just fine. The old way is still the default
behavior.

The default behavior for `EmptyState` was a little confusing; I've re-arranged it for clarity. Since
I touched it, I also added the `interface` and `HTMLElementTagNameMap` declarations.

Added documentation to all the elements I've touched (so far).

web/src/elements/Expand.ts

@@ -1,24 +1,53 @@
 import { AKElement } from "@goauthentik/elements/Base";
 
 import { msg } from "@lit/localize";
-import { CSSResult, TemplateResult, css, html } from "lit";
+import { css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import PFExpandableSection from "@patternfly/patternfly/components/ExpandableSection/expandable-section.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
+export interface IExpand {
+    expanded?: boolean;
+    textOpen?: string;
+    textClosed?: string;
+}
+/**
+ * @class Expand
+ * @element ak-expand
+ *
+ * An `ak-expand` is used to hide cluttering details that a user may wish to reveal, such as the raw
+ * details of an alert or event.
+ *
+ * slot - The contents to be hidden or displayed.
+ */
 @customElement("ak-expand")
 export class Expand extends AKElement {
-    @property({ type: Boolean })
+    /**
+     * The state of the expanded content
+     *
+     * @attr
+     */
+    @property({ type: Boolean, reflect: true })
     expanded = false;
 
+    /**
+     * The text to display next to the open/close control when the accordion is closed.
+     *
+     * @attr
+     */
     @property()
     textOpen = msg("Show less");
 
+    /**
+     * The text to display next to the open/close control when the accordion is .
+     *
+     * @attr
+     */
     @property()
     textClosed = msg("Show more");
 
-    static get styles(): CSSResult[] {
+    static get styles() {
         return [
             PFBase,
             PFExpandableSection,
@@ -30,7 +59,7 @@ export class Expand extends AKElement {
         ];
     }
 
-    render(): TemplateResult {
+    render() {
         return html`<div
             class="pf-c-expandable-section pf-m-display-lg pf-m-indented ${this.expanded
                 ? "pf-m-expanded"
@@ -57,3 +86,9 @@ export class Expand extends AKElement {
         </div>`;
     }
 }
+
+declare global {
+    interface HTMLElementTagNameMap {
+        "ak-expand": Expand;
+    }
+}