57 lines
2.2 KiB
Markdown
57 lines
2.2 KiB
Markdown
# Django partials
|
|
|
|
Optional Layer 3 — `{% include %}`-ready templates that wrap the canonical web components in conveniences for Django teams.
|
|
|
|
## How to use
|
|
|
|
Copy this folder into your Django app's templates directory:
|
|
|
|
```sh
|
|
cp -r adapters/django/templates/whynot myapp/templates/whynot
|
|
```
|
|
|
|
Then reference partials by their template name:
|
|
|
|
```django
|
|
{% include "whynot/_prototype_card.html" with p=prototype %}
|
|
{% include "whynot/_page_header.html" with eyebrow="whynot · signals" title="Signals" %}
|
|
{% include "whynot/_pipeline.html" with active_idx=3 %}
|
|
```
|
|
|
|
**Don't** add `adapters/django/` to `TEMPLATES.DIRS` directly — that couples your `INSTALLED_APPS` to the design-system repo layout. Copy what you need.
|
|
|
|
## What's in here
|
|
|
|
| Partial | Component it wraps | Context variables |
|
|
|---|---|---|
|
|
| `_base_head.html` | (none — `<link>` + `<script>` tags) | — |
|
|
| `_button.html` | `<wn-button>` | `variant`, `icon`, `label`, `href`, `type` |
|
|
| `_eyebrow.html` | `<wn-eyebrow>` | `text` |
|
|
| `_tag.html` | `<wn-tag>` | `text`, `active`, `draft` |
|
|
| `_stage_dot.html` | `<wn-stage-dot>` | `level`, `label` |
|
|
| `_page_header.html` | `<wn-page-header>` | `eyebrow`, `title`, `lede` |
|
|
| `_pipeline.html` | `<wn-pipeline>` | `active_idx` |
|
|
| `_field_row.html` | `<wn-field-row>` | `label`, `value`, `aside` |
|
|
| `_prototype_card.html` | `<wn-prototype-card>` | `p` (a prototype object) |
|
|
| `_banner.html` | `<wn-banner>` | `variant`, `title`, `body`, `dismissible` |
|
|
| `_empty_state.html` | `<wn-empty-state>` | `icon`, `title`, `body`, `cta_label`, `cta_href` |
|
|
|
|
These partials are deliberately thin. If you need more flexibility, write the component HTML inline in your template — `<wn-button>` is no less ergonomic than `{% include %}`.
|
|
|
|
## What they don't do
|
|
|
|
- They don't validate inputs.
|
|
- They don't auto-escape — Django does that.
|
|
- They don't carry app-specific styling overrides — those go in your app, not here.
|
|
|
|
## Updating after a design system bump
|
|
|
|
After `pnpm up @whynot/design`:
|
|
|
|
```sh
|
|
# Diff the upstream partials against your local copies.
|
|
diff -r node_modules/@whynot/design/adapters/django/templates/whynot/ myapp/templates/whynot/
|
|
|
|
# Cherry-pick changes you want. The partials are stable but may gain new optional context vars across minor versions.
|
|
```
|