From c04f9c23447b804b2f46927982a65e3c0cd93ed5 Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Wed, 12 Apr 2023 16:40:02 -0700 Subject: [PATCH 01/20] fix(upload card): align specs, refactor template logic --- .../components/upload_card/_preview.html.erb | 4 ++-- .../_sage_upload_card.html.erb | 18 ++++++++--------- .../stylesheets/components/_upload_card.scss | 20 ++++++------------- 3 files changed, 16 insertions(+), 26 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index 7bfa6b0b46..857f1d77ac 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -1,6 +1,6 @@

Initial State

<%= sage_component SageUploadCard, { - selection_label: "Select a file", + selection_label: "Select file", selection_subtext: "Recommended dimensions or file size requirements", } %> @@ -11,7 +11,7 @@ {name: "contacts.csv"}, ], file_selected: true, - selection_label: "Replace file", + selection_label: "Edit file", selection_subtext: "Recommended dimensions or file size requirements", } %> diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb index 11bc66ec1f..2c5b29c86e 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb @@ -1,10 +1,10 @@ +<% upload_card_classes = ['sage-upload-card'] + upload_card_classes << 'sage-upload-card--selected' if component.file_selected.present? + upload_card_classes << 'sage-upload-card--error' if component.has_error.present? + upload_card_classes << component.generated_css_classes +%>
" <%= component.generated_html_attributes.html_safe %> >
@@ -20,8 +20,7 @@

<%= component.accepted_files[0][:name] %>

<%= sage_component SageButton, { - style: "primary", - subtle: true, + style: "secondary", value: component.selection_label } %>

<%= component.selection_subtext %>

@@ -30,8 +29,7 @@
<%= sage_component SageButton, { - style: "primary", - subtle: true, + style: "secondary", value: component.selection_label } %>

<%= component.selection_subtext %>

diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index 377b4a9582..826daec233 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -8,22 +8,19 @@ $-upload-card-border-radius: sage-border(radius-large); $-upload-card-border-width: 2; $-upload-card-selected-width: rem(200px); +$-upload-card-preview-border-radius: sage-border(radius-medium); $-upload-card-preview-width: rem(32px); $-upload-card-preview-max-width: rem(190px); $-upload-card-preview-max-width-mobile: rem(304px); $-upload-card-background: sage-color(white); -.sage-upload-card { - &:focus { - outline: none; - } -} - .sage-upload-card__body { display: flex; flex-flow: column; align-items: center; flex: 1; + gap: sage-spacing(sm); + color: sage-color(charcoal, 200); :not(.sage-upload-card--selected) & { justify-content: center; @@ -37,6 +34,7 @@ $-upload-card-background: sage-color(white); .sage-upload-card--selected & { flex-basis: $-upload-card-selected-width; + color: sage-color(charcoal, 300); } } @@ -116,7 +114,7 @@ $-upload-card-background: sage-color(white); max-width: $-upload-card-preview-max-width; margin-right: 0; text-align: center; - border-radius: sage-border(radius-sm); + border-radius: $-upload-card-preview-border-radius; .sage-upload-card--selected & { width: 100%; @@ -128,15 +126,9 @@ $-upload-card-background: sage-color(white); } .sage-upload-card__subtext { - @extend %t-sage-body-small; - - margin-top: sage-spacing(2xs); - color: sage-color(charcoal, 200); + @extend %t-sage-body; } .sage-upload-card__text { @extend %t-sage-heading-6; - - margin-bottom: sage-spacing(2xs); - color: sage-color(charcoal, 400); } From fef2c66637455351ba166f9a654de6d2f73870aa Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Thu, 20 Apr 2023 20:52:11 -0700 Subject: [PATCH 02/20] refactor(upload card): restructure card --- .../components/upload_card/_preview.html.erb | 50 +++++++++++++++-- .../app/sage_components/sage_upload_card.rb | 6 +++ .../_sage_upload_card.html.erb | 53 ++++++++++++------- 3 files changed, 86 insertions(+), 23 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index 857f1d77ac..56a86a0f28 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -1,28 +1,72 @@ -

Initial State

+<% + dropdown_menu_items = [ + { + value: "Upload file", + }, { + value: "Select recent file", + }, + ] + + dropdown_menu_remove = { + icon: "remove-circle", + style: "danger", + value: "Take A Dangerous Action", + } +%> + +

Default State (no file selected)

<%= sage_component SageUploadCard, { + id: "upload-card-default", selection_label: "Select file", selection_subtext: "Recommended dimensions or file size requirements", } %> +

Selected File State

<%= sage_component SageUploadCard, { accepted_files: [ - {name: "contacts.csv"}, + {name: "my-image-file.jpg"}, ], file_selected: true, + selection_preview: "https://placekitten.com/600", + id: "upload-card-selected", selection_label: "Edit file", selection_subtext: "Recommended dimensions or file size requirements", } %> +

Dropdown actions

+ +<%= sage_component SageUploadCard, { + accepted_files: [ + {name: "my-image-file.jpg"}, + ], + file_selected: true, + 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: "Select filezzzz", + } %> + <% end %> + <% end %> + <% end %> +<% end %> + +

Error State

<%= sage_component SageUploadCard, { has_error: true, + id: "upload-card-error", selection_label: "Select a file", selection_subtext: "Recommended dimensions or file size requirements", errors: [ - {text: "This is the error message."}, + {text: "This is an error message."}, ] } %> diff --git a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb index 965b0dfacf..f84e77f2c3 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb @@ -9,7 +9,13 @@ class SageUploadCard < SageComponent ]]], file_selected: [:optional, NilClass, TrueClass], has_error: [:optional, NilClass, TrueClass], + id: String, + name: [:optional, NilClass, String], + selection_preview: [:optional, NilClass, String], selection_label: [:optional, NilClass, String], selection_subtext: [:optional, NilClass, String], }) + def actions + %w(upload_card_actions) + end end diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb index 2c5b29c86e..a31fa8b08d 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb @@ -1,15 +1,23 @@ -<% upload_card_classes = ['sage-upload-card'] +<% + upload_card_classes = ['sage-upload-card'] upload_card_classes << 'sage-upload-card--selected' if component.file_selected.present? upload_card_classes << 'sage-upload-card--error' if component.has_error.present? upload_card_classes << component.generated_css_classes + upload_card_input_label = component.selection_label.present? ? component.selection_label : "Select a file" + upload_card_imagetypes = ['image/*'] + + upload_card_preview_image_options = { + class: "sage-upload-card__preview", + alt: "" + } %> -
" - <%= component.generated_html_attributes.html_safe %> -> +
" <%= component.generated_html_attributes.html_safe %>>
- - <% if component.file_selected.present? %> + + + <% if component.selection_preview.present? %> + <%= image_tag(component.selection_preview, upload_card_preview_image_options) %> + <% else %> <%= sage_component SageIconCard, { color: "draft", css_classes: "sage-upload-card__preview", @@ -17,24 +25,29 @@ label: "Upload graphic", size: "2xl", } %> -
-

