status.vue 9.19 KB
Newer Older
1 2 3 4
<template>
  <div class="content limited m-t-7 m-b-7">
    <div class="structure md">
      <h1>Component status</h1>
5 6
      <p>Components and their variants have statuses reflecting their state of completion, documented on this page. <br />
        Check back here anytime to see current component status information.</p>
7
      <p>See more detailed progress on our Design System <a href="https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/issues">issue tracker</a>.</p>
8
      <h2>Legend</h2>
9 10
      <table
        class="m-t-6 m-b-6"
11 12
        style="width: 65%;"
      >
13 14 15 16 17 18 19
        <tbody>
          <tr>
            <th class="header">Icon</th>
            <th class="header">Status</th>
            <th class="header">Description</th>
          </tr>
          <tr>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
20
            <td>🚫</td>
21 22
            <td>Upcoming</td>
            <td>Planned, not started yet</td>
23 24
          </tr>
          <tr>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
25
            <td>⚠️</td>
26
            <td>In progress</td>
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
            <td>Create, Build, and Style stages are not yet finished</td>
          </tr>
          <tr>
            <td></td>
            <td>Built</td>
            <td>Complete and ready to use but not yet in production</td>
          </tr>
          <tr>
            <td></td>
            <td>Implemented</td>
            <td>Implemented in production</td>
          </tr>
          <tr>
            <td></td>
            <td>Deprecated</td>
            <td>No longer in use</td>
          </tr>
        </tbody>
      </table>

      <table
        class="m-t-6 m-b-6"
        style="width: 65%;"
      >
        <tbody>
          <tr>
            <th class="header">Icon</th>
            <th class="header">Badge</th>
            <th class="header">Description</th>
56 57
          </tr>
          <tr>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
58
            <td>🆕</td>
59 60 61 62
            <td>New</td>
            <td>Newly available, implement with caution</td>
          </tr>
          <tr>
63 64 65
            <td class="app-styles"><span class="badge badge-primary">Vue</span></td>
            <td>Vue component</td>
            <td>Exists within GitLab-UI</td>
66 67 68
          </tr>
        </tbody>
      </table>
69

70
      <h2>Status</h2>
71 72
      <table
        class="m-t-6 m-b-6"
73 74
        style="width: 65%;"
      >
75 76
        <tbody>
          <tr>
77
            <th class="header">Foundations</th>
78 79 80
            <th class="header">Status</th>
          </tr>
          <tr>
81
            <td><a href="../../foundations/colors">Colors</a></td>
82 83 84
            <td></td>
          </tr>
          <tr>
85
            <td><a href="../../foundations/iconography">Iconography</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
86
            <td>⚠️</td>
87 88
          </tr>
          <tr>
89
            <td><a href="../../foundations/motion">Motion</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
90
            <td>⚠️</td>
91 92
          </tr>
          <tr>
93
            <td><a href="../../foundations/illustration">Illustration</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
94
            <td>⚠️</td>
95 96
          </tr>
          <tr>
97
            <td><a href="../../foundations/typography">Typography</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
98
            <td>⚠️</td>
99 100
          </tr>
          <tr>
101 102 103 104 105 106
            <td><a href="../../foundations/interactions">Interactions</a></td>
            <td></td>
          </tr>
          <tr>
            <td><a href="../../foundations/saving-and-feedback">Saving and feedback</a></td>
            <td>🚫</td>
107 108 109 110 111
          </tr>
          <tr>
            <th class="header">Component</th>
            <th class="header">Status</th>
          </tr>
112 113 114 115 116 117 118 119 120 121 122 123
          <template v-if="contentTree">
            <tr
              v-for="component in contentTree.components"
              :key="component.id"
            >
              <td>
                <nuxt-link
                  :key="`link-${component.id}`"
                  :to="`/components/${component.id}`"
                >{{ component.name }}</nuxt-link>
              </td>
              <td class="app-styles">
124
                {{getStatusIcon(component.status)}}
125 126 127 128 129 130 131
                <b-badge
                  v-if="component.hasVueComponent"
                  variant="primary"
                >Vue</b-badge>
              </td>
            </tr>
          </template>
132 133 134 135 136
          <tr>
            <th class="header">Regions</th>
            <th class="header">Status</th>
          </tr>
          <tr>
137
            <td><a href="../../regions/empty-states">Empty states</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
138
            <td>⚠️</td>
139 140
          </tr>
          <tr>
141
            <td><a href="../../regions/filters">Filters</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
142
            <td>⚠️</td>
143 144
          </tr>
          <tr>
145
            <td><a href="../../regions/navigation">Navigation</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
146
            <td>⚠️</td>
147 148
          </tr>
          <tr>
149
            <td><a href="../../regions/search">Search</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
150
            <td>⚠️</td>
151 152 153 154 155 156
          </tr>
          <tr>
            <th class="header">Content</th>
            <th class="header">Status</th>
          </tr>
          <tr>
