Extract a tab_bar component

app/helpers/tab_bar_helper.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module TabBarHelper
+  def tab_bar_item(item)
+    content_tag(
+      :li,
+      safe_join([li_icon(item), li_content(item)]),
+      class: li_class(item)
+    )
+  end
+
+  private
+
+  def li_content(item)
+    if item[:link]
+      link_to item[:title], item[:link]
+    else
+      item[:title]
+    end
+  end
+
+  def li_class(item)
+    'jam-tab-bar__selected' if item[:selected]
+  end
+
+  def li_icon(item)
+    content_tag(:span, icon_svg.html_safe, class: 'icon') if item[:icon] # rubocop:disable Rails/OutputSafety
+  end
+
+  def icon_svg
+    %(
+    <svg width="0.75em" height="0.75em" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14 8.5H8V14.5H6V8.5H0V6.5H6V0.5H8V6.5H14V8.5Z" fill="#F16B7C"/>
+    </svg>
+    )
+  end
+end

app/views/shared/_tab_bar.html.erb

@@ -0,0 +1,9 @@
+<div class="jam-tab-bar">
+  <ul class="switcher">
+    <% if local_assigns[:items] %>
+      <% items.each do |item| %>
+        <%= tab_bar_item(item) %>
+      <% end %>
+    <% end %>
+  </ul>
+</div>

app/views/users/show.html.erb

@@ -1,22 +1,9 @@
 <%= render('shared/box', title: 'My account') do %>
-  <div class="jam-tab-bar">
-    <ul class="switcher">
-      <li class="jam-tab-bar__selected">Personal</li>
-      <% Current.user.artists.each do |artist| %>
-        <li><%= link_to artist.name, edit_artist_path(artist) %></li>
-      <% end %>
-      <% if policy(Artist).new? %>
-        <li>
-          <span class="icon">
-            <svg width="0.75em" height="0.75em" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-              <path d="M14 8.5H8V14.5H6V8.5H0V6.5H6V0.5H8V6.5H14V8.5Z" fill="#F16B7C"/>
-            </svg>
-          </span>
-          <%= link_to "Add artist", new_artist_path %>
-        </li>
-      <% end %>
-    </ul>
-  </div>
+  <%= render('shared/tab_bar', items: [
+    { title: 'Personal', selected: true },
+    Current.user.artists.map { |artist| { title: artist.name, link: edit_artist_path(artist) } },
+    ( { title: 'Add artist', link: new_artist_path, icon: true } if policy(Artist).new? )
+  ].flatten.compact) %>
 
   <ul>
     <li><%= link_to "Change password", edit_password_path, class: 'link' %></li>

test/components/previews/tab_bar_preview.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class TabBarPreview < Lookbook::Preview
+  def default
+    render('shared/tab_bar', items: [
+             { title: 'First', selected: true },
+             { title: 'Second', link: 'https://example.com' },
+             { title: 'Third', link: 'https://example.com', icon: true }
+           ])
+  end
+end

test/helpers/tab_bar_helper_test.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class TabBarHelperTest < ActionView::TestCase
+  test 'tab_bar_item adds selected class if item is selected' do
+    assert_dom_equal '<li class="jam-tab-bar__selected"></li>', tab_bar_item({ selected: true })
+  end
+
+  test 'tab_bar_item does not add selected class if item is not selected' do
+    assert_dom_equal '<li></li>', tab_bar_item({})
+  end
+
+  test 'tab_bar_item uses provided title' do
+    assert_dom_equal '<li>foo</li>', tab_bar_item({ title: 'foo' })
+  end
+
+  test 'tab_bar_item links to provided title if link provided' do
+    assert_dom_equal(
+      '<li><a href="https://example.com">foo</a></li>',
+      tab_bar_item({ title: 'foo', link: 'https://example.com' })
+    )
+  end
+
+  test 'tab_bar_item can include icon' do
+    expected = %(
+    <li>
+      <span class="icon">
+        <svg width="0.75em" height="0.75em" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M14 8.5H8V14.5H6V8.5H0V6.5H6V0.5H8V6.5H14V8.5Z" fill="#F16B7C"/>
+        </svg>
+      </span>
+      <a href="https://example.com">foo</a>
+    </li>
+    )
+
+    assert_dom_equal(
+      expected,
+      tab_bar_item({ title: 'foo', link: 'https://example.com', icon: true })
+    )
+  end
+end