<%= component.accepted_files[0][:name] %>

- <%= sage_component SageButton, { - style: "secondary", - value: component.selection_label - } %> -

<%= component.selection_subtext %>

+ <% end %> +
+
+ <% if component.file_selected.present? || component.selection_preview.present? %> +

+ <%= component.accepted_files[0][:name] %> +

+ <% end %> + <% if component.selection_subtext.present? %> +

+ <%= component.selection_subtext %> +

+ <% end %>
- <% else %> -
- + <% if component.selection_label.present? %> <%= sage_component SageButton, { style: "secondary", value: component.selection_label } %> -

<%= component.selection_subtext %>

-
- <% end %> + <% elsif content_for? :sage_upload_card_actions %> + <%= content_for :sage_upload_card_actions %> + <% end %> +
<% if component.errors.present? %>
From 56b9279d658be4735a8964cdad40a900e52e45d0 Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Thu, 20 Apr 2023 20:52:36 -0700 Subject: [PATCH 03/20] chore(upload card): remove container assignment --- packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index c668ccc3a7..f6a3b45161 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -652,6 +652,7 @@ /// Adds the basic default panel setup including grid, spacing, and border treatment /// @mixin sage-panel() { + container-type: inline-size; padding: sage-spacing(panel); background-color: sage-color(white); border: sage-border(); From f2536ca7cac07c3f7fc541e3efbca3155271dd0a Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Fri, 21 Apr 2023 17:44:26 -0700 Subject: [PATCH 04/20] feat(upload card): force stack layout option --- .../components/upload_card/_preview.html.erb | 22 +++++++++++++++++-- .../app/sage_components/sage_upload_card.rb | 1 + .../_sage_upload_card.html.erb | 11 ++++------ 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index 56a86a0f28..d212c3cf6d 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -15,6 +15,8 @@ %>

Default State (no file selected)

+

This layout will adjust from a vertical (stacked) orientation to horizontal depending on available space and/or screen size.

+ <%= sage_component SageUploadCard, { id: "upload-card-default", selection_label: "Select file", @@ -29,14 +31,30 @@ {name: "my-image-file.jpg"}, ], file_selected: true, - selection_preview: "https://placekitten.com/600", + selection_preview: "https://placekitten.com/520", id: "upload-card-selected", selection_label: "Edit file", selection_subtext: "Recommended dimensions or file size requirements", } %> -

Dropdown actions

+

Stacked layout

+

Locks the layout to vertical (stacked) orientation

+ +<%= sage_component SageUploadCard, { + accepted_files: [ + {name: "my-image-file.jpg"}, + ], + file_selected: true, + selection_preview: "https://placekitten.com/640/480", + stack_layout: true, + id: "upload-card-selected", + selection_label: "Edit file", + selection_subtext: "Recommended dimensions or file size requirements", +} %> + +

Custom actions

+

Use the sage_upload_card_actions slot to replace the default button and display custom components like dropdowns.

<%= sage_component SageUploadCard, { accepted_files: [ {name: "my-image-file.jpg"}, diff --git a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb index f84e77f2c3..07480e26ff 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb @@ -14,6 +14,7 @@ class SageUploadCard < SageComponent selection_preview: [:optional, NilClass, String], selection_label: [:optional, NilClass, String], selection_subtext: [:optional, NilClass, String], + stack_layout:[:optional, NilClass, TrueClass], }) def actions %w(upload_card_actions) diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb index a31fa8b08d..78f35c9be3 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb @@ -1,5 +1,6 @@ <% upload_card_classes = ['sage-upload-card'] + upload_card_classes << 'sage-upload-card--stack-only' if component.stack_layout == true upload_card_classes << 'sage-upload-card--selected' if component.file_selected.present? upload_card_classes << 'sage-upload-card--error' if component.has_error.present? upload_card_classes << component.generated_css_classes @@ -13,8 +14,7 @@ %>
" <%= component.generated_html_attributes.html_safe %>>
- - + <% if component.selection_preview.present? %> <%= image_tag(component.selection_preview, upload_card_preview_image_options) %> <% else %> @@ -27,7 +27,7 @@ } %> <% end %>
-
+
<% if component.file_selected.present? || component.selection_preview.present? %>

<%= component.accepted_files[0][:name] %> @@ -40,10 +40,7 @@ <% end %>

<% if component.selection_label.present? %> - <%= sage_component SageButton, { - style: "secondary", - value: component.selection_label - } %> + <% elsif content_for? :sage_upload_card_actions %> <%= content_for :sage_upload_card_actions %> <% end %> From 28078c44ccd449cee81ae3bf8f2fdc253402fdb6 Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Fri, 21 Apr 2023 18:57:22 -0700 Subject: [PATCH 05/20] fix(upload card): examples, file types and a11y fixes --- .../examples/components/upload_card/_preview.html.erb | 9 +++++---- .../sage_rails/app/sage_components/sage_upload_card.rb | 1 + .../app/views/sage_components/_sage_upload_card.html.erb | 5 +++-- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index d212c3cf6d..67cfcd6f7a 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -15,7 +15,6 @@ %>

Default State (no file selected)

-

This layout will adjust from a vertical (stacked) orientation to horizontal depending on available space and/or screen size.

