adjust accordion to use rbui (#108)

ruby-ui · Sep 1, 2024 · 14d5b30 · 14d5b30
1 parent c707659
commit 14d5b30
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 71 deletions.
diff --git 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
@@ -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