Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Icon documentation update (Rails) #1809

Merged
merged 5 commits into from
Oct 16, 2023
Merged

Docs: Icon documentation update (Rails) #1809

Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7a94d7c
docs(icon): updated documentation
pixelflips Oct 11, 2023
2dcf35f
docs(icon): updated documentation
pixelflips Oct 11, 2023
89204f5
docs(icon): fix code typo
pixelflips Oct 11, 2023
a5202d0
docs(icon): review related adjustments
pixelflips Oct 16, 2023
af30026
docs(icon): review related adjustments
pixelflips Oct 16, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 55 additions & 102 deletions docs/app/views/examples/components/icon/_preview.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,111 +1,64 @@
<h3>Basic Usage</h3>
<h2>Default</h2>

<%= sage_component SageIcon, { icon: "pen", label: "Edit" } %>

<h3>Colors</h3>
<%= sage_component SageCardList, {} do %>
<% SageTokens::COLORS.each do | color | %>
<%= sage_component SageCardListItem, { grid_template: "et" } do %>
<%= sage_component SageIcon, { icon: "pen", color: color } %>
<%= color %>
<% end %>
<% end %>
<% end %>

<h3>Sizes</h3>
<%= sage_component SageCardList, {} do %>
<% SageTokens::ICON_SIZES.each do | size | %>
<%= sage_component SageCardListItem, { grid_template: "et" } do %>
<%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size) } %>
<%= size == "md" ? "Default (#{size})" : size %>
<% end %>
<% end %>
<% end %>
<h2>Variants:</h2>
pixelflips marked this conversation as resolved.
Show resolved Hide resolved

<h3>Alignment next to Type</h3>
<%= md("
Since a common use is to place an icon inline next to text in a variety of forms, we provide the opportunity to indicate that an icon is beside content a particular type spec.
The effect is that the icon's `height` and `line-height` are updated to match the spec responsively.
This can be used in combination with the different icon sizes.
and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within `SageCardRow` or `SagePanelRow`.
") %>
<div style="display: flex;">
<%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>
<h2 class="<%= SageClassnames::TYPE::HEADING_2 %>">Heading 2 Lorem ipsum dolor sit</h2>
</div>
<div style="display: flex;">
<%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h4", spacer: { right: "xs" } } %>
<h4 class="<%= SageClassnames::TYPE::HEADING_4 %>">Heading 4 Lorem ipsum dolor sit</h4>
</div>
<div style="display: flex;">
<%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body", spacer: { right: "xs" } } %>
<p class="<%= SageClassnames::TYPE::BODY %>">Body Lorem ipsum dolor sit</p>
</div>
<div style="display: flex;">
<%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body-sm", spacer: { right: "xs" } } %>
<p class="<%= SageClassnames::TYPE::BODY_SMALL %>">Body Small Lorem ipsum dolor sit</p>
</div>
<h3>Color</h3>

<p>To change the color of the icon, pass a color name to the <code>color</code> prop. Color values are <a href="https://www.figma.com/file/SHwMHKJXzMRn0tPZXEkfc5/%F0%9F%8E%A8-Sage-styles?type=design&node-id=3%3A1401&mode=design&t=Ri1acMQCzmfaaR9r-1" target="_blank">defined in Figma</a> and include values like <code>primary-300</code>, <code>sage-300</code>, <code>red-300</code>, etc.</p>

<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %>
pixelflips marked this conversation as resolved.
Show resolved Hide resolved
<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "red-300" } %>
<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "sage-300" } %>

<%= sage_component SageDivider, {} %>

<h3>Size</h3>
<p>Size can be used to increase or decrease the size of the icon. The default size is <code>md</code>. See Property tab for available values.</p>

<%= sage_component SageIcon, { icon: "pen", label: "Edit", size: "sm" } %>
<%= sage_component SageIcon, { icon: "pen", label: "Edit" } %>
<%= sage_component SageIcon, { icon: "pen", label: "Edit", size: "lg" } %>

<h3>Background Colors</h3>
<%= sage_component SageCardList, {} do %>
<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= "danger" %></p>
<%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>
<%= sage_component SageIcon, { icon: "danger", card_color: "danger", circular: true } %>
<% end %>

