+ get classmap() {
+ const leveltags = ["danger", "warning", "success", "info"].filter(
+ // @ts-ignore
+ (level) => this[level] && this[level] === true,
+ );
+
+ if (leveltags.length > 1) {
+ console.warn("ak-alert has multiple levels defined");
+ }
+ const level = leveltags.length > 0 ? `pf-m-${leveltags[0]}` : this.level;
+
+ return {
+ "pf-c-alert": true,
+ "pf-m-inline": this.inline,
+ [level]: true,
+ };
+ }
+
+ render() {
+ return html`
@@ -36,3 +113,9 @@ export class Alert extends AKElement {
`;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ak-alert": Alert;
+ }
+}
diff --git a/web/src/elements/Divider.ts b/web/src/elements/Divider.ts
index 3f90bb1c74..7fb18952ee 100644
--- a/web/src/elements/Divider.ts
+++ b/web/src/elements/Divider.ts
@@ -5,6 +5,14 @@ import { customElement } from "lit/decorators.js";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
+/**
+ * @class Divider
+ * @element ak-divider
+ *
+ * Divider is a horizontal rule, an in-page element to separate displayed items.
+ *
+ * @slot - HTML to display in-line in the middle of the horizontal rule.
+ */
@customElement("ak-divider")
export class Divider extends AKElement {
static get styles(): CSSResult[] {
@@ -39,3 +47,9 @@ export class Divider extends AKElement {
return html`
`;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ak-divider": Divider;
+ }
+}
diff --git a/web/src/elements/EmptyState.ts b/web/src/elements/EmptyState.ts
index 8842badea2..ba15b140f3 100644
--- a/web/src/elements/EmptyState.ts
+++ b/web/src/elements/EmptyState.ts
@@ -9,17 +9,64 @@ import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-sta
import PFTitle from "@patternfly/patternfly/components/Title/title.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
-@customElement("ak-empty-state")
-export class EmptyState extends AKElement {
- @property({ type: String })
- icon = "";
+export interface IEmptyState {
+ icon?: string;
+ loading?: boolean;
+ fullHeight?: boolean;
+ header?: string;
+}
+/**
+ * @class EmptyState
+ * @element ak-empty-state
+ *
+ * The EmptyState is an in-page element to indicate that something is either loading or unavailable.
+ * When "loading" is true it displays a spinner, otherwise it displays a static icon. The default
+ * icon is a question mark in a circle.
+ *
+ * @slot body - Optional low-priority text that appears beneath the state indicator.
+ * @slot primary - Optional high-priority text that appears some distance between the state indicator.
+ *
+ * The layout of the component is always centered, and from top to bottom:
+ *
+ * ```
+ * icon or spinner
+ * header
+ * body
+ * primary
+ * ```
+ */
+@customElement("ak-empty-state")
+export class EmptyState extends AKElement implements IEmptyState {
+ /**
+ * The Font Awesome icon to display. Defaults to the � symbol.
+ *
+ * @attr
+ */
+ @property({ type: String })
+ icon = "fa-question-circle";
+
+ /**
+ * Whether or not to show the spinner, or the end icon
+ *
+ * @attr
+ */
@property({ type: Boolean })
loading = false;
+ /**
+ * If set, will attempt to occupy the full viewport.
+ *
+ * @attr
+ */
@property({ type: Boolean })
fullHeight = false;
+ /**
+ * [Optional] If set, will display a message in large text beneath the icon
+ *
+ * @attr
+ */
@property()
header = "";
@@ -45,8 +92,7 @@ export class EmptyState extends AKElement {
`;
}
}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ "ak-expand": Expand;
+ }
+}
diff --git a/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts b/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts
index 45430cce4a..150ab62d40 100644
--- a/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts
+++ b/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts
@@ -4,9 +4,9 @@ import { Meta } from "@storybook/web-components";
import { TemplateResult, html } from "lit";
import "./ak-action-button";
-import AKActionButton from "./ak-action-button";
+import { ActionButton } from "./ak-action-button";
-const metadata: Meta
= {
+const metadata: Meta = {
title: "Elements / Action Button",
component: "ak-action-button",
parameters: {
diff --git a/web/src/elements/buttons/ActionButton/ak-action-button.ts b/web/src/elements/buttons/ActionButton/ak-action-button.ts
index e8681cf585..79b1e89cb4 100644
--- a/web/src/elements/buttons/ActionButton/ak-action-button.ts
+++ b/web/src/elements/buttons/ActionButton/ak-action-button.ts
@@ -1,9 +1,14 @@
import { MessageLevel } from "@goauthentik/common/messages";
-import { BaseTaskButton } from "@goauthentik/elements/buttons/SpinnerButton/BaseTaskButton";
+import {
+ BaseTaskButton,
+ type IBaseTaskButton,
+} from "@goauthentik/elements/buttons/SpinnerButton/BaseTaskButton";
import { showMessage } from "@goauthentik/elements/messages/MessageContainer";
import { customElement, property } from "lit/decorators.js";
+type IActionButton = IBaseTaskButton & { apiRequest: () => Promise };
+
/**
* A button associated with an event handler for loading data. Takes an asynchronous function as its
* only property.
@@ -19,7 +24,7 @@ import { customElement, property } from "lit/decorators.js";
*/
@customElement("ak-action-button")
-export class ActionButton extends BaseTaskButton {
+export class ActionButton extends BaseTaskButton implements IActionButton {
/**
* The command to run when the button is pressed. Must return a promise. If the promise is a
* reject or throw, we process the content of the promise and deliver it to the Notification
@@ -27,7 +32,6 @@ export class ActionButton extends BaseTaskButton {
*
* @attr
*/
-
@property({ attribute: false })
apiRequest: () => Promise = () => {
throw new Error();
@@ -52,4 +56,10 @@ export class ActionButton extends BaseTaskButton {
}
}
+declare global {
+ interface HTMLElementTagNameMap {
+ "ak-action-button": ActionButton;
+ }
+}
+
export default ActionButton;
diff --git a/web/src/elements/buttons/SpinnerButton/BaseTaskButton.ts b/web/src/elements/buttons/SpinnerButton/BaseTaskButton.ts
index 7e07dc3a4b..458e54e39d 100644
--- a/web/src/elements/buttons/SpinnerButton/BaseTaskButton.ts
+++ b/web/src/elements/buttons/SpinnerButton/BaseTaskButton.ts
@@ -36,6 +36,10 @@ const StatusMap = new Map([
const SPINNER_TIMEOUT = 1000 * 1.5; // milliseconds
+export interface IBaseTaskButton {
+ disabled?: boolean;
+}
+
/**
* BaseTaskButton
*
@@ -46,7 +50,6 @@ const SPINNER_TIMEOUT = 1000 * 1.5; // milliseconds
* `onFailure` call their `super.` equivalents.
*
*/
-
export abstract class BaseTaskButton extends CustomEmitterElement(AKElement) {
eventPrefix = "ak-button";
diff --git a/web/src/elements/buttons/SpinnerButton/ak-spinner-button.ts b/web/src/elements/buttons/SpinnerButton/ak-spinner-button.ts
index e3b07e2fb0..9cf75df297 100644
--- a/web/src/elements/buttons/SpinnerButton/ak-spinner-button.ts
+++ b/web/src/elements/buttons/SpinnerButton/ak-spinner-button.ts
@@ -1,7 +1,7 @@
import { customElement } from "lit/decorators.js";
import { property } from "lit/decorators.js";
-import { BaseTaskButton } from "./BaseTaskButton";
+import { BaseTaskButton, type IBaseTaskButton } from "./BaseTaskButton";
/**
* A button associated with an event handler for loading data. Takes an asynchronous function as its
@@ -17,8 +17,10 @@ import { BaseTaskButton } from "./BaseTaskButton";
* @fires ak-button-reset - When the button is reset after the async process completes
*/
+type ISpinnerButton = IBaseTaskButton & { callAction: () => Promise };
+
@customElement("ak-spinner-button")
-export class SpinnerButton extends BaseTaskButton {
+export class SpinnerButton extends BaseTaskButton implements ISpinnerButton {
/**
* The command to run when the button is pressed. Must return a promise. We don't do anything
* with that promise other than check if it's a resolve or reject, and rethrow the event after.
@@ -29,4 +31,10 @@ export class SpinnerButton extends BaseTaskButton {
callAction!: () => Promise;
}
+declare global {
+ interface HTMLElementTagNameMap {
+ "ak-spinner-button": SpinnerButton;
+ }
+}
+
export default SpinnerButton;
diff --git a/web/src/elements/cards/stories/AggregateCard.tests.ts b/web/src/elements/cards/stories/AggregateCard.test.ts
similarity index 100%
rename from web/src/elements/cards/stories/AggregateCard.tests.ts
rename to web/src/elements/cards/stories/AggregateCard.test.ts
diff --git a/web/src/elements/cards/stories/AggregatePromiseCard.tests.ts b/web/src/elements/cards/stories/AggregatePromiseCard.test.ts
similarity index 100%
rename from web/src/elements/cards/stories/AggregatePromiseCard.tests.ts
rename to web/src/elements/cards/stories/AggregatePromiseCard.test.ts
diff --git a/web/src/elements/cards/stories/QuickActionCard.tests.ts b/web/src/elements/cards/stories/QuickActionCard.test.ts
similarity index 100%
rename from web/src/elements/cards/stories/QuickActionCard.tests.ts
rename to web/src/elements/cards/stories/QuickActionCard.test.ts
diff --git a/web/src/elements/stories/Alert.docs.mdx b/web/src/elements/stories/Alert.docs.mdx
new file mode 100644
index 0000000000..92f7ff7bf9
--- /dev/null
+++ b/web/src/elements/stories/Alert.docs.mdx
@@ -0,0 +1,43 @@
+import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+
+import * as AlertStories from "./Alert.stories";
+
+
+
+# Alerts
+
+Alerts are in-page elements intended to draw the user's attention and alert them to important
+details. Alerts are used alongside form elements to warn users of potential mistakes they can
+make, as well as in in-line documentation.
+
+## Usage
+
+```Typescript
+import "@goauthentik/elements/Alert.js";
+```
+
+Note that the content of an alert _must_ be a valid HTML component; plain text does not work here.
+
+```html
+This is the content of your alert!
+```
+
+## Demo
+
+### Default
+
+The default state of an alert is _warning_.
+
+
+
+### Info
+
+
+
+### Success
+
+
+
+### Danger
+
+
diff --git a/web/src/elements/stories/Alert.stories.ts b/web/src/elements/stories/Alert.stories.ts
new file mode 100644
index 0000000000..eea8e624d6
--- /dev/null
+++ b/web/src/elements/stories/Alert.stories.ts
@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { html } from "lit";
+
+import { Alert, type IAlert } from "../Alert.js";
+import "../Alert.js";
+
+type IAlertForTesting = IAlert & { message: string };
+
+const metadata: Meta = {
+ title: "Elements/",
+ component: "ak-alert",
+ parameters: {
+ docs: {
+ description: "An alert",
+ },
+ },
+ argTypes: {
+ inline: { control: "boolean" },
+ warning: { control: "boolean" },
+ info: { control: "boolean" },
+ success: { control: "boolean" },
+ danger: { control: "boolean" },
+ // @ts-ignore
+ message: { control: "text" },
+ },
+};
+
+export default metadata;
+
+export const DefaultStory: StoryObj = {
+ args: {
+ inline: false,
+ warning: false,
+ info: false,
+ success: false,
+ danger: false,
+ message: "You should be alarmed.",
+ },
+
+ // @ts-ignore
+ render: ({ inline, warning, info, success, danger, message }: IAlertForTesting) => {
+ return html` `;
+ },
+};
+
+export const SuccessAlert = {
+ ...DefaultStory,
+ args: { ...DefaultStory, ...{ success: true, message: "He's a tribute to your genius!" } },
+};
+
+export const InfoAlert = {
+ ...DefaultStory,
+ args: { ...DefaultStory, ...{ info: true, message: "An octopus has tastebuds on its arms." } },
+};
+
+export const DangerAlert = {
+ ...DefaultStory,
+ args: { ...DefaultStory, ...{ danger: true, message: "Danger, Will Robinson! Danger!" } },
+};
diff --git a/web/src/elements/stories/Alert.test.ts b/web/src/elements/stories/Alert.test.ts
new file mode 100644
index 0000000000..e8eff1abe3
--- /dev/null
+++ b/web/src/elements/stories/Alert.test.ts
@@ -0,0 +1,36 @@
+import { $, expect } from "@wdio/globals";
+
+import { html, render } from "lit";
+
+import "../Alert.js";
+import { Level } from "../Alert.js";
+
+describe("ak-alert", () => {
+ it("should render an alert with the enum", async () => {
+ render(html`This is an alert`, document.body);
+
+ await expect(await $("ak-alert").$(">>>div")).not.toHaveElementClass("pf-m-inline");
+ await expect(await $("ak-alert").$(">>>div")).toHaveElementClass("pf-c-alert");
+ await expect(await $("ak-alert").$(">>>div")).toHaveElementClass("pf-m-info");
+ await expect(await $("ak-alert").$(">>>.pf-c-alert__title")).toHaveText("This is an alert");
+ });
+
+ it("should render an alert with the attribute", async () => {
+ render(html`This is an alert`, document.body);
+ await expect(await $("ak-alert").$(">>>div")).toHaveElementClass("pf-m-info");
+ await expect(await $("ak-alert").$(">>>.pf-c-alert__title")).toHaveText("This is an alert");
+ });
+
+ it("should render an alert with conflicting attributes in priority order", async () => {
+ render(html`This is an alert`, document.body);
+ await expect(await $("ak-alert").$(">>>div")).toHaveElementClass("pf-m-danger");
+ await expect(await $("ak-alert").$(">>>.pf-c-alert__title")).toHaveText("This is an alert");
+ });
+
+ it("should render an alert with an inline class and the default level", async () => {
+ render(html`This is an alert`, document.body);
+ await expect(await $("ak-alert").$(">>>div")).toHaveElementClass("pf-m-warning");
+ await expect(await $("ak-alert").$(">>>div")).toHaveElementClass("pf-m-inline");
+ await expect(await $("ak-alert").$(">>>.pf-c-alert__title")).toHaveText("This is an alert");
+ });
+});
diff --git a/web/src/elements/stories/Divider.docs.mdx b/web/src/elements/stories/Divider.docs.mdx
new file mode 100644
index 0000000000..7b534a4de3
--- /dev/null
+++ b/web/src/elements/stories/Divider.docs.mdx
@@ -0,0 +1,51 @@
+import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+
+import * as DividerStories from "./Divider.stories";
+
+
+
+# Divider
+
+Divider is a horizontal rule, an in-page element to separate displayed items.
+
+It has no configurable attributes. It does have a single unnamed slot, which is displayed in-line in
+the center of the rule. If the CSS Base in loaded into the parent context, icons defined in the base
+can be used here.
+
+## Usage
+
+```Typescript
+import "@goauthentik/elements/Divider.js";
+```
+
+```html
+
+```
+
+With content:
+
+```html
+Your content here
+```
+
+With an icon:
+
+```html
+
+```
+
+## Demo
+
+Note that the Divider inherits its background from its parent component.
+
+### Default Horizontal Rule
+
+
+
+### With A Message
+
+
+
+### With an Icon
+
+
diff --git a/web/src/elements/stories/Divider.stories.ts b/web/src/elements/stories/Divider.stories.ts
new file mode 100644
index 0000000000..1d424294c7
--- /dev/null
+++ b/web/src/elements/stories/Divider.stories.ts
@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { TemplateResult, html } from "lit";
+
+import { Divider } from "../Divider.js";
+import "../Divider.js";
+
+const metadata: Meta = {
+ title: "Elements/",
+ component: "ak-divider",
+ parameters: {
+ docs: {
+ description: "our most simple divider",
+ },
+ },
+};
+
+export default metadata;
+
+const container = (content: TemplateResult) =>
+ html`
+ ${content}
+
`;
+
+export const DefaultStory: StoryObj = {
+ render: () => container(html` `),
+};
+
+export const DividerWithSlottedContent: StoryObj = {
+ render: () => container(html` Time for bed!
`),
+};
+
+export const DividerWithSlottedIcon: StoryObj = {
+ render: () => container(html` `),
+};
diff --git a/web/src/elements/stories/Divider.test.ts b/web/src/elements/stories/Divider.test.ts
new file mode 100644
index 0000000000..3f87da04d9
--- /dev/null
+++ b/web/src/elements/stories/Divider.test.ts
@@ -0,0 +1,33 @@
+import { ensureCSSStyleSheet } from "@goauthentik/elements/utils/ensureCSSStyleSheet.js";
+import { $, expect } from "@wdio/globals";
+
+import { TemplateResult, html, render as litRender } from "lit";
+
+import AKGlobal from "@goauthentik/common/styles/authentik.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+
+import "../Divider.js";
+
+const render = (body: TemplateResult) => {
+ document.adoptedStyleSheets = [
+ ...document.adoptedStyleSheets,
+ ensureCSSStyleSheet(PFBase),
+ ensureCSSStyleSheet(AKGlobal),
+ ];
+ return litRender(body, document.body);
+};
+
+describe("ak-divider", () => {
+ it("should render the divider", async () => {
+ render(html``);
+ const empty = await $("ak-divider");
+ await expect(empty).toExist();
+ });
+
+ it("should render the divider with the specified text", async () => {
+ render(html`Your Message Here`);
+ const span = await $("ak-divider").$("span");
+ await expect(span).toExist();
+ await expect(span).toHaveText("Your Message Here");
+ });
+});
diff --git a/web/src/elements/stories/EmptyState.docs.mdx b/web/src/elements/stories/EmptyState.docs.mdx
new file mode 100644
index 0000000000..c5e770871d
--- /dev/null
+++ b/web/src/elements/stories/EmptyState.docs.mdx
@@ -0,0 +1,59 @@
+import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+
+import * as EmptyStateStories from "./EmptyState.stories";
+
+
+
+# EmptyState
+
+The EmptyState is an in-page element to indicate that something is either loading or unavailable.
+When "loading" is true it displays a spinner, otherwise it displays a static icon. The default
+icon is a question mark in a circle.
+
+It has two named slots, `body` and `primary`, to communicate further details about the current state
+this element is meant to display.
+
+## Usage
+
+```Typescript
+import "@goauthentik/elements/EmptyState.js";
+```
+
+Note that the content of an alert _must_ be a valid HTML component; plain text does not work here.
+
+```html
+This would display in the "primary" slot
+```
+
+## Demo
+
+### Default: Loading
+
+The default state is _loading_
+
+
+
+### Done
+
+
+
+### Alternative "Done" Icon
+
+This also shows the "header" attribute filled, which is rendered in a large, dark typeface.
+
+
+
+### The Body Slot Filled
+
+The body content slot is rendered in a lighter typeface at default size.
+
+
+
+### The Body and Primary Slot Filled
+
+The primary content is rendered in the normal dark typeface at default size. It is also spaced
+significantly below the spinner itself.
+
+
diff --git a/web/src/elements/stories/EmptyState.stories.ts b/web/src/elements/stories/EmptyState.stories.ts
new file mode 100644
index 0000000000..69d710f5bd
--- /dev/null
+++ b/web/src/elements/stories/EmptyState.stories.ts
@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { TemplateResult, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { EmptyState, type IEmptyState } from "../EmptyState.js";
+import "../EmptyState.js";
+
+const metadata: Meta = {
+ title: "Elements/",
+ component: "ak-empty-state",
+ parameters: {
+ docs: {
+ description: "Our empty state spinner",
+ },
+ },
+ argTypes: {
+ icon: { control: "text" },
+ loading: { control: "boolean" },
+ fullHeight: { control: "boolean" },
+ header: { control: "text" },
+ },
+};
+
+export default metadata;
+
+const container = (content: TemplateResult) =>
+ html`
+ ${content}
+
`;
+
+export const DefaultStory: StoryObj = {
+ args: {
+ icon: undefined,
+ loading: true,
+ fullHeight: false,
+ header: undefined,
+ },
+
+ render: ({ icon, loading, fullHeight, header }: IEmptyState) =>
+ container(
+ html`
+ `,
+ ),
+};
+
+export const DefaultAndLoadingDone = {
+ ...DefaultStory,
+ args: { ...DefaultStory, ...{ loading: false } },
+};
+
+export const DoneWithAlternativeIcon = {
+ ...DefaultStory,
+ args: {
+ ...DefaultStory,
+ ...{ loading: false, icon: "fa-space-shuttle", header: "The final frontier" },
+ },
+};
+
+export const WithBodySlotFilled = {
+ ...DefaultStory,
+ args: {
+ ...DefaultStory,
+ ...{ loading: false, icon: "fa-space-shuttle", header: "The final frontier" },
+ },
+ render: ({ icon, loading, fullHeight, header }: IEmptyState) =>
+ container(html`
+
+ This is the body content
+
+ `),
+};
+
+export const WithBodyAndPrimarySlotsFilled = {
+ ...DefaultStory,
+ args: {
+ ...DefaultStory,
+ ...{ loading: false, icon: "fa-space-shuttle", header: "The final frontier" },
+ },
+ render: ({ icon, loading, fullHeight, header }: IEmptyState) =>
+ container(
+ html`
+ This is the body content slot
+ This is the primary content slot
+ `,
+ ),
+};
diff --git a/web/src/elements/EmptyState.test.ts b/web/src/elements/stories/EmptyState.test.ts
similarity index 95%
rename from web/src/elements/EmptyState.test.ts
rename to web/src/elements/stories/EmptyState.test.ts
index ac0d68c586..7ef5f46038 100644
--- a/web/src/elements/EmptyState.test.ts
+++ b/web/src/elements/stories/EmptyState.test.ts
@@ -7,7 +7,7 @@ import { TemplateResult, html, render as litRender } from "lit";
import AKGlobal from "@goauthentik/common/styles/authentik.css";
import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import "./EmptyState.js";
+import "../EmptyState.js";
const render = (body: TemplateResult) => {
document.adoptedStyleSheets = [
@@ -58,6 +58,6 @@ describe("ak-empty-state", () => {
);
const message = await $("ak-empty-state").$(">>>.pf-c-empty-state__body").$(">>>p");
- await expect(message).toHaveText("Try again with a different filter");
+ await expect(message).toHaveText("Try again with a fucked filter");
});
});
diff --git a/web/src/elements/stories/Expand.docs.mdx b/web/src/elements/stories/Expand.docs.mdx
new file mode 100644
index 0000000000..c5ee9b455a
--- /dev/null
+++ b/web/src/elements/stories/Expand.docs.mdx
@@ -0,0 +1,38 @@
+import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+
+import * as ExpandStories from "./Expand.stories";
+
+
+
+# Expand
+
+Expand is an in-page element used to hid cluttering details that a user may wish to reveal, such as raw
+details of an alert or event.
+
+It has one unnamed slot for the content to be displayed.
+
+## Usage
+
+```Typescript
+import "@goauthentik/elements/Expand.js";
+```
+
+```html
+Your primary content goes here
+```
+
+To show the expanded content on initial render:
+
+```html
+Your primary content goes here
+```
+
+## Demo
+
+### Default: The content is hidden
+
+
+
+### Expanded
+
+
diff --git a/web/src/elements/stories/Expand.stories.ts b/web/src/elements/stories/Expand.stories.ts
new file mode 100644
index 0000000000..b7baa4eb69
--- /dev/null
+++ b/web/src/elements/stories/Expand.stories.ts
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import { TemplateResult, html } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import { Expand, type IExpand } from "../Expand.js";
+import "../Expand.js";
+
+const metadata: Meta = {
+ title: "Elements/",
+ component: "ak-expand",
+ parameters: {
+ docs: {
+ description: "Our accordion component",
+ },
+ },
+ argTypes: {
+ expanded: { control: "boolean" },
+ textOpen: { control: "text" },
+ textClosed: { control: "text" },
+ },
+};
+
+export default metadata;
+
+const container = (content: TemplateResult) =>
+ html`
+ ${content}
+
`;
+
+export const DefaultStory: StoryObj = {
+ args: {
+ expanded: false,
+ textOpen: undefined,
+ textClosed: undefined,
+ },
+
+ render: ({ expanded, textOpen, textClosed }: IExpand) =>
+ container(
+ html`
+
Μήτ᾽ ἔμοι μέλι μήτε μέλισσα
+
"Neither the bee nor the honey for me." - Sappho, 600 BC
+
This is the expanded text
`);
+ const text = await $("ak-expand").$(">>>.pf-c-expandable-section__content");
+ await expect(text).not.toBeDisplayed();
+ });
+
+ it("should render the expansion content visible on demand", async () => {
+ render(html`This is the expanded text
`);
+ const paragraph = await $("ak-expand").$(">>>p");
+ await expect(paragraph).toExist();
+ await expect(paragraph).toBeDisplayed();
+ await expect(paragraph).toHaveText("This is the expanded text");
+ });
+
+ it("should respond to the click event", async () => {
+ render(html`This is the expanded text
`);
+ let content = await $("ak-expand").$(">>>.pf-c-expandable-section__content");
+ await expect(content).toExist();
+ await expect(content).not.toBeDisplayed();
+ const control = await $("ak-expand").$(">>>button");
+
+ await control.click();
+ content = await $("ak-expand").$(">>>.pf-c-expandable-section__content");
+ await expect(content).toExist();
+ await expect(content).toBeDisplayed();
+
+ await control.click();
+ content = await $("ak-expand").$(">>>.pf-c-expandable-section__content");
+ await expect(content).toExist();
+ await expect(content).not.toBeDisplayed();
+ });
+});
diff --git a/web/wdio.conf.ts b/web/wdio.conf.ts
index f1fd0c9f62..3c02e6a20c 100644
--- a/web/wdio.conf.ts
+++ b/web/wdio.conf.ts
@@ -87,7 +87,7 @@ export const config: Options.Testrunner = {
// and 30 processes will get spawned. The property handles how many capabilities
// from the same test should run tests.
//
- maxInstances: 10,
+ maxInstances: 1,
//
// If you have trouble getting all important capabilities together, check out the
// Sauce Labs platform configurator - a great tool to configure your capabilities: