Midwest Component Library v0.24.0

Previews

No matching results.

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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<ol class="midwest-timeline" aria-label="Project activity">
  <li class="midwest-timeline-item complete">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header>Requirements signed off</header>
          <section>
            Product spec approved by all stakeholders.
          </section>
        </div>
      </article>
    </div>
  </li>
  <li class="midwest-timeline-item complete">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header>Design complete</header>
          <section>
            Figma file handed off, tokens exported.
          </section>
        </div>
      </article>
    </div>
  </li>
  <li class="midwest-timeline-item active">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header>In development</header>
          <section>
            Component library and API in progress.
          </section>
        </div>
      </article>
    </div>
  </li>
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header>QA &amp; review</header>
          <section>
            Scheduled for next sprint.
          </section>
        </div>
      </article>
    </div>
  </li>
  <li class="midwest-timeline-item">
    <div class="midwest-timeline-item-connector" aria-hidden="true">
      <span class="midwest-timeline-item-dot">
      </span>
      <span class="midwest-timeline-item-line"></span>
    </div>
    <div class="midwest-timeline-item-card">
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header>Ship it</header>
          <section>
            Target: end of Q2.
          </section>
        </div>
      </article>
    </div>
  </li>
</ol>
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
<% horizontal  = params[:horizontal]  == 'true' || params[:horizontal]  == true %>
<% compact     = params[:compact]     == 'true' || params[:compact]     == true %>
<% alternating = params[:alternating] == 'true' || params[:alternating] == true %>
<% label       = params[:label].presence || 'Project activity' %>
<%= midwest_timeline(horizontal: horizontal, compact: compact, alternating: alternating, label: label) do |t| %>
  <% t.with_item(complete: true) do %>
    <%= midwest_card do |c| %>
      <% c.with_header { "Requirements signed off" } %>
      Product spec approved by all stakeholders.
    <% end %>
  <% end %>
  <% t.with_item(complete: true) do %>
    <%= midwest_card do |c| %>
      <% c.with_header { "Design complete" } %>
      Figma file handed off, tokens exported.
    <% end %>
  <% end %>
  <% t.with_item(active: true) do %>
    <%= midwest_card do |c| %>
      <% c.with_header { "In development" } %>
      Component library and API in progress.
    <% end %>
  <% end %>
  <% t.with_item do %>
    <%= midwest_card do |c| %>
      <% c.with_header { "QA & review" } %>
      Scheduled for next sprint.
    <% end %>
  <% end %>
  <% t.with_item do %>
    <%= midwest_card do |c| %>
      <% c.with_header { "Ship it" } %>
      Target: end of Q2.
    <% end %>
  <% end %>
<% end %>

Playground

Live-preview the core layout options together.

Param Description Input

Lay items out left-to-right

Strip card borders and tighten spacing

Alternate cards left and right of centre

Accessible aria-label for the list

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Timeline/playground

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."