Navbar color options

README.md

@@ -20,7 +20,7 @@ Tramway use [Tailwind](https://tailwindcss.com/) by default. All UI helpers impl
 Tramway provides DSL for rendering Tailwind Navgiation bar.
 
 ```ruby
-tramway_navbar title: 'Purple Magic' do |nav|
+tramway_navbar title: 'Purple Magic', background: { color: :red, intensity: 500 } do |nav|
   nav.left do
     nav.item 'Users', '/users'
     nav.item 'Podcasts', '/podcasts'
@@ -34,6 +34,17 @@ end
 
 will render [this](https://play.tailwindcss.com/UZPTCudFw5)
 
+#### tramway_navbar
+
+This helper provides several options. Here is YAML view of `tramway_navbar` options structure
+
+```yaml
+title: String that will be added to the left side of the navbar
+background:
+  color: Css-color. Supports all named CSS colors and HEX colors
+  intensity: Color intensity. Range: **100..950**. Used by Tailwind. Not supported in case of using HEX color in the background.color
+```
+
 #### nav.left and nav.right
 
 Tramway navbar provides `left` and `right` methods that puts items to left and right part of navbar.

app/components/tailwinds/navbar_component.html.haml

@@ -1,4 +1,4 @@
-%nav.bg-red-500.py-4.px-8.flex.justify-between.items-center
+%nav.py-4.px-8.flex.justify-between.items-center{ class: "bg-#{@color}" }
   - if @title.present? || @left_items.present?
     .flex
       - if @title.present?

app/components/tailwinds/navbar_component.rb

@@ -8,6 +8,29 @@ def initialize(**options)
       @title = options[:title]
       @left_items = options[:left_items]
       @right_items = options[:right_items]
+      @color = background(options)
+    end
+
+    private
+
+    CSS_COLORS = %i[aqua black blue fuchsia gray green lime maroon navy olive orange purple red
+                    silver teal white yellow].freeze
+    MIN_INTENSITY = 100
+    MAX_INTENSITY = 950
+
+    def background(options)
+      color = options.dig(:background, :color) || :purple
+      intensity = options.dig(:background, :intensity) || 700
+
+      unless (MIN_INTENSITY..MAX_INTENSITY).cover?(intensity)
+        raise "Navigation Background Color intensity should be between #{MIN_INTENSITY} and #{MAX_INTENSITY}"
+      end
+
+      if color.in? CSS_COLORS
+        "#{color}-#{intensity}"
+      else
+        "[#{color}]"
+      end
     end
   end
 end

spec/components/tailwinds/navbar_component_spec.rb

@@ -3,30 +3,82 @@
 require 'rails_helper'
 
 describe Tailwinds::NavbarComponent, type: :component do
-  it 'renders title' do
-    render_inline(described_class.new(title: 'Purple Magic'))
+  context 'with title checks' do
+    it 'renders title' do
+      render_inline(described_class.new(title: 'Purple Magic'))
 
-    expect(page).to have_text 'Purple Magic'
+      expect(page).to have_text 'Purple Magic'
+    end
   end
 
-  it 'renders left items' do
-    render_inline(described_class.new(left_items: ["<a href='/test'>Test</a>"]))
+  context 'with items checks' do
+    it 'renders left items' do
+      render_inline(described_class.new(left_items: ["<a href='/test'>Test</a>"]))
 
-    expect(page).to have_css 'nav .flex ul.flex.items-center.space-x-4'
-  end
+      expect(page).to have_css 'nav .flex ul.flex.items-center.space-x-4'
+    end
+
+    it 'renders right items' do
+      render_inline(described_class.new(right_items: ["<a href='/test'>Test</a>"]))
+
+      expect(page).to have_css 'nav ul.flex.items-center.space-x-4'
+    end
+
+    it 'renders left and right items' do
+      links = ["<a href='/test'>Test</a>"]
 
-  it 'renders right items' do
-    render_inline(described_class.new(right_items: ["<a href='/test'>Test</a>"]))
+      render_inline(described_class.new(right_items: links, left_items: links))
 
-    expect(page).to have_css 'nav ul.flex.items-center.space-x-4'
+      expect(page).to have_css 'nav .flex ul.flex.items-center.space-x-4'
+      expect(page).to have_css 'nav ul.flex.items-center.space-x-4'
+    end
   end
 
-  it 'renders left and right items' do
-    links = ["<a href='/test'>Test</a>"]
+  context 'with background checks' do
+    it 'renders navbar with default colors' do
+      render_inline(described_class.new)
+
+      expect(page).to have_css 'nav.bg-purple-700'
+    end
+
+    it 'renders navbar with named color and default intensity' do
+      color = Tailwinds::NavbarComponent::CSS_COLORS.sample
+
+      render_inline(described_class.new(background: { color: }))
+
+      expect(page).to have_css "nav.bg-#{color}-700"
+    end
+
+    it 'renders navbar with named color and intensity' do
+      color = Tailwinds::NavbarComponent::CSS_COLORS.sample
+      intensity = rand(Tailwinds::NavbarComponent::MIN_INTENSITY..Tailwinds::NavbarComponent::MAX_INTENSITY)
+
+      render_inline(described_class.new(background: { color:, intensity: }))
+
+      expect(page).to have_css "nav.bg-#{color}-#{intensity}"
+    end
+
+    it 'renders navbar with hex color' do
+      color = "##{SecureRandom.hex(3)}"
+
+      render_inline(described_class.new(background: { color: }))
+
+      # NOTE: we need it because this line returns error, `[` is not expected in selectors
+      # expect(page).to have_css "nav.bg-[#{color}]"
+
+      navbar_class = page.native.children[1].children[0].children[0].attribute_nodes[0].value
+      expect(navbar_class).to include("bg-[#{color}]")
+    end
 
-    render_inline(described_class.new(right_items: links, left_items: links))
+    it 'raises error with not suitable intensity' do
+      color = Tailwinds::NavbarComponent::CSS_COLORS.sample
+      intensity = 951
 
-    expect(page).to have_css 'nav .flex ul.flex.items-center.space-x-4'
-    expect(page).to have_css 'nav ul.flex.items-center.space-x-4'
+      expect do
+        render_inline(described_class.new(background: { color:, intensity: }))
+      end.to raise_error(
+        'Navigation Background Color intensity should be between 100 and 950'
+      )
+    end
   end
 end

spec/helpers/navbar_helper_spec.rb

@@ -23,7 +23,7 @@
       it 'renders navbar with tailwind styles' do
         fragment = view.tramway_navbar
 
-        expect(fragment).to have_css 'nav.bg-red-500.py-4.px-8.flex.justify-between.items-center'
+        expect(fragment).to have_css 'nav.bg-purple-700.py-4.px-8.flex.justify-between.items-center'
       end
 
       it 'renders navbar with title' do