pattern-dump 0.1.0-alpha.0

package/templates/examples/src/patterns/molecules/search-field/input/input.schema.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Input",
+  "type": "object",
+  "required": ["inputLabel"],
+  "properties": {
+    "inputLabel":  { "type": "string" },
+    "placeholder": { "type": "string" }
+  }
+}

package/templates/examples/src/patterns/molecules/search-field/search-field.hbs

@@ -0,0 +1,5 @@
+<form class="search-field" role="search">
+  {{> molecules-input }}
+  {{> atoms-button label=buttonLabel variant="primary" type="submit" }}
+  <p class="search-field-status" role="status"></p>
+</form>

package/templates/examples/src/patterns/molecules/search-field/search-field.json

@@ -0,0 +1 @@
+{ "inputLabel": "Search", "placeholder": "Components, tokens…", "buttonLabel": "Search" }

package/templates/examples/src/patterns/molecules/search-field/search-field.md

@@ -0,0 +1,21 @@
+---
+title: Search field
+description: A labelled search input with a submit button.
+status: draft
+requireScript: [search-field]
+---
+
+Composes two components:
+
+- **`atoms-button`**, included with arguments: `{{> atoms-button label=buttonLabel type="submit" }}`.
+- **`molecules-input`**, a *private* sub-component. It lives inside this folder, is marked
+  `visibility: private`, and is hidden in the tree until internals are shown.
+
+Both edges appear in the Inspector's **Relationships** tab.
+
+**Behaviour** comes from `src/scripts/search-field.ts`, loaded by `requireScript: [search-field]` in
+this file's frontmatter. Every preview that shows a search field loads it — the example page too.
+Submit the form: the query appears in the status line instead of the preview navigating away.
+
+```pattern molecules/search-field
+```

package/templates/examples/src/patterns/molecules/search-field/search-field.schema.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Search field",
+  "type": "object",
+  "required": ["inputLabel", "buttonLabel"],
+  "properties": {
+    "inputLabel":  { "type": "string", "description": "Label of the search input" },
+    "placeholder": { "type": "string" },
+    "buttonLabel": { "type": "string", "description": "Text of the submit button" }
+  }
+}

package/templates/examples/src/patterns/pages/example/example.hbs

@@ -0,0 +1,11 @@
+<div class="page">
+  <header class="page-header">
+    <h1 class="page-title">{{title}}</h1>
+    {{> molecules-search-field }}
+  </header>
+  <div class="page-content">
+    <p>{{intro}}</p>
+    {{> atoms-button label=ctaLabel variant="primary" type="button" }}
+    {{> "atoms-button~secondary" }}
+  </div>
+</div>

package/templates/examples/src/patterns/pages/example/example.json

@@ -0,0 +1,8 @@
+{
+  "title": "Example page",
+  "intro": "Pages compose molecules and atoms into a whole layout.",
+  "ctaLabel": "Get started",
+  "inputLabel": "Search",
+  "placeholder": "Components, tokens…",
+  "buttonLabel": "Search"
+}

package/templates/examples/src/patterns/pages/example/example.md

@@ -0,0 +1,11 @@
+---
+title: Example page
+description: A full-width layout composing the search field and buttons.
+status: draft
+---
+
+`pages` previews fill the stage (`preview: full` in `pages/index.md`). It includes a variant by its
+quoted handle — `{{> "atoms-button~secondary" }}` — because `~` must be quoted in a partial name.
+
+```pattern pages/example
+```

package/templates/examples/src/patterns/pages/example/example.schema.json

@@ -0,0 +1,14 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "title": "Example page",
+  "type": "object",
+  "required": ["title", "intro", "ctaLabel"],
+  "properties": {
+    "title":       { "type": "string" },
+    "intro":       { "type": "string" },
+    "ctaLabel":    { "type": "string" },
+    "inputLabel":  { "type": "string" },
+    "placeholder": { "type": "string" },
+    "buttonLabel": { "type": "string" }
+  }
+}

package/templates/examples/src/patterns/pages/index.md

@@ -0,0 +1,6 @@
+---
+title: Pages
+preview: full
+---
+
+Whole layouts. They fill the stage instead of hugging their content.

package/templates/examples/src/scripts/search-field.ts

@@ -0,0 +1,16 @@
+// Behaviour for molecules/search-field, loaded by `requireScript: [search-field]` in its .md.
+//
+// Runs as a module after the markup, in every preview that shows a search field — including pages
+// that include one. Submitting would otherwise navigate the preview away; instead the query is
+// announced in the field's status line.
+
+function enhance(form: HTMLFormElement): void {
+  const status = form.querySelector<HTMLElement>(".search-field-status");
+  form.addEventListener("submit", (event: SubmitEvent) => {
+    event.preventDefault();
+    const query = String(new FormData(form).get("q") ?? "").trim();
+    if (status) status.textContent = query ? `Searching for “${query}”` : "Type something to search";
+  });
+}
+
+document.querySelectorAll<HTMLFormElement>("form.search-field").forEach(enhance);

package/templates/examples/src/styles/atoms/button.scss

@@ -0,0 +1,36 @@
+@use "../base/tokens";
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: tokens.$space-xs;
+  padding: tokens.$space-sm tokens.$space-md;
+  border: 1px solid transparent;
+  border-radius: tokens.$radius;
+  font: inherit;
+  cursor: pointer;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--color-primary, #0b5cad);
+  outline-offset: 2px;
+}
+
+.button-primary {
+  background: var(--color-primary, #0b5cad);
+  color: var(--color-on-primary, #ffffff);
+}
+
+.button-secondary {
+  background: transparent;
+  border-color: var(--color-border, #6b7280);
+  color: var(--color-text, #1b1b1f);
+}
+
+.button-icon {
+  padding: tokens.$space-sm;
+}
+
+.button-glyph {
+  display: block;
+}

package/templates/examples/src/styles/molecules/search-field/input.scss

@@ -0,0 +1,21 @@
+@use "../../base/tokens";
+
+.input {
+  display: flex;
+  flex-direction: column;
+  gap: tokens.$space-xs;
+}
+
+.input-label {
+  font-size: 0.875rem;
+  color: var(--color-text-muted, #4b5563);
+}
+
+.input-control {
+  padding: tokens.$space-sm;
+  border: 1px solid var(--color-border, #6b7280);
+  border-radius: tokens.$radius;
+  font: inherit;
+  color: inherit;
+  background: var(--color-surface, #ffffff);
+}

package/templates/examples/src/styles/molecules/search-field.scss

@@ -0,0 +1,13 @@
+@use "../base/tokens";
+
+.search-field {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  gap: tokens.$space-sm;
+}
+
+.search-field-status {
+  flex-basis: 100%;
+  margin: 0;
+}

package/templates/examples/src/styles/pages/example.scss

@@ -0,0 +1,28 @@
+@use "../base/tokens";
+
+.page-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: tokens.$space-md;
+  padding: tokens.$space-lg;
+  border-bottom: 1px solid var(--color-border, #6b7280);
+}
+
+.page-title {
+  margin: 0;
+}
+
+.page-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: tokens.$space-md;
+  padding: tokens.$space-lg;
+}
+
+.page-content p {
+  flex-basis: 100%;
+  margin: 0;
+}