Progress

<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2 }) %>

<%= pb_rails("progress_pills", props: { aria: { label: "2 out of 3 steps complete" }, steps: 3, active: 2, title:"Status:", value:"Orientation" }) %>

<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

<%= pb_rails("progress_simple", props: { percent: 64.9 }) %>

<br>

<%= pb_rails("progress_simple", props: { value: 2, max: 10 }) %>

<%= pb_rails("progress_simple", props: { percent: 40, width: "100px" }) %>

<%= pb_rails("progress_simple", props: { percent: 64.9, variant: "default" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 90, variant: "positive" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 10, variant: "negative" }) %>

<br>

<%= pb_rails("progress_simple", props: { percent: 40, variant: "warning" }) %>

<%= pb_rails("progress_simple", props: { percent: 64.9, muted: true }) %>

<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "center" }) %>
<br>
<%= pb_rails("progress_simple", props: { percent: 64.9, width: "100px", align: "right" }) %>

<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
  <% end %>
<% end %>

<br /><br />


<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  step 1
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  step 2
  <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
  step 3
  <% end %>
   <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
  step 4
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
  step 5
  <% end %>
<% end %>

<br /><br />


<%= pb_rails("progress_step", props: {orientation: "horizontal", icon:true }) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  step 1
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  step 2
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  step 3
  <% end %>
<% end %>

<%= pb_rails("progress_step", props: {orientation: "vertical", icon: true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
  <% end %>
<% end %>

<br />

<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
  <% end %>
<% end %>

<br />

<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
    Child
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
    <%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
  Card content
<% end %>
<br>
<%= pb_rails("card", props: {highlight: {position: "side", color:"windows"}}) do %>
  Card content
<% end %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
    Child
  <% end %>
<% end %>

<br><br>
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
      <%= pb_rails("caption", props:{text: "Ordered"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
      <%= pb_rails("caption", props:{text: "Shipped"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
      <%= pb_rails("caption", props:{text: "Delivered"})%>
  <% end %>
<% end %>

<br>

<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
  <% end %>
    <%= pb_rails("progress_step/progress_step_item", props: {status: "hidden"}) do %>
  <% end %>
    <%= pb_rails("progress_step/progress_step_item", props: {status: "active"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
  <% end %>
<% end %>

<br><br>
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete"}) do %>
      <%= pb_rails("caption", props:{text: "Ordered"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle"}) do %>
      <%= pb_rails("caption", props:{text: "Shipped"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive"}) do %>
      <%= pb_rails("caption", props:{text: "Delivered"})%>
  <% end %>
<% end %>

<%= pb_rails("progress_step", props: {orientation: "horizontal"}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-1", tooltip: "Tooltip for step 1", tooltip_position: "right", step_direction: "horizontal" }) do %>
  step 1
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-2", tooltip: "Tooltip for step 2", step_direction: "horizontal" }) do %>
  step 2
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-3", tooltip: "Tooltip for step 3", tooltip_position: "left", step_direction: "horizontal" }) do %>
  step 3
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-4", tooltip: "Tooltip for step 4", tooltip_position: "bottom" }) do %>
  step 4
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-5", tooltip: "Tooltip for step 5" }) do %>
  step 5
  <% end %>
<% end %>

<br /><br />

<%= pb_rails("progress_step", props: {orientation: "vertical"}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-6", tooltip: "Tooltip step 1", step_direction: "vertical" }) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-7", tooltip: "Tooltip step 2", tooltip_position: "left"}) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-8", tooltip: "Tooltip step 3", tooltip_position: "top", step_direction: "vertical" }) do %>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-9", tooltip: "Tooltip step 4", tooltip_position: "bottom"}) do %>
  <% end %>
<% end %>

<br /><br>
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-10", tooltip: "The order has been received", step_direction: "horizontal" , tooltip_position: "right"  }) do %>
      <%= pb_rails("caption", props:{text: "Ordered"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", classname: "tooltip-trigger-11", tooltip:"Item(s) have been shipped" }) do %>
      <%= pb_rails("caption", props:{text: "Shipped"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-12", tooltip:"This step has not been reached", tooltip_position: "left" }) do %>
      <%= pb_rails("caption", props:{text: "Delivered"})%>
  <% end %>
<% end %>

<br /><br>
<%= pb_rails("progress_step",props:{ variant:"tracker", icon:true}) do %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "complete", classname: "tooltip-trigger-13", tooltip: "The order has been processed", tooltip_position: "right" }) do %>
      <%= pb_rails("caption", props:{text: "Ordered"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "active", icon: "exclamation-triangle", classname: "tooltip-trigger-14", tooltip: "More details needed before shipment", tooltip_position: "bottom" }) do %>
      <%= pb_rails("caption", props:{text: "Shipped"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-15", tooltip: "This step is inactive"}) do %>
      <%= pb_rails("caption", props:{text: "Out for Delivery"})%>
  <% end %>
  <%= pb_rails("progress_step/progress_step_item", props: {status: "inactive", classname: "tooltip-trigger-16", tooltip: "Estimated delivery: Jun 27", tooltip_position: "left"}) do %>
      <%= pb_rails("caption", props:{text: "Delivered"})%>
  <% end %>
<% end %>