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 all 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
172 changes: 72 additions & 100 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,83 @@
<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>

<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>
<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>

<div style="display:flex;gap:16px">
<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %>
<%= sage_component SageIcon, { icon: "preview-on", label: "Preview", color: "sage-300" } %>
<%= sage_component SageIcon, { icon: "trash", label: "Delete", color: "red-300" } %>
</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>

<%= 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>

<div style="display:flex;gap:16px">
<%= sage_component SageIcon, { icon: "pen", label: "Edit", size: "xs" } %>
<%= sage_component SageIcon, { icon: "preview-on", label: "Edit" } %>
<%= sage_component SageIcon, { icon: "trash", label: "Edit", size: "xl" } %>
</div>

<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 background by setting the <code>card_color</code> property. See Property tab for available values.</p>

<div style="display:flex;gap:16px">
<%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %>
<%= sage_component SageIcon, { icon: "warning", card_color: "warning" } %>
<%= sage_component SageIcon, { icon: "check-circle", card_color: "published" } %>
</div>

<%= 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>size</code> property. See Property tab for available values.</p>

<div style="display:flex;gap:16px">
<%= sage_component SageIcon, { icon: "pen", size: "sm", card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "preview-on", size: "lg", card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "trash", size: "xl", card_color: "draft" } %>
</div>

<%= 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>


<div style="display:flex;gap:16px">
<%= sage_component SageIcon, { icon: "pen", background_width: "128px", background_height: "128px", card_color: "draft" } %>
<%= sage_component SageIcon, { icon: "preview-on", background_width: "64px", background_height: "128px", card_color: "warning" } %>
<%= sage_component SageIcon, { icon: "trash", background_width: "240px", background_height: "80px", card_color: "danger" } %>
</div>

<%= sage_component SageDivider, {} %>

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

<div style="display:flex;gap:16px">
<%= sage_component SageIcon, { icon: "pen", card_color: "draft", circular: true } %>
<%= sage_component SageIcon, { icon: "preview-on", card_color: "published", circular: true } %>
<%= sage_component SageIcon, { icon: "trash", card_color: "danger", circular: true } %>
</div>

<%= sage_component SageDivider, {} %>

<h3>Alignment next to Type</h3>

pixelflips marked this conversation as resolved.
Show resolved Hide resolved
<p>The <code>adjacent_type</code> property can be used to align an icon next to a heading or paragraph. This is useful for placing an icon next to a heading or paragraph in a variety of forms. 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>
Loading