Add filterable content example

docs/css/main.css

@@ -250,6 +250,10 @@ input[type="button"]:hover {
   background: var(--nc-lk-2);
 }
 
+button[aria-pressed="true"] {
+  background: var(--nc-lk-3);
+}
+
 code,
 pre,
 kbd,

docs/examples.md

@@ -33,6 +33,10 @@ You can copy and paste them and then adjust them for your needs.
     <dt><a href="/examples/instant-search">Instant Search</a></dt>
     <dd>Search or filter a data collection while you type.</dd>
   </div>
+  <div>
+    <dt><a href="/examples/filterable-content">Filterable Content</a></dt>
+    <dd>Filter down a table or list of content.</dd>
+  </div>
   <div>
     <dt><a href="/examples/notifications">Notifications</a></dt>
     <dd>Display notification "toasts".</dd>

docs/examples/filterable-content.md

@@ -0,0 +1,104 @@
+---
+layout: example.webc
+title: Filterable Content
+---
+
+This example filters down a table of contacts based on the user's selection.
+
+We start with some filter buttons and a table:
+
+```html
+<div x-ajax id="contacts">
+  <form action="/contacts" role="search" aria-label="Filter contacts">
+    <button name="status" value="Active" aria-pressed="false">Active</button>
+    <button name="status" value="Inactive" aria-pressed="false">Inactive</button>
+  </form>
+  <table>
+    <thead>
+      <tr>
+        <th scope="col">Name</th>
+        <th scope="col">Email</th>
+        <th scope="col">Status</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Finn</td>
+        <td>[email protected]</td>
+        <td>Active</td>
+      </tr>
+      ...
+    </tbody>
+  </table>
+</div>
+```
+
+Clicking a filter button submits the form which issues a `GET` request to `/contacts?status=` and replaces the table with filtered content.
+
+The response will also update the state of the filter form:
+
+```html
+<form action="/contacts" role="search" aria-label="Filter contacts">
+  <button name="status" value="Active" aria-pressed="true">Active</button>
+  <button name="status" value="Inactive" aria-pressed="false">Inactive</button>
+  <button name="status" value="" aria-pressed="false">Reset</button>
+</form>
+```
+
+Notice that the "Active" button has `aria-pressed="true"` to indicate that it has been selected and that the form includes a new button to reset the current filter.
+
+<script>
+  let database = function () {
+    let data = [
+      { id: 1, name: "Finn", email: "[email protected]", status: "Active" },
+      { id: 2, name: "Jake", email: "[email protected]", status: "Inactive" },
+      { id: 3, name: "BMO", email: "[email protected]", status: "Active" },
+      { id: 4, name: "Marceline", email: "[email protected]", status: "Inactive" }
+    ];
+    return {
+      filter: (key, value) => {
+        return data.filter(contact => contact[key] === value)
+      },
+      all: () => data,
+    }
+  }()
+
+  document.addEventListener('DOMContentLoaded', () => {
+    window.server({
+      'GET /contacts': (formData, params) => {
+        return view(params.get('status'))
+      },
+    }).get('/contacts')
+  })
+
+  function view(filter = null) {
+    let contacts = filter ? database.filter('status', filter) : database.all()
+    let rows = contacts.map(contact => `<tr>
+  <td>${contact.name}</td>
+  <td>${contact.email}</td>
+  <td>${contact.status}</td>
+</tr>`).join('\n')
+
+    let reset = filter ? `<button name="status" value="">Reset</button>` : ``
+
+    return `<div x-ajax id="contacts">
+<form action="/contacts" role="search" aria-label="Filter contacts">
+  <button name="status" value="Active" aria-pressed="${String(filter === 'Active')}">Active</button>
+  <button name="status" value="Inactive" aria-pressed="${String(filter === 'Inactive')}">Inactive</button>
+  ${reset}
+</form>
+<table>
+  <thead>
+    <tr>
+      <th scope="col">Name</th>
+      <th scope="col">Email</th>
+      <th scope="col">Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    ${rows ? rows : '<tr><td colspan="3" style="text-align:center;"><em>No results</em></td></tr>'}
+  </tbody>
+</table>
+</div>`
+  }
+</script>