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
<div class="p-8 flex flex-col gap-4">
  <p class="text-sm text-gray-6 font-mono">
    action_model.icon = document  | 
    action_model.model_name.human = Post
  </p>
  <div class="midwest-empty-state variant-default">
    <div class="empty-state-inner">
      <div class="empty-state-icon">
        <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="Document"><title>Document</title>
              <path d="M428 224H288a48 48 0 01-48-48V36a4 4 0 00-4-4h-92a64 64 0 00-64 64v320a64 64 0 0064 64h224a64 64 0 0064-64V228a4 4 0 00-4-4z"></path><path d="M419.22 188.59L275.41 44.78a2 2 0 00-3.41 1.41V176a16 16 0 0016 16h129.81a2 2 0 001.41-3.41z"></path></svg>
          </div>
        </div>
      </div>
      <div class="empty-state-content">
        <p class="empty-state-title">No Posts</p>
        <div data-controller="midwest-prose" class="midwest-prose prose">
          <p>No posts have been added yet.</p>
        </div>
    </div>
    </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
<%
  # Simulates a model class that includes Midwest::Iconable.
  # In a real app this would be your ActiveRecord model, e.g.:
  #
  #   class Post < ApplicationRecord
  #     include Midwest::Iconable
  #     icon :document
  #   end
  #
  #   midwest_empty_state(action_model: Post)
  post_class = Class.new do
    def self.icon = :document
    def self.model_name
      Struct.new(:human, keyword_init: true).new(human: 'Post')
    end
  end
%>
<div class="p-8 flex flex-col gap-4">
  <p class="text-sm text-gray-6 font-mono">
    action_model.icon = <%= post_class.icon %>  | 
    action_model.model_name.human = <%= post_class.model_name.human %>
  </p>
  <%= midwest_empty_state(action_model: post_class) %>
</div>

With Action Model

Demonstrates the ActionModel integration. Passing an object that includes Midwest::Iconable auto-populates the icon, title, and default body text without any extra configuration.

No params configured.

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

Accessibility

Figma embed for Empty State/with_action_model

Annotate a preview to embed its Figma design here:

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