Merge pull request #53 from goauthentik/element/ak-divider

Element/ak divider

Author: kensternberg-authentik

src/ak-divider/ak-divider.builder.ts

@@ -0,0 +1,30 @@
+import { type DividerOrientation, type DividerVariant } from "./ak-divider.component.js";
+
+import { html, TemplateResult } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+export type DividerProps = {
+    variant?: DividerVariant;
+    orientation?: DividerOrientation;
+    content?: string | TemplateResult;
+};
+
+/**
+ * @summary Helper function to create a Divider component programmatically
+ *
+ * @returns {TemplateResult} A Lit template result containing the configured ak-divider element
+ *
+ * @see {@link Divider} - The underlying web component
+ */
+export function akDivider(options: DividerProps = {}) {
+    const { variant, orientation, content } = options;
+
+    // Handle string content by wrapping in a span
+    const message = typeof content === "string" ? html`<span>${content.trim()}</span>` : content;
+
+    return html`
+        <ak-divider variant=${ifDefined(variant)} orientation=${ifDefined(orientation)}
+            >${message}</ak-divider
+        >
+    `;
+}

src/ak-divider/ak-divider.component.ts

@@ -0,0 +1,59 @@
+import { AkLitElement } from "../component-base.js";
+import styles from "./ak-divider.css";
+
+import { html } from "lit";
+
+// These are documented here because they are used by the builder as type constraints. They have
+// only visual consequences, so there's no need for them in the component's codebase.
+
+export const dividerVariant = ["default", "strong", "subtle"] as const;
+export type DividerVariant = (typeof dividerVariant)[number];
+
+export const dividerOrientation = ["horizontal", "vertical"] as const;
+export type DividerOrientation = (typeof dividerOrientation)[number];
+
+/**
+ * @element ak-divider
+ * @summary A visual divider that creates thematic breaks or separation between content sections
+ *
+ * @attr {string} variant - Visual style variant: "default", "strong", "subtle"
+ * @attr {string} orientation - Layout orientation: "horizontal", "vertical"
+ *
+ * @slot - Optional content to display in the middle of the divider line
+ *
+ * @csspart divider - The main container element for the divider
+ * @csspart line - The line elements (before and after content if content exists)
+ * @csspart line start - The line element before content (when content is present)
+ * @csspart line end - The line element after content (when content is present)
+ * @csspart content - The wrapper around the slotted content
+ *
+ * @cssprop --pf-v5-c-divider--line-thickness - Width/thickness of the divider line
+ * @cssprop --pf-v5-c-divider--color - Default color of the divider line
+ * @cssprop --pf-v5-c-divider--strong-color - Color for the "strong" variant
+ * @cssprop --pf-v5-c-divider--subtle-color - Color for the "subtle" variant
+ * @cssprop --pf-v5-c-divider--display - Display type for the host element
+ * @cssprop --pf-v5-c-divider--flex-direction - Flex direction for the divider container
+ * @cssprop --pf-v5-c-divider--content-spacing - Spacing between content and lines
+ * @cssprop --pf-v5-c-divider--height - Height of the divider component
+ * @cssprop --pf-v5-c-divider--margin - Margin around the divider
+ * @cssprop --pf-v5-c-divider__line--before--top - Top position of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--left - Left position of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--right - Right position of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--width - Width of the line pseudo-element
+ * @cssprop --pf-v5-c-divider__line--before--height - Height of the line pseudo-element
+ */
+export class Divider extends AkLitElement {
+    static readonly styles = [styles];
+
+    render() {
+        // The `null` slot means use the unnamed slot; usually only for one-slot components.
+        const hasContent = this.hasSlotted(null);
+        return html`<div part="divider">
+            ${hasContent
+                ? html` <span part="line start"></span>
+                      <span part="content"><slot></slot></span>
+                      <span part="line end"></span>`
+                : html` <span part="line"></span> `}
+        </div> `;
+    }
+}

src/ak-divider/ak-divider.css

