forked from solidusio/solidus
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
The fieldset component just wraps a group of fields (or, actually, any content) within a fieldset tag. It optionally accepts a legend text and a toggletip component. Ref. solidusio#5329
- Loading branch information
1 parent
8322d8f
commit f5a7538
Showing
5 changed files
with
171 additions
and
0 deletions.
There are no files selected for viewing
4 changes: 4 additions & 0 deletions
4
admin/app/components/solidus_admin/ui/forms/fieldset/component.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 |
---|---|---|
@@ -0,0 +1,4 @@ | ||
<%= tag.fieldset(**fieldset_html_attributes) do %> | ||
<%= legend_and_toggletip_tags %> | ||
<%= content %> | ||
<% end %> |
66 changes: 66 additions & 0 deletions
66
admin/app/components/solidus_admin/ui/forms/fieldset/component.rb
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 |
---|---|---|
@@ -0,0 +1,66 @@ | ||
# 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_and_toggletip_tags | ||
return "" unless @legend || @toggletip_attributes.any? | ||
|
||
tag.div(class: "flex mb-4") do | ||
legend_tag + toggletip_tag | ||
end | ||
end | ||
|
||
def legend_tag | ||
return "".html_safe 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 |
44 changes: 44 additions & 0 deletions
44
admin/spec/components/previews/solidus_admin/ui/forms/fieldset/component_preview.rb
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 |
---|---|---|
@@ -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 |
48 changes: 48 additions & 0 deletions
48
...c/components/previews/solidus_admin/ui/forms/fieldset/component_preview/overview.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 |
---|---|---|
@@ -0,0 +1,48 @@ | ||
<%= form_with(url: "#", scope: :overview, method: :get, class: "w-full") do |form| %> | ||
<div class="flex gap-4"> | ||
<div class="flex-1"> | ||
<%= render current_component.new do %> | ||
<%= | ||
render component('ui/forms/text_field').new( | ||
field: :name, | ||
form: form, | ||
errors: {} | ||
) | ||
%> | ||
<% end %> | ||
</div> | ||
<div class="flex-1"> | ||
<%= render current_component.new(legend: "Legend") do %> | ||
<%= | ||
render component('ui/forms/text_field').new( | ||
field: :name, | ||
form: form, | ||
errors: {} | ||
) | ||
%> | ||
<% end %> | ||
</div> | ||
<div class="flex-1"> | ||
<%= 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 %> | ||
</div> | ||
<div class="flex-1"> | ||
<%= 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 %> | ||
</div> | ||
</div> | ||
<% end %> |
9 changes: 9 additions & 0 deletions
9
admin/spec/components/solidus_admin/ui/forms/fieldset/component_spec.rb
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 |
---|---|---|
@@ -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 |