Add an example of a component with custom js

test/components/accordion/index.js

@@ -1,23 +1,25 @@
 const { component, css, div, js, h3 } = require("../../..")
-
 const styles = css.load(__dirname, "index.css")
 
-const code = js`
-  const accordions = document.querySelector('.${styles.accordion}')
-  accordions.forEach(accordion => {
-    accordion.addEventListener('click', function () {
-      const sibling = this.nextElement
-      sibling.classList.toggle('${styles.content}')
-    })
-  })
-`
-
 module.exports = component(
   ({ title }, children) => {
     return [
       h3({ class: styles.accordion }, title),
       div({ class: [styles.content, styles.hidden] }, children),
     ]
   },
-  { styles, code }
+  {
+    styles,
+    scripts: [
+      js`
+        const accordions = document.querySelector('.${styles.accordion}')
+        accordions.forEach(accordion => {
+          accordion.addEventListener('click', function () {
+            const sibling = this.nextElement
+            sibling.classList.toggle('${styles.content}')
+          })
+        })
+      `,
+    ],
+  }
 )

test/pages/documentation/index.js

@@ -0,0 +1,19 @@
+const { doctype, html, head, body, title, h1, p } = require("boxwood")
+const accordion = require("../../components/accordion")
+
+module.exports = () => {
+  return [
+    doctype(),
+    html([
+      head([title("Documentation")]),
+      body([
+        h1("Documentation"),
+        p("This is the documentation page."),
+        accordion(
+          { title: "Accordion" },
+          "This is the content of the accordion."
+        ),
+      ]),
+    ]),
+  ]
+}

test/pages/documentation/index.test.js

@@ -0,0 +1,11 @@
+const test = require("node:test")
+const assert = require("node:assert")
+const { join } = require("path")
+const { compile } = require("../../..")
+
+test("#pages/documentation: it returns a page with an accordion", async () => {
+  const { template } = await compile(join(__dirname, "./index.js"))
+  const html = template()
+  assert(html.includes("Accordion"))
+  assert(html.includes("const sibling = this.nextElement"))
+})