Add breadcrumb to the documentation (#144)

Author: karinevieira

Gemfile.lock

@@ -14,10 +14,10 @@ GIT
 
 GIT
   remote: https://github.com/ruby-ui/ruby_ui.git
-  revision: 8909f0ecdd9ade28b01d76946e9d7438849b5856
+  revision: 398415a462e170a1c9d7af06b588fa5f2b879465
   branch: main
   specs:
-    ruby_ui (1.0.0.pre.alpha.4)
+    ruby_ui (1.0.0.beta1)
 
 GEM
   remote: https://rubygems.org/

app/components/ruby_ui/breadcrumb.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Breadcrumb < Base
+    def view_template(&)
+      nav(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {label: "breadcrumb"}
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbEllipsis < Base
+    def view_template(&)
+      span(**attrs) do
+        icon
+        span(class: "sr-only") { "More" }
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) do |s|
+        s.circle(cx: "12", cy: "12", r: "1")
+        s.circle(cx: "19", cy: "12", r: "1")
+        s.circle(cx: "5", cy: "12", r: "1")
+      end
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "flex h-9 w-9 items-center justify-center",
+        role: "presentation"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_item.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbItem < Base
+    def view_template(&)
+      li(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "inline-flex items-center gap-1.5"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_link.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbLink < Base
+    def initialize(href: "#", **attrs)
+      @href = href
+      super(**attrs)
+    end
+
+    def view_template(&)
+      a(href: @href, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "transition-colors hover:text-foreground"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_list.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbList < Base
+    def view_template(&)
+      ol(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        class: "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_page.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbPage < Base
+    def view_template(&)
+      span(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        aria: {disabled: true, current: "page"},
+        class: "font-normal text-foreground",
+        role: "link"
+      }
+    end
+  end
+end

app/components/ruby_ui/breadcrumb/breadcrumb_separator.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class BreadcrumbSeparator < Base
+    def view_template(&block)
+      li(**attrs) do
+        if block
+          block.call
+        else
+          icon
+        end
+      end
+    end
+
+    private
+
+    def icon
+      svg(
+        xmlns: "http://www.w3.org/2000/svg",
+        class: "w-4 h-4",
+        viewbox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        stroke_width: "2",
+        stroke_linecap: "round",
+        stroke_linejoin: "round"
+      ) { |s| s.path(d: "m9 18 6-6-6-6") }
+    end
+
+    def default_attrs
+      {
+        aria: {hidden: true},
+        class: "[&>svg]:w-3.5 [&>svg]:h-3.5",
+        role: "presentation"
+      }
+    end
+  end
+end

app/controllers/docs_controller.rb

@@ -58,6 +58,10 @@ def badge
     render Docs::BadgeView.new
   end
 
+  def breadcrumb
+    render Docs::BreadcrumbView.new
+  end
+
   def button
     render Docs::ButtonView.new
   end

app/views/components/shared/menu.rb

@@ -67,6 +67,7 @@ def components
       {name: "Aspect Ratio", path: helpers.docs_aspect_ratio_path},
       {name: "Avatar", path: helpers.docs_avatar_path},
       {name: "Badge", path: helpers.docs_badge_path},
+      {name: "Breadcrumb", path: helpers.docs_breadcrumb_path, badge: "New"},
       {name: "Button", path: helpers.docs_button_path},
       {name: "Calendar", path: helpers.docs_calendar_path},
       {name: "Card", path: helpers.docs_card_path},

app/views/docs/breadcrumb_view.rb

@@ -0,0 +1,116 @@
+# frozen_string_literal: true
+
+class Docs::BreadcrumbView < ApplicationView
+  def view_template
+    component = "Breadcrumb"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Breadcrumb", description: "Indicates the user's current location within a navigational hierarchy.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/docs/accordion") { "Components" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With custom separator", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator { slash_icon }
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/docs/accordion") { "Components" }
+              end
+              BreadcrumbSeparator { slash_icon }
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Collapsed", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbEllipsis()
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/docs/accordion") { "Components" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With Link component", context: self) do
+        <<~RUBY
+          Breadcrumb do
+            BreadcrumbList do
+              BreadcrumbItem do
+                BreadcrumbLink(href: "/") { "Home" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                Link(href: "/docs/accordion", class: "px-0") { "Components" }
+              end
+              BreadcrumbSeparator()
+              BreadcrumbItem do
+                BreadcrumbPage { "Breadcrumb" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def slash_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      class: "w-4 h-4",
+      viewbox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      stroke_width: "2",
+      stroke_linecap: "round",
+      stroke_linejoin: "round"
+    ) { |s| s.path(d: "M22 2 2 22") }
+  end
+end

config/routes.rb

@@ -20,6 +20,7 @@
     get "aspect_ratio", to: "docs#aspect_ratio", as: :docs_aspect_ratio
     get "avatar", to: "docs#avatar", as: :docs_avatar
     get "badge", to: "docs#badge", as: :docs_badge
+    get "breadcrumb", to: "docs#breadcrumb", as: :docs_breadcrumb
     get "button", to: "docs#button", as: :docs_button
     get "card", to: "docs#card", as: :docs_card
     get "calendar", to: "docs#calendar", as: :docs_calendar