<%= sage_component SageUploadCard, { id: "upload-card-default", @@ -39,7 +38,9 @@

Stacked layout

-

Locks the layout to vertical (stacked) orientation

+

The default layout will adjust from a vertical (stacked) orientation to horizontal depending on available space and/or screen size.

+ +

Setting stack_layout to true locks the component to its vertical (stacked) orientation.

<%= sage_component SageUploadCard, { accepted_files: [ @@ -48,13 +49,13 @@ file_selected: true, selection_preview: "https://placekitten.com/640/480", stack_layout: true, - id: "upload-card-selected", + id: "upload-card-stack", selection_label: "Edit file", selection_subtext: "Recommended dimensions or file size requirements", } %>

Custom actions

-

Use the sage_upload_card_actions slot to replace the default button and display custom components like dropdowns.

+

Use the sage_upload_card_actions slot to replace the default button and display custom components, like dropdowns.

<%= sage_component SageUploadCard, { accepted_files: [ {name: "my-image-file.jpg"}, diff --git a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb index 07480e26ff..3f6fcc9686 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb @@ -4,6 +4,7 @@ class SageUploadCard < SageComponent name: [:optional, NilClass, String], size: [:optional, NilClass, String], ]]], + accepted_file_types: [:optional, NilClass, String], errors: [:optional, NilClass, [[ text: [:optional, NilClass, String], ]]], diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb index 78f35c9be3..6f5ee69380 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb @@ -5,7 +5,7 @@ upload_card_classes << 'sage-upload-card--error' if component.has_error.present? upload_card_classes << component.generated_css_classes upload_card_input_label = component.selection_label.present? ? component.selection_label : "Select a file" - upload_card_imagetypes = ['image/*'] + upload_card_imagetypes = component.accepted_file_types.present? ? component.accepted_file_types.join(",") : "image/*" upload_card_preview_image_options = { class: "sage-upload-card__preview", @@ -14,7 +14,7 @@ %>
" <%= component.generated_html_attributes.html_safe %>>
- + <% if component.selection_preview.present? %> <%= image_tag(component.selection_preview, upload_card_preview_image_options) %> <% else %> @@ -42,6 +42,7 @@ <% if component.selection_label.present? %> <% elsif content_for? :sage_upload_card_actions %> + <%= content_for :sage_upload_card_actions %> <% end %>
From 760215dbf67536a14ef5b4e5650106a61a4c81ea Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Wed, 26 Apr 2023 09:46:07 -0700 Subject: [PATCH 06/20] chore(upload card): remove container experiment --- packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss index f6a3b45161..c668ccc3a7 100644 --- a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss +++ b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss @@ -652,7 +652,6 @@ /// Adds the basic default panel setup including grid, spacing, and border treatment /// @mixin sage-panel() { - container-type: inline-size; padding: sage-spacing(panel); background-color: sage-color(white); border: sage-border(); From 23efd646cf818ad4898d788329fd93f3a26339c3 Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Wed, 26 Apr 2023 18:04:50 -0700 Subject: [PATCH 07/20] fix(upload card): remove input and label with custom actions --- .../_sage_upload_card.html.erb | 23 +++++++++++-------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb index 6f5ee69380..54e8817000 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb @@ -14,7 +14,9 @@ %>
" <%= component.generated_html_attributes.html_safe %>>
- + <% unless component.custom_file_input_field %> + + <% end %> <% if component.selection_preview.present? %> <%= image_tag(component.selection_preview, upload_card_preview_image_options) %> <% else %> @@ -22,27 +24,28 @@ color: "draft", css_classes: "sage-upload-card__preview", icon: "image", - label: "Upload graphic", size: "2xl", } %> <% end %>
<% if component.file_selected.present? || component.selection_preview.present? %> -

+

<%= component.accepted_files[0][:name] %>

<% end %> - <% if component.selection_subtext.present? %> -

- <%= component.selection_subtext %> -

+ <% if content_for? :sage_upload_card_instructions %> +
+ <%= content_for :sage_upload_card_instructions %> +
<% end %>
- <% if component.selection_label.present? %> + <% if component.selection_label.present? && !component.custom_file_input_field %> - <% elsif content_for? :sage_upload_card_actions %> - + <% elsif content_for? :sage_upload_card_actions %> + <% if !component.custom_file_input_field %> + + <% end %> <%= content_for :sage_upload_card_actions %> <% end %>
From 91c7fa80a3acd8db129aef16215154b297f7969e Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Thu, 27 Apr 2023 18:37:50 -0700 Subject: [PATCH 08/20] feat(upload card): adjust content areas --- .../sage_rails/app/sage_components/sage_upload_card.rb | 10 ++++++++-- .../views/sage_components/_sage_upload_card.html.erb | 2 ++ 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb index 3f6fcc9686..5d2a9b6971 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb @@ -4,7 +4,8 @@ class SageUploadCard < SageComponent name: [:optional, NilClass, String], size: [:optional, NilClass, String], ]]], - accepted_file_types: [:optional, NilClass, String], + accepted_file_types: [:optional, NilClass, Array], + custom_file_input_field: [:optional, NilClass, TrueClass], errors: [:optional, NilClass, [[ text: [:optional, NilClass, String], ]]], @@ -14,9 +15,14 @@ class SageUploadCard < SageComponent name: [:optional, NilClass, String], selection_preview: [:optional, NilClass, String], selection_label: [:optional, NilClass, String], - selection_subtext: [:optional, NilClass, String], stack_layout:[:optional, NilClass, TrueClass], }) + def instructions + %w(upload_card_instructions) + end + def image + %w(upload_card_preview) + end def actions %w(upload_card_actions) end diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb index 54e8817000..ec9fe08931 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_upload_card.html.erb @@ -19,6 +19,8 @@ <% end %> <% if component.selection_preview.present? %> <%= image_tag(component.selection_preview, upload_card_preview_image_options) %> + <% elsif content_for? :sage_upload_card_preview %> + <%= content_for :sage_upload_card_preview %> <% else %> <%= sage_component SageIconCard, { color: "draft", From fde0ba7b4a9a3941c34b1743bd8821501ec62403 Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Thu, 27 Apr 2023 18:38:29 -0700 Subject: [PATCH 09/20] fix(upload card): style adjustments --- .../stylesheets/components/_upload_card.scss | 91 +++++++++++-------- 1 file changed, 52 insertions(+), 39 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index 826daec233..7b0242a72a 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -7,67 +7,69 @@ $-upload-card-border-radius: sage-border(radius-large); $-upload-card-border-width: 2; -$-upload-card-selected-width: rem(200px); +$-upload-card-error-color: sage-color(red, 300); +$-upload-card-body-width: rem(200px); +$-upload-card-body-width-stack: rem(340px); $-upload-card-preview-border-radius: sage-border(radius-medium); $-upload-card-preview-width: rem(32px); $-upload-card-preview-max-width: rem(190px); -$-upload-card-preview-max-width-mobile: rem(304px); +$-upload-card-preview-max-width-stack: rem(292px); $-upload-card-background: sage-color(white); +$-upload-card-mobile-breakpoint: 609px; + +:root { + --sage-upload-card-aspect-ratio: 190 / 107; + --sage-upload-card-aspect-ratio-stack: 19 / 12; +} .sage-upload-card__body { display: flex; flex-flow: column; - align-items: center; - flex: 1; - gap: sage-spacing(sm); + align-items: flex-start; + justify-content: flex-start; + flex: 1 1 $-upload-card-body-width; + gap: sage-spacing(); color: sage-color(charcoal, 200); - :not(.sage-upload-card--selected) & { - justify-content: center; - align-items: center; - } - .sage-upload-card--selected & { - justify-content: flex-start; - align-items: flex-start; + color: sage-color(charcoal, 300); } - .sage-upload-card--selected & { - flex-basis: $-upload-card-selected-width; - color: sage-color(charcoal, 300); + .sage-upload-card--error & { + color: $-upload-card-error-color; } } .sage-upload-card__dropzone { display: flex; + flex-flow: row wrap; align-items: center; justify-content: center; - gap: sage-spacing(xs); + gap: sage-spacing(); padding: sage-spacing(md); background-color: $-upload-card-background; border-radius: $-upload-card-border-radius; border: sage-border(default); - .sage-upload-card:not(.sage-upload-card--selected) & { - flex-flow: column; - } - - .sage-upload-card--selected & { - flex-flow: row wrap; - gap: sage-spacing(); - } - .sage-upload-card.sage-upload-card--error & { - border-color: sage-color(red, 300); + border-color: $-upload-card-error-color; } .sage-upload-card.sage-upload-card--error & { &:hover, &:focus, &:focus-within { - border-color: sage-color(red, 300); + border-color: $-upload-card-error-color; } } + + .sage-upload-card--stack-only & { + flex-flow: column; + align-items: flex-start; + max-width: $-upload-card-body-width-stack; + margin-left: auto; + margin-right: auto; + } } .sage-upload-card__errors { @@ -76,7 +78,7 @@ $-upload-card-background: sage-color(white); > p { @extend %t-sage-body-med; - color: sage-color(red, 300); + color: $-upload-card-error-color; &:not(:last-child) { margin-bottom: sage-spacing(2xs); @@ -89,7 +91,7 @@ $-upload-card-background: sage-color(white); &:focus, &:hover { - color: sage-color(red, 300); + color: $-upload-card-error-color; text-decoration: underline; outline: 0; } @@ -109,26 +111,37 @@ $-upload-card-background: sage-color(white); @include visually-hidden; } +.sage-upload-card__input-label { + /* NOTE: label provides keyboard focus but does not allow form interaction */ + @include sage-focus-ring; +} + .sage-upload-card__preview { - width: $-upload-card-preview-width; - max-width: $-upload-card-preview-max-width; + width: 100%; margin-right: 0; text-align: center; border-radius: $-upload-card-preview-border-radius; + aspect-ratio: var(--sage-upload-card-aspect-ratio-stack); + object-fit: cover; - .sage-upload-card--selected & { - width: 100%; + @media (min-width: 610px) { + max-width: $-upload-card-preview-max-width; + aspect-ratio: var(--sage-upload-card-aspect-ratio); } - @media (max-width: 609px) { - max-width: $-upload-card-preview-max-width-mobile; + .sage-upload-card--stack-only & { + max-width: $-upload-card-preview-max-width-stack; + aspect-ratio: var(--sage-upload-card-aspect-ratio-stack); } } -.sage-upload-card__subtext { - @extend %t-sage-body; +.sage-upload-card__description { + display: flex; + flex-direction: column; + gap: sage-spacing(sm); } -.sage-upload-card__text { - @extend %t-sage-heading-6; +.sage-upload-card__instructions { + @extend %t-sage-body; + color: sage-color(charcoal, 200); } From fdaff51067d9c747ad69a9ddfb9ace350a73f8bf Mon Sep 17 00:00:00 2001 From: Kevin Chang Date: Thu, 27 Apr 2023 18:39:28 -0700 Subject: [PATCH 10/20] docs(upload card): update rails examples --- .../components/upload_card/_preview.html.erb | 61 +++++++++++-------- 1 file changed, 36 insertions(+), 25 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index 67cfcd6f7a..e2b59963f8 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -4,63 +4,75 @@ value: "Upload file", }, { value: "Select recent file", - }, + }, { + style: "danger", + modifiers: ["border-before"], + value: "Remove image", + } ] - - dropdown_menu_remove = { - icon: "remove-circle", - style: "danger", - value: "Take A Dangerous Action", - } %> -

Default State (no file selected)

+

Default State (no file selected)

<%= sage_component SageUploadCard, { id: "upload-card-default", selection_label: "Select file", - selection_subtext: "Recommended dimensions or file size requirements", } %> +

Selected File State

-

Selected File State

+

Restrict accepted file types using accepted_file_types.

<%= sage_component SageUploadCard, { accepted_files: [ {name: "my-image-file.jpg"}, ], file_selected: true, - selection_preview: "https://placekitten.com/520", + accepted_file_types: ["image/jpg"], + selection_preview: "https://placekitten.com/360", id: "upload-card-selected", - selection_label: "Edit file", - selection_subtext: "Recommended dimensions or file size requirements", -} %> + selection_label: "Edit file" +} do %> + <% content_for :sage_upload_card_instructions do %> +

Upload a JPEG

+ <% end %> +<% end %> -

Stacked layout

+

Vertical (stacked) layout

The default layout will adjust from a vertical (stacked) orientation to horizontal depending on available space and/or screen size.

-

Setting stack_layout to true locks the component to its vertical (stacked) orientation.

+

Setting stack_layout to true locks the component to the vertical orientation.

<%= sage_component SageUploadCard, { accepted_files: [ {name: "my-image-file.jpg"}, ], file_selected: true, - selection_preview: "https://placekitten.com/640/480", + selection_preview: "https://placekitten.com/360", stack_layout: true, id: "upload-card-stack", selection_label: "Edit file", - selection_subtext: "Recommended dimensions or file size requirements", -} %> +} do %> + <% content_for :sage_upload_card_instructions do %> +

Recommended dimensions or file size requirements

+ <% end %> +<% end %> + +

Custom content areas

+

Instructions area

+

The sage_upload_card_instructions slot provides an area for extended instructions and custom markup.

-

Custom actions

-

Use the sage_upload_card_actions slot to replace the default button and display custom components, like dropdowns.

+

Actions area

+

Use the sage_upload_card_actions slot to replace the default button and display custom components, such as dropdowns.

+

NOTE: a file input field and label are included by default in the base component, as seen in the examples above. When applying a custom file input with `sage_upload_card_actions`, set custom_file_input_field to true to remove these defaults.

<%= sage_component SageUploadCard, { accepted_files: [ - {name: "my-image-file.jpg"}, + {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 %> @@ -69,7 +81,7 @@ <%= sage_component SageButton, { style: "secondary", icon: { name: "caret-down", style: "right" }, - value: "Select filezzzz", + value: "Edit file", } %> <% end %> <% end %> @@ -77,13 +89,12 @@ <% end %> -

Error State

+

Error State

<%= sage_component SageUploadCard, { has_error: true, id: "upload-card-error", selection_label: "Select a file", - selection_subtext: "Recommended dimensions or file size requirements", errors: [ {text: "This is an error message."}, ] From 8dbdb8b4977994dee8c6fe1f5e0350878afec47e Mon Sep 17 00:00:00 2001 From: Ashley E Date: Wed, 2 Aug 2023 16:00:58 -0500 Subject: [PATCH 11/20] fix(upload card): fixes issue with content for content is replicated in multiple upload cards --- .../examples/components/upload_card/_preview.html.erb | 10 +++++++--- .../sage_rails/app/sage_components/sage_upload_card.rb | 10 ++-------- 2 files changed, 9 insertions(+), 11 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index e2b59963f8..67ecd3da75 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -17,7 +17,11 @@ <%= sage_component SageUploadCard, { id: "upload-card-default", selection_label: "Select file", -} %> +} do %> + <% content_for :sage_upload_card_instructions do %> +

Upload a JPEG sdbfksbfkjb

+ <% end %> +<% end %>

Selected File State

@@ -31,10 +35,9 @@ accepted_file_types: ["image/jpg"], selection_preview: "https://placekitten.com/360", id: "upload-card-selected", - selection_label: "Edit file" } do %> <% content_for :sage_upload_card_instructions do %> -

Upload a JPEG

+

Upload a JPEG this is a test

<% end %> <% end %> @@ -108,6 +111,7 @@ ], file_selected: true, has_error: true, + id: "upload-card-selected-error", selection_label: "Replace file", selection_subtext: "Recommended dimensions or file size requirements", errors: [ diff --git a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb index 5d2a9b6971..44b0bbf6b6 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_upload_card.rb @@ -17,13 +17,7 @@ class SageUploadCard < SageComponent selection_label: [:optional, NilClass, String], stack_layout:[:optional, NilClass, TrueClass], }) - def instructions - %w(upload_card_instructions) - end - def image - %w(upload_card_preview) - end - def actions - %w(upload_card_actions) + def sections + %w(upload_card_instructions upload_card_preview upload_card_actions) end end From 598e4d065ebac597d4a1b69b0ce7ba6d9cdb4230 Mon Sep 17 00:00:00 2001 From: Ashley E Date: Thu, 3 Aug 2023 16:29:55 -0500 Subject: [PATCH 12/20] style(upload card): updates instructions font style and stack spacing --- .../examples/components/upload_card/_preview.html.erb | 8 ++++++-- .../lib/stylesheets/components/_upload_card.scss | 7 ++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index 67ecd3da75..bb40441358 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -19,7 +19,7 @@ selection_label: "Select file", } do %> <% content_for :sage_upload_card_instructions do %> -

Upload a JPEG sdbfksbfkjb

+

Upload a JPEG

<% end %> <% end %> @@ -101,7 +101,11 @@ errors: [ {text: "This is an error message."}, ] -} %> +} do %> + <% content_for :sage_upload_card_instructions do %> +

