Skip to content

Commit

Permalink
fix: Corrige os previews do componente modal (#132)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lsouoliveira
lsouoliveira authored Jan 14, 2025
1 parent 23aaa37 commit 6d074a7
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 27 deletions.
2 changes: 1 addition & 1 deletion Gemfile.lock
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: .
specs:
ink_components (1.2.0)
ink_components (1.2.1)
inline_svg
lookbook (= 2.3.2)
rails (>= 6.1.7.4)
Expand Down
50 changes: 25 additions & 25 deletions app/components/ink_components/modal/preview.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ def default_modal
component.with_header(modal_id: "default-modal", title: "Default")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-start items-center p-4" do
content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "default-modal" })
component.content_tag :div, class: "w-full flex justify-start items-center p-4" do
component.content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "default-modal" })
end
end
end
Expand All @@ -41,8 +41,8 @@ def static_modal
component.with_header(modal_id: "static-modal", title: "Static")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-start items-center p-4" do
content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
component.content_tag :div, class: "w-full flex justify-start items-center p-4" do
component.content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
end
end
end
Expand All @@ -54,9 +54,9 @@ def popup_modal
component.with_header(modal_id: "popup-modal", title: "Popup")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-center items-center p-4 gap-2" do
content_tag(:button, "Aceitar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-red-600 hover:bg-red-800 focus:ring-pink-300 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "popup-modal" }) +
content_tag(:button, "Declinar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-gray-600 hover:bg-gray-800 focus:ring-gray-300 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "popup-modal" })
component.content_tag :div, class: "w-full flex justify-center items-center p-4 gap-2" do
component.content_tag(:button, "Aceitar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-red-600 hover:bg-red-800 focus:ring-pink-300 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "popup-modal" }) +
component.content_tag(:button, "Declinar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-gray-600 hover:bg-gray-800 focus:ring-gray-300 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "popup-modal" })
end
end
end
Expand All @@ -70,8 +70,8 @@ def small
component.with_header(modal_id: "small-modal", title: "Small")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-end items-center p-4" do
content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
component.content_tag :div, class: "w-full flex justify-end items-center p-4" do
component.content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
end
end
end
Expand All @@ -83,8 +83,8 @@ def default
component.with_header(modal_id: "medium-modal", title: "Default")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-end items-center p-4" do
content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
component.content_tag :div, class: "w-full flex justify-end items-center p-4" do
component.content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
end
end
end
Expand All @@ -96,8 +96,8 @@ def large
component.with_header(modal_id: "large-modal", title: "Large")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-end items-center p-4" do
content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
component.content_tag :div, class: "w-full flex justify-end items-center p-4" do
component.content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
end
end
end
Expand All @@ -109,8 +109,8 @@ def extra_large
component.with_header(modal_id: "extra-large-modal", title: "Extra large")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-end items-center p-4" do
content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
component.content_tag :div, class: "w-full flex justify-end items-center p-4" do
component.content_tag(:button, "Fechar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "static-modal" })
end
end
end
Expand Down Expand Up @@ -165,15 +165,15 @@ def body_to_builder
component.with_trigger { button("body-modal") }
component.with_header(modal_id: "body-modal", title: "Modal com Body Personalizado")
component.with_body do
content_tag :div, class: "w-full" do
content_tag :div, class: "w-full grid grid-cols-2 gap-2" do
content_tag(:div, class: "flex flex-col gap-2") do
content_tag(:label, "Nome", class: "text-sm font-medium text-gray-900 dark:text-white") +
content_tag(:input, nil, type: "text", class: "border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-4 focus:outline-none", placeholder: "João das Neves")
component.content_tag :div, class: "w-full" do
component.content_tag :div, class: "w-full grid grid-cols-2 gap-2" do
component.content_tag(:div, class: "flex flex-col gap-2") do
component.content_tag(:label, "Nome", class: "text-sm font-medium text-gray-900 dark:text-white") +
component.content_tag(:input, nil, type: "text", class: "border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-4 focus:outline-none", placeholder: "João das Neves")
end +
content_tag(:div, class: "flex flex-col gap-2") do
content_tag(:label, "Idade", class: "text-sm font-medium text-gray-900 dark:text-white") +
content_tag(:input, nil, type: "text", class: "border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-4 focus:outline-none", placeholder: "34")
component.content_tag(:div, class: "flex flex-col gap-2") do
component.content_tag(:label, "Idade", class: "text-sm font-medium text-gray-900 dark:text-white") +
component.content_tag(:input, nil, type: "text", class: "border-gray-300 rounded-lg px-3 py-2.5 text-sm focus:ring-4 focus:outline-none", placeholder: "34")
end
end
end
Expand All @@ -195,8 +195,8 @@ def footer_to_builder
component.with_header(modal_id: "footer-modal", title: "Modal com Footer Personalizado")
component.with_body { TEXT_BODY }
component.with_footer do
content_tag :div, class: "w-full flex justify-end items-center p-4" do
content_tag(:button, "Salvar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "footer-modal" })
component.content_tag :div, class: "w-full flex justify-end items-center p-4" do
component.content_tag(:button, "Salvar", type: "button", class: "focus:ring-4 font-medium text-center focus:outline-none text-white bg-pink-600 hover:bg-pink-800 focus:ring-pink-300 dark:bg-pink-600 dark:hover:bg-pink-700 dark:focus:ring-pink-800 rounded-lg px-5 py-2.5 text-sm", data: { modal_hide: "footer-modal" })
end
end
end
Expand Down
2 changes: 1 addition & 1 deletion lib/ink_components/version.rb
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
module InkComponents
VERSION = "1.2.0"
VERSION = "1.2.1"
end

0 comments on commit 6d074a7

Please sign in to comment.