From 7a94d7c95039d5333ef59a7ff92a92ab563fe912 Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Wed, 11 Oct 2023 15:34:59 -0600 Subject: [PATCH 1/5] docs(icon): updated documentation --- .../components/icon/_preview.html.erb | 157 ++++++------------ 1 file changed, 55 insertions(+), 102 deletions(-) diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb index e3b5cf5168..f06ab67f1f 100644 --- a/docs/app/views/examples/components/icon/_preview.html.erb +++ b/docs/app/views/examples/components/icon/_preview.html.erb @@ -1,111 +1,64 @@ -

Basic Usage

+

Default

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

Colors

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

Sizes

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

Variants:

-

Alignment next to Type

-<%= 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`. -") %> -
- <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %> -

Heading 2 Lorem ipsum dolor sit

-
-
- <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h4", spacer: { right: "xs" } } %> -

Heading 4 Lorem ipsum dolor sit

-
-
- <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body", spacer: { right: "xs" } } %> -

Body Lorem ipsum dolor sit

-
-
- <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "body-sm", spacer: { right: "xs" } } %> -

Body Small Lorem ipsum dolor sit

-
+

Color

+ +

To change the color of the icon, pass a color name to the `color` prop. Color values are defined in Figma and include values like primary-300, sage-300, red-300, etc.

+ +<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %> +<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "red-300" } %> +<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "sage-300" } %> + +<%= sage_component SageDivider, {} %> + +

Size

+

Size can be used to increase or decrease the size of the icon. The default size is md.

+ +<%= 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" } %> -

Background Colors

-<%= sage_component SageCardList, {} do %> - <%= sage_component SageCardListItem, { grid_template: "o" } do %> -

<%= "danger" %>

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

<%= "draft" %>

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

<%= "info" %>

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

<%= "locked" %>

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

<%= "published" %>

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

<%= "warning" %>

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

<%= "kajabi" %>

- <%= 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, {} %> +

Card Color

+ +

Icons can be placed on a colored background by setting the card_color property. See property tab for available values.

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

Background Sizes

-<%= sage_component SageCardList, {} do %> - <% SageTokens::ICON_SIZES.each do | size | %> - <%= sage_component SageCardListItem, { grid_template: "o" } do %> -

<%= size == "md" ? "Default (#{size})" : size %>

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

Background sizes can be applied by setting the background_size property. See property tab for available values.

+ +<%= 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, {} %>

Custom Background Sizes

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

Custom background sizes can be applied by setting the background_width and background_height properties. These values are applied as inline styles, so they can be any valid CSS value. The background_width property is required when using background_height.

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

Circular

+

Icons can be made circular by setting the circular property to true.

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

Alignment next to Type

+

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

+ +
+ <%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %> +

Heading 2 Lorem ipsum dolor sit

+
From 2dcf35f69aa23550735db80f9e8b9276f66ab36f Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Wed, 11 Oct 2023 15:37:02 -0600 Subject: [PATCH 2/5] docs(icon): updated documentation --- docs/app/views/examples/components/icon/_preview.html.erb | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb index f06ab67f1f..f6db66b150 100644 --- a/docs/app/views/examples/components/icon/_preview.html.erb +++ b/docs/app/views/examples/components/icon/_preview.html.erb @@ -15,7 +15,7 @@ <%= sage_component SageDivider, {} %>

Size

-

Size can be used to increase or decrease the size of the icon. The default size is md.

+

Size can be used to increase or decrease the size of the icon. The default size is md. See Property tab for available values.

<%= sage_component SageIcon, { icon: "pen", label: "Edit", size: "sm" } %> <%= sage_component SageIcon, { icon: "pen", label: "Edit" } %> @@ -25,14 +25,14 @@

Card Color

-

Icons can be placed on a colored background by setting the card_color property. See property tab for available values.

+

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

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

Background Sizes

-

Background sizes can be applied by setting the background_size property. See property tab for available values.

+

Background sizes can be applied by setting the background_size property. See Property tab for available values.

<%= sage_component SageIcon, { icon: "pen", size: "sm", card_color: "draft" } %> <%= sage_component SageIcon, { icon: "pen", size: "lg", card_color: "draft" } %> From 89204f5c8787c184b1358c354cf2e1270b31750a Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Wed, 11 Oct 2023 15:45:25 -0600 Subject: [PATCH 3/5] docs(icon): fix code typo --- docs/app/views/examples/components/icon/_preview.html.erb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb index f6db66b150..01da3ef17a 100644 --- a/docs/app/views/examples/components/icon/_preview.html.erb +++ b/docs/app/views/examples/components/icon/_preview.html.erb @@ -6,7 +6,7 @@

Color

-

To change the color of the icon, pass a color name to the `color` prop. Color values are defined in Figma and include values like primary-300, sage-300, red-300, etc.

+

To change the color of the icon, pass a color name to the color prop. Color values are defined in Figma and include values like primary-300, sage-300, red-300, etc.

<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %> <%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "red-300" } %> From a5202d035b9411f8e3191209a9f90194cd16eced Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Mon, 16 Oct 2023 09:10:07 -0700 Subject: [PATCH 4/5] docs(icon): review related adjustments --- docs/app/views/examples/components/icon/_preview.html.erb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb index 01da3ef17a..d6e22941a7 100644 --- a/docs/app/views/examples/components/icon/_preview.html.erb +++ b/docs/app/views/examples/components/icon/_preview.html.erb @@ -2,7 +2,7 @@ <%= sage_component SageIcon, { icon: "pen", label: "Edit" } %> -

Variants:

+

Variants

Color

@@ -32,7 +32,7 @@ <%= sage_component SageDivider, {} %>

Background Sizes

-

Background sizes can be applied by setting the background_size property. See Property tab for available values.

+

Background sizes can be applied by setting the size property. See Property tab for available values.

<%= sage_component SageIcon, { icon: "pen", size: "sm", card_color: "draft" } %> <%= sage_component SageIcon, { icon: "pen", size: "lg", card_color: "draft" } %> From af30026efb3a82f3b890b5406dc4b582bf0bca6b Mon Sep 17 00:00:00 2001 From: Phillip Lovelace Date: Mon, 16 Oct 2023 09:50:58 -0700 Subject: [PATCH 5/5] docs(icon): review related adjustments --- .../components/icon/_preview.html.erb | 51 +++++++++++++------ 1 file changed, 35 insertions(+), 16 deletions(-) diff --git a/docs/app/views/examples/components/icon/_preview.html.erb b/docs/app/views/examples/components/icon/_preview.html.erb index d6e22941a7..b4d9ab5b97 100644 --- a/docs/app/views/examples/components/icon/_preview.html.erb +++ b/docs/app/views/examples/components/icon/_preview.html.erb @@ -8,57 +8,76 @@

To change the color of the icon, pass a color name to the color prop. Color values are defined in Figma and include values like primary-300, sage-300, red-300, etc.

-<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "primary-300" } %> -<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "red-300" } %> -<%= sage_component SageIcon, { icon: "pen", label: "Edit", color: "sage-300" } %> +
+ <%= 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" } %> +
<%= sage_component SageDivider, {} %>

Size

Size can be used to increase or decrease the size of the icon. The default size is md. See Property tab for available values.

-<%= 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" } %> +
+ <%= 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" } %> +
<%= sage_component SageDivider, {} %>

Card Color

+

Icons can be placed on a background by setting the card_color property. See Property tab for available values.

-

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

- -<%= sage_component SageIcon, { icon: "danger", card_color: "danger" } %> +
+ <%= 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" } %> +
<%= sage_component SageDivider, {} %>

Background Sizes

Background sizes can be applied by setting the size property. See Property tab for available values.

-<%= 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 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" } %> +
<%= sage_component SageDivider, {} %>

Custom Background Sizes

Custom background sizes can be applied by setting the background_width and background_height properties. These values are applied as inline styles, so they can be any valid CSS value. The background_width property is required when using background_height.

-<%= sage_component SageIcon, { icon: "pen", background_width: "128px", background_height: "64px", card_color: "draft" } %> + +
+ <%= 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" } %> +
<%= sage_component SageDivider, {} %>

Circular

Icons can be made circular by setting the circular property to true.

-<%= sage_component SageIcon, { icon: "pen", background_height: "64px", card_color: "draft", circular: true } %> +
+ <%= 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 } %> +
<%= sage_component SageDivider, {} %>

Alignment next to Type

-

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

The adjacent_type 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 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.

-
+
<%= sage_component SageIcon, { icon: "check-circle", adjacent_type: "h2", spacer: { right: "xs" } } %>

Heading 2 Lorem ipsum dolor sit