Add Breadcrumb components

Extracted from Uchi's component library (www.uchiadmin.com).

Author: koppen

CHANGELOG.md

@@ -7,6 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
+* Breadcrumb component, including Flowbite::BreadcrumbItem with Flowbite::BreadcrumbItem::First and Flowbite::BreadcrumbItem::Current variants.
 * DateTime input field components.
 * Toast component.
 

app/components/flowbite/breadcrumb.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb navigation component.
+  #
+  # See https://flowbite.com/docs/components/breadcrumb/
+  #
+  # @example Basic usage with BreadcrumbItem components
+  #   <%= render Flowbite::Breadcrumb.new do |breadcrumb| %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render Flowbite::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
+  #     <% end %>
+  #     <% breadcrumb.with_item do %>
+  #       <%= render Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
+  #     <% end %>
+  #   <% end %>
+  class Breadcrumb < ViewComponent::Base
+    renders_many :items
+
+    def call
+      content_tag(:nav, class: "flex", "aria-label": "Breadcrumb") do
+        content_tag(:ol, class: "inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse") do
+          items.each do |item|
+            concat(item)
+          end
+        end
+      end
+    end
+  end
+end

app/components/flowbite/breadcrumb_home.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb home icon.
+  #
+  # This is typically used as a prefix icon in the first breadcrumb item,
+  # but can be used standalone if needed.
+  #
+  # @example Standalone usage
+  #   <%= render Flowbite::BreadcrumbHome.new %>
+  class BreadcrumbHome < ViewComponent::Base
+    def call
+      tag.svg(
+        class: "w-3 h-3 me-2.5",
+        "aria-hidden": "true",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "currentColor",
+        viewBox: "0 0 20 20"
+      ) do
+        tag.path(
+          d: "m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"
+        )
+      end
+    end
+  end
+end

app/components/flowbite/breadcrumb_item.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Base class for rendering a breadcrumb item (middle items in the breadcrumb trail).
+  #
+  # @param href [String] The URL for the breadcrumb link.
+  # @param options [Hash] Additional HTML attributes to pass to the link element.
+  #
+  # @example Middle item
+  #   <%= render Flowbite::BreadcrumbItem.new(href: "/projects") { "Projects" } %>
+  class BreadcrumbItem < ViewComponent::Base
+    attr_reader :href, :options
+
+    def initialize(href:, **options)
+      super()
+      @href = href
+      @options = options
+    end
+
+    def call
+      content_tag(:li, item_options) do
+        content_tag(:div, class: "flex items-center") do
+          concat(render(prefix_icon)) if prefix_icon
+          concat(render_link)
+        end
+      end
+    end
+
+    protected
+
+    def item_options
+      {}
+    end
+
+    def prefix_icon
+      Flowbite::BreadcrumbSeparator.new
+    end
+
+    def render_link
+      link_options = {class: link_classes}.merge(options)
+      content_tag(:a, content, href: href, **link_options)
+    end
+
+    def link_classes
+      ["ms-1", "text-sm", "font-medium", "text-body", "hover:text-fg-brand"]
+    end
+  end
+end

app/components/flowbite/breadcrumb_item/current.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class BreadcrumbItem
+    # Renders the current page breadcrumb item.
+    # Current items are rendered as non-interactive spans with different styling.
+    #
+    # @param options [Hash] Additional HTML attributes to pass to the span element.
+    #
+    # @example Current page item
+    #   <%= render Flowbite::BreadcrumbItem::Current.new { "Current Page" } %>
+    class Current < BreadcrumbItem
+      def initialize(**options)
+        super(href: nil, **options)
+      end
+
+      protected
+
+      def item_options
+        {"aria-current": "page"}
+      end
+
+      def render_link
+        link_options = {class: link_classes}.merge(options)
+        content_tag(:span, content, **link_options)
+      end
+
+      def link_classes
+        ["ms-1", "text-sm", "font-medium", "text-body-subtle"]
+      end
+    end
+  end
+end

app/components/flowbite/breadcrumb_item/first.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class BreadcrumbItem
+    # Renders the first breadcrumb item (typically home).
+    # First items don't show a separator icon.
+    #
+    # @param href [String] The URL for the breadcrumb link.
+    # @param options [Hash] Additional HTML attributes to pass to the link element.
+    #
+    # @example First item
+    #   <%= render Flowbite::BreadcrumbItem::First.new(href: "/") { "Home" } %>
+    class First < BreadcrumbItem
+      protected
+
+      def item_options
+        {class: "inline-flex items-center"}
+      end
+
+      def link_classes
+        ["text-sm", "font-medium", "inline-flex", "items-center", "text-body", "hover:text-fg-brand"]
+      end
+
+      def prefix_icon
+        nil
+      end
+
+      def render_link
+        icon = render(Flowbite::BreadcrumbHome.new)
+        link_options = {class: link_classes}.merge(options)
+        content_tag(:a, safe_join([icon, content]), href: href, **link_options)
+      end
+    end
+  end
+end

app/components/flowbite/breadcrumb_separator.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Flowbite
+  # Renders a breadcrumb separator icon.
+  #
+  # This is automatically used by BreadcrumbItem components, but can be
+  # used standalone if needed.
+  #
+  # @example Standalone usage
+  #   <%= render Flowbite::BreadcrumbSeparator.new %>
+  class BreadcrumbSeparator < ViewComponent::Base
+    def call
+      tag.svg(
+        class: "w-3.5 h-3.5 rtl:rotate-180 text-body",
+        "aria-hidden": "true",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        height: 24,
+        viewBox: "0 0 24 24",
+        width: 24
+      ) do
+        tag.path(
+          stroke: "currentColor",
+          "stroke-linecap": "round",
+          "stroke-linejoin": "round",
+          "stroke-width": "2",
+          d: "m9 5 7 7-7 7"
+        )
+      end
+    end
+  end
+end

demo/test/components/previews/breadcrumb_preview.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+class BreadcrumbPreview < Lookbook::Preview
+  # Use breadcrumb navigation to show the current page location and allow users
+  # to navigate back through the hierarchy.
+  def default
+    render(Flowbite::Breadcrumb.new) do |breadcrumb|
+      breadcrumb.with_item do
+        render_to_string(Flowbite::BreadcrumbItem::First.new(href: "/").with_content("Home"))
+      end
+      breadcrumb.with_item do
+        render_to_string(Flowbite::BreadcrumbItem.new(href: "/projects").with_content("Projects"))
+      end
+      breadcrumb.with_item do
+        render_to_string(Flowbite::BreadcrumbItem::Current.new.with_content("Current Page"))
+      end
+    end
+  end
+
+  private
+
+  def render_to_string(component)
+    ApplicationController.render(component, layout: false)
+  end
+end