ResponseCard

Domain · API Doc

Collapsible card for a single API response showing the status code, description, and response body schema.

Preview

200 Token issued application/json

Schema rendered here

Code

<%- include('modules/domain/api-doc/ResponseCard', {
  response: {
    responseId: 'r-200',
    statusCode: '200',
    description: 'Token issued',
    content: { 'application/json': { schema: { type: 'object' } } }
  }
}) %>

<%
  var _response    = locals.response    || {};
  var _defaultOpen = locals.defaultOpen === true;
  var code = String(_response.statusCode || '');
  var n    = parseInt(code, 10);

  var statusVariant;
  if      (n >= 200 && n < 300) statusVariant = 'success';
  else if (n >= 300 && n < 400) statusVariant = 'info';
  else if (n >= 400 && n < 500) statusVariant = 'warning';
  else if (n >= 500)            statusVariant = 'error';
  else                          statusVariant = 'neutral';

  var contentEntries = _response.content ? Object.entries(_response.content) : [];
  var headers        = _response.headers  ? Object.entries(_response.headers)  : [];
%>
<details class="rounded-lg border border-border overflow-hidden group<%= locals.className ? ' ' + locals.className : '' %>"<%= _defaultOpen ? ' open' : '' %>>
  <summary class="flex w-full items-center gap-3 px-4 py-3 text-left bg-surface-raised hover:bg-surface-overlay transition-colors cursor-pointer list-none focus:outline-none">
    <span class="shrink-0">
      <%- include('../../ui/Badge', { variant: statusVariant, size: 'md', children: code }) %>
    </span>
    <span class="flex-1 text-sm text-text-primary"><%= _response.description || '' %></span>
    <% if (contentEntries.length > 0) { %>
      <span class="text-xs text-text-disabled font-mono shrink-0"><%= contentEntries[0][0] %></span>
    <% } %>
    <span class="w-3 h-3 inline-flex items-center justify-center text-text-disabled shrink-0 group-open:rotate-180 transition-transform">
      <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
    </span>
  </summary>

  <div class="border-t border-border bg-surface-base">
    <% if (headers.length > 0) { %>
    <div class="px-4 py-3 border-b border-border">
      <p class="text-xs font-semibold text-text-secondary uppercase tracking-wide mb-2">Headers</p>
      <div class="space-y-1.5">
        <% headers.forEach(function(entry) {
          var hKey = entry[0];
          var hdr  = entry[1];
        %>
          <div class="flex items-start gap-3 text-xs">
            <code class="font-mono text-text-primary shrink-0"><%= hKey %></code>
            <% if (hdr.schema && hdr.schema.type) { %>
              <%- include('../../ui/Badge', { variant: 'neutral', size: 'sm', children: hdr.schema.type }) %>
            <% } %>
            <% if (hdr.description) { %><span class="text-text-secondary"><%= hdr.description %></span><% } %>
          </div>
        <% }); %>
      </div>
    </div>
    <% } %>

    <% if (contentEntries.length > 0) { %>
      <div class="p-4 space-y-3">
        <% contentEntries.forEach(function(entry) {
          var mime   = entry[0];
          var obj    = entry[1];
        %>
          <div>
            <p class="text-xs font-mono text-text-disabled mb-2"><%= mime %></p>
            <% if (obj.schema) { %>
              <%- include('./SchemaViewer', { schema: obj.schema }) %>
            <% } %>
          </div>
        <% }); %>
      </div>
    <% } else { %>
      <p class="px-4 py-3 text-xs text-text-disabled">No response body.</p>
    <% } %>
  </div>
</details>

ResponseCard

200 OK response