From 3205764b6d539713be9a0844f4caf4081c90f97d Mon Sep 17 00:00:00 2001 From: Karine Vieira <62672837+karinevieira@users.noreply.github.com> Date: Sun, 24 Nov 2024 10:58:42 -0300 Subject: [PATCH] Add breadcrumb to the documentation (#144) --- Gemfile.lock | 4 +- app/components/ruby_ui/breadcrumb.rb | 17 +++ .../ruby_ui/breadcrumb/breadcrumb_ellipsis.rb | 39 ++++++ .../ruby_ui/breadcrumb/breadcrumb_item.rb | 17 +++ .../ruby_ui/breadcrumb/breadcrumb_link.rb | 22 ++++ .../ruby_ui/breadcrumb/breadcrumb_list.rb | 17 +++ .../ruby_ui/breadcrumb/breadcrumb_page.rb | 19 +++ .../breadcrumb/breadcrumb_separator.rb | 38 ++++++ app/controllers/docs_controller.rb | 4 + app/views/components/shared/menu.rb | 1 + app/views/docs/breadcrumb_view.rb | 116 ++++++++++++++++++ config/routes.rb | 1 + 12 files changed, 293 insertions(+), 2 deletions(-) create mode 100644 app/components/ruby_ui/breadcrumb.rb create mode 100644 app/components/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb create mode 100644 app/components/ruby_ui/breadcrumb/breadcrumb_item.rb create mode 100644 app/components/ruby_ui/breadcrumb/breadcrumb_link.rb create mode 100644 app/components/ruby_ui/breadcrumb/breadcrumb_list.rb create mode 100644 app/components/ruby_ui/breadcrumb/breadcrumb_page.rb create mode 100644 app/components/ruby_ui/breadcrumb/breadcrumb_separator.rb create mode 100644 app/views/docs/breadcrumb_view.rb diff --git a/Gemfile.lock b/Gemfile.lock index 5714514..b64db73 100644 --- a/Gemfile.lock +++ b/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/ diff --git a/app/components/ruby_ui/breadcrumb.rb b/app/components/ruby_ui/breadcrumb.rb new file mode 100644 index 0000000..8348506 --- /dev/null +++ b/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 diff --git a/app/components/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb b/app/components/ruby_ui/breadcrumb/breadcrumb_ellipsis.rb new file mode 100644 index 0000000..67be86c --- /dev/null +++ b/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 diff --git a/app/components/ruby_ui/breadcrumb/breadcrumb_item.rb b/app/components/ruby_ui/breadcrumb/breadcrumb_item.rb new file mode 100644 index 0000000..85bc745 --- /dev/null +++ b/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 diff --git a/app/components/ruby_ui/breadcrumb/breadcrumb_link.rb b/app/components/ruby_ui/breadcrumb/breadcrumb_link.rb new file mode 100644 index 0000000..6794cf5 --- /dev/null +++ b/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 diff --git a/app/components/ruby_ui/breadcrumb/breadcrumb_list.rb b/app/components/ruby_ui/breadcrumb/breadcrumb_list.rb new file mode 100644 index 0000000..e4a89ab --- /dev/null +++ b/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 diff --git a/app/components/ruby_ui/breadcrumb/breadcrumb_page.rb b/app/components/ruby_ui/breadcrumb/breadcrumb_page.rb new file mode 100644 index 0000000..7d17786 --- /dev/null +++ b/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 diff --git a/app/components/ruby_ui/breadcrumb/breadcrumb_separator.rb b/app/components/ruby_ui/breadcrumb/breadcrumb_separator.rb new file mode 100644 index 0000000..329bedc --- /dev/null +++ b/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 diff --git a/app/controllers/docs_controller.rb b/app/controllers/docs_controller.rb index a26452e..5d3ea92 100644 --- a/app/controllers/docs_controller.rb +++ b/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 diff --git a/app/views/components/shared/menu.rb b/app/views/components/shared/menu.rb index 8834421..385a918 100644 --- a/app/views/components/shared/menu.rb +++ b/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}, diff --git a/app/views/docs/breadcrumb_view.rb b/app/views/docs/breadcrumb_view.rb new file mode 100644 index 0000000..82b717a --- /dev/null +++ b/app/views/docs/breadcrumb_view.rb @@ -0,0 +1,116 @@ +# frozen_string_literal: true + +class Docs::BreadcrumbView < ApplicationView + 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", 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 diff --git a/config/routes.rb b/config/routes.rb index 1774ae5..f39d20d 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -20,6 +20,7 @@ get "aspect_ratio", to: "docs#aspect_ratio", as: :docs_aspect_ratio get "avatar", to: "docs#avatar", as: :docs_avatar get "badge", to: "docs#badge", as: :docs_badge + get "breadcrumb", to: "docs#breadcrumb", as: :docs_breadcrumb get "button", to: "docs#button", as: :docs_button get "card", to: "docs#card", as: :docs_card get "calendar", to: "docs#calendar", as: :docs_calendar