For a rails kit, the wrapping element of the kit should look like the following:

For regular kits:

<%= content_tag(:div, object.text,
    aria: object.aria,
    data: object.data,
    class: object.classname,
    id: object.id) %>

This allows for every kit to have the following props by default:

• aria
• classname
• data
• id

The user should be able to pass in their own custom data attributes to the kit, but not override any that are required by the kit.

<%= pb_rails("my_kit", props: { aria: { foo: "bar" }}) %>

This is generated in the browser:

<div class="pb_my_kit" aria-foo="bar"></div>

The user should be able to add their own classes to the kit, but not override the classes required by the kit.

<%= pb_rails("my_kit", props: { classname: "new_class" }) %>

This is generated in the browser:

<div class="pb_my_kit new_class"></div>

The user should be able to pass in their own custom data attributes to the kit, but not override any that are required by the kit.

<%= pb_rails("my_kit", props: { data: { foo: "bar" }}) %>

This is generated in the browser:

<div class="pb_my_kit" data-foo="bar"></div>

The user should be able to add their own unique id attribute to your kit.

<%= pb_rails("my_kit", props: { id: "awesome_id" }) %>

This is generated in the browser:

<div class="pb_my_kit" id="awesome_id"></div>

A block kit can accept any html content, as well as regular props.

A good example of a block kit, is the Body kit.

We want the user to be able to define any inner content they would like within Body, like so:

<%= pb_rails("body") do %>
    <div>
        User can pass any block of html here.
    </div>
<% end %>

And in the Body kit html, we conditionally call the yielded block with capture(&object.children) if a block has been passed.

<%= content_tag(object.tag,
  aria: object.aria,
  id: object.id,
  data: object.data,
  class: object.classname) do %>
  <%= object.children.present? ? capture(&object.children) : object.content %>
<% end %>