<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= "draft" %></p>
<%= sage_component SageIcon, { icon: "draft", card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "draft", card_color: "draft", circular: true } %>
<% end %>

<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= "info" %></p>
<%= sage_component SageIcon, { icon: "info-circle", card_color: "info" } %>
<%= sage_component SageIcon, { icon: "info-circle", card_color: "info", circular: true } %>
<% end %>

<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= "locked" %></p>
<%= sage_component SageIcon, { icon: "lock", card_color: "locked" } %>
<%= sage_component SageIcon, { icon: "lock", card_color: "locked", circular: true } %>
<% end %>

<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= "published" %></p>
<%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published" } %>
<%= sage_component SageIcon, { icon: "window-paragraph", card_color: "published", circular: true } %>
<% end %>

<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= "warning" %></p>
<%= sage_component SageIcon, { icon: "warning", card_color: "warning" } %>
<%= sage_component SageIcon, { icon: "warning", card_color: "warning", circular: true } %>
<% end %>

<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= "kajabi" %></p>
<%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary" } %>
<%= sage_component SageIcon, { icon: "kajabi-filled", card_color: "primary", circular: true } %>
<% end %>
<% end %>
<%= sage_component SageDivider, {} %>

<h3>Card Color</h3>

<p>Icons can be placed on a colored background by setting the <code>card_color</code> property. See Property tab for available values.</p>

<%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>

<%= sage_component SageDivider, {} %>

<h3>Background Sizes</h3>
<%= sage_component SageCardList, {} do %>
<% SageTokens::ICON_SIZES.each do | size | %>
<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<p><%= size == "md" ? "Default (#{size})" : size %></p>
<%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "pen", size: (size == "md" ? nil : size), card_color: "draft", circular: true, } %>
<% end %>
<% end %>
<% end %>
<p>Background sizes can be applied by setting the <code>background_size</code> property. See Property tab for available values.</p>
pixelflips marked this conversation as resolved.
Show resolved Hide resolved

<%= sage_component SageIcon, { icon: "pen", size: "sm", card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "pen", size: "lg", card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "pen", size: "xl", card_color: "draft" } %>

<%= sage_component SageDivider, {} %>

<h3>Custom Background Sizes</h3>
<%= sage_component SageCardList, {} do %>
<%= sage_component SageCardListItem, { grid_template: "o" } do %>
<%= sage_component SageIcon, { icon: "pen", size: "2xl", background_width: "128px", background_height: "64px", card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "pen", size: "xl", background_height: "64px", card_color: "draft", circular: true, } %>
<% end %>
<% end %>
<p>Custom background sizes can be applied by setting the <code>background_width</code> and <code>background_height</code> properties. These values are applied as inline styles, so they can be any valid CSS value. The <code>background_width</code> property is required when using <code>background_height</code>.</p>

<%= sage_component SageIcon, { icon: "pen", background_width: "128px", background_height: "64px", card_color: "draft" } %>

<%= sage_component SageDivider, {} %>

<h3>Circular</h3>
<p>Icons can be made circular by setting the <code>circular</code> property to <code>true</code>.</p>

<%= sage_component SageIcon, { icon: "pen", background_height: "64px", card_color: "draft", circular: true } %>

<%= sage_component SageDivider, {} %>

<h3>Alignment next to Type</h3>
pixelflips marked this conversation as resolved.
Show resolved Hide resolved
<p>Since a common use is to place an icon inline next to text in a variety of forms, we provide the opportunity to indicate that an icon is beside content a particular type spec. The effect is that the icon's <code>height</code> and <code>line-height</code> are updated to match the spec responsively. This can be used in combination with the different icon sizes and also be used with a vareity of layout techniques or components such as CSS flexbox (used below) or grid templates within <code>SageCardRow</code> or <code>SagePanelRow</code>.
</p>

<div style="display: flex;">
<%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>
<h2 class="<%= SageClassnames::TYPE::HEADING_2 %>">Heading 2 Lorem ipsum dolor sit</h2>
</div>