diff --git a/CHANGELOG.md b/CHANGELOG.md index 44800ff..066a598 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ This project adheres to [Semantic Versioning](http://semver.org/). ### Added -* +* Flowbite::Link component to render links. ### Changed diff --git a/README.md b/README.md index c2b2c39..81b39e3 100644 --- a/README.md +++ b/README.md @@ -217,6 +217,8 @@ renders - **Outline Button**: `Flowbite::Button::Outline` - **Pill Button**: `Flowbite::Button::Pill` +#### Navigation +- **Link**: `Flowbite::Link` (default link styling) ## Development diff --git a/app/components/flowbite/link.rb b/app/components/flowbite/link.rb new file mode 100644 index 0000000..cb0688a --- /dev/null +++ b/app/components/flowbite/link.rb @@ -0,0 +1,34 @@ +# frozen_string_literal: true + +module Flowbite + # The link component can be used to set hyperlinks from one page to another or + # to an external website when clicking on an inline text item, button, or card + # + # Use this component to add default styles to an inline link element. + class Link < ViewComponent::Base + attr_reader :href, :options + + class << self + def classes + ["font-medium", "text-blue-600", "dark:text-blue-500", "hover:underline"].join(" ") + end + end + + # Initialize the Link component. + # + # @param href What to link to. This can be a String or anything else that + # `link_to` supports. See `ActionView::Helpers::UrlHelper#link_to` for more + # details. + # + # @param options [Hash] Additional HTML options for the link element + def initialize(href:, **options) + super() + @href = href + @options = options + end + + def call + link_to(content, href, {class: self.class.classes}.merge(options)) + end + end +end diff --git a/demo/test/components/previews/link_preview.rb b/demo/test/components/previews/link_preview.rb new file mode 100644 index 0000000..870e1f6 --- /dev/null +++ b/demo/test/components/previews/link_preview.rb @@ -0,0 +1,8 @@ +# frozen_string_literal: true + +class LinkPreview < Lookbook::Preview + # Use this example to set default styles to an inline link element. + def default + render(Flowbite::Link.new(href: "https://www.uchiadmin.com")) { "Use this example to set default styles to an inline link element." } + end +end diff --git a/test/components/flowbite/link_test.rb b/test/components/flowbite/link_test.rb new file mode 100644 index 0000000..926e9bb --- /dev/null +++ b/test/components/flowbite/link_test.rb @@ -0,0 +1,24 @@ +require "test_helper" + +class Flowbite::LinkTest < Minitest::Test + include ViewComponent::TestHelpers + + def test_renders_a_clickable_link + render_inline(Flowbite::Link.new(href: "https://www.uchiadmin.com")) { "Rails Admin Panel" } + + assert_selector("a[href='https://www.uchiadmin.com']", text: "Rails Admin Panel") + end + + def test_adds_options_as_attributes + render_inline( + Flowbite::Link.new( + href: "https://www.uchiadmin.com", + data: { + turbo: true + } + ) + ) { "Click me" } + + assert_selector("a[data-turbo='true']", text: "Click me") + end +end