Add level property to Section component

.size-limit.json

@@ -3,11 +3,11 @@
     "name": "JS Minified",
     "path": "dist/*.js",
     "gzip": false,
-    "limit": "1715B"
+    "limit": "1782B"
   },
   {
     "name": "JS Compressed",
     "path": "dist/*.js",
-    "limit": "775B"
+    "limit": "786B"
   }
 ]

README.md

@@ -219,6 +219,8 @@ Creates a new section (a heading and its level).
 | `component` | `node` | Yes      | The heading component. Can be anything but best used in combination with `<H>`. |
 | `children`  | `node` | No       | The content of the new level.                                                   |
 
+<!-- TODO update docs with low level api / advanced use case (dialogs & portals) -->
+
 #### Example
 
 ```jsx
@@ -250,10 +252,6 @@ function Example2() {
 }
 ```
 
-### `<Level>` component
-
-TODO documentation for low level api / advanced use case (dialogs & portals)
-
 ### `useLevel` hook
 
 Returns an object containing the current `level` and current `Component`.

src/index.test.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { render, cleanup } from "@testing-library/react";
 import { describe, it, expect, afterEach } from "vitest";
 
-import { H, Section, Level, useLevel } from "./index";
+import { H, Section, useLevel } from "./index";
 
 afterEach(() => {
   cleanup();
@@ -121,44 +121,6 @@ describe("H component", () => {
   });
 });
 
-describe("Level component", () => {
-  it("should render a H at the next level", () => {
-    const { getByText } = render(
-      <Level>
-        <Level>
-          <Level>
-            <Level>
-              <H>My H5</H>
-            </Level>
-          </Level>
-        </Level>
-      </Level>
-    );
-
-    const headingEl = getByText("My H5");
-
-    expect(headingEl.tagName).toBe("H5");
-  });
-
-  it("should render a H at a specified level", () => {
-    const { getByText } = render(
-      <Level>
-        <Level>
-          <Level>
-            <Level level={2}>
-              <H>My H2</H>
-            </Level>
-          </Level>
-        </Level>
-      </Level>
-    );
-
-    const headingEl = getByText("My H2");
-
-    expect(headingEl.tagName).toBe("H2");
-  });
-});
-
 describe("Section component", () => {
   it("should be level 1 in first section", () => {
     const { getByText } = render(<Section component={<H>My H1</H>}></Section>);
@@ -217,4 +179,26 @@ describe("Section component", () => {
 
     expect(pEl.tagName).toBe("P");
   });
+
+  it("should render a heading at the specified level", () => {
+    const { getByText } = render(
+      <Section component={<H>My H1</H>}>
+        <Section component={<H>My H2</H>}>
+          <Section component={<H>My H3</H>}>
+            <Section component={<H>My H2-2</H>} level={2}>
+              <Section component={<H>My H3-2</H>}></Section>
+            </Section>
+          </Section>
+        </Section>
+      </Section>
+    );
+
+    const heading2El = getByText("My H2-2");
+
+    expect(heading2El.tagName).toBe("H2");
+
+    const heading3El = getByText("My H3-2");
+
+    expect(heading3El.tagName).toBe("H3");
+  });
 });

src/index.tsx

@@ -51,10 +51,7 @@ type LevelProps = {
  * @param children The children in the next level, or the desired level
  * @param level The desired level
  */
-export function Level({
-  level: desiredLevel,
-  children,
-}: LevelProps): JSX.Element {
+function Level({ level: desiredLevel, children }: LevelProps): JSX.Element {
   const { level: currentLevel } = useLevel();
 
   const level = desiredLevel ?? (Math.min(currentLevel + 1, 6) as Level);
@@ -72,14 +69,29 @@ export function Level({
 type SectionProps = {
   component: React.ReactNode;
   children?: React.ReactNode;
+  level?: Level;
 };
 
 /**
  * Renders `component` in the current level and `children` in the next level.
  * @param component A component containing a heading
  * @param children The children in the next level
+ * @param level A specific level to render instead of the current one
  */
-export function Section({ component, children }: SectionProps): JSX.Element {
+export function Section({
+  component,
+  children,
+  level,
+}: SectionProps): JSX.Element {
+  if (level) {
+    return (
+      <Level level={level}>
+        {component}
+        <Level>{children}</Level>
+      </Level>
+    );
+  }
+
   return (
     <>
       {component}