Midwest Component Library v0.28.2

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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div data-controller="midwest-page-transition" data-midwest-page-transition-style-value="fade" data-midwest-page-transition-duration-value="var(--duration-slow)" data-midwest-page-transition-easing-value="var(--ease-emphasized)" aria-hidden="true" class="midwest-page-transition"></div>
<div class="p-6 space-y-4 max-w-lg overflow-hidden">
  <div id="pt-default-a">
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <header>      
          <div class="flex items-center justify-between">
            <span class="font-medium">Inbox</span>
            <span class="midwest-badge size-default theme-cyan">
              <span class="value">4 unread</span>
            </span>
          </div>
        </header>
        <section>
          <div class="space-y-3">
            <div class="flex items-start gap-3">
              <span initials="AK" class="midwest-avatar size-sm theme-red shape-square" title="You tabbed on an Avatar for Midwest Design">
                <div class="letter" title="Midwest Design">
                  MD
                </div>
              </span>
              <div>
                <p class="text-sm font-medium">Alice Kim — Design review notes</p>
                <p class="text-xs text-theme-7">Left comments on the motion spec. Looks good overall.</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <span initials="TM" class="midwest-avatar size-sm theme-red shape-square" title="You tabbed on an Avatar for Midwest Design">
                <div class="letter" title="Midwest Design">
                  MD
                </div>
              </span>
              <div>
                <p class="text-sm font-medium">Tom M. — v0.25 milestone</p>
                <p class="text-xs text-theme-7">Page transitions are looking great. Ship it!</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </article>
  </div>
  <div id="pt-default-b" style="display:none">
    <article data-controller="midwest-card" class="midwest-card">
      <div class="wrap">
        <header>      
          <div class="flex items-center justify-between">
            <span class="font-medium">Sent</span>
            <span class="midwest-badge size-default theme-primary">
              <span class="value">12 messages</span>
            </span>
          </div>
        </header>
        <section>
          <div class="space-y-3">
            <div class="flex items-start gap-3">
              <span initials="AK" class="midwest-avatar size-sm theme-red shape-square" title="You tabbed on an Avatar for Midwest Design">
                <div class="letter" title="Midwest Design">
                  MD
                </div>
              </span>
              <div>
                <p class="text-sm font-medium">Re: Design review notes</p>
                <p class="text-xs text-theme-7">Thanks for the feedback! Merging now.</p>
              </div>
            </div>
            <div class="flex items-start gap-3">
              <span initials="TM" class="midwest-avatar size-sm theme-red shape-square" title="You tabbed on an Avatar for Midwest Design">
                <div class="letter" title="Midwest Design">
                  MD
                </div>
              </span>
              <div>
                <p class="text-sm font-medium">Re: v0.25 milestone</p>
                <p class="text-xs text-theme-7">Agreed — shipping today. Changelog is ready.</p>
              </div>
            </div>
          </div>
        </section>
      </div>
    </article>
  </div>
  <div class="flex items-center gap-3">
    <button type="button" id="pt-default-btn" class="midwest-button variant-default size-default theme-primary" name="button">
      <span class="midwest-button-content">Demo transition ���</span>
      <div class="midwest-loading-icon" role="img" aria-label="Loading" aria-hidden="true" style="display: none">
        <div class="midwest-loading-icon-inner">
          <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
          <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
            <circle cx="15" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="60" cy="15" r="9" fill-opacity="0.3">
              <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="105" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
          </svg>
        </div>
      </div>
    </button>
    <span id="pt-default-no-support" class="text-sm text-theme-7" style="display:none">
      View Transitions API not supported in this browser
    </span>
  </div>
  <pre class="text-xs bg-gray-100 rounded p-3"><%= midwest_page_transition %></pre>
</div>
<script>
  (function () {
    var a = document.getElementById('pt-default-a');
    var b = document.getElementById('pt-default-b');
    var btn = document.getElementById('pt-default-btn');
    var noSupport = document.getElementById('pt-default-no-support');
    var fwd = 'Demo transition ���';
    var back = '��� Go back';
    if (!document.startViewTransition) {
      btn.style.display = 'none';
      noSupport.style.display = '';
      return;
    }
    var showingA = true;
    btn.addEventListener('click', function () {
      document.startViewTransition(function () {
        a.style.display = showingA ? 'none' : '';
        b.style.display = showingA ? '' : 'none';
        showingA = !showingA;
        btn.querySelector('.midwest-button-content').textContent = showingA ? fwd : back;
      });
    });
  }());
</script>
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
<%= midwest_page_transition %>
<% page_a = capture do %>
  <%= midwest_card do |card| %>
    <% card.with_header do %>
      <div class="flex items-center justify-between">
        <span class="font-medium">Inbox</span>
        <%= midwest_badge("4 unread", state: :info) %>
      </div>
    <% end %>
    <div class="space-y-3">
      <div class="flex items-start gap-3">
        <%= midwest_avatar(initials: "AK", size: :sm) %>
        <div>
          <p class="text-sm font-medium">Alice Kim — Design review notes</p>
          <p class="text-xs text-theme-7">Left comments on the motion spec. Looks good overall.</p>
        </div>
      </div>
      <div class="flex items-start gap-3">
        <%= midwest_avatar(initials: "TM", size: :sm) %>
        <div>
          <p class="text-sm font-medium">Tom M. — v0.25 milestone</p>
          <p class="text-xs text-theme-7">Page transitions are looking great. Ship it!</p>
        </div>
      </div>
    </div>
  <% end %>
<% end %>
<% page_b = capture do %>
  <%= midwest_card do |card| %>
    <% card.with_header do %>
      <div class="flex items-center justify-between">
        <span class="font-medium">Sent</span>
        <%= midwest_badge("12 messages") %>
      </div>
    <% end %>
    <div class="space-y-3">
      <div class="flex items-start gap-3">
        <%= midwest_avatar(initials: "AK", size: :sm) %>
        <div>
          <p class="text-sm font-medium">Re: Design review notes</p>
          <p class="text-xs text-theme-7">Thanks for the feedback! Merging now.</p>
        </div>
      </div>
      <div class="flex items-start gap-3">
        <%= midwest_avatar(initials: "TM", size: :sm) %>
        <div>
          <p class="text-sm font-medium">Re: v0.25 milestone</p>
          <p class="text-xs text-theme-7">Agreed — shipping today. Changelog is ready.</p>
        </div>
      </div>
    </div>
  <% end %>
<% end %>
<%= render 'elements/page_transition_component_preview/demo',
      id: 'default',
      page_a: page_a,
      page_b: page_b,
      code: '<%= midwest_page_transition %>' %>

Default

Fade transition (the default). Place once in your root layout <body>. The Stimulus controller injects the <meta name="view-transition"> tag and sets data-midwest-page-transition on <html> so the CSS animations know which style to apply during Turbo navigations.

No params configured.

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

Accessibility

Figma embed for Page Transition/default

Annotate a preview to embed its Figma design here:

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