Merge pull request #1546 from easyops-cn/steve/toggle-link

feat(): new brick: eo-toggle-link

Author: qiaofengxi

bricks/basic/docs/eo-toggle-link.md

@@ -0,0 +1,24 @@
+展开/折叠链接。
+
+## Examples
+
+### Basic
+
+```yaml preview
+- brick: eo-toggle-link
+  context:
+    - name: open
+      value: false
+  properties:
+    textContent: Toggle me
+  events:
+    toggle:
+      action: context.replace
+      args:
+        - open
+        - <% EVENT.detail %>
+- brick: p
+  properties:
+    textContent: I see you!
+    hidden: <%= !CTX.open %>
+```

bricks/basic/src/bootstrap.ts

@@ -52,3 +52,4 @@ import "./custom-processors/smartDisplayForEvaluableString.js";
 import "./viewport/index.js";
 import "./data-providers/require-modal-stack.js";
 import "./list/index.js";
+import "./toggle-link/index.js";

bricks/basic/src/toggle-link/index.spec.tsx

@@ -0,0 +1,42 @@
+import { describe, test, expect, jest } from "@jest/globals";
+import { act } from "react-dom/test-utils";
+import { fireEvent } from "@testing-library/dom";
+import "./";
+import type { ToggleLink } from "./index.js";
+
+jest.mock("@next-core/theme", () => ({}));
+
+describe("eo-toggle-link", () => {
+  test("basic usage", async () => {
+    const element = document.createElement("eo-toggle-link") as ToggleLink;
+
+    expect(element.shadowRoot).toBeFalsy();
+    const onToggle = jest.fn();
+    element.addEventListener("toggle", (e) => {
+      onToggle((e as CustomEvent).detail);
+    });
+
+    act(() => {
+      document.body.appendChild(element);
+    });
+    expect(element.shadowRoot?.childNodes.length).toBeGreaterThan(1);
+
+    expect(element.open).toBeFalsy();
+    expect(onToggle).toHaveBeenCalledTimes(0);
+
+    fireEvent.click(element.shadowRoot!.querySelector("eo-link")!);
+    expect(element.open).toBe(true);
+    expect(onToggle).toHaveBeenCalledTimes(1);
+    expect(onToggle).toHaveBeenLastCalledWith(true);
+
+    fireEvent.click(element.shadowRoot!.querySelector("eo-link")!);
+    expect(element.open).toBe(false);
+    expect(onToggle).toHaveBeenCalledTimes(2);
+    expect(onToggle).toHaveBeenLastCalledWith(false);
+
+    act(() => {
+      document.body.removeChild(element);
+    });
+    expect(element.shadowRoot?.childNodes.length).toBe(0);
+  });
+});

bricks/basic/src/toggle-link/index.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { createDecorators, type EventEmitter } from "@next-core/element";
+import { ReactNextElement, wrapBrick } from "@next-core/react-element";
+import "@next-core/theme";
+import type {
+  GeneralIcon,
+  GeneralIconProps,
+} from "@next-bricks/icons/general-icon";
+import type { Link, LinkProps } from "../link/index.js";
+import styleText from "./styles.shadow.css";
+
+const WrappedLink = wrapBrick<Link, LinkProps>("eo-link");
+const WrappedIcon = wrapBrick<GeneralIcon, GeneralIconProps>("eo-icon");
+
+const { defineElement, property, event } = createDecorators();
+
+export interface ToggleLinkProps {
+  open?: boolean;
+  themeVariant?: "default" | "elevo";
+}
+
+/**
+ * 展开/折叠链接。
+ *
+ * @slot - 内容
+ * @part link - 链接
+ * @part icon - 图标
+ */
+export
+@defineElement("eo-toggle-link", {
+  styleTexts: [styleText],
+})
+class ToggleLink extends ReactNextElement implements ToggleLinkProps {
+  @property({ type: Boolean, render: false })
+  accessor open: boolean | undefined;
+
+  /** 主题变体 */
+  @property()
+  accessor themeVariant: "default" | "elevo" | undefined;
+
+  @event({ type: "toggle" })
+  accessor #toggle!: EventEmitter<boolean>;
+
+  #handleToggle = () => {
+    this.#toggle.emit((this.open = !this.open));
+  };
+
+  render() {
+    return (
+      <ToggleLinkComponent
+        open={this.open}
+        themeVariant={this.themeVariant}
+        onToggle={this.#handleToggle}
+      />
+    );
+  }
+}
+
+interface ToggleLinkComponentProps extends ToggleLinkProps {
+  onToggle: () => void;
+}
+
+function ToggleLinkComponent({
+  themeVariant,
+  onToggle,
+}: ToggleLinkComponentProps) {
+  return (
+    <WrappedLink themeVariant={themeVariant} part="link" onClick={onToggle}>
+      <slot />
+      <WrappedIcon part="icon" className="chevron" lib="fa" icon="angle-down" />
+    </WrappedLink>
+  );
+}

bricks/basic/src/toggle-link/styles.shadow.css

@@ -0,0 +1,15 @@
+:host {
+  display: block;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+.chevron {
+  transition: transform 0.2s ease-in-out;
+}
+
+:host([open]) .chevron {
+  transform: rotate(180deg);
+}

shared/common-bricks/common-bricks.json

@@ -40,7 +40,8 @@
     "eo-dropdown-select",
     "eo-loading-container",
     "eo-viewport",
-    "eo-list"
+    "eo-list",
+    "eo-toggle-link"
   ],
   "icons": [
     "eo-antd-icon",