feat: add menu to list component types

theisel · Oct 30, 2022 · c9547e1 · c9547e1
1 parent c9edc93
commit c9547e1
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 1 deletion.
diff --git a/.changeset/eighty-parrots-walk.md b/.changeset/eighty-parrots-walk.md
@@ -0,0 +1,5 @@
+---
+"astro-portabletext": patch
+---
+
+Feat: Added [`<menu>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menu) to `components` props `list` type
diff --git a/astro-portabletext/README.md b/astro-portabletext/README.md
@@ -69,6 +69,7 @@ import { PortableText } from "astro-portabletext";
   list: {
     bullet: /* <ul {...attrs}><slot /></ul> */,
     number: /* <ol {...attrs}><slot /></ol> */,
+    menu: /* <menu {...attrs}><slot /></menu> */,
   },
   listItem: {
     bullet: /* <li {...attrs}><slot /></li> */,

diff --git a/astro-portabletext/components/List.astro b/astro-portabletext/components/List.astro
@@ -8,7 +8,11 @@ const listItemIs = (listItem: string) => listItem === node.listItem;
 ---
 
 {
-  listItemIs("number") ? (
+  listItemIs("menu") ? (
+    <menu {...attrs}>
+      <slot />
+    </menu>
+  ) : listItemIs("number") ? (
     <ol {...attrs}>
       <slot />
     </ol>

diff --git a/astro-portabletext/components/PortableText.astro b/astro-portabletext/components/PortableText.astro
@@ -69,6 +69,7 @@ const components = mergeComponents(
     list: {
       bullet: List,
       number: List,
+      menu: List,
     },
     unknownList: UnknownList,
     listItem: {

diff --git a/astro-portabletext/test/components/fixture/src/pages/list/menu.astro b/astro-portabletext/test/components/fixture/src/pages/list/menu.astro
@@ -0,0 +1,21 @@
+---
+import Layout from "../../layouts/Default.astro";
+import { PortableText } from "astro-portabletext";
+
+const blocks = [
+  {
+    _type: "block",
+    listItem: "menu",
+    children: [
+      {
+        _type: "span",
+        text: "Menu Item 1",
+      },
+    ],
+  },
+];
+---
+
+<Layout>
+  <PortableText value={blocks} />
+</Layout>
diff --git a/astro-portabletext/test/components/list.test.js b/astro-portabletext/test/components/list.test.js
@@ -4,6 +4,13 @@ import { fetchContent } from "../utils.mjs";
 
 const list = suite("list");
 
+list("menu", async () => {
+  const $ = await fetchContent("list/menu");
+  const $el = $("menu");
+
+  assert.is($el.length, 1);
+});
+
 list("ol", async () => {
   const $ = await fetchContent("list/ordered");
   const $el = $("ol");