Merge pull request #77 from substancelab/koppen/breadcrumb-item-namespace

Move BreadcrumbItem to Flowbite::Breadcrumb namespace

Author: koppen

CHANGELOG.md

@@ -7,7 +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.
+* Breadcrumb component, including Flowbite::Breadcrumb::Item with Flowbite::Breadcrumb::Item::First and Flowbite::Breadcrumb::Item::Current variants.
 * DateTime input field components.
 * Toast component.
 * Ruby 4.0 support (no changes).

app/components/flowbite/breadcrumb.rb

@@ -5,20 +5,20 @@ module Flowbite
   #
   # See https://flowbite.com/docs/components/breadcrumb/
   #
-  # Use {Flowbite::Breadcrumb} and the child {Flowbite::BreadcrumbItem} components to create and indicate a series of page structure and URLs to help the user navigate through the website.
+  # Use {Flowbite::Breadcrumb} and the child {Flowbite::Breadcrumb::Item} components to create and indicate a series of page structure and URLs to help the user navigate through the website.
   #
   # Breadcrumbs consist of the following components:
   #
   # - {Flowbite::Breadcrumb}: Container for breadcrumb items.
   # - {Flowbite::Breadcrumb::HomeIcon}: Home icon for the first breadcrumb item.
   # - {Flowbite::Breadcrumb::SeparatorIcon}: Separator between breadcrumb items.
-  # - {Flowbite::BreadcrumbItem}: An individual breadcrumb item.
-  # - {Flowbite::BreadcrumbItem::Current}: An invidual breadcrumb item without a link, usually used for the current page in the breadcrumb trail.
-  # - {Flowbite::BreadcrumbItem::First}: An individual breadcrumb item with a home icon on it.
+  # - {Flowbite::Breadcrumb::Item}: An individual breadcrumb item.
+  # - {Flowbite::Breadcrumb::Item::Current}: An invidual breadcrumb item without a link, usually used for the current page in the breadcrumb trail.
+  # - {Flowbite::Breadcrumb::Item::First}: An individual breadcrumb item with a home icon on it.
   #
-  # @viewcomponent_slot [Flowbite::BreadcrumbItem] items The items of the
-  #   breadcrumb trail. Use {Flowbite::BreadcrumbItem::First} for the first
-  #   item to get a home icon, and {Flowbite::BreadcrumbItem::Current} for the
+  # @viewcomponent_slot [Flowbite::Breadcrumb::Item] items The items of the
+  #   breadcrumb trail. Use {Flowbite::Breadcrumb::Item::First} for the first
+  #   item to get a home icon, and {Flowbite::Breadcrumb::Item::Current} for the
   #   last item to render it without a link.
   #
   # @lookbook_embed BreadcrumbPreview

app/components/flowbite/breadcrumb/item.rb

@@ -0,0 +1,50 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    # 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::Breadcrumb::Item.new(href: "/projects") { "Projects" } %>
+    class Item < 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::Breadcrumb::SeparatorIcon.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
+end

app/components/flowbite/breadcrumb/item/current.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    class Item
+      # 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::Breadcrumb::Item::Current.new { "Current Page" } %>
+      class Current < Item
+        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
+end

app/components/flowbite/breadcrumb/item/first.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Flowbite
+  class Breadcrumb
+    class Item
+      # 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::Breadcrumb::Item::First.new(href: "/") { "Home" } %>
+      class First < Item
+        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::Breadcrumb::HomeIcon.new)
+          link_options = {class: link_classes}.merge(options)
+          content_tag(:a, safe_join([icon, content]), href: href, **link_options)
+        end
+      end
+    end
+  end
+end

app/components/flowbite/breadcrumb/separator_icon.rb

@@ -4,7 +4,7 @@ module Flowbite
   class Breadcrumb
     # Renders a breadcrumb separator icon.
     #
-    # This is automatically used by BreadcrumbItem components, but can be
+    # This is automatically used by Breadcrumb::Item components, but can be
     # used standalone if needed.
     #
     # @example Standalone usage

app/components/flowbite/breadcrumb_item.rb

@@ -6,13 +6,13 @@ class BreadcrumbPreview < Lookbook::Preview
   def default
     render(Flowbite::Breadcrumb.new) do |breadcrumb|
       breadcrumb.with_item do
-        render_to_string(Flowbite::BreadcrumbItem::First.new(href: "/").with_content("Home"))
+        render_to_string(Flowbite::Breadcrumb::Item::First.new(href: "/").with_content("Home"))
       end
       breadcrumb.with_item do
-        render_to_string(Flowbite::BreadcrumbItem.new(href: "/projects").with_content("Projects"))
+        render_to_string(Flowbite::Breadcrumb::Item.new(href: "/projects").with_content("Projects"))
       end
       breadcrumb.with_item do
-        render_to_string(Flowbite::BreadcrumbItem::Current.new.with_content("Current Page"))
+        render_to_string(Flowbite::Breadcrumb::Item::Current.new.with_content("Current Page"))
       end
     end
   end