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
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
136
137
138
139
140
141
142
143
144
<div class="flex flex-col gap-6">
  <div id="demo-tour" data-controller="midwest-onboarding" data-midwest-onboarding-auto-open-value="false" class="midwest-onboarding">
    <button data-action="midwest-onboarding#start" class="midwest-button variant-default size-default theme-primary" name="button">
      <span class="midwest-button-content">Start tour</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>
    <div class="midwest-onboarding-step" hidden="hidden" data-midwest-onboarding-target="step" data-position="auto" data-title="Welcome" data-next-text="Next" data-back-text="Back" data-complete-text="Done" data-can-click-target="false">
      <template>      
        <p>This quick tour shows you around. Use <strong>Next</strong> or the arrow keys to continue.</p>
      </template>
    </div>
    <div class="midwest-onboarding-step" hidden="hidden" data-midwest-onboarding-target="step" data-selector="#tour-dashboard" data-position="bottom" data-title="Your dashboard" data-next-text="Next" data-back-text="Back" data-complete-text="Done" data-can-click-target="false">
      <template>      
        <p>Everything starts here — your key metrics live on the dashboard.</p>
      </template>
    </div>
    <div class="midwest-onboarding-step" hidden="hidden" data-midwest-onboarding-target="step" data-selector="#tour-reports" data-position="bottom" data-title="Reports" data-next-text="Next" data-back-text="Back" data-complete-text="Done" data-can-click-target="false">
      <template>      
        <p>Dig deeper into the numbers with detailed reports.</p>
      </template>
    </div>
    <div class="midwest-onboarding-step" hidden="hidden" data-midwest-onboarding-target="step" data-selector="#tour-settings" data-position="bottom" data-title="Settings" data-next-text="Next" data-back-text="Back" data-complete-text="Done" data-can-click-target="false">
      <template>      
        <p>Tune your preferences here whenever you like. That's it!</p>
      </template>
    </div>
    <div class="midwest-onboarding-overlay" data-midwest-onboarding-target="overlay" data-action="click->midwest-onboarding#cancel" hidden></div>
    <div
    class="midwest-onboarding-card"
    data-midwest-onboarding-target="card"
    role="dialog"
    aria-modal="true"
    aria-labelledby="midwest-onboarding-title-12d18"
    tabindex="-1"
    hidden>
      <button
      type="button"
      class="midwest-onboarding-close"
      data-action="midwest-onboarding#cancel"
      aria-label="Close tour">
        <div class="midwest-icon ">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Close"><title>Close</title>
              <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
          </div>
        </div>
      </button>
      <h2 id="midwest-onboarding-title-12d18" class="midwest-onboarding-title" data-midwest-onboarding-target="title"></h2>
      <div class="midwest-onboarding-body" data-midwest-onboarding-target="body"></div>
      <div class="midwest-onboarding-footer">
        <button data-midwest-onboarding-target="back" data-action="midwest-onboarding#back" class="midwest-button variant-ghost size-small theme-primary mr-auto" name="button">
          <span class="midwest-button-content">Back</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>
        <button data-midwest-onboarding-target="next" data-action="midwest-onboarding#next" class="midwest-button variant-default size-small theme-primary" name="button">
          <span class="midwest-button-content">Next</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>
        <button data-midwest-onboarding-target="done" data-action="midwest-onboarding#complete" class="midwest-button variant-default size-small theme-primary" name="button">
          <span class="midwest-button-content">Done</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>
      </div>
      <div class="midwest-onboarding-arrow" data-midwest-onboarding-target="arrow"></div>
    </div>
  </div>
  <div class="grid grid-cols-3 gap-4">
    <div id="tour-dashboard" class="rounded-2xl border border-gray-1 p-6 text-center font-medium">Dashboard</div>
    <div id="tour-reports" class="rounded-2xl border border-gray-1 p-6 text-center font-medium">Reports</div>
    <div id="tour-settings" class="rounded-2xl border border-gray-1 p-6 text-center font-medium">Settings</div>
  </div>
</div>
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
<div class="flex flex-col gap-6">
  <%= midwest_onboarding(id: "demo-tour") do |o| %>
    <% o.with_trigger do %>
      <%= midwest_button(as: :button, "data-action": "midwest-onboarding#start") { "Start tour" } %>
    <% end %>
    <% o.with_step(title: "Welcome") do %>
      <p>This quick tour shows you around. Use <strong>Next</strong> or the arrow keys to continue.</p>
    <% end %>
    <% o.with_step(title: "Your dashboard", selector: "#tour-dashboard", position: :bottom) do %>
      <p>Everything starts here — your key metrics live on the dashboard.</p>
    <% end %>
    <% o.with_step(title: "Reports", selector: "#tour-reports", position: :bottom) do %>
      <p>Dig deeper into the numbers with detailed reports.</p>
    <% end %>
    <% o.with_step(title: "Settings", selector: "#tour-settings", position: :bottom) do %>
      <p>Tune your preferences here whenever you like. That's it!</p>
    <% end %>
  <% end %>
  <div class="grid grid-cols-3 gap-4">
    <div id="tour-dashboard" class="rounded-2xl border border-gray-1 p-6 text-center font-medium">Dashboard</div>
    <div id="tour-reports" class="rounded-2xl border border-gray-1 p-6 text-center font-medium">Reports</div>
    <div id="tour-settings" class="rounded-2xl border border-gray-1 p-6 text-center font-medium">Settings</div>
  </div>
</div>

Default

A multi-step tour attached to elements on the page. Click "Start tour", then use Next / Back (or the ← → arrow keys) to move through the steps; Escape or the ✕ closes it. The first step is centered (no target); the rest attach to the numbered cards.

No params configured.

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

Accessibility

Figma embed for Onboarding/default

Annotate a preview to embed its Figma design here:

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