Chore: Remove view component data attribute helper (#4186)

Because:
* We can simplify and use Rails 7's [`tag.attributes`
helper](https://blog.saeloun.com/2021/05/05/rails-7-transform-hash-into-html-for-erb-interpolation/)
instead

This commit:
* Removes `html_data_attributes_for` view component helper method.
* Removes data attributes parameter from card components - it wasn't
used anywhere.
* Adds a couple of spec for testing cards with ids and custom classes

app/components/application_component.rb

@@ -1,12 +1,4 @@
 class ApplicationComponent < ViewComponent::Base
   include Classy::Yaml::ComponentHelpers
   include Turbo::FramesHelper
-
-  private
-
-  def html_data_attributes_for(data)
-    data.map do |key, value|
-      "data-#{key.to_s.dasherize}=#{value.to_s.dasherize}"
-    end.join(' ')
-  end
 end

app/components/card_component.html.erb

@@ -1,4 +1,4 @@
-<div id='<%= id %>' class="bg-white shadow rounded-lg dark:bg-gray-800 dark:ring-1 dark:ring-white/10 dark:ring-inset <%= classes %>" <%= html_data_attributes_for(data_attributes) %>>
+<div id='<%= id %>' class="bg-white shadow rounded-lg dark:bg-gray-800 dark:ring-1 dark:ring-white/10 dark:ring-inset <%= classes %>">
   <%= header %>
   <%= body %>
   <%= footer %>

app/components/card_component.rb

@@ -3,13 +3,12 @@ class CardComponent < ApplicationComponent
   renders_one :body, Card::BodyComponent
   renders_one :footer, Card::FooterComponent
 
-  def initialize(classes: '', id: '', data_attributes: {})
+  def initialize(classes: '', id: '')
     @classes = classes
     @id = id
-    @data_attributes = data_attributes
   end
 
   private
 
-  attr_reader :classes, :id, :data_attributes
+  attr_reader :classes, :id
 end

app/components/content_container_component.html.erb

@@ -1,8 +1,9 @@
  <div class='max-w-prose mx-auto <%= classes %>'>
 
-   <div class="lesson-content prose prose-gray prose-a:text-blue-800 visited:prose-a:text-purple-800 prose-code:bg-gray-100 prose-code:p-1 prose-code:font-normal dark:prose-a:text-blue-300 dark:visited:prose-a:text-purple-300 dark:prose-code:bg-gray-700/40 prose-code:rounded-md break-words line-numbers dark:prose-invert dark:antialiased prose-pre:rounded-xl prose-pre:bg-slate-800 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/70 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 " data-controller="syntax-highlighting diagramming" <%= html_data_attributes_for(data_attributes) %>>
+   <div class="lesson-content prose prose-gray prose-a:text-blue-800 visited:prose-a:text-purple-800 prose-code:bg-gray-100 prose-code:p-1 prose-code:font-normal dark:prose-a:text-blue-300 dark:visited:prose-a:text-purple-300 dark:prose-code:bg-gray-700/40 prose-code:rounded-md break-words line-numbers dark:prose-invert dark:antialiased prose-pre:rounded-xl prose-pre:bg-slate-800 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/70 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10 " data-controller="syntax-highlighting diagramming" <%= tag.attributes(data: data_attributes) %>>
     <%= content %>
    </div>
+
    <% if footer? %>
     <div class="pt-10 flex items-center ">
       <%= footer %>

spec/components/card_component_spec.rb

@@ -1,13 +1,19 @@
 require 'rails_helper'
 
 RSpec.describe CardComponent, type: :component do
-  let(:data_attributes) { { controller: 'navbar', navbar_target: 'menu_state' } }
+  it 'renders the card with custom classes' do
+    component = described_class.new(classes: 'a-class')
 
-  it 'renders a div with the data attributes parsed to be html valid' do
-    component = described_class.new(data_attributes:)
+    render_inline(component)
+
+    expect(page).to have_css('div.a-class')
+  end
+
+  it 'renders the card with an id' do
+    component = described_class.new(id: 'an-id')
 
     render_inline(component)
 
-    expect(page).to have_css("div[data-controller='navbar'][data-navbar-target='menu-state']")
+    expect(page).to have_css('div#an-id')
   end
 end