Breadcrumb

# frozen_string_literal: true

module RubyUI
  class Breadcrumb < Base
    def view_template(&)
      nav(**attrs, &)
    end

    private

    def default_attrs
      {
        aria: {label: "breadcrumb"},
        data: {slot: "breadcrumb"}
      }
    end
  end
end

# frozen_string_literal: true

class Views::Docs::Breadcrumb < Views::Base
  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", variant: :link, 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

# 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",
        viewbox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        stroke_width: "2",
        stroke_linecap: "round",
        stroke_linejoin: "round",
        aria_hidden: "true"
      ) 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"},
        data: {slot: "breadcrumb-ellipsis"},
        class: "flex size-5 items-center justify-center [&>svg]:size-4",
        role: "presentation"
      }
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class BreadcrumbItem < Base
    def view_template(&)
      li(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "breadcrumb-item"},
        class: "inline-flex items-center gap-1.5"
      }
    end
  end
end

# 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
      {
        data: {slot: "breadcrumb-link"},
        class: "transition-colors hover:text-foreground"
      }
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class BreadcrumbList < Base
    def view_template(&)
      ol(**attrs, &)
    end

    private

    def default_attrs
      {
        data: {slot: "breadcrumb-list"},
        class: "flex flex-wrap items-center gap-1.5 wrap-break-word text-sm text-muted-foreground sm:gap-2.5"
      }
    end
  end
end

# frozen_string_literal: true

module RubyUI
  class BreadcrumbPage < Base
    def view_template(&)
      span(**attrs, &)
    end

    private

    # aria values are strings: Phlex renders `true` as a bare attribute
    # (aria-disabled=""), which ARIA treats as undefined.
    def default_attrs
      {
        aria: {disabled: "true", current: "page"},
        data: {slot: "breadcrumb-page"},
        class: "font-normal text-foreground",
        role: "link"
      }
    end
  end
end

# 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",
        viewbox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        stroke_width: "2",
        stroke_linecap: "round",
        stroke_linejoin: "round",
        aria_hidden: "true"
      ) { |s| s.path(d: "m9 18 6-6-6-6") }
    end

    # No role="presentation": an li in a list may only be a listitem
    # (https://www.w3.org/TR/html-aria/#el-li). aria-hidden="true" alone
    # keeps the separator out of the accessibility tree.
    def default_attrs
      {
        aria: {hidden: "true"},
        data: {slot: "breadcrumb-separator"},
        class: "[&>svg]:size-3.5"
      }
    end
  end
end