-
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 #1815 from Kajabi/develop
Next Version Bump
- Loading branch information
Showing
14 changed files
with
538 additions
and
269 deletions.
There are no files selected for viewing
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
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
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 +1 @@ | ||
| 16.20.0 | ||
| 16.20.2 |
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
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> |
111 changes: 89 additions & 22 deletions
111
docs/app/views/examples/components/upload_card/_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,42 +1,109 @@ | ||
| <h3 class="t-sage-heading-6">Initial State</h3> | ||
| <% | ||
| dropdown_menu_items = [ | ||
| { | ||
| value: "Upload file", | ||
| }, { | ||
| value: "Select recent file", | ||
| }, { | ||
| style: "danger", | ||
| modifiers: ["border-before"], | ||
| value: "Remove image", | ||
| } | ||
| ] | ||
| %> | ||
|
|
||
| <h3>Default State (no file selected)</h3> | ||
|
|
||
| <%= sage_component SageUploadCard, { | ||
| selection_label: "Select a file", | ||
| selection_subtext: "Recommended dimensions or file size requirements", | ||
| } %> | ||
| id: "upload-card-default", | ||
| selection_label: "Select file", | ||
| } do %> | ||
| <% content_for :sage_upload_card_instructions do %> | ||
| <p>Upload a JPEG</p> | ||
| <% end %> | ||
| <% end %> | ||
|
|
||
| <h3>Selected File State</h3> | ||
|
|
||
| <h3 class="t-sage-heading-6">Selected File State</h3> | ||
| <p>Restrict accepted file types using <code>accepted_file_types</code>.</p> | ||
|
|
||
| <%= sage_component SageUploadCard, { | ||
| accepted_files: [ | ||
| {name: "contacts.csv"}, | ||
| {name: "my-image-file.jpg"}, | ||
| ], | ||
| file_selected: true, | ||
| accepted_file_types: ["image/jpg"], | ||
| selection_preview: "https://placekitten.com/360", | ||
| selection_label: "Replace file", | ||
| selection_subtext: "Recommended dimensions or file size requirements", | ||
| } %> | ||
| id: "upload-card-selected", | ||
| } do %> | ||
| <% content_for :sage_upload_card_instructions do %> | ||
| <p>Upload a JPEG this is a test</p> | ||
| <% end %> | ||
| <% end %> | ||
|
|
||
| <h3 class="t-sage-heading-6">Error State</h3> | ||
|
|
||
| <h3>Vertical (stacked) layout</h3> | ||
| <p>The default layout will adjust from a vertical (stacked) orientation to horizontal depending on available space and/or screen size.</p> | ||
|
|
||
| <p>Setting <code>stack_layout</code> to <code>true</code> locks the component to the vertical orientation.</p> | ||
|
|
||
| <%= sage_component SageUploadCard, { | ||
| has_error: true, | ||
| selection_label: "Select a file", | ||
| selection_subtext: "Recommended dimensions or file size requirements", | ||
| errors: [ | ||
| {text: "This is the error message."}, | ||
| ] | ||
| } %> | ||
| accepted_files: [ | ||
| {name: "my-image-file.jpg"}, | ||
| ], | ||
| file_selected: true, | ||
| selection_preview: "https://placekitten.com/360", | ||
| stack_layout: true, | ||
| id: "upload-card-stack", | ||
| selection_label: "Edit file", | ||
| } do %> | ||
| <% content_for :sage_upload_card_instructions do %> | ||
| <p>Recommended dimensions or file size requirements</p> | ||
| <% end %> | ||
| <% end %> | ||
|
|
||
| <h3 class="t-sage-heading-6">Selected Error State</h3> | ||
| <h3>Custom content areas</h3> | ||
| <h4>Instructions area</h4> | ||
| <p>The <code>sage_upload_card_instructions</code> slot provides an area for extended instructions and custom markup.</p> | ||
|
|
||
| <h4>Actions area</h4> | ||
| <p>Use the <code>sage_upload_card_actions</code> slot to replace the default button and display custom components, such as dropdowns.</p> | ||
| <p><strong>NOTE:</strong> a file input field and label are <em>included by default in the base component</em>, as seen in the examples above. When applying a custom file input with `sage_upload_card_actions`, set <code>custom_file_input_field</code> to <code>true</code> to remove these defaults.</p> | ||
| <%= sage_component SageUploadCard, { | ||
| accepted_files: [ | ||
| {name: "contacts.csv"}, | ||
| {name: "fluffy-kitteh.jpg"}, | ||
| ], | ||
| custom_file_input_field: true, | ||
| file_selected: true, | ||
| selection_preview: "https://placekitten.com/360", | ||
| id: "upload-card-dropdown" | ||
| } do %> | ||
| <% content_for :sage_upload_card_actions do %> | ||
| <%= sage_component SageDropdown, { items: dropdown_menu_items } do %> | ||
| <% content_for :sage_dropdown_trigger, flush: true do %> | ||
| <%= sage_component SageButton, { | ||
| style: "secondary", | ||
| icon: { name: "caret-down", style: "right" }, | ||
| value: "Edit file", | ||
| } %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
| <% end %> | ||
|
|
||
|
|
||
| <h3>Error State</h3> | ||
|
|
||
| <%= sage_component SageUploadCard, { | ||
| has_error: true, | ||
| selection_label: "Replace file", | ||
| selection_subtext: "Recommended dimensions or file size requirements", | ||
| id: "upload-card-error", | ||
| selection_label: "Select a file", | ||
| errors: [ | ||
| {text: "This is the error message."}, | ||
| {text: "This is an error message."}, | ||
| ] | ||
| } %> | ||
| } do %> | ||
| <% content_for :sage_upload_card_instructions do %> | ||
| <p>Recommended dimensions or file size requirements</p> | ||
| <% end %> | ||
| <% end %> |
Oops, something went wrong.