diff --git a/admin/app/components/solidus_admin/ui/forms/fieldset/component.erb b/admin/app/components/solidus_admin/ui/forms/fieldset/component.erb new file mode 100644 index 00000000000..141305fd574 --- /dev/null +++ b/admin/app/components/solidus_admin/ui/forms/fieldset/component.erb @@ -0,0 +1,7 @@ +<%= tag.fieldset(**fieldset_html_attributes) do %> +
+ <%= legend_tag %> + <%= toggletip_tag %> +
+ <%= content %> +<% end %> diff --git a/admin/app/components/solidus_admin/ui/forms/fieldset/component.rb b/admin/app/components/solidus_admin/ui/forms/fieldset/component.rb new file mode 100644 index 00000000000..dd36b4d09ac --- /dev/null +++ b/admin/app/components/solidus_admin/ui/forms/fieldset/component.rb @@ -0,0 +1,58 @@ +# frozen_string_literal: true + +class SolidusAdmin::UI::Forms::Fieldset::Component < SolidusAdmin::BaseComponent + # @param legend [String, nil] The legend of the fieldset. + # @param fieldset_attributes [Hash] Attributes to pass to the fieldset tag. + # @param legend_attributes [Hash, nil] Attributes to pass to the legend tag. + # @param toggletip_attributes [Hash, nil] Attributes to pass to a toggletip + # component that will be rendered after the legend. + def initialize( + legend: nil, + fieldset_attributes: {}, + legend_attributes: {}, + toggletip_attributes: {}, + toggletip_component: component("ui/toggletip") + ) + @legend = legend + @fieldset_attributes = fieldset_attributes + @legend_attributes = legend_attributes + @toggletip_attributes = toggletip_attributes + @toggletip_component = toggletip_component + end + + def fieldset_html_attributes + { + class: fieldset_classes, + **@fieldset_attributes.except(:class) + } + end + + def fieldset_classes + %w[p-6 mb-6 border border-gray-100 rounded-lg] + Array(@fieldset_attributes[:class]).compact + end + + def legend_tag + return "" unless @legend + + tag.legend(@legend, **legend_html_attributes) + end + + def legend_html_attributes + { + class: legend_classes, + **@legend_attributes.except(:class) + } + end + + def legend_classes + %w[body-title mr-2] + Array(@legend_attributes[:class]).compact + end + + def toggletip_tag + return "" unless @toggletip_attributes.any? + + tag.div do + render @toggletip_component.new(**@toggletip_attributes) + end + end +end diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview.rb b/admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview.rb new file mode 100644 index 00000000000..3298c4e0024 --- /dev/null +++ b/admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview.rb @@ -0,0 +1,44 @@ +# frozen_string_literal: true + +# @component "ui/forms/fieldset" +class SolidusAdmin::UI::Forms::Fieldset::ComponentPreview < ViewComponent::Preview + include SolidusAdmin::Preview + + # The fieldset component is used to render a set of fields in a form. + # + # In its most basic form, it wraps the yielded content in a fieldset tag: + # + # ```erb + # <%= render components('ui/forms/fieldset').new do %> + # <%= # ... %> + # <% end %> + # ``` + # + # The legend of the fieldset can be set with the `legend` option: + # + # ```erb + # <%= render components('ui/forms/fieldset').new( + # legend: "My fieldset" + # ) do %> + # <%= # ... %> + # <% end %> + # ``` + # + # Lastly, a toggletip can be added to the legend with the + # `toggletip_attributes`, which will be passed to the [toggletip + # component](../../toggletip): + # + # ```erb + # <%= render components('ui/forms/fieldset').new( + # legend: "My fieldset", + # toggletip_attributes: { + # guide: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + # position: :right + # } + # ) do %> + # <%= # ... %> + # <% end %> + # ``` + def overview + end +end diff --git a/admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview/overview.html.erb b/admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview/overview.html.erb new file mode 100644 index 00000000000..836381be8a6 --- /dev/null +++ b/admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview/overview.html.erb @@ -0,0 +1,48 @@ +<%= form_with(url: "#", scope: :overview, method: :get, class: "w-full") do |form| %> +
+
+ <%= render current_component.new do %> + <%= + render component('ui/forms/text_field').new( + field: :name, + form: form, + errors: {} + ) + %> + <% end %> +
+
+ <%= render current_component.new(legend: "Legend") do %> + <%= + render component('ui/forms/text_field').new( + field: :name, + form: form, + errors: {} + ) + %> + <% end %> +
+
+ <%= render current_component.new(toggletip_attributes: { guide: "Lorem ipsum dolor est." }) do %> + <%= + render component('ui/forms/text_field').new( + field: :name, + form: form, + errors: {} + ) + %> + <% end %> +
+
+ <%= render current_component.new(legend: "Legend & tip", toggletip_attributes: { guide: "Lorem ipsum dolor est.", position: :left, theme: :dark }) do %> + <%= + render component('ui/forms/text_field').new( + field: :name, + form: form, + errors: {} + ) + %> + <% end %> +
+
+<% end %> diff --git a/admin/spec/components/solidus_admin/ui/forms/fieldset/component_spec.rb b/admin/spec/components/solidus_admin/ui/forms/fieldset/component_spec.rb new file mode 100644 index 00000000000..cfb51bf07e9 --- /dev/null +++ b/admin/spec/components/solidus_admin/ui/forms/fieldset/component_spec.rb @@ -0,0 +1,9 @@ +# frozen_string_literal: true + +require "spec_helper" + +RSpec.describe SolidusAdmin::UI::Forms::Fieldset::Component, type: :component do + it "renders the overview preview" do + render_preview(:overview) + end +end