0a1d283ac8
* Added tests and refinements as tests indicate. * Building out the test suite. * web: test the simple things. Fix what the tests revealed. - Move `EmptyState.test.ts` into the `./tests` folder. - Provide unit tests for: - Alert - Divider - Expand - Label - LoadingOverlay - Give all tested items an Interface and a functional variant for rendering - Give Label an alternative syntax for declaring alert levels - Remove the slot name in LoadingOverlay - Change the slot call in `./enterprise/rac/index.ts` to not need the slot name as well - Change the attribute names `topMost`, `textOpen`, and `textClosed` to `topmost`, `text-open`, and `text-closed`, respectively. - Change locations in the code where those are used to correspond ** Why interfaces: ** Provides another check on the input/output boundaries of our elements, gives Storybook and WebdriverIO another validation to check, and guarantees any rendering functions cannot be passed invalid property names. ** Why functions for rendering: ** Providing functions for rendering gets us one step closer to dynamically defining our forms-in-code at runtime without losing any type safety. ** Why rename the attributes: ** A *very* subtle bug: [Element:setAttribute()](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) automatically "converts an attribute name to all lower-case when called on an HTML element in an HTML document." The three attributes renamed are all treated *as* attributes, either classic boolean or stringly-typed attributes, and attempting to manipulate them with `setAttribute()` will fail. All of these attributes are presentational; none of them end up in a transaction with the back-end, so kebab-to-camel conversions are not a concern. Also, ["topmost" is one word](https://www.merriam-webster.com/dictionary/topmost). ** Why remove the slot name: ** Because there was only one slot. A name is not needed. * Fix minor spelling error. * First pass at a custom, styled input object. * . * web: Demo the simple things. Fix things the Demo says need fixing. - Move the Element's stories into a `./stories` folder - Provide stories for (these are the same ones "provided tests for" in the [previous PR](https://github.com/goauthentik/authentik/pull/11633)) - Alert - Divider - Expand - Label - LoadingOverlay - Provide Storybook documentation for: - AppIcon - ActionButton - AggregateCard - AggregatePromiseCard - QuickActionsCard - Alert - Divider - EmptyState - Expand - Label - LoadingOverlay - ApplicationEmptyState - Fix a bug in LoadingOverlay; naming error in nested slots caused any message attached to the overlay to not sow up correctly. - Revise AppIcon to be independent of authentik; it just cares if the data has a name or an icon reference, it does not need to know about `Application` objects. As such, it's an *element*, not a *component*, and I've moved it into the right location, and updated the few places it is used to match. * Prettier has opinions with which I sometimes diverge. * Found a bug! Although pf-m-xl was defined as a legal size, there was no code to handle drawing something XL! * Found a few typos and incorrect API descriptions.
75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import type { Meta, StoryObj } from "@storybook/web-components";
|
|
|
|
import { LitElement, TemplateResult, css, html } from "lit";
|
|
import { customElement, property } from "lit/decorators.js";
|
|
|
|
import { type ILoadingOverlay, LoadingOverlay } from "../LoadingOverlay.js";
|
|
import "../LoadingOverlay.js";
|
|
|
|
const metadata: Meta<LoadingOverlay> = {
|
|
title: "Elements/<ak-loading-overlay>",
|
|
component: "ak-loading-overlay",
|
|
parameters: {
|
|
docs: {
|
|
description: "Our empty state spinner",
|
|
},
|
|
},
|
|
argTypes: {
|
|
topmost: { control: "boolean" },
|
|
// @ts-ignore
|
|
message: { control: "text" },
|
|
},
|
|
};
|
|
|
|
export default metadata;
|
|
|
|
@customElement("ak-storybook-demo-container")
|
|
export class Container extends LitElement {
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
position: relative;
|
|
height: 25vh;
|
|
width: 75vw;
|
|
}
|
|
#main-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
`;
|
|
}
|
|
|
|
@property({ type: Object, attribute: false })
|
|
content!: TemplateResult;
|
|
|
|
render() {
|
|
return html` <div id="main-container">${this.content}</div>`;
|
|
}
|
|
}
|
|
|
|
export const DefaultStory: StoryObj = {
|
|
args: {
|
|
topmost: undefined,
|
|
// @ts-ignore
|
|
message: undefined,
|
|
},
|
|
|
|
// @ts-ignore
|
|
render: ({ topmost, message }: ILoadingOverlay) => {
|
|
message = typeof message === "string" ? html`<span>${message}</span>` : message;
|
|
const content = html` <ak-loading-overlay ?topmost=${topmost}
|
|
>${message ?? ""}
|
|
</ak-loading-overlay>`;
|
|
return html`<ak-storybook-demo-container
|
|
.content=${content}
|
|
></ak-storybook-demo-container>`;
|
|
},
|
|
};
|
|
|
|
export const WithAMessage: StoryObj = {
|
|
...DefaultStory,
|
|
args: { ...DefaultStory.args, message: html`<p>Overlay with a message</p>` },
|
|
};
|