Recommended dimensions or file size requirements

+ <% end %> +<% end %>

Selected Error State

diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index 7b0242a72a..bec2b4dc4e 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -27,7 +27,7 @@ $-upload-card-mobile-breakpoint: 609px; flex-flow: column; align-items: flex-start; justify-content: flex-start; - flex: 1 1 $-upload-card-body-width; + flex: 1 1; gap: sage-spacing(); color: sage-color(charcoal, 200); @@ -141,7 +141,8 @@ $-upload-card-mobile-breakpoint: 609px; gap: sage-spacing(sm); } -.sage-upload-card__instructions { - @extend %t-sage-body; +.sage-upload-card__instructions, +.sage-upload-card__filename { + @extend %t-sage-body-med; color: sage-color(charcoal, 200); } From 92270c76336d1c2d1d4965a5a8db39734c6532df Mon Sep 17 00:00:00 2001 From: Ashley E Date: Thu, 10 Aug 2023 16:53:04 -0500 Subject: [PATCH 13/20] refactor(upload card): refactors logic for React to match Rails version --- .../stylesheets/components/_upload_card.scss | 7 +- .../sage-react/lib/UploadCard/UploadCard.jsx | 138 ++++++++++++------ .../lib/UploadCard/UploadCard.story.jsx | 27 +++- 3 files changed, 124 insertions(+), 48 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index bec2b4dc4e..73e8977e77 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -136,13 +136,10 @@ $-upload-card-mobile-breakpoint: 609px; } .sage-upload-card__description { + @extend %t-sage-body-med; + display: flex; flex-direction: column; gap: sage-spacing(sm); -} - -.sage-upload-card__instructions, -.sage-upload-card__filename { - @extend %t-sage-body-med; color: sage-color(charcoal, 200); } diff --git a/packages/sage-react/lib/UploadCard/UploadCard.jsx b/packages/sage-react/lib/UploadCard/UploadCard.jsx index 7d0b026b51..ef5d447a12 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.jsx @@ -2,15 +2,19 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { Button } from '../Button'; -import { Icon } from '../Icon'; import { IconCard } from '../IconCard'; import { SageTokens } from '../configs'; +import { render } from 'react-dom'; export const UploadCard = ({ + actions, acceptedFiles, className, + customFileInputField, errors, + id, inputProps, + previewImage, replaceLabel, rootProps, selectionLabel, @@ -31,11 +35,87 @@ export const UploadCard = ({ } ); + const renderDefaultInputField = () => ( + !customFileInputField && ( + + ) + ); + + const renderActions = () => ( + actions && !customFileInputField && ( + actions + ) + ); + + const renderPreviewImage = () => ( + previewImage ? ( + {previewImage.alt} + ) : ( + + ) + ); + + const renderReplaceLabel = () => ( + replaceLabel && !customFileInputField && ( + <> + + {renderActions()} + + ) + ); + + const renderLabel = () => { + if ((selectionLabel || replaceLabel) && !customFileInputField) { + return ( + <> + + + ); + } + + if (actions) { + if (!customFileInputField) { + return ( + + ); + } + } + return actions; + }; + return (
- + {renderDefaultInputField()} {filesSelected ? ( + <> + {renderPreviewImage()} +
+
+ {acceptedFiles.map(({ name }, i) => { + // Limit to one file for now + if (i > 0) { + return null; + } + + return ( + +

+ {name} +

+ {renderLabel()} + + ); + })} +
+
+ + ) : ( <>
- {acceptedFiles.map(({ name, size }, i) => { - // Limit to one file for now - if (i > 0) { - return null; - } - - return ( - -

{name}

- -

- {`File size: ${size}B`} -

- - ); - })} +
+

+ {selectionSubtext} +

+ {renderLabel()} +
- ) : ( -
- - -

- {selectionSubtext} -

-
)}
{errors && ( @@ -100,9 +147,12 @@ export const UploadCard = ({ UploadCard.defaultProps = { acceptedFiles: [], + actions: null, className: null, + customFileInputField: false, errors: null, inputProps: null, + previewImage: null, replaceLabel: 'Replace file', rootProps: null, selectionLabel: 'Select a file', @@ -111,12 +161,18 @@ UploadCard.defaultProps = { UploadCard.propTypes = { acceptedFiles: PropTypes.arrayOf(PropTypes.shape), + actions: PropTypes.node, className: PropTypes.string, + customFileInputField: PropTypes.bool, errors: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string, message: PropTypes.string, })), inputProps: PropTypes.shape({}), + previewImage: PropTypes.shape({ + alt: PropTypes.string, + src: PropTypes.string + }), replaceLabel: PropTypes.string, rootProps: PropTypes.shape({}), selectionLabel: PropTypes.string, diff --git a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx index 2515dc6d28..e7ab2dc88f 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid } from '..'; +import { Button } from '../Button'; +import { Grid, SageTokens } from '..'; import { UploadCard } from './UploadCard'; export default { @@ -34,6 +35,15 @@ Default.decorators = [ export const DefaultWithError = Template.bind({}); DefaultWithError.args = { + actions: ( + + ), errors: [ { message: 'This is the error message.' @@ -44,9 +54,22 @@ DefaultWithError.args = { export const SelectedWithError = Template.bind({}); SelectedWithError.args = { acceptedFiles: [{ name: '.csv', size: '1 M' }], + actions: ( + + ), errors: [ { message: 'This is the error message.' }, - ] + ], + previewImage: { + alt: 'cat', + src: 'https://placekitten.com/360' + } }; From 4ccb1cab5ac21bae8f07079f23da2cf0068b8166 Mon Sep 17 00:00:00 2001 From: Ashley E Date: Fri, 11 Aug 2023 15:53:14 -0500 Subject: [PATCH 14/20] feat(upload card): adds stacked layout and id props --- .../stylesheets/components/_upload_card.scss | 2 ++ .../sage-react/lib/UploadCard/UploadCard.jsx | 28 ++++++------------- .../lib/UploadCard/UploadCard.story.jsx | 21 +------------- 3 files changed, 11 insertions(+), 40 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index 73e8977e77..1c6dd6bd58 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -114,6 +114,8 @@ $-upload-card-mobile-breakpoint: 609px; .sage-upload-card__input-label { /* NOTE: label provides keyboard focus but does not allow form interaction */ @include sage-focus-ring; + + justify-self: flex-start; } .sage-upload-card__preview { diff --git a/packages/sage-react/lib/UploadCard/UploadCard.jsx b/packages/sage-react/lib/UploadCard/UploadCard.jsx index ef5d447a12..f6b5b6cae2 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.jsx @@ -1,10 +1,7 @@ import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { Button } from '../Button'; import { IconCard } from '../IconCard'; -import { SageTokens } from '../configs'; -import { render } from 'react-dom'; export const UploadCard = ({ actions, @@ -19,6 +16,7 @@ export const UploadCard = ({ rootProps, selectionLabel, selectionSubtext, + stacked, ...rest }) => { const [filesSelected, updateFilesSelected] = useState(acceptedFiles && acceptedFiles.length > 0); @@ -32,6 +30,7 @@ export const UploadCard = ({ { 'sage-upload-card--selected': filesSelected, 'sage-upload-card--error': errors, + 'sage-upload-card--stack-only': stacked, } ); @@ -41,12 +40,6 @@ export const UploadCard = ({ ) ); - const renderActions = () => ( - actions && !customFileInputField && ( - actions - ) - ); - const renderPreviewImage = () => ( previewImage ? ( {previewImage.alt} @@ -60,20 +53,11 @@ export const UploadCard = ({ ) ); - const renderReplaceLabel = () => ( - replaceLabel && !customFileInputField && ( - <> - - {renderActions()} - - ) - ); - const renderLabel = () => { if ((selectionLabel || replaceLabel) && !customFileInputField) { return ( <> - + ); } @@ -84,8 +68,8 @@ export const UploadCard = ({ ); } + return actions; } - return actions; }; return ( @@ -151,12 +135,14 @@ UploadCard.defaultProps = { className: null, customFileInputField: false, errors: null, + id: null, inputProps: null, previewImage: null, replaceLabel: 'Replace file', rootProps: null, selectionLabel: 'Select a file', selectionSubtext: null, + stacked: false, }; UploadCard.propTypes = { @@ -168,6 +154,7 @@ UploadCard.propTypes = { code: PropTypes.string, message: PropTypes.string, })), + id: PropTypes.string, inputProps: PropTypes.shape({}), previewImage: PropTypes.shape({ alt: PropTypes.string, @@ -177,4 +164,5 @@ UploadCard.propTypes = { rootProps: PropTypes.shape({}), selectionLabel: PropTypes.string, selectionSubtext: PropTypes.string, + stacked: PropTypes.bool }; diff --git a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx index e7ab2dc88f..6ed293a453 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Button } from '../Button'; -import { Grid, SageTokens } from '..'; +import { Grid } from '..'; import { UploadCard } from './UploadCard'; export default { @@ -35,15 +34,6 @@ Default.decorators = [ export const DefaultWithError = Template.bind({}); DefaultWithError.args = { - actions: ( - - ), errors: [ { message: 'This is the error message.' @@ -54,15 +44,6 @@ DefaultWithError.args = { export const SelectedWithError = Template.bind({}); SelectedWithError.args = { acceptedFiles: [{ name: '.csv', size: '1 M' }], - actions: ( - - ), errors: [ { message: 'This is the error message.' From 4d0e099b58921f3b837db8555a6821b6d81f1ca0 Mon Sep 17 00:00:00 2001 From: Ashley E Date: Mon, 14 Aug 2023 14:23:36 -0500 Subject: [PATCH 15/20] docs(upload card): adds stack example to storybook --- .../lib/stylesheets/components/_upload_card.scss | 3 +-- .../lib/UploadCard/UploadCard.story.jsx | 15 +++++---------- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss index 1c6dd6bd58..7272556b91 100644 --- a/packages/sage-assets/lib/stylesheets/components/_upload_card.scss +++ b/packages/sage-assets/lib/stylesheets/components/_upload_card.scss @@ -114,8 +114,6 @@ $-upload-card-mobile-breakpoint: 609px; .sage-upload-card__input-label { /* NOTE: label provides keyboard focus but does not allow form interaction */ @include sage-focus-ring; - - justify-self: flex-start; } .sage-upload-card__preview { @@ -142,6 +140,7 @@ $-upload-card-mobile-breakpoint: 609px; display: flex; flex-direction: column; + align-items: flex-start; gap: sage-spacing(sm); color: sage-color(charcoal, 200); } diff --git a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx index 6ed293a453..890989abff 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx @@ -34,16 +34,6 @@ Default.decorators = [ export const DefaultWithError = Template.bind({}); DefaultWithError.args = { - errors: [ - { - message: 'This is the error message.' - }, - ] -}; - -export const SelectedWithError = Template.bind({}); -SelectedWithError.args = { - acceptedFiles: [{ name: '.csv', size: '1 M' }], errors: [ { message: 'This is the error message.' @@ -54,3 +44,8 @@ SelectedWithError.args = { src: 'https://placekitten.com/360' } }; + +export const Stacked = Template.bind({}); +Stacked.args = { + stacked: true, +}; From b534bfc1d9816412b4adf2e5aa3c399dcc3b5eec Mon Sep 17 00:00:00 2001 From: Ashley E Date: Tue, 15 Aug 2023 11:33:50 -0500 Subject: [PATCH 16/20] test(upload card): adds tests for upload card --- .../lib/UploadCard/UploadCard.spec.jsx | 128 ++++++++++++++++++ .../lib/UploadCard/UploadCard.story.jsx | 17 ++- 2 files changed, 144 insertions(+), 1 deletion(-) create mode 100644 packages/sage-react/lib/UploadCard/UploadCard.spec.jsx diff --git a/packages/sage-react/lib/UploadCard/UploadCard.spec.jsx b/packages/sage-react/lib/UploadCard/UploadCard.spec.jsx new file mode 100644 index 0000000000..fda5055d13 --- /dev/null +++ b/packages/sage-react/lib/UploadCard/UploadCard.spec.jsx @@ -0,0 +1,128 @@ +require('../test/testHelper'); + +import React from 'react'; +import { render } from '@testing-library/react'; +import { SageTokens } from '../configs'; +import { Button } from '../Button'; +import { UploadCard } from './UploadCard'; + +describe('Sage Upload Card', () => { + it('renders with correct selection subtext when prop is set', () => { + const defaultProps = { + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const selectionSubtext = document.querySelector('.sage-upload-card__filename'); + expect(selectionSubtext).toHaveTextContent('Upload a .csv up to 10KB'); + }); + + it('renders with correct selection label when prop is set', () => { + const defaultProps = { + selectionLabel: 'Select a file', + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const selectionLabel = document.querySelector('.sage-upload-card__input-label'); + expect(selectionLabel).toHaveTextContent('Select a file'); + }); + + it('renders with correct replace label when prop is set', () => { + const defaultProps = { + replaceLabel: 'Replace file', + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const replaceLabel = document.querySelector('.sage-upload-card__input-label'); + expect(replaceLabel).toHaveTextContent('Select a file'); + }); + + it('renders with replace label when both label props are set', () => { + const defaultProps = { + replaceLabel: 'Replace file', + selectionLabel: 'Select a file', + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const replaceLabel = document.querySelector('.sage-upload-card__input-label'); + expect(replaceLabel).toHaveTextContent('Select a file'); + }); + + it('renders with preview image when prop is set', () => { + const defaultProps = { + previewImage: { + alt: 'cat', + src: 'https://placekitten.com/360', + }, + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const previewImage = document.querySelector('.sage-upload-card__preview'); + expect(previewImage).not.toBeNull(); + expect(previewImage).toHaveAttribute('src', 'https://placekitten.com/360'); + expect(previewImage).toHaveAttribute('alt', 'cat'); + }); + + it('renders with actions when prop is set', () => { + const defaultProps = { + actions: ( + + ), + customFileInputField: true, + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const actions = document.querySelector('.sage-btn'); + expect(actions).not.toBeNull(); + }); + + it('renders with errors when prop is set', () => { + const defaultProps = { + errors: [ + { + message: 'This is the error message.', + }, + ], + previewImage: { + alt: 'cat', + src: 'https://placekitten.com/360', + }, + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const errors = document.querySelector('.sage-upload-card__errors'); + expect(errors).not.toBeNull(); + expect(errors).toHaveTextContent('This is the error message.'); + }); + + it('renders in stacked layout when prop is set', () => { + const defaultProps = { + stacked: true, + selectionSubtext: 'Upload a .csv up to 10KB', + }; + + render(); + + const uploadCard = document.querySelector('.sage-upload-card'); + expect(uploadCard).toHaveClass('sage-upload-card--stack-only'); + }); +}); diff --git a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx index 890989abff..01f9db80dd 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx @@ -1,5 +1,6 @@ import React from 'react'; -import { Grid } from '..'; +import { Button } from '../Button'; +import { Grid, SageTokens } from '..'; import { UploadCard } from './UploadCard'; export default { @@ -45,6 +46,20 @@ DefaultWithError.args = { } }; +export const CustomActions = Template.bind({}); +CustomActions.args = { + actions: ( + + ), + customFileInputField: true, +}; + export const Stacked = Template.bind({}); Stacked.args = { stacked: true, From df6c04836700b1cf2e235f6fdc5ca113255af5fe Mon Sep 17 00:00:00 2001 From: Ashley E Date: Tue, 15 Aug 2023 16:04:53 -0500 Subject: [PATCH 17/20] docs(upload card): adds descriptions to stories and fixes preview image rendering bug --- .../components/upload_card/_preview.html.erb | 16 -------------- .../sage-react/lib/UploadCard/UploadCard.jsx | 10 ++------- .../lib/UploadCard/UploadCard.spec.jsx | 6 ++++-- .../lib/UploadCard/UploadCard.story.jsx | 21 +++++++++++++++++++ 4 files changed, 27 insertions(+), 26 deletions(-) diff --git a/docs/app/views/examples/components/upload_card/_preview.html.erb b/docs/app/views/examples/components/upload_card/_preview.html.erb index bb40441358..5576167c15 100644 --- a/docs/app/views/examples/components/upload_card/_preview.html.erb +++ b/docs/app/views/examples/components/upload_card/_preview.html.erb @@ -106,19 +106,3 @@

Recommended dimensions or file size requirements

<% end %> <% end %> - -

Selected Error State

- -<%= sage_component SageUploadCard, { - accepted_files: [ - {name: "contacts.csv"}, - ], - file_selected: true, - has_error: true, - id: "upload-card-selected-error", - selection_label: "Replace file", - selection_subtext: "Recommended dimensions or file size requirements", - errors: [ - {text: "This is the error message."}, - ] -} %> \ No newline at end of file diff --git a/packages/sage-react/lib/UploadCard/UploadCard.jsx b/packages/sage-react/lib/UploadCard/UploadCard.jsx index f6b5b6cae2..9f05e53eda 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.jsx @@ -68,17 +68,17 @@ export const UploadCard = ({ ); } - return actions; } + return actions; }; return (
{renderDefaultInputField()} + {renderPreviewImage()} {filesSelected ? ( <> - {renderPreviewImage()}
{acceptedFiles.map(({ name }, i) => { @@ -101,12 +101,6 @@ export const UploadCard = ({ ) : ( <> -

diff --git a/packages/sage-react/lib/UploadCard/UploadCard.spec.jsx b/packages/sage-react/lib/UploadCard/UploadCard.spec.jsx index fda5055d13..88eee32573 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.spec.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.spec.jsx @@ -61,15 +61,16 @@ describe('Sage Upload Card', () => { alt: 'cat', src: 'https://placekitten.com/360', }, + selectionLabel: 'Select a file', selectionSubtext: 'Upload a .csv up to 10KB', }; render(); - const previewImage = document.querySelector('.sage-upload-card__preview'); + const previewImage = document.querySelector('img'); expect(previewImage).not.toBeNull(); - expect(previewImage).toHaveAttribute('src', 'https://placekitten.com/360'); expect(previewImage).toHaveAttribute('alt', 'cat'); + expect(previewImage).toHaveAttribute('src', 'https://placekitten.com/360'); }); it('renders with actions when prop is set', () => { @@ -97,6 +98,7 @@ describe('Sage Upload Card', () => { const defaultProps = { errors: [ { + code: '1', message: 'This is the error message.', }, ], diff --git a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx index 01f9db80dd..7e3048b6e6 100644 --- a/packages/sage-react/lib/UploadCard/UploadCard.story.jsx +++ b/packages/sage-react/lib/UploadCard/UploadCard.story.jsx @@ -34,6 +34,13 @@ Default.decorators = [ ]; export const DefaultWithError = Template.bind({}); +DefaultWithError.parameters = { + docs: { + description: { + story: 'The Upload Card will display an error message if the `errors` prop is set, with the appropriate styling.' + }, + }, +}; DefaultWithError.args = { errors: [ { @@ -47,6 +54,13 @@ DefaultWithError.args = { }; export const CustomActions = Template.bind({}); +CustomActions.parameters = { + docs: { + description: { + story: 'The `actions` prop is a slot to allow for custom labels and inputs, buttons, dropdowns, etc. to be used in place of the default input field when the `customFileInputField` prop is set to `true.`' + }, + }, +}; CustomActions.args = { actions: (