157
            <td><a href="../../content/voice-tone">Voice & tone</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
158
            <td>⚠️</td>
159 160
          </tr>
          <tr>
161
            <td><a href="../../content/terminology">Terminology</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
162
            <td>⚠️</td>
163 164
          </tr>
          <tr>
165
            <td><a href="../../content/punctuation">Punctuation</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
166
            <td>⚠️</td>
167 168 169 170 171 172
          </tr>
          <tr>
            <th class="header">Usability</th>
            <th class="header">Status</th>
          </tr>
          <tr>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
173
            <td><a href="../../usability/a11y">Accessibility</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
174
            <td>🚫</td>
175 176
          </tr>
          <tr>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
177
            <td><a href="../../usability/i18n">Internationalization</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
178
            <td>🚫</td>
179 180
          </tr>
          <tr>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
181 182
            <td><a href="../../usability/helping-users">Helping users</a></td>
            <td>⚠️</td>
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197
          </tr>
        </tbody>
      </table>


      <!-- <h2>Styles</h2>
      <table class="m-t-6 m-b-6">
        <thead>
          <tr>
            <th class="header">Styles</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
198
            <td><a href="../../styles/Colors">Colors</a></td>
199 200 201
            <td>✅</td>
          </tr>
          <tr>
202
            <td><a href="../../styles/iconography">Iconography</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
203
            <td>⚠️</td>
204 205
          </tr>
          <tr>
206
            <td><a href="../../styles/motion">Motion</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
207
            <td>⚠️</td>
208 209
          </tr>
          <tr>
210
            <td><a href="../../styles/illustration">Illustration</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
211
            <td>⚠️</td>
212 213
          </tr>
          <tr>
214
            <td><a href="../../styles/typography">Typography</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
215
            <td>⚠️</td>
216 217
          </tr>
          <tr>
218
            <td><a href="../../styles/cursors">Cursors</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
219
            <td>⚠️</td>
220 221 222 223 224 225 226 227 228 229 230 231 232 233
          </tr>
        </tbody>
      </table> -->

      <!-- <h2>Regions</h2>
      <table class="m-t-6 m-b-6">
        <thead>
          <tr>
            <th class="header">Regions</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
234
            <td><a href="../../regions/empty-states">Empty states</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
235
            <td>⚠️</td>
236 237
          </tr>
          <tr>
238
            <td><a href="../../regions/filters">Filters</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
239
            <td>⚠️</td>
240 241
          </tr>
          <tr>
242
            <td><a href="../../regions/xx">Navigation</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
243
            <td>⚠️</td>
244 245
          </tr>
          <tr>
246
            <td><a href="../../regions/xx">Search</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
247
            <td>⚠️</td>
248 249 250 251 252 253 254 255 256 257 258 259 260 261
          </tr>
        </tbody>
      </table> -->

      <!-- <h2>Content</h2>
      <table class="m-t-6 m-b-6">
        <thead>
          <tr>
            <th class="header">Content</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
262
            <td><a href="../../content/voice-tone">Voice & tone</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
263
            <td>⚠️</td>
264 265
          </tr>
          <tr>
266
            <td><a href="../../content/terminology">Terminology</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
267
            <td>⚠️</td>
268 269
          </tr>
          <tr>
270
            <td><a href="../../content/punctuation">Punctuation</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
271
            <td>⚠️</td>
272 273 274
          </tr>
          <tr>
            <td>Search</td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
275
            <td>⚠️</td>
276 277 278 279 280 281 282 283 284 285 286 287 288 289
          </tr>
        </tbody>
      </table> -->

      <!-- <h2>Usability</h2>
      <table class="m-t-6 m-b-6">
        <thead>
          <tr>
            <th class="header">Usability</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
290
            <td><a href="../../components/accessibility">Accessibility</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
291
            <td>🚫</td>
292 293
          </tr>
          <tr>
294
            <td><a href="../../components/internationalization">Internationalization</a></td>
Andreas Kämmerle's avatar
Andreas Kämmerle committed
295
            <td>🚫</td>
296 297
          </tr>
          <tr>
298
            <td><a href="../../components/helping-users">Helping users</a></td>
299 300 301 302 303
            <td>✅</td>
          </tr>
        </tbody>
      </table> -->
    </div>
304
  </div>
305
</template>
306 307

<script>
Winnie Hellmann's avatar
Winnie Hellmann committed
308 309
import contentTree from '../../content_tree.json'; // eslint-disable-line import/no-unresolved

310 311 312 313 314 315 316 317
const statusIcons = {
  upcoming: '🚫',
  'in-progress': '',
  built: '',
  implemented: '',
  deprecated: '',
};

318 319 320
export default {
  data() {
    return {
Winnie Hellmann's avatar
Winnie Hellmann committed
321
      contentTree,
322
    };
323
  },
324 325 326 327 328
  methods: {
    getStatusIcon(status) {
      return statusIcons[status];
    },
  },
329
};
330
</script>