design-system/status.html at staging · lfielder/design-system · 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
---
title: Pattern Status
layout: docs
category: Status
usage: >
  Refer to this page for an alphabetical list of all patterns in Helix, including design and code statuses.
---

<div class="hxRow">
<div class="hxCol hxSpan-12-xs hxSpan-12-sm hxSpan-8-md hxSpan-8-lg">

<table class="hxTable hxTable--condensed hxTable--bordered" id="design-status-table">
    <thead>
      <colgroup>
         <col style="width: 25%;" span="1">
         <col style="width: 25%;" span="1">
         <col style="width: 10%;" span="1">
         <col span="1">
         <col span="1">
      </colgroup>
      <tr>
        <th>Helix Pattern</th>
        <th>HelixUI Link</th>
        <th class="hxCenter">Design Doc</th>
        <th class="hxCenter">CSS</th>
        <th class="hxCenter">JS</th>
      </tr>
    </thead>
    <tbody>
      {%- assign component_list = "" | split: ','-%}
      {%- for page in site.docs -%}
        {%- if page.resource == true and page.code-element == true-%}
          {%- assign component_list = component_list | push: page -%}
        {%- endif -%}
      {%- endfor -%}
      {%- for page in site.component_design -%}
        {%- if page.resource == true -%}
          {%- assign component_list = component_list | push: page -%}
        {%- endif -%}
      {%- endfor -%}
      {%- assign component_list = component_list | sort: 'title' -%}
      {%- for page in component_list -%}<tr >
          <td><a href="{{site.baseurl}}{{page.url}}.html">{{page.title}}</a></td>
          <td>
          {%- if page.pagelink -%}
            <a href="{{page.pagelink}}" target="_blank">Code <hx-icon type="external-link"></hx-icon></a>
          {%- elsif page.helix-ui-note -%}
            <span class="hxSubBody">{{page.helix-ui-note}}</span>
          {%- endif -%}
          </td>
          <td class="hxCenter">
          {%- if page.status -%}
            <span class="status-label small {{page.status | replace: ' ','-'}}">{{page.status}}</span>
          {%- endif -%}
          </td>
          <td class="hxCenter">
            {%- if page.helix-ui-css == true -%}
            <hx-icon type="checkmark-circle" class="status-ok"></hx-icon>
            {%- elsif page.helix-ui-css == "na"-%}
            <hx-icon type="minus-circle" class="status-disabled"></hx-icon>
            {%- endif -%}
          </td>
          <td class="hxCenter">
            {%- if page.helix-ui-javascript == true -%}
            <hx-icon type="checkmark-circle" class="status-ok"></hx-icon>
            {%- elsif page.helix-ui-javascript == "na"-%}
            <hx-icon type="minus-circle" class="status-disabled"></hx-icon>
            {%- endif -%}
          </td>
        </tr>{%- endfor -%}
    </tbody>
    </table>

</div>

<div class="hxCol hxSpan-12-xs hxSpan-12-sm hxSpan-4-md hxSpan-4-lg">
<h4>Legend</h4>

      {%- for status_hash in site.data.design-status -%}
      {%- assign status = status_hash[1]-%}
      <span class="status-label small {{status.class}}">{{status.name}}</span>
      <p class="hxSubBody hxSubdued" style="margin-top:8px;">{{status.description}}</p>
      <hr>
      {%- endfor -%}


</div>
</div>