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},