Extract card component and improve card styling

Gemfile

@@ -36,6 +36,7 @@ gem 'stripe', '~> 10.5'
 gem 'tailwindcss-rails'
 gem 'turbo-rails'
 gem 'tzinfo-data', platforms: %i[mingw mswin x64_mingw jruby]
+gem 'view_component'
 gem 'zaru', '~> 1.0'
 
 group :development, :test do

Gemfile.lock

@@ -201,6 +201,7 @@ GEM
     matrix (0.4.2)
     meta-tags (2.19.0)
       actionpack (>= 3.2.0, < 7.2)
+    method_source (1.1.0)
     mini_magick (4.12.0)
     mini_mime (1.1.5)
     minitest (5.22.2)
@@ -373,6 +374,10 @@ GEM
       concurrent-ruby (~> 1.0)
     unicode-display_width (2.5.0)
     uri (0.13.0)
+    view_component (3.13.0)
+      activesupport (>= 5.2.0, < 8.0)
+      concurrent-ruby (~> 1.0)
+      method_source (~> 1.0)
     webmock (3.23.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
@@ -437,6 +442,7 @@ DEPENDENCIES
   tailwindcss-rails
   turbo-rails
   tzinfo-data
+  view_component
   webmock
   zaru (~> 1.0)
 

app/components/card_component.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+class CardComponent < ViewComponent::Base
+  def initialize(title:, subtitle:, image:)
+    @title = title
+    @subtitle = subtitle
+    @image = image
+
+    super
+  end
+end

app/components/card_component/card_component.html.erb

@@ -0,0 +1,7 @@
+<div class="group">
+  <div class="border border-slate-200 aspect-w-1 aspect-h-1 group-hover:shadow">
+    <%= image_tag @image, class: 'object-cover' %>
+  </div>
+  <p class='font-medium text-slate-600 break-words'><%= @title %></p>
+  <p class='text-slate-600 break-words'><%= @subtitle %></p>
+</div>

app/views/artists/show.html.erb

@@ -27,18 +27,11 @@
 <div class="pt-4 grid grid-cols-3 gap-4">
   <% @albums.in_release_order.each do |album| %>
     <%= link_to(artist_album_path(album.artist, album)) do %>
-    <div>
-      <div class="border border-slate-200 aspect-w-1 aspect-h-1">
-        <% if album.cover.representable? %>
-        <%= image_tag cdn_url(album.cover.representation(resize_to_limit: [1000, 1000])), class: 'object-cover' %>
-        <% end %>
-      </div>
-      <% if album.published? %>
-      <p class='text-sm text-slate-500 break-words'><%= album.title %></p>
-      <% else %>
-      <p class='text-sm text-slate-500 break-words'><%= album.title %> (<%= album.publication_status %>)</p>
-      <% end %>
-    </div>
+      <%= render(CardComponent.new(
+        title: album.title,
+        subtitle: ( album.publication_status if !album.published? ),
+        image: ( cdn_url(album.cover.representation(resize_to_limit: [1000, 1000])) if album.cover.representable? )
+      )) %>
     <% end %>
   <% end %>
 

app/views/collections/show.html.erb

@@ -7,15 +7,11 @@
 <div class="pt-4 grid grid-cols-3 gap-4">
   <% Current.user.collection.each do |purchase| %>
     <%= link_to(artist_album_path(purchase.album.artist, purchase.album)) do %>
-    <div>
-      <div class="border border-slate-200 aspect-w-1 aspect-h-1">
-        <% if purchase.album.cover.representable? %>
-        <%= image_tag cdn_url(purchase.album.cover.representation(resize_to_limit: [1000, 1000])), class: 'object-cover' %>
-        <% end %>
-      </div>
-      <p class='text-sm text-slate-500 break-words'><%= purchase.album.title %></p>
-      <p class='text-sm text-slate-400 break-words'><%= purchase.album.artist.name %></p>
-    </div>
+      <%= render(CardComponent.new(
+        title: purchase.album.title,
+        subtitle: purchase.album.artist.name,
+        image: ( cdn_url(purchase.album.cover.representation(resize_to_limit: [1000, 1000])) if purchase.album.cover.representable? )
+      )) %>
     <% end %>
   <% end %>
 </div>

app/views/interests/new.html.erb

@@ -14,17 +14,13 @@
   <h2 class="text-slate-400 mb-3 uppercase">Recently purchased</h2>
   <div class="grid grid-cols-4 gap-4 mb-3">
     <% Album.best_selling.limit(8).each do |album| %>
-    <%= link_to(artist_album_path(album.artist, album)) do %>
-    <div>
-      <div class="border border-slate-200 aspect-w-1 aspect-h-1">
-        <% if album.cover.representable? %>
-        <%= image_tag cdn_url(album.cover.representation(resize_to_limit: [1000, 1000])), class: 'object-cover' %>
-        <% end %>
-      </div>
-      <p class='text-sm text-slate-500 break-words'><%= album.title %></p>
-      <p class='text-sm text-slate-400 break-words'><%= album.artist.name %></p>
-    </div>
-    <% end %>
+      <%= link_to(artist_album_path(album.artist, album)) do %>
+        <%= render(CardComponent.new(
+          title: album.title,
+          subtitle: album.artist.name,
+          image: ( cdn_url(album.cover.representation(resize_to_limit: [1000, 1000])) if album.cover.representable? )
+        )) %>
+      <% end %>
     <% end %>
   </div>
   <div class="flex justify-end">

config/tailwind.config.js

@@ -6,6 +6,8 @@ module.exports = {
     './app/helpers/**/*.rb',
     './app/javascript/**/*.js',
     './app/views/**/*.{erb,haml,html,slim}',
+    './app/components/**/*.{erb,haml,html,slim}',
+    './test/components/previews/**/*.{erb,haml,html,slim}',
     './app/form_builders/*.rb',
     './lib/renderers/*.rb'
   ],

test/components/card_component_test.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require 'test_helper'
+
+class CardComponentTest < ViewComponent::TestCase
+  def setup
+    render_inline(
+      CardComponent.new(
+        title: 'Title',
+        subtitle: 'Subtitle',
+        image: 'http://example.com'
+      )
+    )
+  end
+
+  def test_component_renders_title
+    assert_text('Title')
+  end
+
+  def test_component_renders_subtitle
+    assert_text('Subtitle')
+  end
+
+  def test_component_renders_image
+    assert_selector("img[src='http://example.com']")
+  end
+end

test/components/previews/card_component_preview.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class CardComponentPreview < ViewComponent::Preview
+  def default; end
+end

test/components/previews/card_component_preview/default.html.erb

@@ -0,0 +1,10 @@
+<div class="w-1/4">
+  <%= render(
+    CardComponent.new(
+      title: 'Fables of the Reconstuction',
+      subtitle: 'R.E.M.',
+      image: 'https://upload.wikimedia.org/wikipedia/en/d/dc/R.E.M._-_Fables_of_the_Reconstruction.jpg'
+    )
+  )
+  %>
+</div>

test/controllers/artists_controller_test.rb

@@ -57,15 +57,15 @@ class ArtistsControllerTestSignedIn < ActionDispatch::IntegrationTest
 
     get artist_url(@artist)
 
-    assert_select 'p', 'Album Title (unpublished)'
+    assert_select 'p', 'unpublished'
   end
 
   test '#show should include pending albums' do
     @artist.albums << create(:pending_album, title: 'Album Title')
 
     get artist_url(@artist)
 
-    assert_select 'p', 'Album Title (pending)'
+    assert_select 'p', 'pending'
   end
 
   test '#new' do
@@ -130,15 +130,15 @@ class ArtistsControllerTestSignedInArtist < ActionDispatch::IntegrationTest
 
     get artist_url(@artist)
 
-    assert_select 'p', 'Album Title (unpublished)'
+    assert_select 'p', 'unpublished'
   end
 
   test '#show should include pending albums' do
     @artist.albums << create(:pending_album, title: 'Album Title')
 
     get artist_url(@artist)
 
-    assert_select 'p', 'Album Title (pending)'
+    assert_select 'p', 'pending'
   end
 end
 
@@ -202,15 +202,15 @@ class ArtistsControllerTestSignedOut < ActionDispatch::IntegrationTest
 
     get artist_url(@artist)
 
-    assert_select 'p', { text: 'Album Title (unpublished)', count: 0 }
+    assert_select 'p', { text: 'unpublished', count: 0 }
   end
 
   test '#show should not include pending albums' do
     @artist.albums << create(:pending_album, title: 'Album Title')
 
     get artist_url(@artist)
 
-    assert_select 'p', { text: 'Album Title (pending)', count: 0 }
+    assert_select 'p', { text: 'pending', count: 0 }
   end
 
   test '#show includes auto-discovery link for atom feed' do

test/system/creating_an_album_test.rb

@@ -24,8 +24,9 @@ class CreatingAnAlbumTest < ApplicationSystemTestCase
 
     click_on 'Save'
 
-    assert_text "A Hard Day's Night (unpublished)"
-    click_on "A Hard Day's Night (unpublished)"
+    assert_text "A Hard Day's Night"
+    assert_text 'unpublished'
+    click_on "A Hard Day's Night"
     assert_text '1. And I Love Her'
   end
 

test/system/publishing_an_album_test.rb

@@ -13,7 +13,7 @@ class PublishingAnAlbumTest < ApplicationSystemTestCase
   test 'publishing an album' do
     # Artist requests publication
     visit artist_url(@album.artist)
-    click_on "#{@album.title} (unpublished)"
+    click_on @album.title.to_s
     click_on 'Publish'
     assert_text "Thank you! We'll email you when your album is published."
     sign_out