Add breadcrumb component (#207)

Author: karinevieira

lib/ruby_ui/breadcrumb/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

lib/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

lib/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

lib/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

lib/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

lib/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

lib/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

test/ruby_ui/breadcrumb_test.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "test_helper"
+
+class RubyUI::BreadcrumbTest < ComponentTest
+  def test_render_with_all_items
+    output = phlex do
+      RubyUI.Breadcrumb do
+        RubyUI.BreadcrumbList do
+          RubyUI.BreadcrumbItem do
+            RubyUI.BreadcrumbLink(href: "#") { "Home" }
+          end
+          RubyUI.BreadcrumbSeparator()
+          RubyUI.BreadcrumbItem do
+            RubyUI.BreadcrumbLink(href: "/docs/accordion") { "Components" }
+          end
+          RubyUI.BreadcrumbSeparator()
+          RubyUI.BreadcrumbItem do
+            RubyUI.BreadcrumbPage { "Breadcrumb" }
+          end
+        end
+      end
+    end
+
+    assert_match(/Components/, output)
+  end
+end