More scaffolding

Author: nebrius

packages/react/src/components/ExpandableSection/ExpandableProperty.tsx

@@ -4,7 +4,6 @@ import { Children, isValidElement } from "react";
 
 import { InternalError } from "../../util/internalError.ts";
 import { ConnectingCell } from "../ConnectingCell.tsx";
-import { PropertyContents } from "./components/PropertyContents.tsx";
 import styles from "./styles.module.css";
 import type {
   ExpandablePropertyBreakoutsProps,
@@ -21,7 +20,13 @@ import type {
  * and front-matter, children, etc. in the body.
  */
 export function ExpandableProperty(props: ExpandablePropertyProps) {
-  return <PropertyContents {...props} />;
+  return (
+    <spk-expandable-property
+      {...props}
+      entryId={props.id}
+      id={props.headingId}
+    ></spk-expandable-property>
+  );
 }
 
 /**

packages/web-components/src/components/expandable/expandableBreakout/component.ts

@@ -65,37 +65,38 @@ export class ExpandableBreakout extends SpeakeasyComponent {
   public override render() {
     let details = html``;
     if (this.isOpen) {
+      const connection = this.hasSlot("properties") ? "connected" : "none";
       details = html`${this.hasSlot("description")
           ? html`<spk-connecting-cell
-              bottom="${this.hasSlot("properties")}"
-              top="${this.hasSlot("properties")}"
+              bottom="${connection}"
+              top="${connection}"
               right="none"
             >
               <slot name="description"></slot>
             </spk-connecting-cell>`
           : null}
         ${this.hasSlot("examples")
           ? html`<spk-connecting-cell
-              bottom="${this.hasSlot("properties")}"
-              top="${this.hasSlot("properties")}"
+              bottom="${connection}"
+              top="${connection}"
               right="none"
             >
               <slot name="examples"></slot>
             </spk-connecting-cell>`
           : null}
         ${this.hasSlot("defaultValue")
           ? html`<spk-connecting-cell
-              bottom="${this.hasSlot("properties")}"
-              top="${this.hasSlot("properties")}"
+              bottom="${connection}"
+              top="${connection}"
               right="none"
             >
               <slot name="defaultValue"></slot>
             </spk-connecting-cell>`
           : null}
         ${this.hasSlot("embed")
           ? html`<spk-connecting-cell
-              bottom="${this.hasSlot("properties")}"
-              top="${this.hasSlot("properties")}"
+              bottom="${connection}"
+              top="${connection}"
               right="connected"
             >
               <slot name="embed"></slot>

packages/web-components/src/components/expandable/expandableProperty/component.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { html } from "lit";
-import { customElement, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 
 import type { LitProps } from "../../../types/components.ts";
 import { eventHandler } from "../../../util/decorators.ts";
@@ -20,20 +20,120 @@ export type ExpandablePropertyProps = LitProps<ExpandableProperty>;
 export class ExpandableProperty extends SpeakeasyComponent {
   static override styles = litStyles;
 
+  /**
+   * The identifier for the row. This id is unique within the tree, but is _not_
+   * unique in the DOM, and is not used to set the `id` attribute on the DOM
+   * element.
+   */
+  @property({ type: String })
+  public entryId!: string;
+
+  /**
+   * The parent entryId for the row (not the parent's DOM ID)
+   */
+  @property({ type: String })
+  public parentId?: string;
+
+  /**
+   * Whether the row has expandable content or not. This is used to know whether
+   * or not to render an expandable header cell in the event when there are no
+   * children. In the case of no children, we do render an expandable header
+   * cell if the row has expandable content, otherwise we do not.
+   */
+  @property({ type: Boolean })
+  public hasExpandableContent!: boolean;
+
+  /**
+   * Whether the row should be expanded by default or not on page load, if it
+   * has children and/or front matter.
+   */
+  @property({ type: Boolean })
+  public expandByDefault!: boolean;
+
   @state()
   private isOpen = false;
   #setIsOpen = eventHandler("spk-toggle", () => (this.isOpen = !this.isOpen));
 
   override connectedCallback() {
     super.connectedCallback();
+    this.isOpen = !!this.expandByDefault;
     hashManager(this.id, (open: boolean) => {
       this.isOpen = open;
     });
   }
 
   public override render() {
-    return html`<div class="property">
-      <div class="propertyDot"></div>
+    // TODO:
+    const measureContainer = null;
+
+    const frontmatterConnection = this.hasSlot("properties")
+      ? "connected"
+      : "none";
+    const frontmatter = html`
+      ${this.hasSlot("description")
+        ? html`
+            <spk-connecting-cell
+              bottom="${frontmatterConnection}"
+              top="${frontmatterConnection}"
+              right="none"
+            >
+              <slot name="description"></slot>
+            </spk-connecting-cell>
+          `
+        : null}
+      ${this.hasSlot("examples")
+        ? html`
+            <spk-connecting-cell
+              bottom="${frontmatterConnection}"
+              top="${frontmatterConnection}"
+              right="none"
+            >
+              <slot name="examples"></slot>
+            </spk-connecting-cell>
+          `
+        : null}
+      ${this.hasSlot("default-value")
+        ? html`
+            <spk-connecting-cell
+              bottom="${frontmatterConnection}"
+              top="${frontmatterConnection}"
+              right="none"
+            >
+              <slot name="default-value"></slot>
+            </spk-connecting-cell>
+          `
+        : null}
+      ${this.hasSlot("embed")
+        ? html`
+            <spk-connecting-cell
+              bottom="${frontmatterConnection}"
+              top="${frontmatterConnection}"
+              right="connected"
+            >
+              <slot name="embed"></slot>
+            </spk-connecting-cell>
+          `
+        : null}
+      ${this.hasSlot("breakouts")
+        ? html` <slot name="breakouts"></slot> `
+        : null}
+    `;
+
+    // TODO:
+    const propertyCell = frontmatter;
+
+    return html`<div data-testid=${this.id} class="entryContainer">
+      <div class="entryHeaderContainer">
+        ${this.hasExpandableContent
+          ? html`<spk-expandable-cell
+              .isOpen="${this.isOpen}"
+              @spk-toggle="${this.#setIsOpen}"
+              variant="property"
+            ></spk-expandable-cell>`
+          : html`<spk-non-expandable-cell></spk-non-expandable-cell>`}
+        <slot name="title"></slot>
+      </div>
+      ${this.isOpen ? propertyCell : null} ${measureContainer}
     </div>`;
   }
 }