design-system-toolkit/packages/site/views/design-system/styles/_partials/showcase-scale.njk at a3c22fb2c60793b2b865de7d11854d3688abb06a · ourfuturehealth/design-system-toolkit · GitHub

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
<div class="app-foundation-showcase__table-wrap">
  <table class="ofh-table app-foundation-showcase__table">
    {% if caption %}
      <caption class="ofh-table__caption app-foundation-showcase__caption">{{ caption }}</caption>
    {% endif %}
    <thead class="ofh-table__head">
      <tr class="ofh-table__row">
        {% if variant == "spacing" %}
          <th class="ofh-table__header" scope="col">Step</th>
          <th class="ofh-table__header" scope="col">Responsive preview</th>
          <th class="ofh-table__header" scope="col">Mobile</th>
          <th class="ofh-table__header" scope="col">Tablet</th>
          <th class="ofh-table__header" scope="col">Desktop</th>
          <th class="ofh-table__header" scope="col">Static helper</th>
          <th class="ofh-table__header" scope="col">Utility example</th>
        {% else %}
          <th class="ofh-table__header" scope="col">Reference</th>
          <th class="ofh-table__header" scope="col">Visual</th>
          <th class="ofh-table__header" scope="col">Value</th>
          <th class="ofh-table__header" scope="col">Class or token</th>
          <th class="ofh-table__header" scope="col">Notes</th>
        {% endif %}
      </tr>
    </thead>
    <tbody class="ofh-table__body">
      {% for item in items %}
        <tr class="ofh-table__row">
          {% if variant == "spacing" %}
            <th class="ofh-table__header app-foundation-showcase__row-heading" scope="row">{{ item.step }}</th>
            <td class="ofh-table__cell">
              <div class="app-foundation-showcase__spacing-bars" aria-hidden="true">
                <span class="app-foundation-showcase__spacing-bar app-foundation-showcase__spacing-bar--mobile" style="height: {{ item.mobile }};"></span>
                <span class="app-foundation-showcase__spacing-bar app-foundation-showcase__spacing-bar--tablet" style="height: {{ item.tablet }};"></span>
                <span class="app-foundation-showcase__spacing-bar app-foundation-showcase__spacing-bar--desktop" style="height: {{ item.desktop }};"></span>
              </div>
            </td>
            <td class="ofh-table__cell">{{ item.mobile }}</td>
            <td class="ofh-table__cell">{{ item.tablet }}</td>
            <td class="ofh-table__cell">{{ item.desktop }}</td>
            <td class="ofh-table__cell">{{ item.staticLegacy }}</td>
            <td class="ofh-table__cell"><code>{{ item.utilityExample }}</code></td>
          {% else %}
            <th class="ofh-table__header app-foundation-showcase__row-heading" scope="row">{{ item.label }}</th>
            <td class="ofh-table__cell">
              <div class="app-foundation-showcase__width-track" aria-hidden="true">
                <span class="app-foundation-showcase__width-fill" style="width: {{ item.visualPercent }}%;"></span>
              </div>
            </td>
            <td class="ofh-table__cell">{{ item.value }}</td>
            <td class="ofh-table__cell"><code>{{ item.className }}</code></td>
            <td class="ofh-table__cell">{{ item.note }}</td>
          {% endif %}
        </tr>
      {% endfor %}
    </tbody>
  </table>
</div>