From f4807a3081503cc638f563ce5b47261b38509ea4 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Wed, 2 Aug 2023 11:37:12 -0700
Subject: [PATCH] web: a HACK for Storybook to inject the "use light theme"
 flag into the body.

This isn't really a very good hack; what it does is say that every story is
responsible for hacking its theme into the parent.  This is very annoying, but
it does mean that we can at least show our components in the best light.
---
 .../stories/ak-application-wizard.stories.ts  | 23 +++++++++++++++----
 web/src/elements/forms/Radio.ts               |  3 ++-
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/web/src/admin/applications/wizard/stories/ak-application-wizard.stories.ts b/web/src/admin/applications/wizard/stories/ak-application-wizard.stories.ts
index 187e4aeb3..e121bdc21 100644
--- a/web/src/admin/applications/wizard/stories/ak-application-wizard.stories.ts
+++ b/web/src/admin/applications/wizard/stories/ak-application-wizard.stories.ts
@@ -54,10 +54,21 @@ const metadata: Meta<AkApplicationWizardApplicationDetails> = {
     },
 };
 
+const LIGHT = "pf-t-light";
+function injectTheme() {
+    setTimeout(() => {
+        if (!document.body.classList.contains(LIGHT)) {
+            document.body.classList.add(LIGHT);
+        }
+    })
+}
+              
+
 export default metadata;
 
-const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 1em">
+const container = (testItem: TemplateResult) => {
+    injectTheme();
+    return html` <div style="background: #fff; padding: 1.0rem;">
         <style>
             li {
                 display: block;
@@ -67,12 +78,14 @@ const container = (testItem: TemplateResult) =>
             }
         </style>
         ${testItem}
-    </div>`;
+</div>`;
+}
 
 export const PageOne = () => {
     return container(
         html`<ak-application-wizard-context>
-            <ak-application-wizard-application-details></ak-application-wizard-application-details>
+<ak-application-wizard-application-details></ak-application-wizard-application-details>
+<hr/>
             <ak-application-context-display-for-test></ak-application-context-display-for-test>
         </ak-application-wizard-context>`,
     );
@@ -82,6 +95,7 @@ export const PageTwo = () => {
     return container(
         html`<ak-application-wizard-context>
             <ak-application-wizard-authentication-method-choice></ak-application-wizard-authentication-method-choice>
+<hr/>
             <ak-application-context-display-for-test></ak-application-context-display-for-test>
         </ak-application-wizard-context>`,
     );
@@ -91,6 +105,7 @@ export const PageThreeLdap = () => {
     return container(
         html`<ak-application-wizard-context>
             <ak-application-wizard-authentication-by-ldap></ak-application-wizard-authentication-by-ldap>
+<hr/>
             <ak-application-context-display-for-test></ak-application-context-display-for-test>
         </ak-application-wizard-context>`,
     );
diff --git a/web/src/elements/forms/Radio.ts b/web/src/elements/forms/Radio.ts
index 432b4ee98..ef2255d94 100644
--- a/web/src/elements/forms/Radio.ts
+++ b/web/src/elements/forms/Radio.ts
@@ -69,7 +69,8 @@ export class Radio<T> extends CustomEmitterElement(AKElement) {
     // already set.
     buildChangeHandler(option: RadioOption<T>) {
         return (ev: Event) => {
-            // This is a controlled input. Stop the native event from escaping.
+            // This is a controlled input. Stop the native event from escaping or affecting the
+            // value.  We'll do that ourselves.
             ev.stopPropagation();
             ev.preventDefault();
             if (this.value === option.value) {