whynot-design/adapters/django

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:

cp -r adapters/django/templates/whynot myapp/templates/whynot

Then reference partials by their template name:

{% 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:

# 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.