trustchain-oc1-orchestral
/
authentik
Archived
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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.
This commit is contained in:
Ken Sternberg 2023-08-02 11:37:12 -07:00
parent a9a120cd68
commit f4807a3081
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
web/src/admin/applications/wizard/stories/ak-application-wizard.stories.ts
View File

@ -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>`,
);

3
web/src/elements/forms/Radio.ts
View File

@ -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) {