Skip to content

Commit

Permalink
docs(loader): add additional details for Rails Loader component
Browse files Browse the repository at this point in the history
  • Loading branch information
kajabi-bot committed Oct 17, 2023
1 parent 09efa1d commit ad340b7
Show file tree
Hide file tree
Showing 2 changed files with 38 additions and 12 deletions.
35 changes: 27 additions & 8 deletions docs/app/views/examples/components/loader/_preview.html.erb
Original file line number Diff line number Diff line change
@@ -1,29 +1,48 @@
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
<h2>Variants</h2>

<h3>Bar</h3>
<div class="sage-row">
<div class="sage-col--md-12 example__block--lg">
<%= sage_component SageLoader, {
type: "bar"
} %>
</div>
</div>

<%= sage_component SageDivider, {} %>

<h3>Spinner</h3>
<div class="sage-row">
<div class="sage-col--md-6 example__block--lg">
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
<%= sage_component SageLoader, {
type: "spinner"
type: "spinner",
text: true
} %>
</div>
<div class="sage-col--md-6 example__block--lg">
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
<%= sage_component SageLoader, {
type: "success"
type: "spinner"
} %>
</div>
</div>
<hr>
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>

<%= sage_component SageDivider, {} %>

<h3>Success</h3>
<div class="sage-row">
<div class="sage-col--md-6 example__block--lg">
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">With text</h2>
<%= sage_component SageLoader, {
type: "spinner",
type: "success",
text: true
} %>
</div>
<div class="sage-col--md-6 example__block--lg">
<h2 class="<%= SageClassnames::TYPE::HEADING_6 %>">Without text</h2>
<%= sage_component SageLoader, {
type: "success",
text: true
type: "success"
} %>
</div>
</div>
15 changes: 11 additions & 4 deletions docs/app/views/examples/components/loader/_props.html.erb
Original file line number Diff line number Diff line change
@@ -1,12 +1,19 @@
<tr>
<td><%= md('`type`') %><%= sage_component SageBadge, { color: "published", value: "required" } %></td>
<td><%= md('Determines which loader will be used; `spinner` or `success`') %></td>
<td><%= md('String') %></td>
<td><%= md('`nil`') %></td>
<td><%= md('`fill`') %>
<td><%= md('If true, will fill the space within the container.') %></td>
<td><%= md('Boolean') %></td>
<td><%= md('`false`') %></td>
</tr>
<tr>
<td><%= md('`text`') %></td>
<td><%= md('Includes text that aligns with the loader.') %></td>
<td><%= md('Boolean') %></td>
<td><%= md('`false`') %></td>
</tr>
<tr>
<td><%= md('`type`') %><%= sage_component SageBadge, { color: "published", value: "required" } %></td>
<td><%= md('Determines which loader will be used; `bar`, `spinner` or `success`') %></td>
<td><%= md('String') %></td>
<td><%= md('`nil`') %></td>
</tr>

0 comments on commit ad340b7

Please sign in to comment.