-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1809 from Kajabi/docs/pl-onsite-docs-icon
Docs: Icon documentation update (Rails)
- Loading branch information
Showing
1 changed file
with
72 additions
and
100 deletions.
There are no files selected for viewing
172 changes: 72 additions & 100 deletions
172
docs/app/views/examples/components/icon/_preview.html.erb
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | ||
|
|
||
| <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> |