@@ -0,0 +1,76 @@
+:host {
+    --divider--line-thickness: var(--pf-v5-c-divider--line-thickness, 1px);
+    --divider--color: var(--pf-v5-c-divider--color, #d2d2d2);
+    --divider--strong-color: var(--pf-v5-c-divider--strong-color, #8a8d90);
+    --divider--subtle-color: var(--pf-v5-c-divider--subtle-color, #ededed);
+    --divider--display: var(--pf-v5-c-divider--display, flex);
+    --divider--flex-direction: var(--pf-v5-c-divider--flex-direction, row);
+    --divider--content-spacing: var(--pf-v5-c-divider--content-spacing, 0.35rem);
+    --divider--height: var(--pf-v5-c-divider--height, auto);
+    --divider__line--before--top: var(--pf-v5-c-divider__line--before--top, 50%);
+    --divider__line--before--left: var(--pf-v5-c-divider__line--before--left, 0);
+    --divider__line--before--width: var(--pf-v5-c-divider__line--before--width, 100%);
+    --divider--margin: var(--divider--content-spacing) 0;
+    --divider__line--before--height: var(--divider--line-thickness);
+}
+
+:host([orientation="vertical"]) {
+    --divider--display: inline-flex;
+    --divider--flex-direction: column;
+    --divider--content-spacing: 0.2rem;
+    --divider--height: 100%;
+    --divider--margin: 0 var(--divider--content-spacing);
+    --divider__line--before--top: 0;
+    --divider__line--before--left: 50%;
+    --divider__line--before--width: var(--divider--line-thickness);
+    --divider__line--before--height: 100%;
+}
+
+:host {
+    display: var(--divider--display);
+    height: var(--divider--height);
+    margin: var(--divider--margin);
+}
+
+/* Base divider container styles */
+[part="divider"] {
+    align-items: center;
+    display: flex;
+    flex-direction: var(--divider--flex-direction);
+    width: 100%;
+    height: var(--divider--height);
+}
+
+[part*="line"] {
+    flex-grow: 1;
+    position: relative;
+}
+
+[part*="line"]::before {
+    content: "";
+    position: absolute;
+    background-color: var(--divider--color);
+    left: var(--divider__line--before--left);
+    top: var(--divider__line--before--top);
+    width: var(--divider__line--before--width);
+    height: var(--divider__line--before--height);
+}
+
+[part="content"] {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--divider--content-spacing);
+}
+
+::slotted(*) {
+    color: var(--divider--color);
+}
+
+:host([variant="strong"]) {
+    --divider--color: var(--divider--strong-color);
+}
+
+:host([variant="subtle"]) {
+    --divider--color: var(--divider--subtle-color);
+}

src/ak-divider/ak-divider.root.css

@@ -0,0 +1,20 @@
+:root {
+    --pf-v5-c-divider--line-thickness: 1px;
+    --pf-v5-c-divider--color: var(--pf-v5-global--BorderColor--100, #d2d2d2);
+    --pf-v5-c-divider--strong-color: var(--pf-v5-global--BorderColor--light-100, #8a8d90);
+    --pf-v5-c-divider--subtle-color: var(--pf-v5-global--BorderColor--300, #ededed);
+    --pf-v5-c-divider--display: flex;
+    --pf-v5-c-divider--flex-direction: row;
+    --pf-v5-c-divider--content-spacing: 0.35rem;
+    --pf-v5-c-divider--height: auto;
+    --pf-v5-c-divider__line--before--top: 50%;
+    --pf-v5-c-divider__line--before--left: 0;
+    --pf-v5-c-divider__line--before--width: 100%;
+    --pf-v5-c-divider__line--before--height: var(--pf-v5-c-divider--line-thickness);
+}
+
+html[theme="dark"] {
+    --pf-v5-c-divider--color: var(--pf-v5-global--BorderColor--100, #444548);
+    --pf-v5-c-divider--strong-color: var(--pf-v5-global--BorderColor--light-100, #1b1d21);
+    --pf-v5-c-divider--subtle-color: var(--pf-v5-global--BorderColor--300, #26292d);
+}