web: adding a storybook for the ak-toggle-group component

This commit is contained in:
Ken Sternberg 2023-08-03 15:11:55 -07:00
parent 6018ffe13d
commit 46926d54ca
1 changed files with 67 additions and 0 deletions

View File

@ -0,0 +1,67 @@
import "@goauthentik/elements/messages/MessageContainer";
import { Meta } from "@storybook/web-components";
import { TemplateResult, html } from "lit";
import "../ak-toggle-group";
import AkToggleGroup from "../ak-toggle-group";
const metadata: Meta<AkToggleGroup> = {
title: "Components / Toggle Group",
component: "ak-toggle-group",
parameters: {
docs: {
description: {
component: "A stylized toggle control",
},
},
},
};
export default metadata;
const LIGHT = "pf-t-light";
function injectTheme() {
setTimeout(() => {
if (!document.body.classList.contains(LIGHT)) {
document.body.classList.add(LIGHT);
}
});
}
const container = (testItem: TemplateResult) => {
injectTheme();
return html` <div style="background: #fff; padding: 2em">
<style>
li {
display: block;
}
p {
margin-top: 1em;
}
</style>
${testItem}
<ul id="toggle-message-pad" style="margin-top: 1em"></ul>
</div>`;
}
const testOptions = [
["funky", "Option One: The Funky One"],
["invalid", "Option Two: The Invalid One"],
["weird", "Option Three: The Weird One"],
];
export const ToggleGroup = () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const displayChange = (ev: any) => {
document.getElementById(
"toggle-message-pad"
)!.innerText = `Value selected: ${ev.detail.value}`;
};
return container(
html`<ak-toggle-group @ak-toggle=${displayChange}>
${testOptions.map(([key, label]) => html`<option value="${key}">${label}</option>`)}
</ak-toggle-group>`
);
};