From 21109336b38fcc037387418ffc022ed141576db6 Mon Sep 17 00:00:00 2001 From: Jackson Pires Date: Fri, 30 Aug 2024 20:15:46 -0300 Subject: [PATCH] adjust accordion to use rbui --- app/views/docs/accordion_view.rb | 101 ++++++------------ .../previews/rbui/accordion_preview.rb | 20 +++- 2 files changed, 50 insertions(+), 71 deletions(-) diff --git a/app/views/docs/accordion_view.rb b/app/views/docs/accordion_view.rb index 554c542..4158c27 100644 --- a/app/views/docs/accordion_view.rb +++ b/app/views/docs/accordion_view.rb @@ -3,81 +3,44 @@ class Docs::AccordionView < ApplicationView def view_template div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do - render Docs::Header.new(title: "Accordion", description: "A vertically stacked set of interactive headings that each reveal a section of content.") + render Docs::Header.new(title: "Accordion", + description: "A vertically stacked set of interactive headings that each reveal a section of content.") TypographyH2 { "Usage" } - render Docs::VisualCodeExample.new(title: "Custom Design", context: self) do + render Docs::VisualCodeExample.new(title: "Example", context: self) do <<~RUBY - Accordion(class: 'space-y-1') do - AccordionItem( - class!: - "data-[accordion-open-value=true]:bg-muted hover:bg-muted rounded-lg pb-3", - rotate_icon: 135 - ) do - AccordionTrigger(class!: "w-full rounded-lg") do - div(class: "p-6 pb-3 pl-16 relative text-left") do - AccordionIcon(class: "absolute left-6 top-6") do - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - class: "w-6 h-6" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: "M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" - ) + div(class: "w-full") do + Accordion do + AccordionItem do + AccordionTrigger do + p(class: "font-medium") { "What is PhlexUI?" } + AccordionIcon() + end + + AccordionContent do + p(class: "text-sm pb-4") do + "PhlexUI is a UI component library for Ruby devs who want to build better, faster." end end - p(class: "font-medium") { "What is RBUI?" } end end - AccordionContent do - p(class: "pl-16 pr-4 pb-4 text-muted-foreground") do - "RBUI is a UI component library for Ruby devs who want to build better, faster." - end - end - end + Accordion do + AccordionItem do + AccordionTrigger do + p(class: "font-medium") { "Can I use it with Rils?" } + AccordionIcon() + end - AccordionItem( - class!: - "data-[accordion-open-value=true]:bg-muted hover:bg-muted rounded-lg pb-3", - rotate_icon: 135 - ) do - AccordionTrigger(class!: "w-full rounded-lg") do - div(class: "p-6 pb-3 pl-16 relative text-left") do - AccordionIcon(class: "absolute left-6 top-6") do - svg( - xmlns: "http://www.w3.org/2000/svg", - fill: "none", - viewbox: "0 0 24 24", - stroke_width: "1.5", - stroke: "currentColor", - class: "w-6 h-6" - ) do |s| - s.path( - stroke_linecap: "round", - stroke_linejoin: "round", - d: "M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" - ) + AccordionContent do + p(class: "text-sm pb-4") do + "Yes, PhlexUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app." end end - p(class: "font-medium") { "Can I use it with Rails?" } - end - end - - AccordionContent do - p(class: "pl-16 pr-4 pb-4 text-muted-foreground") do - "Yes, RBUI is pure Ruby and works great with Rails. It's a Ruby gem that you can install into your Rails app." end end end - end RUBY end @@ -89,12 +52,18 @@ def view_template def components [ - Docs::ComponentStruct.new(name: "AccordionController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/accordion_controller.js", built_using: :stimulus), - Docs::ComponentStruct.new(name: "Accordion", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "AccordionItem", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "AccordionTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/item.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "AccordionContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/content.rb", built_using: :phlex), - Docs::ComponentStruct.new(name: "AccordionIcon", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/accordion/icon.rb", built_using: :phlex) + Docs::ComponentStruct.new(name: "AccordionController", + source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_controller.js", built_using: :stimulus), + Docs::ComponentStruct.new(name: "Accordion", + source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "AccordionItem", + source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_item.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "AccordionTrigger", + source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_trigger.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "AccordionContent", + source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_content.rb", built_using: :phlex), + Docs::ComponentStruct.new(name: "AccordionIcon", + source: "https://github.com/PhlexUI/phlex_ui/blob/v1/lib/rbui/accordion/accordion_icon.rb", built_using: :phlex) ] end end diff --git a/test/components/previews/rbui/accordion_preview.rb b/test/components/previews/rbui/accordion_preview.rb index 39ace09..ec95c99 100644 --- a/test/components/previews/rbui/accordion_preview.rb +++ b/test/components/previews/rbui/accordion_preview.rb @@ -12,11 +12,21 @@ class AccordionPreview < Lookbook::Preview # --------------- def default render(TestView.new) do - Accordion do - ITEMS.each do |it| - AccordionItem do - AccordionTrigger { AccordionDefaultTrigger { AccordionIcon { it[:title] } } } - AccordionContent { AccordionDefaultContent { it[:content] } } + div(class: "w-96") do + Accordion do + ITEMS.each do |it| + AccordionItem do + AccordionTrigger do + p(class: "font-medium") { it[:title] } + AccordionIcon() + end + + AccordionContent do + p(class: "text-sm pb-4") do + it[:content] + end + end + end end end end