x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div class="overflow-x-auto rounded-lg border border-line"> <table class="w-full text-left text-sm border-collapse"> <thead class="bg-surface-subtle text-xs font-semibold uppercase tracking-wide text-ink-muted"> <tr> <th scope="col" class="px-4 py-2.5">Name</th> <th scope="col" class="px-4 py-2.5">Type</th> <th scope="col" class="px-4 py-2.5">Description</th> </tr> </thead> <tbody class="divide-y divide-line"> <tr class="align-top transition-colors hover:bg-surface-subtle"> <th scope="row" class="px-4 py-2.5 text-left font-normal"> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">q<span class="text-badge-danger-ink"><span aria-hidden="true">*</span><span class="sr-only">required</span></span></span> </th> <td class="px-4 py-2.5 font-mono text-xs text-ink-muted">string</td> <td class="px-4 py-2.5 text-sm text-ink"> <p>Search query; most engines accept native operators and advanced filters.</p> </td> </tr> <tr class="align-top transition-colors hover:bg-surface-subtle"> <th scope="row" class="px-4 py-2.5 text-left font-normal"> <span class="inline-flex items-baseline gap-1.5 rounded-sm px-1.5 py-px font-mono text-sm leading-5 bg-surface-sunk text-ink whitespace-nowrap">gl</span> </th> <td class="px-4 py-2.5 font-mono text-xs text-ink-muted">enum</td> <td class="px-4 py-2.5 text-sm text-ink"> <p>Country of the search (two-letter country code).</p> <ul class="mt-2 flex flex-wrap gap-1.5"> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line-strong text-ink"> us<span class="sr-only"> (default)</span> </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> af </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> al </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> dz </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> as </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> ad </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> ao </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> ai </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> aq </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> ag </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> ar </li> <li class="relative rounded-sm border px-1.5 py-0.5 font-mono text-xs border-line text-ink-muted"> am </li> </ul> <p class="mt-2 text-xs text-ink-muted"> 227 more values </p> </td> </tr> </tbody> </table></div>1
2
3
4
5
6
7
<% headers = ParameterRowComponent::COLUMNS.map { |column| column.to_s.capitalize } %><%= render TableComponent.new(headers: headers) do %> <% parameters.each do |parameter| %> <%= render ParameterRowComponent.new(parameter: parameter) %> <% end %><% end %>Requiredness is the asterisk on the name, the same mark the playground grid and the rail and prose wear — it used to be a Required/Optional pill in a column of its own here, which made the reference and the grid two vocabularies for one property of one catalog. Still a meaning rather than a colour chosen here: the mark resolves through the same :required assignment in design/lib/components.rb that the pill did.
No params configured.