Rails Helpers

Beyond Canvas offer various helpers that can be used within views.

Notifications

Notifications will pop up in the upper right corner of your view. Depending on the use case, they can e.g. inform the user about a success or an error that occured.

notice_success

More info

Example:

<%= notice_success 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', class: 'notice-text' %>

<%= notice_success class: 'notice-text' do %>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<% end %>

---

notice_info

More info

Example:

<%= notice_info 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', class: 'notice-text' %>

<%= notice_info class: 'notice-text' do %>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<% end %>

---

notice_warning

More info

Example:

<%= notice_warning 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', class: 'notice-text' %>

<%= notice_warning class: 'notice-text' do %>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<% end %>

---

notice_error

More info

Example:

<%= notice_error 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.', class: 'notice-text' %>

<%= notice_error class: 'notice-text' do %>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<% end %>

Statuses

The following helpers can be used as an indicator of the current status of e.g. products, orders, or processes.

status_good

More info

Example:

<%= status_good 'available', class: 'status-text' %>

<%= status_good class: 'status-text' do %>
  available
<% end %>

---

status_warning

More info

Example:

<%= status_warning 'low stock', class: 'status-text' %>

<%= status_warning class: 'status-text' do %>
  low stock
<% end %>

---

status_danger

More info

Example:

<%= status_danger 'out of stock', class: 'status-text' %>

<%= status_danger class: 'status-text' do %>
  out of stock
<% end %>

---

status_neutral

More info

Example:

<%= status_neutral 'draft', class: 'status-text' %>

<%= status_neutral class: 'status-text' do %>
  draft
<% end %>

Other helpers

logo_image_tag

More info

Uses inline_svg_tag or image_tag depending on the image format. It also adds class: 'logo' and alt: 'logo' attributes.

Example:

<%= logo_image_tag 'logo.svg' %>

<%= logo_image_tag 'logo.png' %>

---

steps_list

More info

Example:

<%= step_list 'This is how to create a custom app:', [
  {
    headline: 'Test shop',
    description: 'Get your free <href="https://signup.beyondshop.cloud/" class="link--primary">developer test shop</a>.'
  },
  {
    headline: 'Custom app',
    description: 'Add a custom app under Apps > Custom apps. Enter a name for your app. Select Save.'
  }
] %>