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:
parent
a9a120cd68
commit
f4807a3081
|
@ -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;
|
||||
|
@ -68,11 +79,13 @@ const container = (testItem: TemplateResult) =>
|
|||
</style>
|
||||
${testItem}
|
||||
</div>`;
|
||||
}
|
||||
|
||||
export const PageOne = () => {
|
||||
return container(
|
||||
html`<ak-application-wizard-context>
|
||||
<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>`,
|
||||
);
|
||||
|
|
|
@ -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) {
|
||||
|
|
Reference in New Issue