web: updated storybook stories for the wizard, illustration how "a simple wizard" is configured in source code and tested with storybook.

web/src/components/ak-wizard-main/stories/ak-demo-wizard.ts

@@ -1,48 +1,47 @@
-import { AKElement } from "@goauthentik/elements/Base";
-
 import { customElement } from "@lit/reactive-element/decorators/custom-element.js";
 import { html } from "lit";
-import { property } from "lit/decorators.js";
-import { ifDefined } from "lit/directives/if-defined.js";
+import { BackStep, CancelWizard, CloseWizard, NextStep } from "../commonWizardButtons";
+import { msg } from "@lit/localize";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
 import PFRadio from "@patternfly/patternfly/components/Radio/radio.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
 
-import "../ak-wizard-context";
-import "../ak-wizard-frame";
-import type { WizardStep } from "../types";
+import type { WizardStep } from "@goauthentik/components/ak-wizard-main/types";
+import { AkWizard } from "../AkWizard";
+
+type WizardStateUpdate = {
+    message: string;
+};
+
+const dummySteps: WizardStep[] = [
+    {
+        label: "Test Step1",
+        render: () => html`<h2>This space intentionally left blank today</h2>`,
+        disabled: false,
+        buttons: [NextStep, CancelWizard],
+    },
+    {
+        label: "Test Step 2",
+        render: () => html`<h2>This space also intentionally left blank</h2>`,
+        disabled: false,
+        buttons: [BackStep, CloseWizard],
+    },
+];
 
 @customElement("ak-demo-wizard")
-export class AkDemoWizard extends AKElement {
+export class ApplicationWizard extends AkWizard<WizardStateUpdate, WizardStep> {
     static get styles() {
         return [PFBase, PFButton, PFRadio];
     }
 
-    @property({ attribute: false })
-    steps: WizardStep[] = [];
-
-    @property({ type: Boolean })
-    open = false;
-
-    @property()
-    header!: string;
-
-    @property()
-    description?: string;
-
-    render() {
-        return html`
-            <ak-wizard-context .steps=${this.steps}>
-                <ak-wizard-frame
-                    ?open=${this.open}
-                    header=${this.header}
-                    canCancel
-                    description=${ifDefined(this.description)}
-                >
-                    <button slot="trigger" class="pf-c-button pf-m-primary">Show Wizard</button>
-                </ak-wizard-frame>
-            </ak-wizard-context>
-        `;
+    constructor() {
+        super(msg("Open Wizard"), msg("Demo Wizard"), msg("Run the demo wizard"));
+        this.steps = [...dummySteps];
     }
+
+    close() {
+        this.frame.value!.open = false;
+    }
+
 }

web/src/components/ak-wizard-main/stories/ak-wizard-main.stories.ts

@@ -2,11 +2,7 @@ import "@goauthentik/elements/messages/MessageContainer";
 import { Meta } from "@storybook/web-components";
 
 import { TemplateResult, html } from "lit";
-
-import AkWizard from "../ak-wizard-frame";
-import "../ak-wizard-main";
-import { BackStep, CancelWizard, CloseWizard, NextStep } from "../commonWizardButtons";
-import type { WizardStep } from "../types";
+import "./ak-demo-wizard";
 
 const metadata: Meta<AkWizard> = {
     title: "Components / Wizard / Basic",
@@ -36,28 +32,9 @@ const container = (testItem: TemplateResult) =>
         ${testItem}
     </div>`;
 
-const dummySteps: WizardStep[] = [
-    {
-        label: "Test Step1",
-        render: () => html`<h2>This space intentionally left blank today</h2>`,
-        disabled: false,
-        buttons: [NextStep, CancelWizard],
-    },
-    {
-        label: "Test Step 2",
-        render: () => html`<h2>This space also intentionally left blank</h2>`,
-        disabled: false,
-        buttons: [BackStep, CloseWizard],
-    },
-];
 
 export const OnePageWizard = () => {
     return container(
-        html` <ak-wizard-main
-            .steps=${dummySteps}
-            canCancel
-            header="The Grand Illusion"
-            prompt="Start the show!"
-        ></ak-wizard-main>`,
+        html` <ak-demo-wizard></ak-demo-wizard>`
     );
 };